161 lines
2.7 KiB
SCSS
161 lines
2.7 KiB
SCSS
// @file
|
|
// The mobile navigation stylesheet for this theme.
|
|
|
|
@import 'init';
|
|
@import 'extra';
|
|
|
|
.main-menu,
|
|
.header__region { // stylelint-disable selector-class-pattern
|
|
display: none;
|
|
|
|
@include respond-to(s) {
|
|
display: block;
|
|
}
|
|
} // stylelint-enable selector-class-pattern
|
|
|
|
.mobile-nav {
|
|
@include typeface(headings);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
|
|
@include respond-to(s) {
|
|
display: none;
|
|
}
|
|
|
|
.js-nav-open & {
|
|
position: fixed;
|
|
}
|
|
|
|
.language-icon {
|
|
fill: var(--color-text-bg);
|
|
}
|
|
|
|
&__cover {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--color-mobile-menu-cover);
|
|
opacity: 0;
|
|
|
|
.js-nav-open & {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
&__toggle {
|
|
@include padding(0 .2);
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: $zen-gutters;
|
|
right: $zen-gutters;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
background-color: transparent;
|
|
color: var(--color-text);
|
|
z-index: 22;
|
|
border: 1px solid var(--color-border);
|
|
pointer-events: auto;
|
|
|
|
@include respond-to(s) {
|
|
display: none;
|
|
}
|
|
|
|
.js-nav-open & {
|
|
color: var(--color-text-bg);
|
|
}
|
|
|
|
&:hover svg,
|
|
&:focus svg {
|
|
fill: var(--color-text-bg);
|
|
}
|
|
}
|
|
|
|
&__hamburger {
|
|
display: inline-block;
|
|
fill: var(--color-text);
|
|
width: 1.6rem;
|
|
margin-left: .1rem;
|
|
|
|
rect {
|
|
transform-origin: center;
|
|
}
|
|
|
|
.js-nav-open & { // stylelint-disable max-nesting-depth
|
|
fill: var(--color-text-bg);
|
|
|
|
rect {
|
|
y: 45;
|
|
|
|
&:nth-of-type(1) {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
} // stylelint-enable max-nesting-depth
|
|
}
|
|
|
|
&__sheet {
|
|
visibility: hidden;
|
|
background-color: var(--color-mobile-menu);
|
|
width: 90vw;
|
|
height: 100vh;
|
|
padding: 2rem;
|
|
transform: translateX(100vw);
|
|
z-index: 21;
|
|
|
|
a {
|
|
color: var(--color-text-bg);
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--color-text-bg);
|
|
}
|
|
}
|
|
|
|
.js-nav-open & {
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
box-shadow: -10px 0 10px -10px var(--color-nearblack);
|
|
transform: translateX(10vw);
|
|
}
|
|
}
|
|
|
|
&__navbar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
margin: .4rem 0;
|
|
}
|
|
}
|
|
|
|
&__cover,
|
|
&__toggle,
|
|
&__hamburger rect,
|
|
&__sheet {
|
|
transition: all 130ms ease-in;
|
|
|
|
.js-nav-open & {
|
|
transition: all 330ms ease-out;
|
|
}
|
|
}
|
|
}
|