Sites-Camelia/branches/magzine/v4/assets/sass/layout/_main.scss

122 lines
2.3 KiB
SCSS
Raw Normal View History

@import '../libs/vars';
@import '../libs/functions';
@import '../libs/mixins';
///
/// 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-loading-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-loading-1 & {
left: auto !important;
right: auto !important;
}
body.fullscreen & {
left: auto !important;
right: auto !important;
opacity: 0;
}
.toggle {
display: none;
}
}
}