diff options
Diffstat (limited to '_sass/common/components/_modal.scss')
-rw-r--r-- | _sass/common/components/_modal.scss | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/_sass/common/components/_modal.scss b/_sass/common/components/_modal.scss new file mode 100644 index 0000000..cd71628 --- /dev/null +++ b/_sass/common/components/_modal.scss @@ -0,0 +1,39 @@ +@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); +} |