diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-10 18:17:40 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-11 02:24:44 +0100 |
| commit | 6315efacd6212a347877102a68f430fffa4ca4ac (patch) | |
| tree | b067fb4a1855f881b15e4e11ee161dda778150f9 /src/components/ToC/ToC.module.scss | |
| parent | cd1078e3a6ddb1b1598723beec4905c123ee85a6 (diff) | |
refactor(sidebar): use a component to avoid styles repetition
I also fix some overflow/sticky issues.
I have to set overflow auto only when there is no button-like
links otherwise, with translate, the button is cropped on hover.
Diffstat (limited to 'src/components/ToC/ToC.module.scss')
| -rw-r--r-- | src/components/ToC/ToC.module.scss | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss index 27e79ad..0f08b87 100644 --- a/src/components/ToC/ToC.module.scss +++ b/src/components/ToC/ToC.module.scss @@ -1,9 +1,25 @@ +@use "@styles/abstracts/mixins" as mix; + .wrapper { - max-height: 100vh; padding-bottom: var(--spacing-sm); - position: sticky; - top: 0; - overflow-y: auto; + + @include mix.media("screen") { + @include mix.dimensions("lg") { + max-height: 100vh; + position: sticky; + top: 0; + overflow: auto; + visibility: hidden; + + > * { + visibility: visible; + } + + &:hover { + visibility: visible; + } + } + } } .list { |