165 lines
3.3 KiB
SCSS
165 lines
3.3 KiB
SCSS
//
|
|
// Fullscreen Menu Styles //
|
|
//
|
|
.fm-toggle {
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
@include transition(ease-out 0.2s);
|
|
.lines {
|
|
position: relative;
|
|
display: inline-block;
|
|
background: $color-black;
|
|
width: 25px;
|
|
height: 2px;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
@include transition(linear 0.12s);
|
|
&:before, &:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
background: $color-black;
|
|
width: 25px;
|
|
height: 2px;
|
|
display: inline-block;
|
|
@include transition(linear 0.12s);
|
|
}
|
|
&:before { top: -7px;}
|
|
&:after { bottom: -7px;}
|
|
}
|
|
@include breakpoint-above(lg) {
|
|
.lines {
|
|
&:before { @include transform(scaleX(0.8)); @include transform-origin(100% 50%); }
|
|
&:after { @include transform(scaleX(0.6)); @include transform-origin(100% 50%); }
|
|
}
|
|
&:hover {
|
|
.lines {
|
|
&:before { @include transform(scaleX(1)); }
|
|
&:after { @include transform(scaleX(1)); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.header {
|
|
&.dark, &.black, &.absolute-light {
|
|
.fm-toggle {
|
|
.lines, .lines:before, .lines:after { background: $color-white; }
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Fullscreen Menu //
|
|
//
|
|
.fullscreen-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 996;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
@include transition(ease-out 0.2s);
|
|
.fm-wrapper {
|
|
@include transform(scale(0.98));
|
|
height: 100%;
|
|
@include transition(ease-out 0.2s);
|
|
.position-top,
|
|
.position-middle,
|
|
.position-bottom {
|
|
padding: 0 30px;
|
|
}
|
|
@include breakpoint-above(md) {
|
|
.position-top,
|
|
.position-middle,
|
|
.position-bottom {
|
|
padding: 0 50px;
|
|
}
|
|
.position-top { top: 50px; }
|
|
.position-bottom { bottom: 50px; }
|
|
}
|
|
.fm-close {
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 50px;
|
|
cursor: pointer;
|
|
span {
|
|
position: relative;
|
|
display: inline-block;
|
|
opacity: 0.8;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
@include transition(ease-out 0.18s);
|
|
&:before, &:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 14px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
@include transition(ease-out 0.18s);
|
|
}
|
|
&:before { @include transform(translate(-50%, -50%) rotate(45deg)) }
|
|
&:after { @include transform(translate(-50%, -50%) rotate(-45deg)) }
|
|
}
|
|
&:hover {
|
|
span {
|
|
opacity: 1;
|
|
&:before { @include transform(translate(-50%, -50%) rotate(180deg)) }
|
|
&:after { @include transform(translate(-50%, -50%) rotate(180deg)) }
|
|
}
|
|
}
|
|
}
|
|
@include breakpoint-less(md) {
|
|
.fm-close {
|
|
top: 30px;
|
|
right: 30px;
|
|
}
|
|
}
|
|
@include breakpoint-less(sm) {
|
|
.fm-close {
|
|
top: 20px;
|
|
right: 20px;
|
|
span {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.fm-show {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
.fm-wrapper {
|
|
@include transform(scale(1));
|
|
}
|
|
}
|
|
}
|
|
div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
|
|
&.fullscreen-menu {
|
|
.fm-wrapper {
|
|
.fm-close {
|
|
span {
|
|
background: $color-white-01;
|
|
&:before, &:after { background: $color-white; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bg-grey, .bg-grey-lighter, .bg-grey-lightest, div[class^='bg-white'], div[class*=' bg-white'] {
|
|
&.fullscreen-menu {
|
|
.fm-wrapper {
|
|
.fm-close {
|
|
span {
|
|
background: $color-black-01;
|
|
&:before, &:after { background: $color-black; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |