@coreui/coreui 5.0.1 → 5.1.0

package/dist/css/coreui.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * CoreUI  v5.0.1 (https://coreui.io)
+ * CoreUI  v5.1.0 (https://coreui.io)
  * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */
@@ -561,8 +561,8 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: 0.5rem;
-  font-size: calc(1.275rem + 0.3vw);
   line-height: inherit;
+  font-size: calc(1.275rem + 0.3vw);
 }
 @media (min-width: 1200px) {
   legend {
@@ -644,9 +644,9 @@ progress {
 }
 
 .display-1 {
-  font-size: calc(1.625rem + 4.5vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.625rem + 4.5vw);
 }
 @media (min-width: 1200px) {
   .display-1 {
@@ -655,9 +655,9 @@ progress {
 }
 
 .display-2 {
-  font-size: calc(1.575rem + 3.9vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.575rem + 3.9vw);
 }
 @media (min-width: 1200px) {
   .display-2 {
@@ -666,9 +666,9 @@ progress {
 }
 
 .display-3 {
-  font-size: calc(1.525rem + 3.3vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.525rem + 3.3vw);
 }
 @media (min-width: 1200px) {
   .display-3 {
@@ -677,9 +677,9 @@ progress {
 }
 
 .display-4 {
-  font-size: calc(1.475rem + 2.7vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.475rem + 2.7vw);
 }
 @media (min-width: 1200px) {
   .display-4 {
@@ -688,9 +688,9 @@ progress {
 }
 
 .display-5 {
-  font-size: calc(1.425rem + 2.1vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.425rem + 2.1vw);
 }
 @media (min-width: 1200px) {
   .display-5 {
@@ -699,9 +699,9 @@ progress {
 }
 
 .display-6 {
-  font-size: calc(1.375rem + 1.5vw);
   font-weight: 300;
   line-height: 1.2;
+  font-size: calc(1.375rem + 1.5vw);
 }
 @media (min-width: 1200px) {
   .display-6 {
@@ -6004,8 +6004,8 @@ textarea.form-control-lg {
   pointer-events: none;
 }
 .modal.fade .modal-dialog {
-  transition: transform 0.3s ease-out;
   transform: translate(0, -50px);
+  transition: transform 0.3s ease-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .modal.fade .modal-dialog {
@@ -7340,31 +7340,34 @@ textarea.form-control-lg {
   }
 }
 .avatar {
+  --cui-avatar-width: 2rem;
+  --cui-avatar-height: 2rem;
+  --cui-avatar-font-size: 0.8rem;
+  --cui-avatar-border-radius: 50em;
+  --cui-avatar-status-width: 0.5rem;
+  --cui-avatar-status-height: 0.5rem;
+  --cui-avatar-status-border-radius: 50em;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--cui-avatar-width);
+  height: var(--cui-avatar-height);
+  font-size: var(--cui-avatar-font-size);
   vertical-align: middle;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-border-radius);
   transition: margin 0.15s;
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.8rem;
 }
 @media (prefers-reduced-motion: reduce) {
   .avatar {
     transition: none;
   }
 }
-.avatar .avatar-status {
-  width: 0.5333333333rem;
-  height: 0.5333333333rem;
-}
 
 .avatar-img {
   width: 100%;
   height: auto;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-border-radius);
 }
 
 .avatar-status {
@@ -7372,71 +7375,53 @@ textarea.form-control-lg {
   right: 0;
   bottom: 0;
   display: block;
+  width: var(--cui-avatar-status-width);
+  height: var(--cui-avatar-status-height);
   border: 1px solid #fff;
-  border-radius: 50em;
+  border-radius: var(--cui-avatar-status-border-radius);
 }
 
 .avatar-sm {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.6rem;
-}
-.avatar-sm .avatar-status {
-  width: 0.4rem;
-  height: 0.4rem;
+  --cui-avatar-width: 1.5rem;
+  --cui-avatar-height: 1.5rem;
+  --cui-avatar-font-size: 0.6rem;
+  --cui-avatar-status-width: 0.4rem;
+  --cui-avatar-status-height: 0.4rem;
 }
 
 .avatar-md {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 1rem;
-}
-.avatar-md .avatar-status {
-  width: 0.6666666667rem;
-  height: 0.6666666667rem;
+  --cui-avatar-width: 2.5rem;
+  --cui-avatar-height: 2.5rem;
+  --cui-avatar-font-size: 1rem;
+  --cui-avatar-status-width: 0.7rem;
+  --cui-avatar-status-height: 0.7rem;
 }
 
 .avatar-lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.2rem;
-}
-.avatar-lg .avatar-status {
-  width: 0.8rem;
-  height: 0.8rem;
+  --cui-avatar-width: 3rem;
+  --cui-avatar-height: 3rem;
+  --cui-avatar-font-size: 1.2rem;
+  --cui-avatar-status-width: 0.8rem;
+  --cui-avatar-status-height: 0.8rem;
 }
 
 .avatar-xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.6rem;
-}
-.avatar-xl .avatar-status {
-  width: 1.0666666667rem;
-  height: 1.0666666667rem;
+  --cui-avatar-width: 4rem;
+  --cui-avatar-height: 4rem;
+  --cui-avatar-font-size: 1.6rem;
+  --cui-avatar-status-width: 1rem;
+  --cui-avatar-status-height: 1rem;
 }
 
 .avatars-stack {
   display: flex;
 }
 .avatars-stack .avatar {
-  margin-right: -0.8rem;
+  margin-right: calc(-0.4 * var(--cui-avatar-width));
 }
 .avatars-stack .avatar:hover {
   margin-right: 0;
 }
-.avatars-stack .avatar-sm {
-  margin-right: -0.6rem;
-}
-.avatars-stack .avatar-md {
-  margin-right: -1rem;
-}
-.avatars-stack .avatar-lg {
-  margin-right: -1.2rem;
-}
-.avatars-stack .avatar-xl {
-  margin-right: -1.6rem;
-}
 
 .callout {
   --cui-callout-padding-x: 1rem;
@@ -7522,7 +7507,6 @@ textarea.form-control-lg {
 }
 
 .header {
-  --cui-header-min-height: 4rem;
   --cui-header-padding-x: 0.5rem;
   --cui-header-padding-y: 0.5rem;
   --cui-header-bg: var(--cui-body-bg);
@@ -7945,8 +7929,9 @@ textarea.form-control-lg {
 .sidebar-toggler {
   --cui-sidebar-toggler-width: 0.5rem;
   --cui-sidebar-toggler-height: 0.5rem;
+  --cui-sidebar-toggler-bg: transparent;
   --cui-sidebar-toggler-color: var(--cui-tertiary-color);
-  --cui-sidebar-toggler-bg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix%28-1 0 0 -1 512 512%29'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E");
+  --cui-sidebar-toggler-icon: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix%28-1 0 0 -1 512 512%29'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E");
   --cui-sidebar-toggler-hover-color: var(--cui-secondary-color);
   --cui-sidebar-toggler-focus-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
   --cui-sidebar-toggler-focus-color: var(--cui-secondary-color);
@@ -7956,7 +7941,7 @@ textarea.form-control-lg {
   width: var(--cui-sidebar-toggler-width);
   height: var(--cui-sidebar-toggler-height);
   padding: 0.25rem 0.25rem;
-  background-color: transparent;
+  background-color: var(--cui-sidebar-toggler-bg);
   border: 0;
   border-radius: 0.375rem;
 }
@@ -7968,8 +7953,8 @@ textarea.form-control-lg {
   height: 100%;
   content: "";
   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;
+  -webkit-mask: var(--cui-sidebar-toggler-icon) no-repeat center;
+  mask: var(--cui-sidebar-toggler-icon) no-repeat center;
   transition: var(--cui-sidebar-toggler-transition);
 }
 @media (prefers-reduced-motion: reduce) {