@coreui/coreui 5.6.1 → 5.7.1

package/scss/_variables-dark.scss

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "functions/color" as *;
+@use "functions/color-translucent" as *;
 @use "variables" as *;
 
 // Dark color mode variables
@@ -110,7 +111,7 @@ $body-tertiary-color-dark:          rgba($white, .38) !default;
 $body-tertiary-bg-dark:             color.mix($gray-800-dark, #212631, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-800-dark !default;
-$border-color-translucent-dark:     rgba($white, .1) !default;
+$border-color-translucent-dark:     color-translucent($gray-800-dark, .175, $body-bg-dark) !default;
 $headings-color-dark:               inherit !default;
 $link-color-dark:                   $primary-dark !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;

package/scss/_variables.scss

@@ -4,6 +4,7 @@
 @use "functions/assert-starts-at-zero" as *;
 @use "functions/color" as *;
 @use "functions/color-contrast-variables" as *;
+@use "functions/color-translucent" as *;
 @use "functions/math" as *;
 @use "functions/to-rgb" as *;
 
@@ -586,7 +587,7 @@ $border-widths: (
 
 $border-style:                solid !default;
 $border-color:                $gray-300 !default;
-$border-color-translucent:    rgba($black, .175) !default;
+$border-color-translucent:    color-translucent($gray-300, .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
@@ -1928,7 +1929,6 @@ $sidebar-widths: (
   lg: 20rem,
   xl: 24rem
 ) !default;
-$sidebar-narrow-width:                     4rem !default;
 $sidebar-padding-y:                        $spacer !default;
 $sidebar-padding-x:                        $spacer !default;
 $sidebar-color:                            var(--#{$prefix}body-color) !default;
@@ -1939,6 +1939,9 @@ $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-width:                     4rem !default;
+$sidebar-narrow-padding-x:                 .5rem !default;
 $sidebar-narrow-unfoldable-box-shadow:     var(--#{$prefix}box-shadow) !default;
 // scss-docs-end sidebar-variables
 
@@ -1980,13 +1983,13 @@ $sidebar-nav-link-icon-bullet-border-color:   var(--#{$prefix}tertiary-color) !d
 $sidebar-nav-link-icon-bullet-border-radius:  50rem !default;
 
 $sidebar-nav-link-hover-color:                        var(--#{$prefix}emphasis-color) !default;
-$sidebar-nav-link-hover-bg:                           var(--#{$prefix}tertiary-bg) !default;
+$sidebar-nav-link-hover-bg:                           var(--#{$prefix}tertiary-bg-translucent) !default;
 $sidebar-nav-link-hover-icon-color:                   var(--#{$prefix}body-color) !default;
 $sidebar-nav-link-hover-icon-bullet-bg:               transparent !default;
 $sidebar-nav-link-hover-icon-bullet-border-color:     var(--#{$prefix}body-color) !default;
 
 $sidebar-nav-link-active-color:                       var(--#{$prefix}emphasis-color) !default;
-$sidebar-nav-link-active-bg:                          var(--#{$prefix}tertiary-bg) !default;
+$sidebar-nav-link-active-bg:                          var(--#{$prefix}tertiary-bg-translucent) !default;
 $sidebar-nav-link-active-icon-color:                  var(--#{$prefix}emphasis-color) !default;
 $sidebar-nav-link-active-icon-bullet-bg:              transparent !default;
 $sidebar-nav-link-active-icon-bullet-border-color:    var(--#{$prefix}emphasis-color) !default;
@@ -2012,6 +2015,11 @@ $sidebar-nav-group-indicator-icon:            url("data:image/svg+xml,<svg xmlns
 $sidebar-nav-group-indicator-hover-color:     $sidebar-nav-link-hover-color !default;
 $sidebar-nav-group-indicator-hover-icon:      $sidebar-nav-group-indicator-icon !default;
 $sidebar-nav-group-indicator-transition:      transform .15s !default;
+
+$sidebar-nav-tree-group-border-color:          var(--#{$prefix}border-color) !default;
+$sidebar-nav-tree-link-icon-bullet-bg:         var(--#{$prefix}border-color) !default;
+$sidebar-nav-tree-link-hover-icon-bullet-bg:   var(--#{$prefix}border-color) !default;
+$sidebar-nav-tree-link-active-icon-bullet-bg:  var(--#{$prefix}border-color) !default;
 // scss-docs-end sidebar-nav-variables
 
 // scss-docs-start sidebar-toggler

package/scss/coreui.scss

@@ -46,6 +46,7 @@
 @forward "footer";
 @forward "header";
 @forward "icon";
+@forward "search-button";
 @forward "sidebar";
 
 // Helpers

package/scss/functions/_color-translucent.scss

@@ -0,0 +1,33 @@
+@use "sass:color";
+@use "sass:math";
+
+@function color-translucent($target-color, $alpha: .1, $bg-color: #fff) {
+  @if color.alpha($target-color) < 1 {
+    @return $target-color;
+  }
+
+  @if $alpha <= 0 or $alpha > 1 {
+    @error "Alpha must be greater than 0 and less than or equal to 1.";
+  }
+
+  $r: math.div(
+    color.channel($target-color, "red") - color.channel($bg-color, "red") * (1 - $alpha),
+    $alpha
+  );
+
+  $g: math.div(
+    color.channel($target-color, "green") - color.channel($bg-color, "green") * (1 - $alpha),
+    $alpha
+  );
+
+  $b: math.div(
+    color.channel($target-color, "blue") - color.channel($bg-color, "blue") * (1 - $alpha),
+    $alpha
+  );
+
+  @if $r < 0 or $r > 255 or $g < 0 or $g > 255 or $b < 0 or $b > 255 {
+    @error "Cannot reproduce #{$target-color} on #{$bg-color} with alpha #{$alpha}. Try a higher alpha.";
+  }
+
+  @return rgba(round($r), round($g), round($b), $alpha);
+}

package/scss/functions/_contrast-ratio.scss

@@ -19,9 +19,9 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
   $rgb: (
-    "r": color.channel($color, "red"),
-    "g": color.channel($color, "green"),
-    "b": color.channel($color, "blue")
+    "r": color.channel($color, "red", rgb),
+    "g": color.channel($color, "green", rgb),
+    "b": color.channel($color, "blue", rgb)
   );
 
   @each $name, $value in $rgb {

package/scss/sidebar/_sidebar-narrow.scss

@@ -6,6 +6,7 @@
 .sidebar-narrow {
   // scss-docs-start sidebar-narrow-css-vars
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
+  --#{$prefix}sidebar-padding-x: #{$sidebar-narrow-padding-x};
   // scss-docs-end sidebar-narrow-css-vars
 
   @include media-breakpoint-up($mobile-breakpoint) {
@@ -14,18 +15,9 @@
     padding-bottom: var(--#{$prefix}sidebar-toggler-height);
     overflow: visible;
 
-    .sidebar-brand-full {
-      display: none;
-    }
-
-    .sidebar-brand-narrow {
-      display: block;
-    }
-
     .sidebar-header {
       justify-content: center;
-      padding-right: 0;
-      padding-left: 0;
+      padding-inline: 0;
     }
 
     .sidebar-nav {
@@ -41,11 +33,9 @@
       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
     }
 
-    .d-narrow-none,
     .nav-label,
     .nav-title,
     .nav-group-items,
-    .nav-group.show .nav-group-items,
     .sidebar-form {
       height: 0 !important; // stylelint-disable-line declaration-no-important
       padding: 0 !important; // stylelint-disable-line declaration-no-important
@@ -54,6 +44,12 @@
       opacity: 0;
     }
 
+    .d-narrow-none, // deprecated, TODO: remove in v6.0.0
+    .sidebar-brand-full, // deprecated, TODO: remove in v6.0.0
+    .d-sidebar-narrow-none {
+      display: none !important // stylelint-disable-line declaration-no-important
+    }
+
     .sidebar-toggler::before {
       @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
     }
@@ -69,6 +65,10 @@
   --#{$prefix}sidebar-narrow-unfoldable-box-shadow: #{$sidebar-narrow-unfoldable-box-shadow};
   // scss-docs-end sidebar-narrow-unfoldable-css-vars
 
+  .d-sidebar-narrow-unfoldable-none {
+    display: none !important // stylelint-disable-line declaration-no-important
+  }
+
   @extend .sidebar-fixed;
 
   &:not(:hover) {
@@ -77,7 +77,6 @@
 
   &:hover {
     box-shadow: var(--#{$prefix}sidebar-narrow-unfoldable-box-shadow);
-    box-shadow: $box-shadow;
 
     .sidebar-toggler::before {
       @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
@@ -100,3 +99,12 @@
     }
   }
 }
+
+.sidebar:not(.sidebar-narrow) .sidebar-brand-narrow, // deprecated, TODO: remove in v6.0.0
+.sidebar:not(.sidebar-narrow) .d-sidebar-narrow {
+  display: none !important; // stylelint-disable-line declaration-no-important
+}
+
+.sidebar:not(.sidebar-narrow-unfoldable) .d-sidebar-narrow-unfoldable {
+  display: none !important; // stylelint-disable-line declaration-no-important
+}

package/scss/sidebar/_sidebar-nav.scss

@@ -75,7 +75,9 @@
 
   .nav-item + .nav-item,
   .nav-item + .nav-group,
-  .nav-group + .nav-item {
+  .nav-group + .nav-item,
+  .nav-group + .nav-group,
+  .nav-group-items {
     margin-top: var(--#{$prefix}sidebar-nav-gap);
   }
 
@@ -111,8 +113,8 @@
       }
 
       .nav-icon-bullet {
-        background: var(--#{$prefix}sidebar-link-active-icon-bullet-bg);
-        border-color: var(--#{$prefix}sidebar-link-active-icon-bullet-border-color);
+        background: var(--#{$prefix}sidebar-nav-link-active-icon-bullet-bg);
+        border-color: var(--#{$prefix}sidebar-nav-link-active-icon-bullet-border-color);
       }
     }
 
@@ -127,26 +129,8 @@
       }
 
       .nav-icon-bullet {
-        background: var(--#{$prefix}sidebar-link-disabled-icon-bullet-bg);
-        border-color: var(--#{$prefix}sidebar-link-disabled-icon-bullet-border-color);
-      }
-
-      &:hover {
-        color: var(--#{$prefix}sidebar-nav-link-disabled-color);
-
-        .nav-icon {
-          color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color);
-        }
-
-        .nav-icon-bullet {
-          background: var(--#{$prefix}sidebar-link-disabled-icon-bullet-bg);
-          border-color: var(--#{$prefix}sidebar-link-disabled-icon-bullet-border-color);
-        }
-
-        &.nav-dropdown-toggle::after {
-          background-color: var(--#{$prefix}sidebar-nav-group-indicator-hover-color);
-          mask-image: var(--#{$prefix}sidebar-nav-group-indicator-hover-icon);
-        }
+        background: var(--#{$prefix}sidebar-nav-link-disabled-icon-bullet-bg);
+        border-color: var(--#{$prefix}sidebar-nav-link-disabled-icon-bullet-border-color);
       }
     }
 
@@ -161,13 +145,8 @@
         }
 
         .nav-icon-bullet {
-          background: var(--#{$prefix}sidebar-link-hover-icon-bullet-bg);
-          border-color: var(--#{$prefix}sidebar-link-hover-icon-bullet-border-color);
-        }
-
-        &.nav-group-toggle::after {
-          background-color: var(--#{$prefix}sidebar-nav-group-indicator-hover-color);
-          mask-image: var(--#{$prefix}sidebar-nav-group-indicator-hover-icon);
+          background: var(--#{$prefix}sidebar-nav-link-hover-icon-bullet-bg);
+          border-color: var(--#{$prefix}sidebar-nav-link-hover-icon-bullet-border-color);
         }
       }
     }
@@ -203,19 +182,15 @@
   }
 
   .nav-group {
-    position: relative;
     border: var(--#{$prefix}sidebar-nav-group-border-width) solid var(--#{$prefix}sidebar-nav-group-border-color);
     @include border-radius(var(--#{$prefix}sidebar-nav-group-border-radius));
     @include transition($sidebar-nav-group-transition);
 
-    .nav-group-items {
-      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);
-    }
-
-    &:not(.show) .nav-group-items {
-      display: none;
+    &:not(.show) {
+      .nav-group-items,
+      .nav-group-toggle-indicator .show {
+        display: none;
+      }
     }
 
     &.show {
@@ -225,12 +200,13 @@
         color: var(--#{$prefix}sidebar-nav-group-toggle-show-color);
       }
 
-      > .nav-group-toggle::after {
+      > .nav-group-toggle:not(:has(.nav-group-toggle-indicator))::after {
         transform: rotate(180deg);
       }
 
-      + .show {
-        margin-top: var(--#{$prefix}sidebar-nav-gap);
+      // stylelint-disable-next-line selector-max-class, selector-max-compound-selectors
+      > .nav-group-toggle .nav-group-toggle-indicator .hide {
+        display: none;
       }
     }
   }
@@ -238,7 +214,7 @@
   .nav-group-toggle {
     cursor: pointer;
 
-    &::after {
+    &:not(:has(.nav-group-toggle-indicator))::after {
       display: block;
       flex: 0 12px;
       height: 12px;
@@ -248,11 +224,25 @@
       mask-image: var(--#{$prefix}sidebar-nav-group-indicator-icon);
       @include transition($sidebar-nav-group-indicator-transition);
     }
+
+    @media (hover: hover), (-ms-high-contrast: none) {
+      &:hover:not(:has(.nav-group-toggle-indicator))::after {
+        background-color: var(--#{$prefix}sidebar-nav-group-indicator-hover-color);
+        mask-image: var(--#{$prefix}sidebar-nav-group-indicator-hover-icon);
+      }
+    }
+  }
+
+  .nav-group-toggle-indicator {
+    margin-inline-start: auto;
+    color: var(--#{$prefix}sidebar-nav-group-indicator-color);
   }
 
   .nav-group-items {
-    padding: 0;
+    padding: var(--#{$prefix}sidebar-nav-group-items-padding-y) var(--#{$prefix}sidebar-nav-group-items-padding-x);
+    overflow: hidden;
     list-style: none;
+    @include transition($sidebar-nav-group-items-transition);
 
     .nav-link {
       padding-inline-start: calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)); // stylelint-disable-line function-disallowed-list
@@ -269,4 +259,36 @@
       --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-compact-nav-link-padding-y};
     }
   }
+
+  &.sidebar-nav-tree {
+    // scss-docs-start sidebar-nav-tree-css-vars
+    --#{$prefix}sidebar-nav-tree-group-border-color: #{$sidebar-nav-tree-group-border-color};
+    --#{$prefix}sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-tree-link-icon-bullet-bg};
+    --#{$prefix}sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-tree-link-hover-icon-bullet-bg};
+    --#{$prefix}sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-tree-link-active-icon-bullet-bg};
+    // scss-docs-end sidebar-nav-tree-css-vars
+
+    .nav-group .nav-group-items {
+      $indent: calc((var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) / 2); // stylelint-disable-line function-disallowed-list
+
+      position: relative;
+      z-index: 0;
+      padding-inline-start: $indent;
+
+      &::before {
+        position: absolute;
+        inset-inline-start: calc($indent + 1.5px); // stylelint-disable-line function-disallowed-list
+        top: 0;
+        z-index: -1;
+        height: 100%;
+        content: "";
+        border-inline-start: 1px solid var(--#{$prefix}sidebar-nav-tree-group-border-color);
+      }
+
+      // stylelint-disable-next-line selector-max-class
+      .nav-link {
+        margin-inline-start: calc(-1 * $indent); // stylelint-disable-line function-disallowed-list
+      }
+    }
+  }
 }

package/scss/sidebar/_sidebar.scss

@@ -32,7 +32,7 @@
   box-shadow: none;
   @include transition($sidebar-transition);
 
-  &:not(.sidebar-end){
+  &:not(.sidebar-end) {
     margin-inline-start: 0;
   }
 
@@ -152,10 +152,6 @@
 .sidebar-brand {
   color: var(--#{$prefix}sidebar-brand-color);
   white-space: nowrap;
-
-  .sidebar-brand-narrow {
-    display: none;
-  }
 }
 
 .sidebar-header {
@@ -229,7 +225,6 @@
   }
 
   &:focus {
-    position: relative;
     outline: 0;
     box-shadow: var(--#{$prefix}sidebar-toggler-focus-shadow);