//
// 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; }
}
}
}
}
}
