@coreui/coreui 5.1.2 → 5.2.0

package/scss/_variables.scss

@@ -1898,11 +1898,13 @@ $sidebar-brand-bg:                         rgba($black, .2) !default;
 $sidebar-backdrop-bg:                      $black !default;
 $sidebar-backdrop-opacity:                 .5 !default;
 $sidebar-overlaid-box-shadow:              var(--#{$prefix}box-shadow) !default;
+$sidebar-narrow-unfoldable-box-shadow:     var(--#{$prefix}box-shadow) !default;
 // scss-docs-end sidebar-variables
 
 // scss-docs-start sidebar-nav-variables
 $sidebar-nav-padding-y:                       $sidebar-padding-y * .5 !default;
 $sidebar-nav-padding-x:                       $sidebar-padding-x * .5 !default;
+$sidebar-nav-gap:                             1px !default;
 
 $sidebar-nav-title-padding-y:                 .75rem !default;
 $sidebar-nav-title-padding-x:                 1rem !default;
@@ -1982,7 +1984,7 @@ $sidebar-toggler-icon:              url("data:image/svg+xml,%0A%3Csvg xmlns='htt
 $sidebar-toggler-focus-shadow:      $focus-ring-box-shadow !default;
 $sidebar-toggler-hover-color:       var(--#{$prefix}secondary-color) !default;
 $sidebar-toggler-focus-color:       var(--#{$prefix}secondary-color) !default;
-$sidebar-toggler-transition:         transform .15s !default;
+$sidebar-toggler-transition:        transform .15s !default;
 // scss-docs-end sidebar-toggler
 
 // Footer

package/scss/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI #{$file} v5.1.2 (https://coreui.io)
+   * CoreUI #{$file} v5.2.0 (https://coreui.io)
    * Copyright (c) 2024 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */

package/scss/mixins/_grid.scss

@@ -72,7 +72,7 @@
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+        flex: 1 0 0;
       }
 
       .row-cols#{$infix}-auto > * {

package/scss/sidebar/_sidebar-narrow.scss

@@ -1,4 +1,4 @@
-%sidebar-narrow {
+.sidebar-narrow {
   // scss-docs-start sidebar-narrow-css-vars
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
   // scss-docs-end sidebar-narrow-css-vars
@@ -9,10 +9,6 @@
     padding-bottom: var(--#{$prefix}sidebar-toggler-height);
     overflow: visible;
 
-    &.sidebar-fixed {
-      width: var(--#{$prefix}sidebar-narrow-width);
-    }
-
     .sidebar-brand-full {
       display: none;
     }
@@ -32,6 +28,10 @@
       --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
     }
 
+    .nav-link {
+      overflow: hidden;
+    }
+
     .nav-icon {
       flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list
     }
@@ -59,35 +59,19 @@
   }
 }
 
-.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;
-  }
-}
-
 .sidebar-narrow-unfoldable {
-  position: fixed;
+  // scss-docs-start sidebar-narrow-unfoldable-css-vars
+  --#{$prefix}sidebar-narrow-unfoldable-box-shadow: #{$sidebar-narrow-unfoldable-box-shadow};
+  // scss-docs-end sidebar-narrow-unfoldable-css-vars
 
-  &: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
-  }
+  @extend .sidebar-fixed;
 
   &:not(:hover) {
-    @extend %sidebar-narrow;
+    @extend .sidebar-narrow;
   }
 
   &:hover {
+    box-shadow: var(--#{$prefix}sidebar-narrow-unfoldable-box-shadow);
     box-shadow: $box-shadow;
 
     .sidebar-toggler::before {
@@ -98,26 +82,16 @@
       transform: rotate(0deg);
     }
   }
-
-  .nav-link {
-    overflow: hidden;
-  }
 }
 
-// Responsive behavior
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-down($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-    .sidebar:not(.show).sidebar-self-hiding#{$infix} {
-      &.sidebar-narrow,
-      &.sidebar-narrow-unfoldable {
-        &:not(.sidebar-end) {
-          @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
-        }
-        &.sidebar-end {
-          @include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
-        }
-      }
+.sidebar-narrow,
+.sidebar-narrow-unfoldable {
+  @include media-breakpoint-up($mobile-breakpoint) {
+    &:not(.sidebar-end):not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
+    }
+    &.sidebar-end:not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
     }
   }
 }

package/scss/sidebar/_sidebar-nav.scss

@@ -4,6 +4,7 @@
   // scss-docs-start sidebar-nav-css-vars
   --#{$prefix}sidebar-nav-padding-x: #{$sidebar-nav-padding-x};
   --#{$prefix}sidebar-nav-padding-y: #{$sidebar-nav-padding-y};
+  --#{$prefix}sidebar-nav-gap: #{$sidebar-nav-gap};
 
   --#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
   --#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
@@ -71,7 +72,7 @@
   .nav-item + .nav-item,
   .nav-item + .nav-group,
   .nav-group + .nav-item {
-    margin-top: 1px;
+    margin-top: var(--#{$prefix}sidebar-nav-gap);
   }
 
   .nav-title {
@@ -225,7 +226,7 @@
       }
 
       + .show {
-        margin-top: 1px;
+        margin-top: var(--#{$prefix}sidebar-nav-gap);
       }
     }
   }

package/scss/sidebar/_sidebar.scss

@@ -1,5 +1,4 @@
 // stylelint-disable function-disallowed-list
-
 .sidebar {
   // scss-docs-start sidebar-css-vars
   --#{$prefix}sidebar-zindex: #{$zindex-sidebar};
@@ -24,152 +23,118 @@
   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);
-    ~ * {
-      --#{$prefix}sidebar-occupy-start: #{$sidebar-width};
-    }
   }
 
   &.sidebar-end {
     order: 99;
     @include ltr-rtl("margin-right", 0);
-    ~ * {
-      --#{$prefix}sidebar-occupy-end: #{$sidebar-width};
-    }
   }
 
-  @each $width, $value in $sidebar-widths {
-    &.sidebar-#{$width} {
-      --#{$prefix}sidebar-width: #{$value};
-      @include media-breakpoint-up($mobile-breakpoint) {
-        &:not(.sidebar-end):not(.hide) {
-          ~ * {
-            --#{$prefix}sidebar-occupy-start: #{$value};
-          }
-        }
-        &.sidebar-end:not(.hide) {
-          ~ * {
-            --#{$prefix}sidebar-occupy-end: #{$value};
-          }
-        }
+  @include media-breakpoint-up($mobile-breakpoint) {
+    &:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid) {
+      &:not(.sidebar-end) ~ * {
+        --#{$prefix}sidebar-occupy-start: #{$sidebar-width};
+      }
+      &.sidebar-end ~ * {
+        --#{$prefix}sidebar-occupy-end: #{$sidebar-width};
       }
     }
-  }
 
-  @include media-breakpoint-up($mobile-breakpoint) {
     &.hide {
-      &:not(.sidebar-end){
+      &:not(.sidebar-end) {
         @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
-        ~ * {
-          --#{$prefix}sidebar-occupy-start: 0;
-        }
       }
       &.sidebar-end {
         @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
-        ~ * {
-          --#{$prefix}sidebar-occupy-end: 0;
-        }
-      }
-    }
-  }
 
-  &.sidebar-fixed {
-    @include media-breakpoint-up($mobile-breakpoint) {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-
-      &:not(.sidebar-end) {
-        @include ltr-rtl("left", 0);
       }
-
-      &.sidebar-end {
-        @include ltr-rtl("right", 0);
-      }
-    }
-  }
-
-  &.sidebar-sticky {
-    @include media-breakpoint-up($mobile-breakpoint) {
-      position: sticky;
-      top: 0;
-      height: 100vh;
     }
   }
 
-  &.sidebar-overlaid {
-    // scss-docs-start sidebar-overlaid-css-vars
-    --#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
-    // scss-docs-end sidebar-overlaid-css-vars
+  @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-zindex);
 
-    &: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
+
+      &:not(.show) {
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
       }
     }
 
     &.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
+
+      &:not(.show) {
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
       }
     }
+  }
+}
 
-    &.show {
-      box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
+.sidebar-fixed {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: var(--#{$prefix}sidebar-zindex);
 
-      &:not(.sidebar-end) {
-        @include ltr-rtl("margin-left", 0);
-      }
+  &:not(.sidebar-end) {
+    @include ltr-rtl("left", 0);
+  }
 
-      &.sidebar-end {
-        @include ltr-rtl("margin-right", 0);
-      }
-    }
+  &.sidebar-end {
+    @include ltr-rtl("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;
+.sidebar-overlaid {
+  // scss-docs-start sidebar-overlaid-css-vars
+  --#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
+  // scss-docs-end sidebar-overlaid-css-vars
 
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: var(--#{$prefix}sidebar-zindex);
+  @extend .sidebar-fixed;
 
-    &:not(.sidebar-end) {
-      @include ltr-rtl("left", 0);
-      ~ * {
-        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
-      }
+  &:not(.sidebar-end){
+    @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
+  }
 
-      &:not(.show) {
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
-      }
+  &.sidebar-end {
+    @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+  }
+
+  &.show {
+    box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
+
+    &:not(.sidebar-end) {
+      @include ltr-rtl("margin-left", 0);
     }
+
     &.sidebar-end {
-      @include ltr-rtl("right", 0);
-      ~ * {
-        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
-      }
+      @include ltr-rtl("margin-right", 0);
+    }
+  }
+}
 
-      &:not(.show) {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+@each $width, $value in $sidebar-widths {
+  .sidebar-#{$width} {
+    --#{$prefix}sidebar-width: #{$value};
+
+    @include media-breakpoint-up($mobile-breakpoint) {
+      &:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid) {
+        &:not(.sidebar-end) ~ * {
+          --#{$prefix}sidebar-occupy-start: #{$value};
+        }
+        &.sidebar-end ~ * {
+          --#{$prefix}sidebar-occupy-end: #{$value};
+        }
       }
     }
   }

package/scss/themes/bootstrap/bootstrap.rtl.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 $enable-ltr: false !default;
 $enable-rtl: true !default;
 

package/scss/themes/bootstrap/bootstrap.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 @import "mixins/banner";
 @include bsBanner("");
 

package/scss/themes/bootstrap/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI for Bootstrap #{$file} v5.1.2 (https://coreui.io/bootstrap/)
+   * CoreUI for Bootstrap #{$file} v5.2.0 (https://coreui.io/bootstrap/)
    * Copyright (c) 2024 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */

package/scss/themes/bootstrap/_variables.scss

@@ -1,2 +0,0 @@
-$variable-prefix:             cui- !default; // Deprecated in v4.2.6 for the shorter `$prefix`
-$prefix:                      $variable-prefix !default;