56 lines
961 B
SCSS
56 lines
961 B
SCSS
@use "nav_header";
|
|
@use "nav_menu";
|
|
@use "nav_location";
|
|
@use "nav_quick_links";
|
|
|
|
nav.pane {
|
|
grid-area: nav;
|
|
|
|
--padding-mobile: 0.35rem;
|
|
|
|
height: min-content;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
position: sticky;
|
|
top: var(--spacing-large);
|
|
left: var(--spacing-large);
|
|
|
|
color: var(--accent-pink);
|
|
|
|
input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
nav.pane {
|
|
background-color: var(--background-2);
|
|
border-radius: var(--border-radius-leaf);
|
|
padding: 0 var(--spacing-small);
|
|
|
|
.menu,
|
|
.quick_links,
|
|
.location {
|
|
display: none;
|
|
}
|
|
|
|
> * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
nav.pane > input:checked + label {
|
|
color: var(--highlight-hover);
|
|
|
|
+ .menu {
|
|
display: grid;
|
|
|
|
+ .location + .quick_links {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|