From a585c81035416951ffcb6a496154b53a3747a459 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 24 Jun 2021 09:54:49 -0700
Subject: [PATCH] Add new overlay-backdrop() mixin

- 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
---
 scss/_mixins.scss          |  1 +
 scss/_modal.scss           | 12 +-----------
 scss/_offcanvas.scss       |  4 ++++
 scss/_variables.scss       |  2 ++
 scss/mixins/_backdrop.scss | 14 ++++++++++++++
 5 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 scss/mixins/_backdrop.scss

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index eec085789..af1f74f72 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 77473085c..21e1258f5 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 91db68643..2ac723282 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, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+}
+
 .offcanvas-header {
   display: flex;
   align-items: center;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8abd75032..d8a65193e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1453,6 +1453,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 000000000..ab57d4961
--- /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-modal-backdrop;
+  width: 100vw;
+  height: 100vh;
+  background-color: $modal-backdrop-bg;
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: $modal-backdrop-opacity; }
+}