release/0.2
HerrHase 3 years ago
parent c96c305b4d
commit 42b8e01405

File diff suppressed because one or more lines are too long

@ -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 ***!
\******************************/
/***/ (() => {
/***/ })
}]);

@ -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: '';
}

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

@ -27,6 +27,12 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// adding overlay and transition
&:before {
@include overlay($z-index: 19);
transition: background-color 0.5s;
}
&__inner { &__inner {
position: relative; position: relative;
z-index: 21; z-index: 21;
@ -61,26 +67,15 @@
color: var(--text-contrast); 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 { &--open {
display: flex; display: flex;
visibility: visible;
visibility: visible;
transition: visibility 0s linear 0s; transition: visibility 0s linear 0s;
&:before { &:before {
background: rgba(0,0,0,.87); background-color: var(--background-alpha);
} }
.modal__inner { .modal__inner {

Loading…
Cancel
Save