@coreui/coreui 5.0.2 → 5.1.0

package/scss/_avatar.scss

@@ -1,18 +1,30 @@
 .avatar {
+  // scss-docs-start avatar-css-vars
+  --#{$prefix}avatar-width: #{$avatar-width};
+  --#{$prefix}avatar-height: #{$avatar-height};
+  --#{$prefix}avatar-font-size: #{$avatar-font-size};
+  --#{$prefix}avatar-border-radius: #{$avatar-border-radius};
+  --#{$prefix}avatar-status-width: #{$avatar-status-width};
+  --#{$prefix}avatar-status-height: #{$avatar-status-height};
+  --#{$prefix}avatar-status-border-radius: #{$avatar-status-border-radius};
+  // scss-docs-end avatar-css-vars
+
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--#{$prefix}avatar-width);
+  height: var(--#{$prefix}avatar-height);
+  font-size: var(--#{$prefix}avatar-font-size);
   vertical-align: middle;
-  @include border-radius(50em);
+  @include border-radius(var(--#{$prefix}avatar-border-radius));
   @include transition($avatar-transition);
-  @include avatar($avatar-width);
 }
 
 .avatar-img {
   width: 100%;
   height: auto;
-  @include border-radius(50em);
+  @include border-radius(var(--#{$prefix}avatar-border-radius));
 }
 
 .avatar-status {
@@ -20,13 +32,19 @@
   @include ltr-rtl("right", 0);
   bottom: 0;
   display: block;
+  width: var(--#{$prefix}avatar-status-width);
+  height: var(--#{$prefix}avatar-status-height);
   border: 1px solid $white;
-  @include border-radius(50em);
+  @include border-radius(var(--#{$prefix}avatar-status-border-radius));
 }
 
-@each $width, $value in $avatar-widths {
-  .avatar-#{$width} {
-    @include avatar($value);
+@each $size, $map in $avatar-sizes {
+  .avatar-#{$size} {
+    --#{$prefix}avatar-width: #{map-get($map, "width")};
+    --#{$prefix}avatar-height: #{map-get($map, "height")};
+    --#{$prefix}avatar-font-size: #{map-get($map, "font-size")};
+    --#{$prefix}avatar-status-width: #{map-get($map, "status-width")};
+    --#{$prefix}avatar-status-height: #{map-get($map, "status-height")};
   }
 }
 
@@ -34,16 +52,10 @@
   display: flex;
 
   .avatar {
-    @include ltr-rtl("margin-right", - ($avatar-width * .4));
+    @include ltr-rtl("margin-right", calc(-.4 * var(--#{$prefix}avatar-width)));
 
     &:hover {
       @include ltr-rtl("margin-right", 0);
     }
   }
-
-  @each $width, $value in $avatar-widths {
-    .avatar-#{$width} {
-      @include ltr-rtl("margin-right", - ($value * .4));
-    }
-  }
 }

package/scss/_modal.scss

@@ -59,8 +59,8 @@
 
   // When fading in the modal, animate it to slide down
   .modal.fade & {
-    @include transition($modal-transition);
     transform: $modal-fade-transform;
+    @include transition($modal-transition);
   }
   .modal.show & {
     transform: $modal-show-transform;

package/scss/_reboot.scss

@@ -498,9 +498,9 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
   font-weight: $legend-font-weight;
   line-height: inherit;
+  @include font-size($legend-font-size);
 
   + * {
     clear: left; // 2

package/scss/_type.scss

@@ -34,11 +34,11 @@
 // Type display classes
 @each $display, $font-size in $display-font-sizes {
   .display-#{$display} {
-    @include font-size($font-size);
     font-family: $display-font-family;
     font-style: $display-font-style;
     font-weight: $display-font-weight;
     line-height: $display-line-height;
+    @include font-size($font-size);
   }
 }
 

package/scss/_variables.scss

@@ -1620,17 +1620,56 @@ $modal-scale-transform:             scale(1.02) !default;
 
 // Avatars
 // scss-docs-start avatar-variables
-$avatar-width:  2rem !default;
+$avatar-width:                 2rem !default;
+$avatar-height:                2rem !default;
+$avatar-font-size:             .8rem !default;
+$avatar-border-radius:         50em !default;
+$avatar-status-width:          .5rem !default;
+$avatar-status-height:         .5rem !default;
+$avatar-status-border-radius:  50em !default;
+$avatar-transition:            margin .15s !default;
+
+$avatar-sizes: (
+  sm: (
+    width: 1.5rem,
+    height: 1.5rem,
+    font-size: .6rem,
+    status-width: .4rem,
+    status-height: .4rem
+  ),
+  md: (
+    width: 2.5rem,
+    height: 2.5rem,
+    font-size: 1rem,
+    status-width: .7rem,
+    status-height: .7rem
+  ),
+  lg: (
+    width: 3rem,
+    height: 3rem,
+    font-size: 1.2rem,
+    status-width: .8rem,
+    status-height: .8rem
+  ),
+  xl: (
+    width: 4rem,
+    height: 4rem,
+    font-size: 1.6rem,
+    status-width: 1rem,
+    status-height: 1rem
+  ),
+) !default;
+// scss-docs-end avatar-variables
 
+// fusv-disable
+// Deprecated in 5.1.0 for CSS variables
 $avatar-widths: (
   sm: 1.5rem,
   md: 2.5rem,
   lg: 3rem,
   xl: 4rem
 ) !default;
-
-$avatar-transition: margin .15s !default;
-// scss-docs-end avatar-variables
+// fusv-enable
 
 // Alerts
 //

package/scss/mixins/_avatar.scss

@@ -1,10 +1,9 @@
-@mixin avatar($width) {
-  width: $width;
-  height: $width;
-  font-size: $width * .4;
+@include deprecate("`avatar()`", "v5.1.0", "v6.0.0");
 
-  .avatar-status {
-    width: divide($width, 3.75);
-    height: divide($width, 3.75);
-  }
+@mixin avatar($width) {
+  --#{$prefix}avatar-width: #{$width};
+  --#{$prefix}avatar-height: #{$width};
+  --#{$prefix}avatar-font-size: #{$width * .4};
+  --#{$prefix}avatar-status-width: #{divide($width, 3.75)};
+  --#{$prefix}avatar-status-height: #{divide($width, 3.75)};
 }

package/scss/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI #{$file} v5.0.2 (https://coreui.io)
+   * CoreUI #{$file} v5.1.0 (https://coreui.io)
    * Copyright (c) 2024 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */

package/scss/themes/bootstrap/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI for Bootstrap #{$file} v5.0.2 (https://coreui.io/bootstrap/)
+   * CoreUI for Bootstrap #{$file} v5.1.0 (https://coreui.io/bootstrap/)
    * Copyright (c) 2024 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */