@coreui/coreui 5.3.1 → 5.4.0

package/dist/css/coreui.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * CoreUI  v5.3.1 (https://coreui.io)
+ * CoreUI  v5.4.0 (https://coreui.io)
  * Copyright (c) 2025 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */
@@ -143,6 +143,10 @@
   --cui-form-valid-border-color: #1b9e3e;
   --cui-form-invalid-color: #e55353;
   --cui-form-invalid-border-color: #e55353;
+  --cui-btn-close-filter: ;
+  --cui-carousel-indicator-active-bg: #fff;
+  --cui-carousel-caption-color: #fff;
+  --cui-carousel-control-icon-filter: ;
 }
 
 [data-coreui-theme=dark] {
@@ -227,6 +231,10 @@
   --cui-form-valid-border-color: rgb(117, 183, 152.4);
   --cui-form-invalid-color: rgb(234, 133.8, 143.4);
   --cui-form-invalid-border-color: rgb(234, 133.8, 143.4);
+  --cui-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
+  --cui-carousel-indicator-active-bg: #080a0c;
+  --cui-carousel-caption-color: #080a0c;
+  --cui-carousel-control-icon-filter: invert(1) grayscale(100);
 }
 
 *,
@@ -2281,10 +2289,6 @@ progress {
   display: block;
   padding: 0;
 }
-.form-control::-moz-placeholder {
-  color: var(--cui-input-placeholder-color, var(--cui-secondary-color));
-  opacity: 1;
-}
 .form-control::placeholder {
   color: var(--cui-input-placeholder-color, var(--cui-secondary-color));
   opacity: 1;
@@ -2797,17 +2801,10 @@ textarea.form-control-lg {
 .form-floating > .form-control-plaintext {
   padding: 1rem 0.75rem;
 }
-.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
-  color: transparent;
-}
 .form-floating > .form-control::placeholder,
 .form-floating > .form-control-plaintext::placeholder {
   color: transparent;
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
-  padding-top: 1.625rem;
-  padding-bottom: 0.625rem;
-}
 .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
 .form-floating > .form-control-plaintext:focus,
 .form-floating > .form-control-plaintext:not(:placeholder-shown) {
@@ -2820,12 +2817,11 @@ textarea.form-control-lg {
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-select {
+  -webkit-padding-start: 0.75rem;
+  padding-inline-start: 0.75rem;
   padding-top: 1.625rem;
   padding-bottom: 0.625rem;
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
-}
 .form-floating > .form-control:focus ~ label,
 .form-floating > .form-control:not(:placeholder-shown) ~ label,
 .form-floating > .form-control-plaintext ~ label,
@@ -2835,15 +2831,6 @@ textarea.form-control-lg {
 .form-floating > .form-control:-webkit-autofill ~ label {
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-.form-floating > textarea:not(:-moz-placeholder-shown) ~ label::after {
-  position: absolute;
-  inset: 1rem 0.375rem;
-  z-index: -1;
-  height: 1.5em;
-  content: "";
-  background-color: var(--cui-body-bg);
-  border-radius: var(--cui-border-radius);
-}
 .form-floating > textarea:focus ~ label::after,
 .form-floating > textarea:not(:placeholder-shown) ~ label::after {
   position: absolute;
@@ -2947,8 +2934,8 @@ textarea.form-control-lg {
   border-end-end-radius: 0;
 }
 .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
-  -webkit-margin-start: calc(var(--cui-border-width) * -1);
-  margin-inline-start: calc(var(--cui-border-width) * -1);
+  -webkit-margin-start: calc(-1 * var(--cui-border-width));
+  margin-inline-start: calc(-1 * var(--cui-border-width));
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
@@ -3227,6 +3214,34 @@ textarea.form-control-lg {
   opacity: var(--cui-btn-disabled-opacity);
 }
 
+.btn-ghost {
+  --cui-btn-color: var(--cui-secondary-color);
+  --cui-btn-border-color: transparent;
+  --cui-btn-active-color: var(--cui-body-color);
+  --cui-btn-active-bg: var(--cui-tertiary-bg);
+  --cui-btn-active-border-color: var(--cui-tertiary-bg);
+  --cui-btn-disabled-color: var(--cui-secondary-color);
+  --cui-btn-disabled-border-color: transparent;
+  --cui-btn-hover-color: var(--cui-body-color);
+  --cui-btn-hover-bg: var(--cui-tertiary-bg);
+  --cui-btn-hover-border-color: var(--cui-tertiary-bg);
+  --cui-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cui-tertiary-bg-rgb), .5);
+}
+
+.btn-outline {
+  --cui-btn-color: var(--cui-secondary-color);
+  --cui-btn-border-color: var(--cui-border-color);
+  --cui-btn-active-color: var(--cui-body-color);
+  --cui-btn-active-bg: var(--cui-tertiary-bg);
+  --cui-btn-active-border-color: var(--cui-border-color);
+  --cui-btn-disabled-color: var(--cui-secondary-color);
+  --cui-btn-disabled-border-color: var(--cui-border-color);
+  --cui-btn-hover-color: var(--cui-body-color);
+  --cui-btn-hover-bg: var(--cui-tertiary-bg);
+  --cui-btn-hover-border-color: var(--cui-border-color);
+  --cui-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cui-tertiary-bg-rgb), .5);
+}
+
 .btn-transparent {
   --cui-btn-active-border-color: transparent;
   --cui-btn-disabled-border-color: transparent;
@@ -3635,14 +3650,14 @@ textarea.form-control-lg {
   color: var(--cui-btn-color);
 }
 
-.btn-lg {
+.btn-lg, .btn-group-lg > .btn {
   --cui-btn-padding-y: 0.5rem;
   --cui-btn-padding-x: 1rem;
   --cui-btn-font-size: 1.25rem;
   --cui-btn-border-radius: var(--cui-border-radius-lg);
 }
 
-.btn-sm {
+.btn-sm, .btn-group-sm > .btn {
   --cui-btn-padding-y: 0.25rem;
   --cui-btn-padding-x: 0.5rem;
   --cui-btn-font-size: 0.875rem;
@@ -4409,8 +4424,8 @@ textarea.form-control-lg {
 }
 .btn-group > :not(.btn-check:first-child) + .btn,
 .btn-group > .btn-group:not(:first-child) {
-  -webkit-margin-start: calc(var(--cui-border-width) * -1);
-  margin-inline-start: calc(var(--cui-border-width) * -1);
+  -webkit-margin-start: calc(-1 * var(--cui-border-width));
+  margin-inline-start: calc(-1 * var(--cui-border-width));
 }
 .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
 .btn-group > .btn.dropdown-toggle-split:first-child,
@@ -4459,7 +4474,7 @@ textarea.form-control-lg {
 }
 .btn-group-vertical > .btn:not(:first-child),
 .btn-group-vertical > .btn-group:not(:first-child) {
-  margin-top: calc(var(--cui-border-width) * -1);
+  margin-top: calc(-1 * var(--cui-border-width));
 }
 .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
 .btn-group-vertical > .btn-group:not(:last-child) > .btn {
@@ -4613,6 +4628,48 @@ textarea.form-control-lg {
   border-bottom-color: currentcolor;
 }
 
+.nav-enclosed {
+  --cui-nav-enclosed-padding: 0.125rem;
+  --cui-nav-enclosed-bg: var(--cui-tertiary-bg);
+  --cui-nav-enclosed-border-radius: 0.5rem;
+  --cui-nav-enclosed-link-padding-x: 0.875rem;
+  --cui-nav-enclosed-link-padding-y: 0.375rem;
+  --cui-nav-enclosed-link-color: var(--cui-body-color);
+  --cui-nav-enclosed-link-border-width: 1px;
+  --cui-nav-enclosed-link-active-color: var(--cui-body-color);
+  --cui-nav-enclosed-link-active-bg: var(--cui-body-bg);
+  --cui-nav-enclosed-link-active-border-color: var(--cui-border-color);
+  --cui-nav-enclosed-link-hover-box-shadow: var(--cui-box-shadow-sm);
+  --cui-nav-enclosed-link-disabled-color: var(--cui-secondary-color);
+  display: inline-flex;
+  padding: var(--cui-nav-enclosed-padding);
+  background-color: var(--cui-nav-enclosed-bg);
+  border-radius: var(--cui-nav-enclosed-border-radius);
+}
+.nav-enclosed .nav-link {
+  padding: calc(var(--cui-nav-enclosed-link-padding-y) - var(--cui-nav-enclosed-link-border-width)) calc(var(--cui-nav-enclosed-link-padding-x) - var(--cui-nav-enclosed-link-border-width));
+  color: var(--cui-nav-enclosed-link-color);
+  border: var(--cui-nav-enclosed-link-border-width) solid transparent;
+  border-radius: calc(var(--cui-nav-enclosed-border-radius) - var(--cui-nav-enclosed-padding));
+}
+.nav-enclosed .nav-link.disabled {
+  color: var(--cui-nav-enclosed-link-disabled-color);
+}
+.nav-enclosed .nav-link.active,
+.nav-enclosed .show > .nav-link {
+  color: var(--cui-nav-enclosed-link-active-color);
+  background-color: var(--cui-nav-enclosed-link-active-bg);
+  border: 1px solid var(--cui-nav-enclosed-link-active-border-color);
+}
+.nav-enclosed .nav-link.active:not(:focus-visible),
+.nav-enclosed .show > .nav-link:not(:focus-visible) {
+  box-shadow: var(--cui-nav-enclosed-link-hover-box-shadow);
+}
+
+.nav-enclosed-pills {
+  --cui-nav-enclosed-border-radius: 50rem;
+}
+
 .nav-fill > .nav-link,
 .nav-fill .nav-item {
   flex: 1 1 auto;
@@ -5230,24 +5287,24 @@ textarea.form-control-lg {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
-  .card-group > .card:not(:last-child) .card-img-top,
-  .card-group > .card:not(:last-child) .card-header {
+  .card-group > .card:not(:last-child) > .card-img-top,
+  .card-group > .card:not(:last-child) > .card-header {
     border-top-right-radius: 0;
   }
-  .card-group > .card:not(:last-child) .card-img-bottom,
-  .card-group > .card:not(:last-child) .card-footer {
+  .card-group > .card:not(:last-child) > .card-img-bottom,
+  .card-group > .card:not(:last-child) > .card-footer {
     border-bottom-right-radius: 0;
   }
   .card-group > .card:not(:first-child) {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
-  .card-group > .card:not(:first-child) .card-img-top,
-  .card-group > .card:not(:first-child) .card-header {
+  .card-group > .card:not(:first-child) > .card-img-top,
+  .card-group > .card:not(:first-child) > .card-header {
     border-top-left-radius: 0;
   }
-  .card-group > .card:not(:first-child) .card-img-bottom,
-  .card-group > .card:not(:first-child) .card-footer {
+  .card-group > .card:not(:first-child) > .card-img-bottom,
+  .card-group > .card:not(:first-child) > card-footer {
     border-bottom-left-radius: 0;
   }
 }
@@ -5494,8 +5551,8 @@ textarea.form-control-lg {
 }
 
 .page-item:not(:first-child) .page-link {
-  -webkit-margin-start: calc(var(--cui-border-width) * -1);
-  margin-inline-start: calc(var(--cui-border-width) * -1);
+  -webkit-margin-start: calc(-1 * var(--cui-border-width));
+  margin-inline-start: calc(-1 * var(--cui-border-width));
 }
 .page-item:first-child .page-link {
   border-start-start-radius: var(--cui-pagination-border-radius);
@@ -5651,7 +5708,7 @@ textarea.form-control-lg {
 
 @keyframes progress-bar-stripes {
   0% {
-    background-position-x: 1rem;
+    background-position-x: var(--cui-progress-height);
   }
 }
 .progress,
@@ -5787,22 +5844,6 @@ textarea.form-control-lg {
   counter-increment: section;
 }
 
-.list-group-item-action {
-  width: 100%;
-  color: var(--cui-list-group-action-color);
-  text-align: inherit;
-}
-.list-group-item-action:hover, .list-group-item-action:focus {
-  z-index: 1;
-  color: var(--cui-list-group-action-hover-color);
-  text-decoration: none;
-  background-color: var(--cui-list-group-action-hover-bg);
-}
-.list-group-item-action:active {
-  color: var(--cui-list-group-action-active-color);
-  background-color: var(--cui-list-group-action-active-bg);
-}
-
 .list-group-item {
   position: relative;
   display: block;
@@ -5839,6 +5880,22 @@ textarea.form-control-lg {
   border-top-width: var(--cui-list-group-border-width);
 }
 
+.list-group-item-action {
+  width: 100%;
+  color: var(--cui-list-group-action-color);
+  text-align: inherit;
+}
+.list-group-item-action:not(.active):hover, .list-group-item-action:not(.active):focus {
+  z-index: 1;
+  color: var(--cui-list-group-action-hover-color);
+  text-decoration: none;
+  background-color: var(--cui-list-group-action-hover-bg);
+}
+.list-group-item-action:not(.active):active {
+  color: var(--cui-list-group-action-active-color);
+  background-color: var(--cui-list-group-action-active-bg);
+}
+
 .list-group-horizontal {
   flex-direction: row;
 }
@@ -6110,13 +6167,13 @@ textarea.form-control-lg {
   --cui-btn-close-focus-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
   --cui-btn-close-focus-opacity: 1;
   --cui-btn-close-disabled-opacity: 0.25;
-  --cui-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
   box-sizing: content-box;
   width: 1em;
   height: 1em;
   padding: 0.25em 0.25em;
   color: var(--cui-btn-close-color);
   background: transparent var(--cui-btn-close-bg) center/1em auto no-repeat;
+  filter: var(--cui-btn-close-filter);
   border: 0;
   border-radius: 0.375rem;
   opacity: var(--cui-btn-close-opacity);
@@ -6139,13 +6196,8 @@ textarea.form-control-lg {
   opacity: var(--cui-btn-close-disabled-opacity);
 }
 
-.btn-close[data-coreui-theme=dark],
 .btn-close-white {
-  filter: var(--cui-btn-close-white-filter);
-}
-
-[data-coreui-theme=dark] .btn-close {
-  filter: var(--cui-btn-close-white-filter);
+  --cui-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
 }
 
 .toast {
@@ -6221,7 +6273,7 @@ textarea.form-control-lg {
   --cui-modal-width: 500px;
   --cui-modal-padding: 1rem;
   --cui-modal-margin: 0.5rem;
-  --cui-modal-color: ;
+  --cui-modal-color: var(--cui-body-color);
   --cui-modal-bg: var(--cui-body-bg);
   --cui-modal-border-color: var(--cui-border-color-translucent);
   --cui-modal-border-width: var(--cui-border-width);
@@ -6333,7 +6385,10 @@ textarea.form-control-lg {
 }
 .modal-header .btn-close {
   padding: calc(var(--cui-modal-header-padding-y) * 0.5) calc(var(--cui-modal-header-padding-x) * 0.5);
-  margin-inline: auto calc(-0.5 * var(--cui-modal-header-padding-x));
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: calc(-0.5 * var(--cui-modal-header-padding-x));
+  margin-inline-end: calc(-0.5 * var(--cui-modal-header-padding-x));
   margin-top: calc(-0.5 * var(--cui-modal-header-padding-y));
   margin-bottom: calc(-0.5 * var(--cui-modal-header-padding-y));
 }
@@ -6854,6 +6909,7 @@ textarea.form-control-lg {
   color: #fff;
   text-align: center;
   background: none;
+  filter: var(--cui-carousel-control-icon-filter);
   border: 0;
   opacity: 0.5;
   transition: opacity 0.15s ease;
@@ -6891,14 +6947,6 @@ textarea.form-control-lg {
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
 }
@@ -6954,31 +7002,14 @@ textarea.form-control-lg {
   left: 15%;
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
-  color: #fff;
+  color: var(--cui-carousel-caption-color);
   text-align: center;
 }
 
-.carousel-dark .carousel-control-prev-icon,
-.carousel-dark .carousel-control-next-icon {
-  filter: invert(1) grayscale(100);
-}
-.carousel-dark .carousel-indicators [data-coreui-target] {
-  background-color: #080a0c;
-}
-.carousel-dark .carousel-caption {
-  color: #080a0c;
-}
-
-[data-coreui-theme=dark] .carousel .carousel-control-prev-icon,
-[data-coreui-theme=dark] .carousel .carousel-control-next-icon, [data-coreui-theme=dark].carousel .carousel-control-prev-icon,
-[data-coreui-theme=dark].carousel .carousel-control-next-icon {
-  filter: invert(1) grayscale(100);
-}
-[data-coreui-theme=dark] .carousel .carousel-indicators [data-coreui-target], [data-coreui-theme=dark].carousel .carousel-indicators [data-coreui-target] {
-  background-color: #080a0c;
-}
-[data-coreui-theme=dark] .carousel .carousel-caption, [data-coreui-theme=dark].carousel .carousel-caption {
-  color: #080a0c;
+.carousel-dark {
+  --cui-carousel-indicator-active-bg: #080a0c;
+  --cui-carousel-caption-color: #080a0c;
+  --cui-carousel-control-icon-filter: invert(1) grayscale(100);
 }
 
 .spinner-grow,
@@ -7540,7 +7571,10 @@ textarea.form-control-lg {
 }
 .offcanvas-header .btn-close {
   padding: calc(var(--cui-offcanvas-padding-y) * 0.5) calc(var(--cui-offcanvas-padding-x) * 0.5);
-  margin-inline: auto calc(-0.5 * var(--cui-offcanvas-padding-x));
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: calc(-0.5 * var(--cui-offcanvas-padding-x));
+  margin-inline-end: calc(-0.5 * var(--cui-offcanvas-padding-x));
   margin-top: calc(-0.5 * var(--cui-offcanvas-padding-y));
   margin-bottom: calc(-0.5 * var(--cui-offcanvas-padding-y));
 }
@@ -7831,7 +7865,7 @@ textarea.form-control-lg {
 .header-divider {
   flex-basis: calc(100% + 2 * var(--cui-header-padding-x));
   height: 0;
-  margin: var(--cui-header-padding-y) calc(var(--cui-header-padding-x) * -1);
+  margin: var(--cui-header-padding-y) calc(-1 * var(--cui-header-padding-x));
   border-top: var(--cui-header-divider-border);
 }
 
@@ -8509,8 +8543,8 @@ textarea.form-control-lg {
   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));
 }
 .sidebar-nav .nav-group-items .nav-icon {
-  -webkit-margin-start: calc((var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)) * -1);
-  margin-inline-start: calc((var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)) * -1);
+  -webkit-margin-start: calc(-1 * (var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)));
+  margin-inline-start: calc(-1 * (var(--cui-sidebar-nav-link-icon-width) + var(--cui-sidebar-nav-link-icon-margin)));
 }
 .sidebar-nav.compact .nav-link,
 .sidebar-nav .compact .nav-link {
@@ -8969,6 +9003,10 @@ textarea.form-control-lg {
 .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
   position: absolute !important;
 }
+.visually-hidden *,
+.visually-hidden-focusable:not(:focus):not(:focus-within) * {
+  overflow: hidden !important;
+}
 
 .stretched-link::after {
   position: absolute;