157 lines
3.0 KiB
SCSS
157 lines
3.0 KiB
SCSS
.site-nav {
|
|
@media($max-mobile-viewport) {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
.gru-nav-wrapper {
|
|
margin-top: 0;
|
|
}
|
|
|
|
div.gru-nav .gru-nav-button {
|
|
position: absolute;
|
|
|
|
top: calc(#{$header-mobile-padding-v} + (#{$header-logo-height} - #{$nav-menu-side}) / 2);
|
|
right: $space-small;
|
|
|
|
&.toggled + ul {
|
|
height: 100vh;
|
|
// add the maximum header-height as bottom padding, to allow scrolling to the bottom of the menu
|
|
padding-bottom: 200px;
|
|
overflow: scroll;
|
|
}
|
|
}
|
|
|
|
.site-nav {
|
|
flex-grow: 1;
|
|
margin-right: $space-medium;
|
|
|
|
@media($max-mobile-viewport) {
|
|
// navigation makes bottom padding of header, so it opens right
|
|
// beneath
|
|
margin-top: $header-mobile-padding-v;
|
|
height: 0;
|
|
// cancell header horizontal padding for the menu to screen width
|
|
margin-right: -$header-mobile-padding-h;
|
|
margin-left: -$header-mobile-padding-h;
|
|
}
|
|
|
|
.menu, .submenu {
|
|
margin: 0;
|
|
|
|
&--link {
|
|
display: flex;
|
|
border: $border-width-1 solid transparent;
|
|
padding: $space-small $space-medium;
|
|
|
|
@media($min-desktop-viewport) {
|
|
padding: $space-small $space-large;
|
|
}
|
|
|
|
&:focus-visible, &:focus-within {
|
|
border-color: $yellow-4;
|
|
outline: none;
|
|
}
|
|
|
|
&:hover {
|
|
background: $yellow-4;
|
|
border-color: $yellow-4;
|
|
color: $gray-9;
|
|
}
|
|
}
|
|
|
|
&--label {
|
|
flex-grow: 1;
|
|
font-weight: $font-weight-6;
|
|
}
|
|
}
|
|
|
|
|
|
.menu {
|
|
@media($max-mobile-viewport) {
|
|
padding: 0 $space-medium;
|
|
}
|
|
|
|
@media($min-desktop-viewport) {
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
|
|
&--item {
|
|
@media($max-mobile-viewport) {
|
|
&:not(:first-child) {
|
|
border-top: $border-width-0 solid $gray-5;
|
|
}
|
|
}
|
|
|
|
@media($min-desktop-viewport) {
|
|
// Menu items create the bottom padding for the header here, so
|
|
// they reach the bottom of the header and stay hovered when
|
|
// moving the mouse to the submenu.
|
|
min-height: calc(#{$header-logo-height} + #{$header-desktop-padding-v});
|
|
padding-bottom: $header-desktop-padding-v;
|
|
|
|
// border-bottom when mouse in in submenu
|
|
&:hover .menu--link {
|
|
border-bottom-color: $yellow-4;
|
|
|
|
&:not(:hover) {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
&:focus, &:focus-within {
|
|
.menu--link {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.selected .menu--link {
|
|
border-bottom-color: $yellow-4 !important;
|
|
}
|
|
}
|
|
|
|
&--link {
|
|
margin: 0;
|
|
|
|
&::after {
|
|
content: "\ea6e"; // arrow-right-s-line
|
|
font-family: "RemixIcon";
|
|
|
|
@media($min-desktop-viewport) {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
padding: 0 $space-medium;
|
|
|
|
// dekstop menu dropdown
|
|
@media($min-desktop-viewport) {
|
|
position: absolute;
|
|
top: calc(#{$header-logo-height} + 2 * #{$header-desktop-padding-v});
|
|
box-shadow: $shadow-8;
|
|
border-radius: 0 0 20px 20px;
|
|
}
|
|
|
|
&--item:not(:first-child) {
|
|
border-top: $border-width-0 solid $gray-3;
|
|
|
|
@media($min-desktop-viewport) {
|
|
border-top-color: $gray-5;
|
|
}
|
|
}
|
|
|
|
&--link {
|
|
&::before {
|
|
content: "\ea6e"; // arrow-right-s-line
|
|
font-family: "RemixIcon";
|
|
margin-right: $space-medium;
|
|
}
|
|
}
|
|
}
|
|
}
|