94 lines
2.5 KiB
CSS
94 lines
2.5 KiB
CSS
@media (scripting: enabled) {
|
|
.mainnav {
|
|
--nav-position: absolute;
|
|
inset-inline-end: 0;
|
|
}
|
|
|
|
.mainnav:has([aria-expanded='true']) {
|
|
--nav-position: fixed;
|
|
inset-inline-end: var(--gap);
|
|
}
|
|
|
|
.mainnav ul {
|
|
--gutter: var(--space-xs);
|
|
--cluster-vertical-alignment: normal;
|
|
--list-block-padding: var(--space-2xl);
|
|
--list-inline-padding: var(--space-s);
|
|
z-index: 1;
|
|
background: var(--list-background, var(--color-bg));
|
|
box-shadow: var(--list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
|
|
flex-direction: var(--list-layout, column);
|
|
block-size: var(--list-height, 100vh);
|
|
position: var(--list-position, fixed);
|
|
inset-block-start: 0;
|
|
inset-inline-end: 0;
|
|
inline-size: var(--list-width, min(18rem, 100vw));
|
|
visibility: var(--list-visibility, visible);
|
|
}
|
|
|
|
.mainnav :where([aria-expanded='false']) + ul {
|
|
transform: var(--list-transform, translateX(100%));
|
|
--list-visibility: hidden;
|
|
}
|
|
|
|
/* animates ul only when opening to avoid flash on page load, svg always */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.mainnav [aria-expanded='true'] + ul,
|
|
.mainnav svg {
|
|
transition:
|
|
transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
|
|
visibility 0.05s linear;
|
|
}
|
|
}
|
|
|
|
.mainnav [aria-expanded='true'] + ul {
|
|
padding-top: var(--space-2xl);
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.mainnav button {
|
|
display: var(--nav-button-display, flex);
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: var(--space-2xs) 0;
|
|
}
|
|
|
|
.mainnav span {
|
|
font-weight: var(--font-extra-bold);
|
|
text-transform: uppercase;
|
|
padding-inline-end: 0.1em;
|
|
font-size: var(--size-step-min-1);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.mainnav svg {
|
|
inline-size: auto;
|
|
color: var(--color-text);
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.mainnav [aria-expanded='true'] svg {
|
|
transform: var(--list-rotate, rotate(45deg));
|
|
}
|
|
|
|
.mainnav a {
|
|
--item-border-color: transparent;
|
|
--item-padding: var(--space-m) var(--space-xs);
|
|
--item-background-color: transparent;
|
|
}
|
|
|
|
.mainnav a:where(:hover, :focus) {
|
|
--item-background-color: var(--color-bg-accent);
|
|
--item-text-color: var(--color-text);
|
|
--item-border-color: transparent;
|
|
}
|
|
|
|
.mainnav [aria-current='page'],
|
|
.mainnav [data-state='active'] {
|
|
--item-border-color: transparent;
|
|
--item-background-color: var(--color-primary);
|
|
--item-text-color: var(--color-light);
|
|
}
|
|
}
|