65 lines
1.2 KiB
SCSS
65 lines
1.2 KiB
SCSS
@use "nav_header";
|
|
@use "nav_menu";
|
|
@use "nav_location";
|
|
@use "nav_quick_links";
|
|
|
|
.pane_nav {
|
|
--padding-mobile: 0.35rem;
|
|
|
|
margin: var(--spacing-large);
|
|
|
|
width: min-content;
|
|
height: min-content;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-medium);
|
|
|
|
position: sticky;
|
|
top: var(--spacing-large);
|
|
left: var(--spacing-large);
|
|
|
|
color: var(--accent-pink);
|
|
|
|
input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
.pane_nav {
|
|
width: calc(
|
|
calc(50% - var(--spacing-large) + var(--spacing-small)) *
|
|
2
|
|
);
|
|
|
|
background-color: var(--background-2);
|
|
border-radius: var(--border-radius-leaf);
|
|
padding: 0 var(--spacing-small);
|
|
|
|
.nav_menu,
|
|
.quick_links,
|
|
.location {
|
|
display: none;
|
|
}
|
|
|
|
> * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.pane_nav > #toggle:checked {
|
|
+ .header {
|
|
color: var(--highlight-hover);
|
|
|
|
+ .nav_menu {
|
|
display: grid;
|
|
|
|
+ .location + .quick_links {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|