diff options
author | Mark Otto <markdotto@gmail.com> | 2021-06-25 23:41:15 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2021-06-25 23:41:15 +0300 |
commit | 45d26de72817b295c5f94c8426354fd5b7d0a1f9 (patch) | |
tree | 78ef421227b893a2f8c7ea0b45693ccae58e68e4 /scss | |
parent | 088ef6298203255d28c3eb058709cbb501d07c2c (diff) |
Variablize backdrop for modal and offcanvas
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_mixins.scss | 1 | ||||
-rw-r--r-- | scss/_modal.scss | 12 | ||||
-rw-r--r-- | scss/_offcanvas.scss | 4 | ||||
-rw-r--r-- | scss/_variables.scss | 9 | ||||
-rw-r--r-- | scss/mixins/_backdrop.scss | 14 |
5 files changed, 26 insertions, 14 deletions
diff --git a/scss/_mixins.scss b/scss/_mixins.scss index eec085789a..af1f74f72e 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -22,6 +22,7 @@ // Components @import "mixins/alert"; +@import "mixins/backdrop"; @import "mixins/buttons"; @import "mixins/caret"; @import "mixins/pagination"; diff --git a/scss/_modal.scss b/scss/_modal.scss index 77473085ce..21e1258f55 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -85,17 +85,7 @@ // Modal background .modal-backdrop { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal-backdrop; - width: 100vw; - height: 100vh; - background-color: $modal-backdrop-bg; - - // Fade for backdrop - &.fade { opacity: 0; } - &.show { opacity: $modal-backdrop-opacity; } + @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity); } // Modal header diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 91db686434..a089c2a081 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -14,6 +14,10 @@ @include transition(transform $offcanvas-transition-duration ease-in-out); } +.offcanvas-backdrop { + @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity); +} + .offcanvas-header { display: flex; align-items: center; diff --git a/scss/_variables.scss b/scss/_variables.scss index 8abd750329..aa4d4ff2fb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -907,9 +907,10 @@ $form-validation-states: ( $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-offcanvas: 1050 !default; -$zindex-modal: 1060 !default; +$zindex-offcanvas-backdrop: 1040 !default; +$zindex-offcanvas: 1045 !default; +$zindex-modal-backdrop: 1050 !default; +$zindex-modal: 1055 !default; $zindex-popover: 1070 !default; $zindex-tooltip: 1080 !default; // scss-docs-end zindex-stack @@ -1453,6 +1454,8 @@ $offcanvas-title-line-height: $modal-title-line-height !default; $offcanvas-bg-color: $modal-content-bg !default; $offcanvas-color: $modal-content-color !default; $offcanvas-box-shadow: $modal-content-box-shadow-xs !default; +$offcanvas-backdrop-bg: $modal-backdrop-bg !default; +$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; // scss-docs-end offcanvas-variables // Code diff --git a/scss/mixins/_backdrop.scss b/scss/mixins/_backdrop.scss new file mode 100644 index 0000000000..9705ae9eea --- /dev/null +++ b/scss/mixins/_backdrop.scss @@ -0,0 +1,14 @@ +// Shared between modals and offcanvases +@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) { + position: fixed; + top: 0; + left: 0; + z-index: $zindex; + width: 100vw; + height: 100vh; + background-color: $backdrop-bg; + + // Fade for backdrop + &.fade { opacity: 0; } + &.show { opacity: $backdrop-opacity; } +} |