wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: transfrom without drawer

Browse source
This commit is contained in:
madrilene 2024-09-19 10:57:09 +02:00
parent efd6176498
commit 78d1b07e31
1 changed files with 4 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/assets/css/global/blocks/main-nav.css
View file

@ -44,12 +44,14 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.mainnav ul { .mainnav ul {
--nav-list-transform: translateX(100%);
opacity: 1; opacity: 1;
transform: var(--nav-list-transform, translateX(100%)); transform: var(--nav-list-transform);
transition: transition:
transform 0.5s var(--nav-list-timing-function), transform 0.5s var(--nav-list-timing-function),
visibility 0.3s linear; visibility 0.3s linear;
} }
.mainnav svg { .mainnav svg {
transition: transform 0.4s var(--nav-list-timing-function); transition: transform 0.4s var(--nav-list-timing-function);
} }
@ -141,10 +143,6 @@
--nav-item-text-color: var(--color-primary); --nav-item-text-color: var(--color-primary);
--nav-item-decoration-color: var(--color-primary); --nav-item-decoration-color: var(--color-primary);
} }
.mainnav [aria-expanded='false'] + ul {
--list-transform: none;
}
} }
/* Repeat the settings to provide a different styling when JavaScript is disabled or drawerNav is set to false. The selector /* Repeat the settings to provide a different styling when JavaScript is disabled or drawerNav is set to false. The selector
@ -158,6 +156,7 @@ assumes that the button doesn’t exist without JS, making the list the first ch
--nav-list-width: 100%; --nav-list-width: 100%;
--nav-list-shadow: none; --nav-list-shadow: none;
--nav-list-visibility: visible; --nav-list-visibility: visible;
--nav-list-transform: translateX(0);
} }
.mainnav ul:first-child [aria-current='page'], .mainnav ul:first-child [aria-current='page'],
@ -168,7 +167,6 @@ assumes that the button doesn’t exist without JS, making the list the first ch
} }
/* make menu wrap without drawer */ /* make menu wrap without drawer */
.mainnav:has(ul:first-child) { .mainnav:has(ul:first-child) {
--nav-position: relative; --nav-position: relative;
} }