63 lines
1.5 KiB
SCSS
63 lines
1.5 KiB
SCSS
//
|
|
// Side Overlay
|
|
// --------------------------------------------------
|
|
|
|
#side-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: $zindex-side-overlay;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $side-overlay-bg;
|
|
overflow-y: auto;
|
|
transform: translateX(100%) translateY(0) translateZ(0);
|
|
opacity: 0;
|
|
-webkit-overflow-scrolling: touch;
|
|
will-change: transform;
|
|
|
|
.side-trans-enabled & {
|
|
transition: transform $side-transition, opacity $side-transition;
|
|
}
|
|
|
|
.sidebar-r & {
|
|
right: auto;
|
|
left: 0;
|
|
transform: translateX(-100%) translateY(0) translateZ(0);
|
|
}
|
|
|
|
.side-overlay-o & {
|
|
transform: translateX(0) translateY(0) translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
width: $side-overlay-width;
|
|
box-shadow: 0 0 1.5rem rgba(0,0,0,.15);
|
|
transform: translateX(110%) translateY(0) translateZ(0);
|
|
|
|
.sidebar-r & {
|
|
transform: translateX(-110%) translateY(0) translateZ(0);
|
|
}
|
|
|
|
.side-overlay-hover & {
|
|
transform: translateX($side-overlay-width - 15px) translateY(0) translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.sidebar-r.side-overlay-hover & {
|
|
transform: translateX(-($side-overlay-width - 15px)) translateY(0) translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.side-overlay-hover &:hover,
|
|
.side-overlay-o &,
|
|
.side-overlay-o.side-overlay-hover & {
|
|
box-shadow: 0 0 1.25rem rgba($black,.15);
|
|
transform: translateX(0) translateY(0) translateZ(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|