Move mobil menu css to seperate scss file. Preload css for performance.
This commit is contained in:
Fredrik Jonsson
parent
3c897e0650
commit
c154176d35
4 changed files with 111 additions and 118 deletions
113
sass/_zen.scss
113
sass/_zen.scss
|
|
@ -276,7 +276,7 @@ figcaption {
|
|||
/* Search */
|
||||
|
||||
.search-form {
|
||||
@include padding-top(.5);
|
||||
@include padding(.5 0);
|
||||
}
|
||||
|
||||
.search-text {
|
||||
|
|
@ -323,114 +323,3 @@ figcaption {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile menu */
|
||||
|
||||
.mobile-nav-wrapper {
|
||||
@include typeface(headings);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
|
||||
.js-nav-open & {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-cover {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(color('black'), .2);
|
||||
opacity: 0;
|
||||
|
||||
.js-nav-open & {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: $zen-gutters / 2;
|
||||
right: $zen-gutters / 2;
|
||||
padding: 3px ($zen-gutters + $zen-gutters / 4 + 4px) 2px 4px;
|
||||
z-index: 22;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border: 1px solid color(border);
|
||||
border-radius: 3px;
|
||||
pointer-events: auto;
|
||||
|
||||
.js-nav-open & {
|
||||
color: color(text-bg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
margin-left: $zen-gutters / 4;
|
||||
width: $zen-gutters;
|
||||
height: 4px;
|
||||
border-top: 12px double color(text);
|
||||
border-bottom: 4px solid color(text);
|
||||
}
|
||||
|
||||
.js-nav-open &::after {
|
||||
border-color: color(text-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-sheet {
|
||||
background-color: color(header-bg);
|
||||
width: 90vw;
|
||||
height: 100vh;
|
||||
padding: 2rem;
|
||||
transform: translateX(100vw);
|
||||
z-index: 21;
|
||||
|
||||
.js-nav-open & {
|
||||
pointer-events: auto;
|
||||
box-shadow: -10px 0 10px -10px color(nearblack);
|
||||
transform: translateX(10vw);
|
||||
}
|
||||
|
||||
.js-navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin: .4rem 0;
|
||||
|
||||
a {
|
||||
color: color(white);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.js-region {
|
||||
@include padding(.5 0);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-cover,
|
||||
.mobile-nav-toggle,
|
||||
.mobile-nav-toggle::after,
|
||||
.mobile-nav-sheet {
|
||||
transition: all 130ms ease-in;
|
||||
|
||||
.js-nav-open & {
|
||||
transition: all 330ms ease-out;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,14 +46,12 @@
|
|||
|
||||
// Wrapper for any blocks placed in the header region.
|
||||
&__region {
|
||||
@include padding(.5 0);
|
||||
|
||||
@include respond-to(s) {
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
|
||||
@include rtl() {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
104
sass/navigation/mobile/_mobile.scss
Normal file
104
sass/navigation/mobile/_mobile.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.mobile-nav-wrapper {
|
||||
@include typeface(headings);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
|
||||
.js-nav-open & {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-cover {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(color('black'), .2);
|
||||
opacity: 0;
|
||||
|
||||
.js-nav-open & {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: $zen-gutters / 2;
|
||||
right: $zen-gutters / 2;
|
||||
padding: 3px ($zen-gutters + $zen-gutters / 4 + 4px) 2px 4px;
|
||||
z-index: 22;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border: 1px solid color(border);
|
||||
border-radius: 3px;
|
||||
pointer-events: auto;
|
||||
|
||||
.js-nav-open & {
|
||||
color: color(text-bg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
margin-left: $zen-gutters / 4;
|
||||
width: $zen-gutters;
|
||||
height: 4px;
|
||||
border-top: 12px double color(text);
|
||||
border-bottom: 4px solid color(text);
|
||||
}
|
||||
|
||||
.js-nav-open &::after {
|
||||
border-color: color(text-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-sheet {
|
||||
background-color: color(header-bg);
|
||||
width: 90vw;
|
||||
height: 100vh;
|
||||
padding: 2rem;
|
||||
transform: translateX(100vw);
|
||||
z-index: 21;
|
||||
|
||||
.js-nav-open & {
|
||||
pointer-events: auto;
|
||||
box-shadow: -10px 0 10px -10px color(nearblack);
|
||||
transform: translateX(10vw);
|
||||
}
|
||||
|
||||
.js-navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin: .4rem 0;
|
||||
|
||||
a {
|
||||
color: color(white);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-cover,
|
||||
.mobile-nav-toggle,
|
||||
.mobile-nav-toggle::after,
|
||||
.mobile-nav-sheet {
|
||||
transition: all 130ms ease-in;
|
||||
|
||||
.js-nav-open & {
|
||||
transition: all 330ms ease-out;
|
||||
}
|
||||
}
|
||||
|
|
@ -63,6 +63,7 @@
|
|||
@import 'navigation/breadcrumb/breadcrumb';
|
||||
@import 'navigation/more-link/more-link';
|
||||
@import 'navigation/navbar/navbar';
|
||||
@import 'navigation/mobile/mobile';
|
||||
@import 'navigation/pager/pager';
|
||||
@import 'navigation/skip-link/skip-link';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue