LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-09 04:22:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix hint stacking/margin with container

Browse Source
This commit is contained in:
James Fenn
2023-06-24 19:03:15 -04:00
parent 7ad14469cc
commit 0af913faef
2 changed files with 77 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/styles/hints.scss
View File

@@ -1,4 +1,6 @@
:root { :root {
--hint-margin: var(--spc-4x);
// Padding and gap must be consistent to maintain visual balance // Padding and gap must be consistent to maintain visual balance
--hint-container_padding: var(--spc-1x); --hint-container_padding: var(--spc-1x);
--hint-container_gap: var(--hint-container-padding); --hint-container_gap: var(--hint-container-padding);
@@ -37,80 +39,82 @@
} }
.hint { .hint {
display: inline-block; margin: var(--hint-margin) 0;
overflow: hidden;
margin: var(--hint-container_padding) 0;
border-radius: var(--hint-container_corner-radius_collapsed); &> .hint__container {
&[open] { display: inline-block;
display: block; overflow: hidden;
border-radius: var(--hint-container_corner-radius_expanded);
}
&[open] > .hint__title > svg { border-radius: var(--hint-container_corner-radius_collapsed);
transform: rotateZ(180deg); &[open] {
} border-radius: var(--hint-container_corner-radius_expanded);
&> .hint__title {
&::marker {
content: '';
} }
display: flex; &[open] > .hint__title > svg {
align-items: center; transform: rotateZ(180deg);
gap: var(--hint-header_gap);
color: var(--hint-container_foreground-color);
margin: var(--hint-container_padding);
padding-top: var(--hint-header_padding-vertical);
padding-bottom: var(--hint-header_padding-vertical);
padding-left: var(--hint-header_padding-start);
padding-right: var(--hint-header_padding-end);
outline: none !important;
}
&> .hint__content {
margin: var(--hint-container_padding);
background-color: var(--hint-content_background-color);
border-radius: var(--hint-content_corner-radius);
padding: var(--hint-content_padding);
&> *:first-child {
margin-top: 0;
padding-top: 0;
} }
&> *:last-child { &> .hint__title {
margin-bottom: 0; &::marker {
padding-bottom: 0; content: '';
}
display: flex;
align-items: center;
gap: var(--hint-header_gap);
color: var(--hint-container_foreground-color);
margin: var(--hint-container_padding);
padding-top: var(--hint-header_padding-vertical);
padding-bottom: var(--hint-header_padding-vertical);
padding-left: var(--hint-header_padding-start);
padding-right: var(--hint-header_padding-end);
outline: none !important;
} }
}
background-color: var(--hint-container_background-color); &> .hint__content {
margin: var(--hint-container_padding);
background-color: var(--hint-content_background-color);
border-radius: var(--hint-content_corner-radius);
padding: var(--hint-content_padding);
&:hover { &> *:first-child {
background-color: var(--hint-container_background-color_hovered); margin-top: 0;
} padding-top: 0;
}
&:active { &> *:last-child {
background-color: var(--hint-container_background-color_pressed); margin-bottom: 0;
} padding-bottom: 0;
}
@supports selector(:has(*)) {
&:has(.hint__title:focus-visible) {
background-color: var(--hint-container_background-color_focused);
outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color);
} }
}
// for Firefox (and some older browsers) :has is not supported, so :focus-within is the only way background-color: var(--hint-container_background-color);
// to get the focus state on the parent
// - this will incorrectly show the focus state during/after click events even if focus indication is not necessary &:hover {
@supports not selector(:has(*)) { background-color: var(--hint-container_background-color_hovered);
&:focus-within { }
background-color: var(--hint-container_background-color_focused);
outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color); &:active {
background-color: var(--hint-container_background-color_pressed);
}
@supports selector(:has(*)) {
&:has(.hint__title:focus-visible) {
background-color: var(--hint-container_background-color_focused);
outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color);
}
}
// for Firefox (and some older browsers) :has is not supported, so :focus-within is the only way
// to get the focus state on the parent
// - this will incorrectly show the focus state during/after click events even if focus indication is not necessary
@supports not selector(:has(*)) {
&:focus-within {
background-color: var(--hint-container_background-color_focused);
outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color);
}
} }
} }
} }

20
src/utils/markdown/hints/hints.tsx
View File

@@ -13,15 +13,17 @@ interface HintProps {
/** @jsxImportSource hastscript */ /** @jsxImportSource hastscript */
export function Hint({ title, children }: HintProps): Element { export function Hint({ title, children }: HintProps): Element {
return ( return (
<details class="hint"> <div class="hint">
<summary class="hint__title text-style-body-medium-bold"> <details class="hint__container">
{fromHtml(chevron_down)} <summary class="hint__title text-style-body-medium-bold">
{title} {fromHtml(chevron_down)}
</summary> {title}
</summary>
<div class="hint__content"> <div class="hint__content">
{children} {children}
</div> </div>
</details> </details>
</div>
) as never; ) as never;
} }