From 9a2cf47e8cfbf57e95d8d7c3d3cb8d925ac2c287 Mon Sep 17 00:00:00 2001
From: Isabelle Chanclou <isabelle.chanclou@orange.com>
Date: Fri, 22 Jul 2022 17:00:42 +0200
Subject: [PATCH 1/3] Add 3 new css vars for Offcanvas feature

---
 scss/_offcanvas.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 5709479dc480..74a55037e706 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -11,6 +11,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-title-line-height: #{$offcanvas-title-line-height};
+  --#{$prefix}offcanvas-transition-duration: #{$offcanvas-transition-duration};
   // scss-docs-end offcanvas-css-vars
 }
 
@@ -31,7 +34,7 @@
     @include media-breakpoint-down($next) {
       position: fixed;
       bottom: 0;
-      z-index: $zindex-offcanvas;
+      z-index: var(--#{$prefix}offcanvas-zindex);
       display: flex;
       flex-direction: column;
       max-width: 100%;
@@ -41,7 +44,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(transform var(--#{$prefix}offcanvas-transition-duration) ease-in-out);
 
       &.offcanvas-start {
         top: 0;
@@ -133,7 +136,7 @@
 
 .offcanvas-title {
   margin-bottom: 0;
-  line-height: $offcanvas-title-line-height;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }
 
 .offcanvas-body {

From 9574076a7e301053a3e38e426a44572a4761332a Mon Sep 17 00:00:00 2001
From: Isabelle Chanclou <isabelle.chanclou@orange.com>
Date: Thu, 11 Aug 2022 14:56:16 +0200
Subject: [PATCH 2/3] Fix new css variable after review

---
 scss/_offcanvas.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 74a55037e706..50e1a74a5ff8 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -13,7 +13,7 @@
   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
   --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
   --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
-  --#{$prefix}offcanvas-transition-duration: #{$offcanvas-transition-duration};
+  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
   // scss-docs-end offcanvas-css-vars
 }
 
@@ -44,7 +44,7 @@
       background-clip: padding-box;
       outline: 0;
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(transform var(--#{$prefix}offcanvas-transition-duration) ease-in-out);
+      @include transition(var(--#{$prefix}offcanvas-transition));
 
       &.offcanvas-start {
         top: 0;

From 23293592f324099b16d4a841d2cae3404a97d0ff Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 3 Oct 2022 10:47:15 -0700
Subject: [PATCH 3/3] Update _offcanvas.scss

---
 scss/_offcanvas.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 50e1a74a5ff8..075af465aa0c 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -12,8 +12,8 @@
   --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
   --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
-  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
   --#{$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
 }