• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1@mixin modal($z-index: default, $color: default, $background-color: default) {
2  @if $z-index == default {
3    $z-index: map-get($z-indexes, modal);
4  }
5  @if $color == default {
6    $color: $text-color-theme-dark;
7  }
8  @if $background-color == default {
9    $background-color: $mask-color;
10  }
11  position: fixed;
12  top: 0;
13  left: 0;
14  z-index: $z-index;
15  width: 100%;
16  height: 100%;
17  color: $color;
18  touch-action: none;
19  background-color: $background-color;
20  opacity: 0;
21  @include transform(translate(100%, 0));
22  @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function),
23  transform 0s map-get($animation, duration) map-get($animation, timing-function)});
24}
25@mixin modal--show() {
26  opacity: 1;
27  @include transform(translate(0, 0));
28  @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function)});
29}
30
31.modal {
32  @include modal();
33}
34.modal--show {
35  @include modal--show();
36}
37.modal--overflow {
38  @include overflow(auto);
39}