2016-06-04 23:06:59 +03:00
|
|
|
@import "../colors";
|
|
|
|
@import "../globals";
|
|
|
|
@import "../mixins";
|
2015-11-14 23:38:17 +03:00
|
|
|
@import "./config";
|
|
|
|
|
2016-05-22 14:42:52 +03:00
|
|
|
.overlay {
|
2015-11-14 23:38:17 +03:00
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
z-index: $z-index-highest;
|
|
|
|
display: flex;
|
|
|
|
width: 100vw;
|
|
|
|
height: 100vh;
|
|
|
|
flex-direction: column;
|
|
|
|
align-content: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
pointer-events: none;
|
2016-06-08 22:26:33 +03:00
|
|
|
&.invisible > *:not(.backdrop) {
|
2015-12-11 20:01:24 +03:00
|
|
|
pointer-events: all;
|
|
|
|
}
|
2015-11-14 23:38:17 +03:00
|
|
|
}
|
|
|
|
|
2016-05-22 14:42:52 +03:00
|
|
|
.backdrop {
|
2015-11-14 23:38:17 +03:00
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background-color: $overlay-color;
|
|
|
|
opacity: 0;
|
|
|
|
transition-timing-function: $animation-curve-default;
|
|
|
|
transition-duration: $animation-duration;
|
|
|
|
transition-property: opacity;
|
|
|
|
}
|
|
|
|
|
|
|
|
.active {
|
|
|
|
pointer-events: all;
|
2016-05-22 14:42:52 +03:00
|
|
|
> .backdrop {
|
2015-12-11 20:01:24 +03:00
|
|
|
opacity: $overlay-opacity;
|
|
|
|
}
|
2015-11-14 23:38:17 +03:00
|
|
|
}
|