@coreui/coreui 4.1.4 → 4.2.0

package/scss/sidebar/_sidebar-narrow.scss

@@ -1,14 +1,14 @@
 %sidebar-narrow {
   @include media-breakpoint-up($mobile-breakpoint) {
     z-index: $zindex-fixed + 1;
-    flex: 0 0 $sidebar-narrow-width;
-    width: $sidebar-narrow-width;
-    padding-bottom: $sidebar-toggler-height;
+    flex: 0 0 var(--#{$prefix}sidebar-narrow-width);
+    width: var(--#{$prefix}sidebar-narrow-width);
+    padding-bottom: var(--#{$prefix}sidebar-toggler-height);
     overflow: visible;
 
     &.sidebar-fixed {
       z-index: $zindex-fixed + 1;
-      width: $sidebar-narrow-width;
+      width: var(--#{$prefix}sidebar-narrow-width);
     }
 
     .sidebar-brand-full {
@@ -52,10 +52,10 @@
 .sidebar-narrow {
   @extend %sidebar-narrow;
   &:not(.sidebar-end) ~ * {
-    --#{$variable-prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
+    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
   }
   &.sidebar-end ~ * {
-    --#{$variable-prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
+    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
   }
 }
 
@@ -64,10 +64,10 @@
   z-index: $zindex-fixed + 1;
 
   &:not(.sidebar-end) ~ * {
-    --#{$variable-prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
+    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
   }
   &.sidebar-end ~ * {
-    --#{$variable-prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
+    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
   }
 
   &:not(:hover) {
@@ -95,10 +95,10 @@
       &.sidebar-narrow,
       &.sidebar-narrow-unfoldable {
         &:not(.sidebar-end) {
-          @include ltr-rtl("margin-left", - $sidebar-narrow-width);
+          @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
         }
         &.sidebar-end {
-          @include ltr-rtl("margin-right", - $sidebar-narrow-width);
+          @include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
         }
       }
     }

package/scss/sidebar/_sidebar-nav.scss

@@ -12,11 +12,11 @@
   list-style: none;
 
   .nav-title {
-    padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
-    margin-top: $sidebar-nav-title-margin-top;
+    padding: var(--#{$prefix}sidebar-nav-title-padding-y) var(--#{$prefix}sidebar-nav-title-padding-x);
+    margin-top: var(--#{$prefix}sidebar-nav-title-margin-top);
     font-size: 80%;
     font-weight: 700;
-    color: var(--#{$variable-prefix}sidebar-nav-title-color, $sidebar-nav-title-color);
+    color: var(--#{$prefix}sidebar-nav-title-color);
     text-transform: uppercase;
     @include transition($sidebar-nav-title-transition);
   }
@@ -25,73 +25,75 @@
     display: flex;
     flex: 1;
     align-items: center;
-    padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
-    color: var(--#{$variable-prefix}sidebar-nav-link-color, $sidebar-nav-link-color);
+    padding: var(--#{$prefix}sidebar-nav-link-padding-y) var(--#{$prefix}sidebar-nav-link-padding-x);
+    color: var(--#{$prefix}sidebar-nav-link-color);
     text-decoration: none;
     white-space: nowrap;
-    background: var(--#{$variable-prefix}sidebar-nav-link-bg, $sidebar-nav-link-bg);
+    background: var(--#{$prefix}sidebar-nav-link-bg);
+    border: var(--#{$prefix}sidebar-nav-link-border);
+    @include border-radius(var(--#{$prefix}sidebar-nav-link-border-radius));
     @include transition($sidebar-nav-link-transition);
 
     &.active {
-      color: var(--#{$variable-prefix}sidebar-nav-link-active-color, $sidebar-nav-link-active-color);
-      background: var(--#{$variable-prefix}sidebar-nav-link-active-bg, $sidebar-nav-link-active-bg);
+      color: var(--#{$prefix}sidebar-nav-link-active-color);
+      background: var(--#{$prefix}sidebar-nav-link-active-bg);
 
       .nav-icon {
-        color: var(--#{$variable-prefix}sidebar-nav-link-active-icon-color, $sidebar-nav-link-active-icon-color);
+        color: var(--#{$prefix}sidebar-nav-link-active-icon-color);
       }
     }
 
     &.disabled {
-      color: var(--#{$variable-prefix}sidebar-nav-link-disabled-color, $sidebar-nav-link-disabled-color);
+      color: var(--#{$prefix}sidebar-nav-link-disabled-color);
       pointer-events: none;
       cursor: not-allowed;
       background: transparent;
 
       .nav-icon {
-        color: var(--#{$variable-prefix}sidebar-nav-link-disabled-icon-color, $sidebar-nav-link-disabled-icon-color);
+        color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color);
       }
 
       &:hover {
-        color: var(--#{$variable-prefix}sidebar-nav-link-disabled-color, $sidebar-nav-link-disabled-color);
+        color: var(--#{$prefix}sidebar-nav-link-disabled-color);
 
         .nav-icon {
-          color: var(--#{$variable-prefix}sidebar-nav-link-disabled-icon-color, $sidebar-nav-link-disabled-icon-color);
+          color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color);
         }
 
         &.nav-dropdown-toggle::after {
-          background-image: var(--#{$variable-prefix}sidebar-nav-group-indicator-hover, escape-svg($sidebar-nav-group-indicator-hover-icon));
+          background-image: var(--#{$prefix}sidebar-nav-group-indicator-hover);
         }
       }
     }
 
     @media (hover: hover), (-ms-high-contrast: none) {
       &:hover {
-        color: var(--#{$variable-prefix}sidebar-nav-link-hover-color, $sidebar-nav-link-hover-color);
+        color: var(--#{$prefix}sidebar-nav-link-hover-color);
         text-decoration: none;
-        background: var(--#{$variable-prefix}sidebar-nav-link-hover-bg, $sidebar-nav-link-hover-bg);
+        background: var(--#{$prefix}sidebar-nav-link-hover-bg);
 
         .nav-icon {
-          color: var(--#{$variable-prefix}sidebar-nav-link-hover-icon-color, $sidebar-nav-link-hover-icon-color);
+          color: var(--#{$prefix}sidebar-nav-link-hover-icon-color);
         }
 
         &.nav-group-toggle::after {
-          background-image: var(--#{$variable-prefix}sidebar-nav-group-indicator-hover, escape-svg($sidebar-nav-group-indicator-hover-icon));
+          background-image: var(--#{$prefix}sidebar-nav-group-indicator-hover);
         }
       }
     }
   }
 
   .nav-icon {
-    flex: 0 0 $sidebar-nav-icon-width;
-    height: $sidebar-nav-icon-height;
-    font-size: $sidebar-nav-icon-font-size;
-    color: var(--#{$variable-prefix}sidebar-nav-link-icon-color, $sidebar-nav-link-icon-color);
+    flex: 0 0 var(--#{$prefix}sidebar-nav-icon-width);
+    height: var(--#{$prefix}sidebar-nav-icon-height);
+    font-size: var(--#{$prefix}sidebar-nav-icon-font-size);
+    color: var(--#{$prefix}sidebar-nav-link-icon-color);
     text-align: center;
     fill: currentColor;
     @include transition(inherit);
 
     &:first-child {
-      @include ltr-rtl("margin-left", - $sidebar-nav-link-padding-x);
+      @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) * -1));
     }
   }
 
@@ -100,7 +102,7 @@
     @include transition($sidebar-nav-group-transition);
 
     .nav-group-items {
-      padding: $sidebar-nav-group-items-padding-y $sidebar-nav-group-items-padding-x;
+      padding: var(--#{$prefix}sidebar-nav-group-items-padding-y) var(--#{$prefix}sidebar-nav-group-items-padding-x);
       overflow: hidden;
       @include transition($sidebar-nav-group-items-transition);
     }
@@ -110,10 +112,10 @@
     }
 
     &.show {
-      background: var(--#{$variable-prefix}sidebar-nav-group-bg, $sidebar-nav-group-bg);
+      background: var(--#{$prefix}sidebar-nav-group-bg);
 
       .nav-group-toggle {
-        color: var(--#{$variable-prefix}sidebar-nav-group-toggle-show-color, $sidebar-nav-group-toggle-show-color);
+        color: var(--#{$prefix}sidebar-nav-group-toggle-show-color);
       }
 
       > .nav-group-toggle::after {
@@ -135,7 +137,7 @@
       height: 12px;
       @include ltr-rtl("margin-left", auto);
       content: "";
-      background-image: var(--#{$variable-prefix}sidebar-nav-group-indicator, escape-svg($sidebar-nav-group-indicator-icon));
+      background-image: var(--#{$prefix}sidebar-nav-group-indicator);
       background-repeat: no-repeat;
       background-position: center;
       @include transition($sidebar-nav-group-indicator-transition);
@@ -144,14 +146,13 @@
 
   .nav-group-items {
     padding: 0;
-    // overflow-y: hidden;
     list-style: none;
 
     .nav-link {
-      @include ltr-rtl("padding-left", $sidebar-nav-icon-width);
+      @include ltr-rtl("padding-left", var(--#{$prefix}sidebar-nav-icon-width));
 
       .nav-icon {
-        @include ltr-rtl("margin-left", - $sidebar-nav-icon-width);
+        @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-icon-width) * -1));
       }
     }
   }
@@ -159,8 +160,8 @@
   &.compact,
   .compact {
     .nav-link {
-      padding-top: $sidebar-nav-link-padding-y * .5;
-      padding-bottom: $sidebar-nav-link-padding-y * .5;
+      padding-top: calc(var(--#{$prefix}sidebar-nav-link-padding-y) * .5); // stylelint-disable-line function-disallowed-list
+      padding-bottom: calc(var(--#{$prefix}sidebar-nav-link-padding-y) * .5); // stylelint-disable-line function-disallowed-list
     }
   }
 }

package/scss/sidebar/_sidebar.scss

@@ -1,25 +1,83 @@
 .sidebar {
-  --#{$variable-prefix}sidebar-width: #{$sidebar-width};
+  // scss-docs-start sidebar-css-vars
+  --#{$prefix}sidebar-width: #{$sidebar-width};
+  --#{$prefix}sidebar-bg: #{$sidebar-bg};
+  --#{$prefix}sidebar-padding-x: #{$sidebar-padding-x};
+  --#{$prefix}sidebar-padding-y: #{$sidebar-padding-y};
+  --#{$prefix}sidebar-color: #{$sidebar-color};
+  --#{$prefix}sidebar-border-width: #{$sidebar-border-width};
+  --#{$prefix}sidebar-border-color: #{$sidebar-border-color};
+  --#{$prefix}sidebar-brand-color: #{$sidebar-brand-color};
+  --#{$prefix}sidebar-brand-height: #{$sidebar-brand-height};
+  --#{$prefix}sidebar-brand-bg: #{$sidebar-brand-bg};
+  --#{$prefix}sidebar-header-height: #{$sidebar-header-height};
+  --#{$prefix}sidebar-header-bg: #{$sidebar-header-bg};
+  --#{$prefix}sidebar-header-padding-x: #{$sidebar-header-padding-x};
+  --#{$prefix}sidebar-header-padding-y: #{$sidebar-header-padding-y};
+  --#{$prefix}sidebar-footer-bg: #{$sidebar-footer-bg};
+  --#{$prefix}sidebar-footer-height: #{$sidebar-footer-height};
+  --#{$prefix}sidebar-footer-padding-x: #{$sidebar-footer-padding-x};
+  --#{$prefix}sidebar-footer-padding-y: #{$sidebar-footer-padding-y};
+  --#{$prefix}sidebar-toggler-bg: #{$sidebar-toggler-bg};
+  --#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
+  --#{$prefix}sidebar-toggler-indicator: #{escape-svg($sidebar-toggler-indicator-icon)};
+  --#{$prefix}sidebar-toggler-indicator-width: #{$sidebar-toggler-indicator-width};
+  --#{$prefix}sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height};
+  --#{$prefix}sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg};
+  --#{$prefix}sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)};
+
+  --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
+
+  --#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
+  --#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
+  --#{$prefix}sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
+  --#{$prefix}sidebar-nav-title-color: #{$sidebar-nav-title-color};
+  --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};
+  --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};
+  --#{$prefix}sidebar-nav-link-color: #{$sidebar-nav-link-color};
+  --#{$prefix}sidebar-nav-link-bg: #{$sidebar-nav-link-bg};
+  --#{$prefix}sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color};
+  --#{$prefix}sidebar-nav-link-border: #{$sidebar-nav-link-border-width} solid var(--#{$prefix}sidebar-nav-link-border-color);
+  --#{$prefix}sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};
+  --#{$prefix}sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};
+  --#{$prefix}sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};
+  --#{$prefix}sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
+  --#{$prefix}sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};
+  --#{$prefix}sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};
+  --#{$prefix}sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};
+  --#{$prefix}sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};
+  --#{$prefix}sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};
+  --#{$prefix}sidebar-nav-icon-width: #{$sidebar-nav-icon-width};
+  --#{$prefix}sidebar-nav-icon-height: #{$sidebar-nav-icon-height};
+  --#{$prefix}sidebar-nav-icon-font-size: #{$sidebar-nav-icon-font-size};
+  --#{$prefix}sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
+  --#{$prefix}sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
+  --#{$prefix}sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
+  --#{$prefix}sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
+  --#{$prefix}sidebar-nav-group-indicator: #{escape-svg($sidebar-nav-group-indicator-icon)};
+  --#{$prefix}sidebar-nav-group-indicator-hover: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
+  --#{$prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
+  // scss-docs-end sidebar-css-vars
 
   position: relative;
   display: flex;
   // $sidebar-width is the width of the columns
-  flex: 0 0 var(--#{$variable-prefix}sidebar-width);
+  flex: 0 0 var(--#{$prefix}sidebar-width);
   flex-direction: column;
   // put the nav on the left
   order: -1;
-  width: var(--#{$variable-prefix}sidebar-width);
-  padding: $sidebar-padding-y $sidebar-padding-x;
-  color: var(--#{$variable-prefix}sidebar-color, $sidebar-color);
-  background: var(--#{$variable-prefix}sidebar-bg, $sidebar-bg);
-  @include ltr-rtl("border-right", var(--#{$variable-prefix}sidebar-border-width, $sidebar-border-width) solid var(--#{$variable-prefix}sidebar-border-color, $sidebar-border-color));
+  width: var(--#{$prefix}sidebar-width);
+  padding: var(--#{$prefix}sidebar-padding-y) var(--#{$prefix}sidebar-padding-x);
+  color: var(--#{$prefix}sidebar-color);
+  background: var(--#{$prefix}sidebar-bg);
+  @include ltr-rtl("border-right", var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color));
   box-shadow: none;
   @include transition($sidebar-transition);
 
   &:not(.sidebar-end){
     @include ltr-rtl("margin-left", 0);
     ~ * {
-      --#{$variable-prefix}sidebar-occupy-start: #{$sidebar-width};
+      --#{$prefix}sidebar-occupy-start: #{$sidebar-width};
     }
   }
 
@@ -27,7 +85,7 @@
     order: 99;
     @include ltr-rtl("margin-right", 0);
     ~ * {
-      --#{$variable-prefix}sidebar-occupy-end: #{$sidebar-width};
+      --#{$prefix}sidebar-occupy-end: #{$sidebar-width};
     }
   }
 
@@ -37,16 +95,16 @@
 
   @each $width, $value in $sidebar-widths {
     &.sidebar-#{$width} {
-      --#{$variable-prefix}sidebar-width: #{$value};
+      --#{$prefix}sidebar-width: #{$value};
       @include media-breakpoint-up($mobile-breakpoint) {
         &:not(.sidebar-end):not(.hide) {
           ~ * {
-            --#{$variable-prefix}sidebar-occupy-start: #{$value};
+            --#{$prefix}sidebar-occupy-start: #{$value};
           }
         }
         &.sidebar-end:not(.hide) {
           ~ * {
-            --#{$variable-prefix}sidebar-occupy-end: #{$value};
+            --#{$prefix}sidebar-occupy-end: #{$value};
           }
         }
       }
@@ -56,15 +114,15 @@
   @include media-breakpoint-up($mobile-breakpoint) {
     &.hide {
       &:not(.sidebar-end){
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
-          --#{$variable-prefix}sidebar-occupy-start: 0;
+          --#{$prefix}sidebar-occupy-start: 0;
         }
       }
       &.sidebar-end {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
-          --#{$variable-prefix}sidebar-occupy-end: 0;
+          --#{$prefix}sidebar-occupy-end: 0;
         }
       }
     }
@@ -104,21 +162,21 @@
     &:not(.sidebar-end) {
       @include ltr-rtl("left", 0);
       ~ * {
-        --#{$variable-prefix}sidebar-occupy-start: 0;
+        --#{$prefix}sidebar-occupy-start: 0;
       }
     }
 
     &.sidebar-end {
       @include ltr-rtl("right", 0);
       ~ * {
-        --#{$variable-prefix}sidebar-occupy-end: 0;
+        --#{$prefix}sidebar-occupy-end: 0;
       }
     }
   }
 
   @include media-breakpoint-down($mobile-breakpoint) {
     // Some of our components use this property to detect if the sidebar has mobile behavior.
-    --#{$variable-prefix}is-mobile: true;
+    --#{$prefix}is-mobile: true;
     position: fixed;
     top: 0;
     bottom: 0;
@@ -127,21 +185,21 @@
     &:not(.sidebar-end) {
       @include ltr-rtl("left", 0);
       ~ * {
-        --#{$variable-prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
       }
 
       &:not(.show) {
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
       }
     }
     &.sidebar-end {
       @include ltr-rtl("right", 0);
       ~ * {
-        --#{$variable-prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
       }
 
       &:not(.show) {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
       }
     }
   }
@@ -151,9 +209,9 @@
   position: absolute;
   top: 0;
   @include ltr-rtl("right", 0);
-  width: $sidebar-brand-height;
-  height: $sidebar-header-height;
-  color: var(--#{$variable-prefix}sidebar-color, $sidebar-color);
+  width: var(--#{$prefix}sidebar-width);
+  height: var(--#{$prefix}sidebar-header-height);
+  color: var(--#{$prefix}sidebar-color);
   background: transparent;
   border: 0;
 
@@ -168,11 +226,11 @@
 
 .sidebar-brand {
   display: flex;
-  flex: 0 0 $sidebar-brand-height;
+  flex: 0 0 var(--#{$prefix}sidebar-brand-height);
   align-items: center;
   justify-content: center;
-  color: var(--#{$variable-prefix}sidebar-brand-color, $sidebar-brand-color);
-  background: var(--#{$variable-prefix}sidebar-brand-bg, $sidebar-brand-bg);
+  color: var(--#{$prefix}sidebar-brand-color);
+  background: var(--#{$prefix}sidebar-brand-bg);
 
   .sidebar-brand-narrow {
     display: none;
@@ -180,34 +238,34 @@
 }
 
 .sidebar-header {
-  flex: 0 0 $sidebar-header-height;
-  padding: $sidebar-header-padding-y $sidebar-header-padding-x;
+  flex: 0 0 var(--#{$prefix}sidebar-header-height);
+  padding: var(--#{$prefix}sidebar-header-padding-y) var(--#{$prefix}sidebar-header-padding-x);
   text-align: center;
-  background: var(--#{$variable-prefix}sidebar-header-bg, $sidebar-header-bg);
+  background: var(--#{$prefix}sidebar-header-bg);
   @include transition($sidebar-header-height-transition);
 
   .nav-link {
     display: flex;
     align-items: center;
-    min-height: $sidebar-header-height;
+    min-height: var(--#{$prefix}sidebar-header-height);
   }
 }
 
 .sidebar-footer {
-  flex: 0 0 $sidebar-footer-height;
-  padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
-  background: var(--#{$variable-prefix}sidebar-footer-bg, $sidebar-footer-bg);
+  flex: 0 0 var(--#{$prefix}sidebar-footer-height);
+  padding: var(--#{$prefix}sidebar-footer-padding-y) var(--#{$prefix}sidebar-footer-padding-x);
+  background: var(--#{$prefix}sidebar-footer-bg);
   @include transition($sidebar-footer-height-transition);
 }
 
 .sidebar-toggler {
   display: flex;
-  flex: 0 0 $sidebar-toggler-height;
+  flex: 0 0 var(--#{$prefix}sidebar-toggler-height);
   justify-content: flex-end;
   width: inherit;
   padding: 0;
   cursor: pointer;
-  background-color: var(--#{$variable-prefix}sidebar-toggler-bg, $sidebar-toggler-bg);
+  background-color: var(--#{$prefix}sidebar-toggler-bg);
   border: 0;
 
   @include media-breakpoint-down($mobile-breakpoint) {
@@ -216,13 +274,13 @@
 
   &::before {
     display: block;
-    width: $sidebar-toggler-indicator-width;
-    height: $sidebar-toggler-indicator-height;
+    width: var(--#{$prefix}sidebar-toggler-indicator-width);
+    height: var(--#{$prefix}sidebar-toggler-indicator-height);
     content: "";
-    background-image: var(--#{$variable-prefix}sidebar-toggler-indicator, escape-svg($sidebar-toggler-indicator-icon));
+    background-image: var(--#{$prefix}sidebar-toggler-indicator);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: $sidebar-toggler-indicator-height * .25;
+    background-size: calc(var(--#{$prefix}sidebar-toggler-indicator-height) * .25); // stylelint-disable-line function-disallowed-list
     @include transition($sidebar-toggler-transition);
     @include rtl() {
       transform: rotate(-180deg);
@@ -234,9 +292,9 @@
   }
 
   &:hover {
-    background-color: var(--#{$variable-prefix}sidebar-toggler-hover-bg, $sidebar-toggler-hover-bg);
+    background-color: var(--#{$prefix}sidebar-toggler-hover-bg);
     &::before {
-      background-image: var(--#{$variable-prefix}sidebar-toggler-indicator-hover, escape-svg($sidebar-toggler-indicator-hover-icon));
+      background-image: var(--#{$prefix}sidebar-toggler-indicator-hover);
     }
   }
 
@@ -249,19 +307,15 @@
 }
 
 // Backdrop background
+
 .sidebar-backdrop {
+  // scss-docs-start sidebar-backdrop-css-vars
+  --#{$prefix}backdrop-zindex: #{$zindex-sidebar-backdrop};
+  --#{$prefix}backdrop-bg: #{$sidebar-backdrop-bg};
+  --#{$prefix}backdrop-opacity: #{$sidebar-backdrop-opacity};
+  // scss-docs-end sidebar-backdrop-css-vars
+
   @include media-breakpoint-down($mobile-breakpoint) {
-    position: fixed;
-    top: 0;
-    @include ltr-rtl("left", 0);
-    z-index: $zindex-fixed;
-    width: 100vw;
-    height: 100vh;
-    background-color: $sidebar-backdrop-bg;
-    @include transition($sidebar-backdrop-transition);
-
-    // Fade for backdrop
-    &.fade { opacity: 0; }
-    &.show { opacity: $sidebar-backdrop-opacity; }
+    @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
   }
 }