40 lines
1012 B
SCSS
40 lines
1012 B
SCSS
|
@mixin modal($z-index: default, $color: default, $background-color: default) {
|
||
|
|
@if $z-index == default {
|
||
|
|
$z-index: map-get($z-indexes, modal);
|
||
|
|
}
|
||
|
|
@if $color == default {
|
||
|
|
$color: $text-color-theme-dark;
|
||
|
|
}
|
||
|
|
@if $background-color == default {
|
||
|
|
$background-color: $mask-color;
|
||
|
|
}
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: $z-index;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
color: $color;
|
||
|
|
touch-action: none;
|
||
|
|
background-color: $background-color;
|
||
|
|
opacity: 0;
|
||
|
|
@include transform(translate(100%, 0));
|
||
|
|
@include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function),
|
||
|
|
transform 0s map-get($animation, duration) map-get($animation, timing-function)});
|
||
|
|
}
|
||
|
|
@mixin modal--show() {
|
||
|
|
opacity: 1;
|
||
|
|
@include transform(translate(0, 0));
|
||
|
|
@include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function)});
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal {
|
||
|
|
@include modal();
|
||
|
|
}
|
||
|
|
.modal--show {
|
||
|
|
@include modal--show();
|
||
|
|
}
|
||
|
|
.modal--overflow {
|
||
|
|
@include overflow(auto);
|
||
|
|
}
|