feat: add modal mixin, sidebar mask now has transition effect just li…

…ke modal

_sass/common/_variables.scss

@@ -71,7 +71,7 @@ $spacers: (
   5:                      map-get($base, spacer) * 3
 );
 
-$z-index: (
+$z-indexes: (
   actions: 996,
   mask: 997,
   sidebar: 998,

_sass/common/components/_modal.scss

@@ -1,25 +1,39 @@
-.modal {
+@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: map-get($z-index, modal);
+  z-index: $z-index;
   width: 100%;
   height: 100%;
-  color: $text-color-theme-dark;
+  color: $color;
   touch-action: none;
-  background-color: $mask-color;
+  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)});
 }
-
-.modal--overflow {
-  @include overflow(auto);
-}
-
-.modal--show {
+@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);
 }

_sass/layout/_page.scss

@@ -14,7 +14,7 @@
     position: fixed;
     bottom: map-get($spacers, 5);
     left: map-get($spacers, 3);
-    z-index: map-get($z-index, actions);
+    z-index: map-get($z-indexes, actions);
     display: none;
   }
 
@@ -23,7 +23,7 @@
   }
 
   .page__sidebar {
-    z-index: map-get($z-index, sidebar);
+    z-index: map-get($z-indexes, sidebar);
     display: block;
     width: 80%;
     max-width: map-get($layout, sidebar-width);
@@ -38,15 +38,8 @@
   }
 
   .page__mask {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: map-get($z-index, mask);
-    display: none;
+    @include modal(map-get($z-indexes, mask));
     cursor: pointer;
-    background-color: $mask-color;
   }
   &.layout--page--sidebar {
     .page__main {
@@ -146,7 +139,7 @@
         @include transform(translate(0));
       }
       .page__mask {
-        display: block;
+        @include modal--show();
       }
     }
   }