mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +02:00
Code Issues Releases Wiki Activity

Variablize backdrop for modal and offcanvas

Browse Source
This commit is contained in:
Mark Otto
2021-06-25 13:41:15 -07:00
parent 088ef62982
commit 45d26de728
8 changed files with 83 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_mixins.scss
View File

@@ -22,6 +22,7 @@
// Components
@import "mixins/alert";
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";

12
scss/_modal.scss
View File

@@ -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

4
scss/_offcanvas.scss
View File

@@ -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;

9
scss/_variables.scss
View File

@@ -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

14
scss/mixins/_backdrop.scss Normal file
View File

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