hugo-theme-paradox/assets/styles/components/nav-docs.scss
2022-12-23 05:21:41 -06:00

92 lines
1.5 KiB
SCSS

/* navigation menu toggle */
.toggle-menu {
display: none;
}
.toggle-menu:not(:checked) ~ .menu {
display: none;
}
.toggle-menu__label {
display: flex;
align-items: center;
font-weight: 900;
gap: 0.25rem;
text-transform: uppercase;
}
.toggle-menu__label {
margin-block-end: 2em
}
/* navigation menu */
.docs-nav {
padding-block: 1em;
#search-form {
margin-block-end: 2em;
}
.menu {
margin-block-start: 1em;
> li {
margin-block-end: 2em;
font-weight: 700;
}
> details summary {
margin-block-end: 1em;
}
display: flex;
flex-flow: column;
}
details {
display: flex;
margin-block-end: 1em;
&[open] {margin-block-end: 2em;}
}
summary {
font-weight: 700;
cursor: pointer;
}
.sub-menu {
margin-inline-start: 1em;
display: flex;
flex-flow: column;
gap: 0.5rem;
li {
line-height: 1.5;
}
.sub-menu {
margin-block-start: 0.5rem;
margin-inline-start: 2em;
}
li::marker {
content: '';
}
.sub-menu li::marker {
content: '';
}
li.active::marker {
content: '';
}
}
.active > a {
font-weight: 700;
text-decoration: none;
color: var(--ui-text-bold);
transition:
color var(--color-crossfade-duration) var(--color-crossfade-ease);
}
}
/* top of menu link should show only when focused */
#menu {margin-block-end: 1em;}
#menu:not(:focus) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
block-size: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
inline-size: 1px;
}