118 lines
2.3 KiB
SCSS
118 lines
2.3 KiB
SCSS
|
///
|
||
|
|
/// Lens by HTML5 UP
|
||
|
|
/// html5up.net | @ajlkn
|
||
|
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||
|
|
///
|
||
|
|
|
||
|
|
/* Main */
|
||
|
|
|
||
|
|
#main {
|
||
|
|
@include vendor('transition', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
width: _size(main);
|
||
|
|
height: 100%;
|
||
|
|
background: _palette(bg);
|
||
|
|
outline: 0;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
text-align: _misc(main-align);
|
||
|
|
visibility: visible;
|
||
|
|
z-index: _misc(z-index-base);
|
||
|
|
|
||
|
|
@if _misc(main-side) == 'left' {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle {
|
||
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
width: 4em;
|
||
|
|
height: 4em;
|
||
|
|
background-image: url('images/close-small-alt.svg');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 32px 32px;
|
||
|
|
cursor: pointer;
|
||
|
|
display: none;
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
@if _misc(main-side) == 'left' {
|
||
|
|
background-position: calc(100% - 0.5em) 0.5em;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
background-position: 0.5em 0.5em;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body.fullscreen & {
|
||
|
|
visibility: hidden;
|
||
|
|
|
||
|
|
@if _misc(main-side) == 'left' {
|
||
|
|
left: (_size(main) * -1);
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
right: (_size(main) * -1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body.is-preload-1 & {
|
||
|
|
opacity: 0;
|
||
|
|
|
||
|
|
@if _misc(main-side) == 'left' {
|
||
|
|
left: -2em;
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
right: -2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include breakpoint('<=large') {
|
||
|
|
width: _size(main-alt);
|
||
|
|
|
||
|
|
body.fullscreen & {
|
||
|
|
@if _misc(main-side) == 'left' {
|
||
|
|
left: (_size(main-alt) * -1);
|
||
|
|
}
|
||
|
|
@else {
|
||
|
|
right: (_size(main-alt) * -1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include breakpoint('<=medium') {
|
||
|
|
background: transparentize(_palette(bg), 0.075);
|
||
|
|
|
||
|
|
.toggle {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include breakpoint('<=xsmall') {
|
||
|
|
@include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
|
||
|
|
width: 100%;
|
||
|
|
background: _palette(bg);
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
body.is-preload-1 & {
|
||
|
|
left: auto !important;
|
||
|
|
right: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.fullscreen & {
|
||
|
|
left: auto !important;
|
||
|
|
right: auto !important;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|