mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00
Code Activity

Add new overlay-backdrop() mixin

Browse Source 
- Update modal and offcanvas backdrops to use the mixin (placeholder wouldn't work with params I believe)
- Plus, modals and offcanvases should be able to be used together, so separate values for z-index (already implemented) are reflected properly here.
- Offcanvas still extends modals variables by default, save for z-index
This commit is contained in:
Mark Otto
2021-06-24 09:54:49 -07:00
committed by GeoSot
parent 34ed569610
commit a585c81035
5 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_mixins.scss
+1
View File
@@ -22,6 +22,7 @@
// Components // Components
@import "mixins/alert"; @import "mixins/alert";
@import "mixins/backdrop";
@import "mixins/buttons"; @import "mixins/buttons";
@import "mixins/caret"; @import "mixins/caret";
@import "mixins/pagination"; @import "mixins/pagination";
scss/_modal.scss
+1 -11
View File
@@ -85,17 +85,7 @@
// Modal background // Modal background
.modal-backdrop { .modal-backdrop {
position: fixed; @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
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; }
} }
// Modal header // Modal header
scss/_offcanvas.scss
+4
View File
@@ -14,6 +14,10 @@
@include transition(transform $offcanvas-transition-duration ease-in-out); @include transition(transform $offcanvas-transition-duration ease-in-out);
} }
.offcanvas-backdrop {
@include overlay-backdrop($zindex-offcanvas, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
}
.offcanvas-header { .offcanvas-header {
display: flex; display: flex;
align-items: center; align-items: center;
scss/_variables.scss
+2
View File
@@ -1453,6 +1453,8 @@ $offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $modal-content-bg !default; $offcanvas-bg-color: $modal-content-bg !default;
$offcanvas-color: $modal-content-color !default; $offcanvas-color: $modal-content-color !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !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 // scss-docs-end offcanvas-variables
// Code // Code
scss/mixins/_backdrop.scss
+14
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-modal-backdrop;
width: 100vw;
height: 100vh;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.show { opacity: $modal-backdrop-opacity; }
}