@coreui/coreui 5.6.1 → 5.7.0

package/dist/css/coreui.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * CoreUI  v5.6.1 (https://coreui.io)
+ * CoreUI  v5.7.0 (https://coreui.io)
  * Copyright (c) 2026 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */
@@ -100,6 +100,7 @@
   --cui-tertiary-color-rgb: 37, 42.92, 54.02;
   --cui-tertiary-bg: #f3f4f7;
   --cui-tertiary-bg-rgb: 243, 244, 247;
+  --cui-tertiary-bg-translucent: rgba(135, 145, 175, 0.1);
   --cui-body-color-dark: rgba(255, 255, 255, 0.87);
   --cui-body-color-rgb-dark: 255, 255, 255;
   --cui-body-bg-dark: #212631;
@@ -132,7 +133,7 @@
   --cui-border-width: 1px;
   --cui-border-style: solid;
   --cui-border-color: #dbdfe6;
-  --cui-border-color-translucent: rgba(8, 10, 12, 0.175);
+  --cui-border-color-translucent: rgba(49, 72, 112, 0.175);
   --cui-border-radius: 0.375rem;
   --cui-border-radius-sm: 0.25rem;
   --cui-border-radius-lg: 0.5rem;
@@ -174,6 +175,7 @@
   --cui-tertiary-color-rgb: 255, 255, 255;
   --cui-tertiary-bg: rgb(41.5, 48, 61);
   --cui-tertiary-bg-rgb: 41.5, 48, 61;
+  --cui-tertiary-bg-translucent: rgba(118, 138, 169, 0.1);
   --cui-high-emphasis: rgba(255, 255, 255, 0.87);
   --cui-medium-emphasis: rgba(255, 255, 255, 0.6);
   --cui-disabled: rgba(255, 255, 255, 0.38);
@@ -235,7 +237,7 @@
   --cui-highlight-color: rgba(255, 255, 255, 0.87);
   --cui-highlight-bg: rgb(102, 77.2, 2.8);
   --cui-border-color: #323a49;
-  --cui-border-color-translucent: rgba(255, 255, 255, 0.1);
+  --cui-border-color-translucent: rgba(130, 152, 186, 0.175);
   --cui-form-valid-color: rgb(117, 183, 152.4);
   --cui-form-valid-border-color: rgb(117, 183, 152.4);
   --cui-form-invalid-color: rgb(234, 133.8, 143.4);
@@ -8360,6 +8362,88 @@ textarea.form-control-lg {
   font-size: 9rem;
 }
 
+.search-button {
+  --cui-search-button-height: calc(1.5em + 0.75rem + calc(var(--cui-border-width) * 2));
+  --cui-search-button-padding-x: 0.75rem;
+  --cui-search-button-font-family: ;
+  --cui-search-button-font-size: 1rem;
+  --cui-search-button-font-weight: 400;
+  --cui-search-button-color: var(--cui-secondary-color);
+  --cui-search-button-bg: var(--cui-body-bg);
+  --cui-search-button-border-width: var(--cui-border-width);
+  --cui-search-button-border-color: var(--cui-border-color);
+  --cui-search-button-border-radius: var(--cui-border-radius);
+  --cui-search-button-box-shadow: var(--cui-box-shadow-inset);
+  --cui-search-button-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  --cui-search-button-focus-color: var(--cui-body-color);
+  --cui-search-button-focus-bg: var(--cui-body-bg);
+  --cui-search-button-focus-border-color: rgb(171.5, 170.5, 234.5);
+  --cui-search-button-focus-box-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
+  --cui-search-button-icon-size: 1.125rem;
+  --cui-search-button-keys-gap: 0.25rem;
+  --cui-search-button-key-width: 1.5rem;
+  --cui-search-button-key-height: 1.5rem;
+  --cui-search-button-key-padding-inline: 0.25rem;
+  --cui-search-button-key-font-size: 0.75rem;
+  --cui-search-button-key-bg: var(--cui-tertiary-bg);
+  --cui-search-button-key-border-radius: var(--cui-border-radius-sm);
+  --cui-search-button-key-active-bg: var(--cui-secondary-bg);
+  --cui-search-button-placeholder-margin-inline: 0.55rem 2rem;
+  display: flex;
+  align-items: center;
+  height: var(--cui-search-button-height);
+  padding-inline: var(--cui-search-button-padding-x);
+  font-family: var(--cui-search-button-font-family);
+  font-size: var(--cui-search-button-font-size);
+  font-weight: var(--cui-search-button-font-weight);
+  color: var(--cui-search-button-color);
+  background-color: var(--cui-search-button-bg);
+  border: var(--cui-search-button-border-width) solid var(--cui-search-button-border-color);
+  border-radius: var(--cui-search-button-border-radius);
+  transition: var(--cui-search-button-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .search-button {
+    transition: none;
+  }
+}
+.search-button:focus {
+  color: var(--cui-search-button-focus-color);
+  background-color: var(--cui-search-button-focus-bg);
+  border-color: var(--cui-search-button-focus-border-color);
+  outline: 0;
+  box-shadow: var(--cui-search-button-focus-box-shadow);
+}
+
+.search-button-icon {
+  width: var(--cui-search-button-icon-size);
+  height: var(--cui-search-button-icon-size);
+}
+
+.search-button-keys {
+  display: inline-flex;
+  gap: var(--cui-search-button-keys-gap);
+}
+
+.search-button-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--cui-search-button-key-width);
+  height: var(--cui-search-button-key-height);
+  padding-inline: var(--cui-search-button-key-padding-inline);
+  font-size: var(--cui-search-button-key-font-size);
+  background-color: var(--cui-search-button-key-bg);
+  border-radius: var(--cui-search-button-key-border-radius);
+}
+.search-button-key.active {
+  background-color: var(--cui-search-button-key-active-bg);
+}
+
+.search-button-placeholder {
+  margin-inline: var(--cui-search-button-placeholder-margin-inline);
+}
+
 .sidebar {
   --cui-sidebar-zindex: 1035;
   --cui-sidebar-width: 16rem;
@@ -8510,9 +8594,6 @@ textarea.form-control-lg {
   color: var(--cui-sidebar-brand-color);
   white-space: nowrap;
 }
-.sidebar-brand .sidebar-brand-narrow {
-  display: none;
-}
 
 .sidebar-header {
   display: flex;
@@ -8582,7 +8663,6 @@ textarea.form-control-lg {
   background-color: var(--cui-sidebar-toggler-hover-color);
 }
 .sidebar-toggler:focus {
-  position: relative;
   outline: 0;
   box-shadow: var(--cui-sidebar-toggler-focus-shadow);
 }
@@ -8648,10 +8728,10 @@ textarea.form-control-lg {
   --cui-sidebar-nav-link-border-radius: var(--cui-border-radius);
   --cui-sidebar-nav-link-border-width: 0;
   --cui-sidebar-nav-link-active-color: var(--cui-emphasis-color);
-  --cui-sidebar-nav-link-active-bg: var(--cui-tertiary-bg);
+  --cui-sidebar-nav-link-active-bg: var(--cui-tertiary-bg-translucent);
   --cui-sidebar-nav-link-disabled-color: var(--cui-tertiary-color);
   --cui-sidebar-nav-link-hover-color: var(--cui-emphasis-color);
-  --cui-sidebar-nav-link-hover-bg: var(--cui-tertiary-bg);
+  --cui-sidebar-nav-link-hover-bg: var(--cui-tertiary-bg-translucent);
   --cui-sidebar-nav-link-icon-margin: 0.75rem;
   --cui-sidebar-nav-link-icon-color: var(--cui-tertiary-color);
   --cui-sidebar-nav-link-icon-width: 1.25rem;
@@ -8675,8 +8755,6 @@ textarea.form-control-lg {
   --cui-sidebar-nav-group-border-width: 0;
   --cui-sidebar-nav-group-border-radius: var(--cui-border-radius);
   --cui-sidebar-nav-group-border-color: transparent;
-  --cui-sidebar-nav-group-items-padding-y: 0;
-  --cui-sidebar-nav-group-items-padding-x: 0;
   --cui-sidebar-nav-group-indicator-color: var(--cui-tertiary-color);
   --cui-sidebar-nav-group-indicator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
   --cui-sidebar-nav-group-indicator-hover-color: var(--cui-emphasis-color);
@@ -8694,7 +8772,9 @@ textarea.form-control-lg {
 }
 .sidebar-nav .nav-item + .nav-item,
 .sidebar-nav .nav-item + .nav-group,
-.sidebar-nav .nav-group + .nav-item {
+.sidebar-nav .nav-group + .nav-item,
+.sidebar-nav .nav-group + .nav-group,
+.sidebar-nav .nav-group-items {
   margin-top: var(--cui-sidebar-nav-gap);
 }
 .sidebar-nav .nav-title {
@@ -8737,8 +8817,8 @@ textarea.form-control-lg {
   color: var(--cui-sidebar-nav-link-active-icon-color);
 }
 .sidebar-nav .nav-link.active .nav-icon-bullet {
-  background: var(--cui-sidebar-link-active-icon-bullet-bg);
-  border-color: var(--cui-sidebar-link-active-icon-bullet-border-color);
+  background: var(--cui-sidebar-nav-link-active-icon-bullet-bg);
+  border-color: var(--cui-sidebar-nav-link-active-icon-bullet-border-color);
 }
 .sidebar-nav .nav-link.disabled {
   color: var(--cui-sidebar-nav-link-disabled-color);
@@ -8750,23 +8830,8 @@ textarea.form-control-lg {
   color: var(--cui-sidebar-nav-link-disabled-icon-color);
 }
 .sidebar-nav .nav-link.disabled .nav-icon-bullet {
-  background: var(--cui-sidebar-link-disabled-icon-bullet-bg);
-  border-color: var(--cui-sidebar-link-disabled-icon-bullet-border-color);
-}
-.sidebar-nav .nav-link.disabled:hover {
-  color: var(--cui-sidebar-nav-link-disabled-color);
-}
-.sidebar-nav .nav-link.disabled:hover .nav-icon {
-  color: var(--cui-sidebar-nav-link-disabled-icon-color);
-}
-.sidebar-nav .nav-link.disabled:hover .nav-icon-bullet {
-  background: var(--cui-sidebar-link-disabled-icon-bullet-bg);
-  border-color: var(--cui-sidebar-link-disabled-icon-bullet-border-color);
-}
-.sidebar-nav .nav-link.disabled:hover.nav-dropdown-toggle::after {
-  background-color: var(--cui-sidebar-nav-group-indicator-hover-color);
-  -webkit-mask-image: var(--cui-sidebar-nav-group-indicator-hover-icon);
-  mask-image: var(--cui-sidebar-nav-group-indicator-hover-icon);
+  background: var(--cui-sidebar-nav-link-disabled-icon-bullet-bg);
+  border-color: var(--cui-sidebar-nav-link-disabled-icon-bullet-border-color);
 }
 @media (hover: hover), (-ms-high-contrast: none) {
   .sidebar-nav .nav-link:hover {
@@ -8778,13 +8843,8 @@ textarea.form-control-lg {
     color: var(--cui-sidebar-nav-link-hover-icon-color);
   }
   .sidebar-nav .nav-link:hover .nav-icon-bullet {
-    background: var(--cui-sidebar-link-hover-icon-bullet-bg);
-    border-color: var(--cui-sidebar-link-hover-icon-bullet-border-color);
-  }
-  .sidebar-nav .nav-link:hover.nav-group-toggle::after {
-    background-color: var(--cui-sidebar-nav-group-indicator-hover-color);
-    -webkit-mask-image: var(--cui-sidebar-nav-group-indicator-hover-icon);
-    mask-image: var(--cui-sidebar-nav-group-indicator-hover-icon);
+    background: var(--cui-sidebar-nav-link-hover-icon-bullet-bg);
+    border-color: var(--cui-sidebar-nav-link-hover-icon-bullet-border-color);
   }
 }
 .sidebar-nav .nav-icon {
@@ -8819,7 +8879,6 @@ textarea.form-control-lg {
   overflow: hidden;
 }
 .sidebar-nav .nav-group {
-  position: relative;
   border: var(--cui-sidebar-nav-group-border-width) solid var(--cui-sidebar-nav-group-border-color);
   border-radius: var(--cui-sidebar-nav-group-border-radius);
   transition: background 0.15s ease-in-out;
@@ -8829,17 +8888,8 @@ textarea.form-control-lg {
     transition: none;
   }
 }
-.sidebar-nav .nav-group .nav-group-items {
-  padding: var(--cui-sidebar-nav-group-items-padding-y) var(--cui-sidebar-nav-group-items-padding-x);
-  overflow: hidden;
-  transition: height 0.15s ease;
-}
-@media (prefers-reduced-motion: reduce) {
-  .sidebar-nav .nav-group .nav-group-items {
-    transition: none;
-  }
-}
-.sidebar-nav .nav-group:not(.show) .nav-group-items {
+.sidebar-nav .nav-group:not(.show) .nav-group-items,
+.sidebar-nav .nav-group:not(.show) .nav-group-toggle-indicator .show {
   display: none;
 }
 .sidebar-nav .nav-group.show {
@@ -8848,16 +8898,16 @@ textarea.form-control-lg {
 .sidebar-nav .nav-group.show .nav-group-toggle {
   color: var(--cui-sidebar-nav-group-toggle-show-color);
 }
-.sidebar-nav .nav-group.show > .nav-group-toggle::after {
+.sidebar-nav .nav-group.show > .nav-group-toggle:not(:has(.nav-group-toggle-indicator))::after {
   transform: rotate(180deg);
 }
-.sidebar-nav .nav-group.show + .show {
-  margin-top: var(--cui-sidebar-nav-gap);
+.sidebar-nav .nav-group.show > .nav-group-toggle .nav-group-toggle-indicator .hide {
+  display: none;
 }
 .sidebar-nav .nav-group-toggle {
   cursor: pointer;
 }
-.sidebar-nav .nav-group-toggle::after {
+.sidebar-nav .nav-group-toggle:not(:has(.nav-group-toggle-indicator))::after {
   display: block;
   flex: 0 12px;
   height: 12px;
@@ -8870,13 +8920,32 @@ textarea.form-control-lg {
   transition: transform 0.15s;
 }
 @media (prefers-reduced-motion: reduce) {
-  .sidebar-nav .nav-group-toggle::after {
+  .sidebar-nav .nav-group-toggle:not(:has(.nav-group-toggle-indicator))::after {
     transition: none;
   }
 }
+@media (hover: hover), (-ms-high-contrast: none) {
+  .sidebar-nav .nav-group-toggle:hover:not(:has(.nav-group-toggle-indicator))::after {
+    background-color: var(--cui-sidebar-nav-group-indicator-hover-color);
+    -webkit-mask-image: var(--cui-sidebar-nav-group-indicator-hover-icon);
+    mask-image: var(--cui-sidebar-nav-group-indicator-hover-icon);
+  }
+}
+.sidebar-nav .nav-group-toggle-indicator {
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  color: var(--cui-sidebar-nav-group-indicator-color);
+}
 .sidebar-nav .nav-group-items {
   padding: 0;
+  overflow: hidden;
   list-style: none;
+  transition: height 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-nav .nav-group-items {
+    transition: none;
+  }
 }
 .sidebar-nav .nav-group-items .nav-link {
   -webkit-padding-start: calc(var(--cui-sidebar-nav-link-padding-x) + var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin));
@@ -8890,9 +8959,36 @@ textarea.form-control-lg {
 .sidebar-nav .compact .nav-link {
   --cui-sidebar-nav-link-padding-y: 0.5625rem;
 }
+.sidebar-nav.sidebar-nav-tree {
+  --cui-sidebar-nav-tree-group-border-color: var(--cui-border-color);
+  --cui-sidebar-nav-link-icon-bullet-bg: var(--cui-border-color);
+  --cui-sidebar-nav-link-hover-icon-bullet-bg: var(--cui-border-color);
+  --cui-sidebar-nav-link-active-icon-bullet-bg: var(--cui-border-color);
+}
+.sidebar-nav.sidebar-nav-tree .nav-group .nav-group-items {
+  position: relative;
+  z-index: 0;
+  -webkit-padding-start: calc((var(--cui-sidebar-nav-link-padding-x) + var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)) / 2);
+  padding-inline-start: calc((var(--cui-sidebar-nav-link-padding-x) + var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)) / 2);
+}
+.sidebar-nav.sidebar-nav-tree .nav-group .nav-group-items::before {
+  position: absolute;
+  inset-inline-start: calc((var(--cui-sidebar-nav-link-padding-x) + var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)) / 2 + 1.5px);
+  top: 0;
+  z-index: -1;
+  height: 100%;
+  content: "";
+  -webkit-border-start: 1px solid var(--cui-sidebar-nav-tree-group-border-color);
+  border-inline-start: 1px solid var(--cui-sidebar-nav-tree-group-border-color);
+}
+.sidebar-nav.sidebar-nav-tree .nav-group .nav-group-items .nav-link {
+  -webkit-margin-start: calc(-1 * (var(--cui-sidebar-nav-link-padding-x) + var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)) / 2);
+  margin-inline-start: calc(-1 * (var(--cui-sidebar-nav-link-padding-x) + var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)) / 2);
+}
 
 .sidebar-narrow, .sidebar-narrow-unfoldable:not(:hover) {
   --cui-sidebar-narrow-width: 4rem;
+  --cui-sidebar-padding-x: 0.5rem;
 }
 @media (min-width: 992px) {
   .sidebar-narrow, .sidebar-narrow-unfoldable:not(:hover) {
@@ -8901,16 +8997,9 @@ textarea.form-control-lg {
     padding-bottom: var(--cui-sidebar-toggler-height);
     overflow: visible;
   }
-  .sidebar-narrow .sidebar-brand-full, .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-full {
-    display: none;
-  }
-  .sidebar-narrow .sidebar-brand-narrow, .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-narrow {
-    display: block;
-  }
   .sidebar-narrow .sidebar-header, .sidebar-narrow-unfoldable:not(:hover) .sidebar-header {
     justify-content: center;
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline: 0;
   }
   .sidebar-narrow .sidebar-nav, .sidebar-narrow-unfoldable:not(:hover) .sidebar-nav {
     --cui-sidebar-nav-link-padding-x: 0.5rem;
@@ -8922,14 +9011,11 @@ textarea.form-control-lg {
   .sidebar-narrow .nav-icon, .sidebar-narrow-unfoldable:not(:hover) .nav-icon {
     flex: 0 0 calc(var(--cui-sidebar-narrow-width) - var(--cui-sidebar-nav-padding-x) * 2 - var(--cui-sidebar-nav-link-padding-x) * 2);
   }
-  .sidebar-narrow .d-narrow-none, .sidebar-narrow-unfoldable:not(:hover) .d-narrow-none,
-  .sidebar-narrow .nav-label,
-  .sidebar-narrow-unfoldable:not(:hover) .nav-label,
+  .sidebar-narrow .nav-label, .sidebar-narrow-unfoldable:not(:hover) .nav-label,
   .sidebar-narrow .nav-title,
   .sidebar-narrow-unfoldable:not(:hover) .nav-title,
   .sidebar-narrow .nav-group-items,
   .sidebar-narrow-unfoldable:not(:hover) .nav-group-items,
-  .sidebar-narrow .nav-group.show .nav-group-items,
   .sidebar-narrow .sidebar-form,
   .sidebar-narrow-unfoldable:not(:hover) .sidebar-form {
     height: 0 !important;
@@ -8938,6 +9024,13 @@ textarea.form-control-lg {
     visibility: hidden;
     opacity: 0;
   }
+  .sidebar-narrow .d-narrow-none, .sidebar-narrow-unfoldable:not(:hover) .d-narrow-none,
+  .sidebar-narrow .sidebar-brand-full,
+  .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-full,
+  .sidebar-narrow .d-sidebar-narrow-none,
+  .sidebar-narrow-unfoldable:not(:hover) .d-sidebar-narrow-none {
+    display: none !important;
+  }
   .sidebar-narrow .sidebar-toggler::before, .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before {
     transform: rotate(-180deg);
   }
@@ -8949,9 +9042,11 @@ textarea.form-control-lg {
 .sidebar-narrow-unfoldable {
   --cui-sidebar-narrow-unfoldable-box-shadow: var(--cui-box-shadow);
 }
+.sidebar-narrow-unfoldable .d-sidebar-narrow-unfoldable-none {
+  display: none !important;
+}
 .sidebar-narrow-unfoldable:hover {
   box-shadow: var(--cui-sidebar-narrow-unfoldable-box-shadow);
-  box-shadow: 0 0.5rem 1rem rgba(8, 10, 12, 0.15);
 }
 .sidebar-narrow-unfoldable:hover .sidebar-toggler::before {
   transform: rotate(-180deg);
@@ -8971,6 +9066,15 @@ textarea.form-control-lg {
   }
 }
 
+.sidebar:not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)) .sidebar-brand-narrow,
+.sidebar:not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)) .d-sidebar-narrow {
+  display: none !important;
+}
+
+.sidebar:not(.sidebar-narrow-unfoldable) .d-sidebar-narrow-unfoldable {
+  display: none !important;
+}
+
 .clearfix::after {
   display: block;
   clear: both;