Fix: sidebar-occupy-start/end overwrote sidebar-occupy-start/end: 0 w…

…hen hidden (.hide or mobile), because of !important, resulting in main content being blank padded when sidebar was hidden.
coreui · Oct 25, 2024 · c47d442 · c47d442
1 parent a490cb1
commit c47d442
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/scss/sidebar/_sidebar-narrow.scss b/scss/sidebar/_sidebar-narrow.scss
@@ -59,14 +59,20 @@
   }
 }
 
+.sidebar-narrow,
+.sidebar-narrow-unfoldable {
+  @include media-breakpoint-up($mobile-breakpoint) {
+    &:not(.sidebar-end):not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
+    }
+    &.sidebar-end:not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
+    }
+  }
+}
+
 .sidebar-narrow {
   @extend %sidebar-narrow;
-  &:not(.sidebar-end) ~ * {
-    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-  &.sidebar-end ~ * {
-    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
 
   .nav-link {
     overflow: hidden;
@@ -76,13 +82,6 @@
 .sidebar-narrow-unfoldable {
   position: fixed;
 
-  &:not(.sidebar-end) ~ * {
-    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-  &.sidebar-end ~ * {
-    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-
   &:not(:hover) {
     @extend %sidebar-narrow;
   }

diff --git a/scss/sidebar/_sidebar.scss b/scss/sidebar/_sidebar.scss
@@ -69,13 +69,13 @@
       &:not(.sidebar-end){
         @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
-          --#{$prefix}sidebar-occupy-start: 0;
+          --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line declaration-no-important
         }
       }
       &.sidebar-end {
         @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
-          --#{$prefix}sidebar-occupy-end: 0;
+          --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line declaration-no-important
         }
       }
     }
@@ -119,15 +119,15 @@
       @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
+        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line declaration-no-important
       }
     }
 
     &.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
+        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line declaration-no-important
       }
     }
 
@@ -157,7 +157,7 @@
     &:not(.sidebar-end) {
       @include ltr-rtl("left", 0);
       ~ * {
-        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line declaration-no-important
       }
 
       &:not(.show) {
@@ -167,7 +167,7 @@
     &.sidebar-end {
       @include ltr-rtl("right", 0);
       ~ * {
-        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
+        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line declaration-no-important
       }
 
       &:not(.show) {