Add new css vars for Offcanvas (#36815)

* Add 3 new css vars for Offcanvas feature

* Fix new css variable after review

* Update _offcanvas.scss

Co-authored-by: Mark Otto <otto@github.com>

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 23fc357f2bb6b7d86708da3dcfe760ef0abd4436..b68f802718fa15a1727af8d88984058ba50f2e42 100644 (file)
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -12,6 +12,9 @@
   --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
   --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
+  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
   // scss-docs-end offcanvas-css-vars
 }
 
@@ -42,7 +45,7 @@
       background-clip: padding-box;
       outline: 0;
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(transform $offcanvas-transition-duration ease-in-out);
+      @include transition(var(--#{$prefix}offcanvas-transition));
 
       &.offcanvas-start {
         top: 0;
@@ -134,7 +137,7 @@
 
 .offcanvas-title {
   margin-bottom: 0;
-  line-height: $offcanvas-title-line-height;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }
 
 .offcanvas-body {