@coreui/coreui 5.0.0-alpha.3 → 5.0.0-beta.1

package/scss/sidebar/_sidebar.scss

@@ -2,6 +2,7 @@
 
 .sidebar {
   // scss-docs-start sidebar-css-vars
+  --#{$prefix}sidebar-zindex: #{$zindex-sidebar};
   --#{$prefix}sidebar-width: #{$sidebar-width};
   --#{$prefix}sidebar-bg: #{$sidebar-bg};
   --#{$prefix}sidebar-padding-x: #{$sidebar-padding-x};
@@ -9,7 +10,6 @@
   --#{$prefix}sidebar-color: #{$sidebar-color};
   --#{$prefix}sidebar-brand-color: #{$sidebar-brand-color};
   --#{$prefix}sidebar-brand-bg: #{$sidebar-brand-bg};
-  --#{$prefix}sidebar-overlaid-zindex: #{$zindex-sidebar-overlaid};
   // scss-docs-end sidebar-css-vars
 
   position: relative;
@@ -25,6 +25,13 @@
   box-shadow: none;
   @include transition($sidebar-transition);
 
+  &.sidebar-fixed,
+  &.sidebar-narrow,
+  &.sidebar-narrow-unfoldable,
+  &.sidebar-overlaid {
+    z-index: var(--#{$prefix}sidebar-zindex);
+  }
+
   &:not(.sidebar-end){
     @include ltr-rtl("margin-left", 0);
     ~ * {
@@ -100,17 +107,17 @@
   }
 
   &.sidebar-overlaid {
+    // scss-docs-start sidebar-css-vars
+    --#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
+    // scss-docs-end sidebar-css-vars
+
     position: fixed;
     top: 0;
     bottom: 0;
-    z-index: var(--#{$prefix}sidebar-overlaid-zindex);
 
-    &:not(.hide) {
-      box-shadow: $box-shadow;
-    }
-
-    &:not(.sidebar-end) {
+    &:not(.sidebar-end){
       @include ltr-rtl("left", 0);
+      @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
       ~ * {
         --#{$prefix}sidebar-occupy-start: 0 !important;  // stylelint-disable-line
       }
@@ -118,19 +125,33 @@
 
     &.sidebar-end {
       @include ltr-rtl("right", 0);
+      @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
       ~ * {
         --#{$prefix}sidebar-occupy-end: 0 !important;  // stylelint-disable-line
       }
     }
+
+    &.show {
+      box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
+
+      &:not(.sidebar-end) {
+        @include ltr-rtl("margin-left", 0);
+      }
+  
+      &.sidebar-end {
+        @include ltr-rtl("margin-right", 0);
+      }
+    }
   }
 
   @include media-breakpoint-down($mobile-breakpoint) {
     // Some of our components use this property to detect if the sidebar has mobile behavior.
     --#{$prefix}is-mobile: true;
+
     position: fixed;
     top: 0;
     bottom: 0;
-    z-index: var(--#{$prefix}sidebar-overlaid-zindex);
+    z-index: var(--#{$prefix}sidebar-zindex);
 
     &:not(.sidebar-end) {
       @include ltr-rtl("left", 0);