LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-09 12:57:45 +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

8
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,13 +39,14 @@
} }
.hint { .hint {
margin: var(--hint-margin) 0;
&> .hint__container {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
margin: var(--hint-container_padding) 0;
border-radius: var(--hint-container_corner-radius_collapsed); border-radius: var(--hint-container_corner-radius_collapsed);
&[open] { &[open] {
display: block;
border-radius: var(--hint-container_corner-radius_expanded); border-radius: var(--hint-container_corner-radius_expanded);
} }
@@ -113,4 +116,5 @@
outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color); outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color);
} }
} }
}
} }

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

@@ -13,7 +13,8 @@ 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">
<details class="hint__container">
<summary class="hint__title text-style-body-medium-bold"> <summary class="hint__title text-style-body-medium-bold">
{fromHtml(chevron_down)} {fromHtml(chevron_down)}
{title} {title}
@@ -23,5 +24,6 @@ export function Hint({ title, children }: HintProps): Element {
{children} {children}
</div> </div>
</details> </details>
</div>
) as never; ) as never;
} }