SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: 🐛 prevent styles from bleeding into other components

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-12 06:13:17 +02:00
parent 8d95b82b89
commit a9330d1570
1 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/navigation.webc
View file

@ -1,4 +1,4 @@
<nav :aria-label="label"> <nav class="character-nav" :aria-label="label">
<label for="nav-toggle"> <label for="nav-toggle">
<icon icon="bars" webc:nokeep></icon> <icon icon="bars" webc:nokeep></icon>
</label> </label>
@ -22,7 +22,7 @@
</nav> </nav>
<style> <style>
nav { .character-nav {
--nav-spacing: 1em; --nav-spacing: 1em;
--nav-background-color: var(--clr-nav-background); --nav-background-color: var(--clr-nav-background);
--nav-border: var(--border-thin) solid var(--clr-box-border); --nav-border: var(--border-thin) solid var(--clr-box-border);
@ -49,17 +49,17 @@
--nav-spacing: 2em; --nav-spacing: 2em;
} }
&:has(input:checked) { &:has(#nav-toggle:checked) {
& ul { & .list {
opacity: 1; opacity: 1;
} }
& li { & .item {
height: 100%; height: 100%;
} }
} }
& label { & label[for='nav-toggle'] {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
margin-block: 0.75em; margin-block: 0.75em;
@ -74,11 +74,11 @@
} }
} }
& input { & #nav-toggle {
display: none; display: none;
} }
& ul { & .list {
--nav-items-position: absolute; --nav-items-position: absolute;
--nav-items-orientation: column nowrap; --nav-items-orientation: column nowrap;
@ -113,12 +113,12 @@
} }
} }
& li { & .item {
overflow: hidden; overflow: hidden;
height: 0; height: 0;
transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out;
@media (min-width:35em) { @media (min-width: 35em) {
height: 100%; height: 100%;
} }
} }