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

set opacity values

Browse source
This commit is contained in:
madrilene 2025-03-22 09:49:24 +01:00
parent 3315ce2ec9
commit 9f49096c45
1 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,6 +21,7 @@
--nav-list-position: fixed; --nav-list-position: fixed;
--nav-list-width: min(18rem, 100vw); --nav-list-width: min(18rem, 100vw);
--nav-list-visibility: hidden; --nav-list-visibility: hidden;
--nav-list-opacity: 0;
background: var(--nav-list-background); background: var(--nav-list-background);
box-shadow: var(--nav-list-shadow); box-shadow: var(--nav-list-shadow);
@ -35,7 +36,7 @@
inset-block-start: 0; inset-block-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
inline-size: var(--nav-list-width); inline-size: var(--nav-list-width);
opacity: 0; opacity: var(--nav-list-opacity);
transition: transition:
opacity 0.3 var(--nav-list-timing-function), opacity 0.3 var(--nav-list-timing-function),
visibility 0.3s ease-in-out; visibility 0.3s ease-in-out;
@ -49,7 +50,7 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.mainnav ul { .mainnav ul {
--nav-list-transform: translateX(100%); --nav-list-transform: translateX(100%);
opacity: 1; --nav-list-opacity: 1;
transform: var(--nav-list-transform); transform: var(--nav-list-transform);
transition: transition:
transform 0.5s var(--nav-list-timing-function), transform 0.5s var(--nav-list-timing-function),
@ -64,7 +65,7 @@
.mainnav [aria-expanded='true'] + ul { .mainnav [aria-expanded='true'] + ul {
--nav-list-visibility: visible; --nav-list-visibility: visible;
--nav-list-transform: translateX(0); --nav-list-transform: translateX(0);
opacity: 1; --nav-list-opacity: 1;
} }
.mainnav button { .mainnav button {
@ -140,6 +141,7 @@
--nav-list-shadow: none; --nav-list-shadow: none;
--nav-list-visibility: visible; --nav-list-visibility: visible;
--nav-list-transform: translateX(0); --nav-list-transform: translateX(0);
--nav-list-opacity: 1;
} }
.mainnav [aria-current='page'], .mainnav [aria-current='page'],
@ -162,6 +164,7 @@ assumes that the button doesn’t exist without JS, making the list the first ch
--nav-list-shadow: none; --nav-list-shadow: none;
--nav-list-visibility: visible; --nav-list-visibility: visible;
--nav-list-transform: translateX(0); --nav-list-transform: translateX(0);
--nav-list-opacity: 1;
margin-block-end: var(--space-2xs); margin-block-end: var(--space-2xs);
} }