@coreui/coreui 5.0.0-beta.1 → 5.0.0-rc-2

package/dist/css/coreui.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
- * CoreUI  v5.0.0-beta.1 (https://coreui.io)
- * Copyright (c) 2023 creativeLabs Łukasz Holeczek
+ * CoreUI  v5.0.0-rc-2 (https://coreui.io)
+ * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */
 :root,
@@ -825,7 +825,7 @@ progress {
   --cui-breakpoint-lg: 992px;
   --cui-breakpoint-xl: 1200px;
   --cui-breakpoint-xxl: 1400px;
-  --cui-mobile-breakpoint: md;
+  --cui-mobile-breakpoint: lg;
 }
 
 .row {
@@ -3116,6 +3116,9 @@ textarea.form-control-lg {
 .btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--cui-btn-focus-box-shadow);
 }
+.btn-check:checked:focus-visible + .btn {
+  box-shadow: var(--cui-btn-focus-box-shadow);
+}
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   color: var(--cui-btn-disabled-color);
   pointer-events: none;
@@ -5019,12 +5022,11 @@ textarea.form-control-lg {
   --cui-accordion-btn-padding-y: 1rem;
   --cui-accordion-btn-color: var(--cui-body-color);
   --cui-accordion-btn-bg: var(--cui-accordion-bg);
-  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%2837, 43, 54, 0.95%29'%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-.708z'/%3e%3c/svg%3e");
+  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba%2837, 43, 54, 0.95%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --cui-accordion-btn-icon-width: 1.25rem;
   --cui-accordion-btn-icon-transform: rotate(-180deg);
   --cui-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233634a3'%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-.708z'/%3e%3c/svg%3e");
-  --cui-accordion-btn-focus-border-color: #acabeb;
+  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --cui-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
   --cui-accordion-body-padding-x: 1.25rem;
   --cui-accordion-body-padding-y: 1rem;
@@ -5082,7 +5084,6 @@ textarea.form-control-lg {
 }
 .accordion-button:focus {
   z-index: 3;
-  border-color: var(--cui-accordion-btn-focus-border-color);
   outline: 0;
   box-shadow: var(--cui-accordion-btn-focus-box-shadow);
 }
@@ -5100,7 +5101,7 @@ textarea.form-control-lg {
   border-top-left-radius: var(--cui-accordion-border-radius);
   border-top-right-radius: var(--cui-accordion-border-radius);
 }
-.accordion-item:first-of-type .accordion-button {
+.accordion-item:first-of-type > .accordion-header .accordion-button {
   border-top-left-radius: var(--cui-accordion-inner-border-radius);
   border-top-right-radius: var(--cui-accordion-inner-border-radius);
 }
@@ -5111,11 +5112,11 @@ textarea.form-control-lg {
   border-bottom-right-radius: var(--cui-accordion-border-radius);
   border-bottom-left-radius: var(--cui-accordion-border-radius);
 }
-.accordion-item:last-of-type .accordion-button.collapsed {
+.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
   border-bottom-right-radius: var(--cui-accordion-inner-border-radius);
   border-bottom-left-radius: var(--cui-accordion-inner-border-radius);
 }
-.accordion-item:last-of-type .accordion-collapse {
+.accordion-item:last-of-type > .accordion-collapse {
   border-bottom-right-radius: var(--cui-accordion-border-radius);
   border-bottom-left-radius: var(--cui-accordion-border-radius);
 }
@@ -5124,21 +5125,21 @@ textarea.form-control-lg {
   padding: var(--cui-accordion-body-padding-y) var(--cui-accordion-body-padding-x);
 }
 
-.accordion-flush .accordion-collapse {
-  border-width: 0;
-}
-.accordion-flush .accordion-item {
+.accordion-flush > .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+  border-radius: 0;
+}
+.accordion-flush > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
@@ -6072,7 +6073,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--cui-modal-header-padding);
   border-bottom: var(--cui-modal-header-border-width) solid var(--cui-modal-header-border-color);
   border-top-left-radius: var(--cui-modal-inner-border-radius);
@@ -7271,7 +7271,6 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--cui-offcanvas-padding-y) var(--cui-offcanvas-padding-x);
 }
 .offcanvas-header .btn-close {
@@ -7789,7 +7788,7 @@ textarea.form-control-lg {
 .sidebar.sidebar-sm {
   --cui-sidebar-width: 12rem;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar.sidebar-sm:not(.sidebar-end):not(.hide) ~ * {
     --cui-sidebar-occupy-start: 12rem;
   }
@@ -7800,7 +7799,7 @@ textarea.form-control-lg {
 .sidebar.sidebar-lg {
   --cui-sidebar-width: 20rem;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar.sidebar-lg:not(.sidebar-end):not(.hide) ~ * {
     --cui-sidebar-occupy-start: 20rem;
   }
@@ -7811,7 +7810,7 @@ textarea.form-control-lg {
 .sidebar.sidebar-xl {
   --cui-sidebar-width: 24rem;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar.sidebar-xl:not(.sidebar-end):not(.hide) ~ * {
     --cui-sidebar-occupy-start: 24rem;
   }
@@ -7819,7 +7818,7 @@ textarea.form-control-lg {
     --cui-sidebar-occupy-end: 24rem;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar.hide:not(.sidebar-end) {
     margin-left: calc(-1 * var(--cui-sidebar-width));
   }
@@ -7833,7 +7832,7 @@ textarea.form-control-lg {
     --cui-sidebar-occupy-end: 0;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar.sidebar-fixed {
     position: fixed;
     top: 0;
@@ -7846,7 +7845,7 @@ textarea.form-control-lg {
     right: 0;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar.sidebar-sticky {
     position: -webkit-sticky;
     position: sticky;
@@ -7883,7 +7882,7 @@ textarea.form-control-lg {
 .sidebar.sidebar-overlaid.show.sidebar-end {
   margin-right: 0;
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .sidebar {
     --cui-is-mobile: true;
     position: fixed;
@@ -7960,12 +7959,6 @@ textarea.form-control-lg {
   background-color: transparent;
   border: 0;
   border-radius: 0.375rem;
-  transition: var(--cui-sidebar-toggler-transition);
-}
-@media (prefers-reduced-motion: reduce) {
-  .sidebar-toggler {
-    transition: none;
-  }
 }
 .sidebar-toggler::before {
   position: absolute;
@@ -7977,6 +7970,12 @@ textarea.form-control-lg {
   background-color: var(--cui-sidebar-toggler-color);
   -webkit-mask: var(--cui-sidebar-toggler-bg) no-repeat center;
   mask: var(--cui-sidebar-toggler-bg) no-repeat center;
+  transition: var(--cui-sidebar-toggler-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-toggler::before {
+    transition: none;
+  }
 }
 .sidebar-toggler:hover {
   text-decoration: none;
@@ -7992,7 +7991,7 @@ textarea.form-control-lg {
 .sidebar-toggler:focus::before {
   background-color: var(--cui-sidebar-toggler-focus-color);
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .sidebar-toggler {
     display: none;
   }
@@ -8003,7 +8002,7 @@ textarea.form-control-lg {
   --cui-backdrop-bg: #080a0c;
   --cui-backdrop-opacity: 0.5;
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .sidebar-backdrop {
     position: fixed;
     top: 0;
@@ -8059,7 +8058,7 @@ textarea.form-control-lg {
   --cui-sidebar-nav-link-icon-width: 1.25rem;
   --cui-sidebar-nav-link-icon-height: 1.25rem;
   --cui-sidebar-nav-link-icon-font-size: 1.25rem;
-  --cui-sidebar-nav-link-active-icon-color: var(--cui-primary);
+  --cui-sidebar-nav-link-active-icon-color: var(--cui-emphasis-color);
   --cui-sidebar-nav-link-disabled-icon-color: var(--cui-tertiary-color);
   --cui-sidebar-nav-link-hover-icon-color: var(--cui-body-color);
   --cui-sidebar-nav-link-icon-bullet-size: 0.3125rem;
@@ -8068,7 +8067,7 @@ textarea.form-control-lg {
   --cui-sidebar-nav-link-icon-bullet-border-radius: 50rem;
   --cui-sidebar-nav-link-icon-bullet-border-color: var(--cui-tertiary-color);
   --cui-sidebar-nav-link-active-icon-bullet-bg: transparent;
-  --cui-sidebar-nav-link-active-icon-bullet-border-color: var(--cui-primary);
+  --cui-sidebar-nav-link-active-icon-bullet-border-color: var(--cui-emphasis-color);
   --cui-sidebar-nav-link-disabled-icon-bullet-bg: transparent;
   --cui-sidebar-nav-link-disabled-icon-bullet-border-color: var(--cui-tertiary-color);
   --cui-sidebar-nav-link-hover-icon-bullet-bg: transparent;
@@ -8292,11 +8291,7 @@ textarea.form-control-lg {
 .sidebar-narrow-unfoldable:not(:hover), .sidebar-narrow {
   --cui-sidebar-narrow-width: 4rem;
 }
-.sidebar-narrow-unfoldable:not(:hover) .sidebar-nav, .sidebar-narrow .sidebar-nav {
-  --cui-sidebar-nav-link-padding-x: 0.5rem;
-  --cui-sidebar-nav-link-padding-y: 0.75rem;
-}
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar-narrow-unfoldable:not(:hover), .sidebar-narrow {
     flex: 0 0 var(--cui-sidebar-narrow-width);
     width: var(--cui-sidebar-narrow-width);
@@ -8317,6 +8312,10 @@ textarea.form-control-lg {
     padding-right: 0;
     padding-left: 0;
   }
+  .sidebar-narrow-unfoldable:not(:hover) .sidebar-nav, .sidebar-narrow .sidebar-nav {
+    --cui-sidebar-nav-link-padding-x: 0.5rem;
+    --cui-sidebar-nav-link-padding-y: 0.75rem;
+  }
   .sidebar-narrow-unfoldable:not(:hover) .nav-icon, .sidebar-narrow .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);
   }
@@ -8335,7 +8334,7 @@ textarea.form-control-lg {
     visibility: hidden;
     opacity: 0;
   }
-  .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler, .sidebar-narrow .sidebar-toggler {
+  .sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before, .sidebar-narrow .sidebar-toggler::before {
     transform: rotate(-180deg);
   }
   .sidebar-end.sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler::before, .sidebar-end.sidebar-narrow .sidebar-toggler::before {
@@ -8365,10 +8364,10 @@ textarea.form-control-lg {
 .sidebar-narrow-unfoldable:hover {
   box-shadow: 0 0.5rem 1rem rgba(8, 10, 12, 0.15);
 }
-.sidebar-narrow-unfoldable:hover .sidebar-toggler {
+.sidebar-narrow-unfoldable:hover .sidebar-toggler::before {
   transform: rotate(-180deg);
 }
-.sidebar-narrow-unfoldable:hover.sidebar-end .sidebar-toggler {
+.sidebar-narrow-unfoldable:hover.sidebar-end .sidebar-toggler::before {
   transform: rotate(0deg);
 }
 .sidebar-narrow-unfoldable .nav-link {