adding #29

public/spritemap.js

@@ -1,13 +1 @@
-(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
+(self.webpackChunk_tentakelfabrik_plain_ui=self.webpackChunk_tentakelfabrik_plain_ui||[]).push([[355],{256:()=>{}}]);
-
-/***/ "?4e0c":
-/*!******************************!*\
-  !*** spritemap-dummy-module ***!
-  \******************************/
-/***/ (() => {
-
-
-
-/***/ })
-
-}]);

src/scss/_mixins.scss

@@ -224,3 +224,26 @@
         }
     }
 }
+
+/**
+ *  adding overlay with z-index and color
+ *
+ *  @param {z-index}
+ *  @param {color}
+ *  
+ */
+
+@mixin overlay($z-index: 0, $color: transparent) {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: #{$color};
+    transition: background-color 0.5s;
+    z-index: #{$z-index};
+
+    content: '';
+}

src/scss/_variables.scss

@@ -68,6 +68,7 @@ $color__active-contrast: #ffffff !default;
 
 $color__background: $color__primary !default;
 $color__background-contrast: #ffffff !default;
+$color__background-alpha: rgba(0,0,0,.7) !default;
 
 $color__body: #f9f9f9 !default;
 $color__text: #363636 !default;
@@ -108,6 +109,7 @@ $colors: (
     '--warning-contrast': $color__warning-contrast,
     '--background': $color__background,
     '--background-contrast': $color__background-contrast,
+    '--background-alpha': $color__background-alpha,
     '--border': $color__border,
     '--border-contrast': $color__border-contrast
 ) !default;

src/scss/components/_modal.scss

@@ -27,6 +27,12 @@
     align-items: center;
     justify-content: center;
 
+    // adding overlay and transition
+    &:before {
+        @include overlay($z-index: 19);
+        transition: background-color 0.5s;
+    }
+
     &__inner {
         position: relative;
         z-index: 21;
@@ -61,26 +67,15 @@
         color: var(--text-contrast);
     }
 
-    &:before {
+    // modal with overlay visible
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: transparent;
-        transition: background-color 0.5s;
-        z-index: 19;
-        content: '';
-    }
-
     &--open {
         display: flex;
-        visibility: visible;
 
+        visibility: visible;
         transition: visibility 0s linear 0s;
 
         &:before {
-            background: rgba(0,0,0,.87);
+            background-color: var(--background-alpha);
         }
 
         .modal__inner {