@coreui/coreui 4.0.4 → 4.1.1

package/scss/mixins/_grid.scss

@@ -7,6 +7,7 @@
   --#{$variable-prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
+  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
   margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
   margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
   margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
@@ -66,8 +67,8 @@
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
-    // .row-cols defaults must all appear before .col overrides so they can be overridden.
     $infix: breakpoint-infix($breakpoint, $breakpoints);
+
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
@@ -85,13 +86,7 @@
           }
         }
       }
-    }
-  }
-
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
 
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
       .col#{$infix}-auto {
         @include make-col-auto();
       }
@@ -130,3 +125,27 @@
     }
   }
 }
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is and invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .g-start#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/mixins/_ltr-rtl.scss

@@ -58,3 +58,24 @@
     }
   }
 }
+
+@mixin ltr-rtl-value-only($property, $value, $value-rtl, $important: null) {
+  $value-reflected: reflect($value);
+
+  @if $enable-ltr and $enable-rtl {
+    @include ltr() {
+      #{$property}: $value $important;
+    }
+    @include rtl() {
+      #{$property}: $value-rtl $important;
+    }
+  }
+  @else {
+    @if $enable-rtl {
+      #{$property}: $value-rtl $important;
+    }
+    @else {
+      #{$property}: $value $important;
+    }
+  }
+}

package/scss/mixins/_reset-text.scss

@@ -11,7 +11,7 @@
   text-transform: none;
   letter-spacing: normal;
   word-break: normal;
-  word-spacing: normal;
   white-space: normal;
+  word-spacing: normal;
   line-break: auto;
 }

package/scss/mixins/_utilities.scss

@@ -20,6 +20,9 @@
     $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
     $property-class: if($property-class == null, "", $property-class);
 
+    // Use custom CSS variable name if present, otherwise default to `class`
+    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+
     // State params to generate pseudo-classes
     $state: if(map-has-key($utility, state), map-get($utility, state), ());
 
@@ -28,16 +31,6 @@
     // Don't prefix if value key is null (eg. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    // Generate CSS Variable
-    $generate-vars: if(map-has-key($utility, vars), map-get($utility, vars), false);
-    $generate-only-vars: if(map-has-key($utility, only-vars), map-get($utility, only-vars), false);
-
-    // Generate RTL version
-    $generate-rtl: if(map-has-key($utility, rtl), map-get($utility, rtl), false);
-
-    // // Add theme prefix
-    // $theme-prefix: if(map-has-key($utility, theme-prefix), map-get($utility, theme-prefix), false);
-
     @if map-get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
@@ -51,6 +44,8 @@
       }
     }
 
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
     $is-rtl: map-get($utility, rtl);
 
     @if $value != null {
@@ -58,44 +53,37 @@
         /* rtl:begin:remove */
       }
 
-      .#{$property-class + $infix + $property-class-modifier} {
-        @each $property in $properties {
-          @if $generate-vars == true or $generate-only-vars == true {
-            @if $generate-only-vars {
-              @if $generate-rtl == true {
-                @include ltr-rtl($property, var(--#{$variable-prefix}#{$key}), null, null, if($enable-important-utilities, !important, null));
-              }
-              @else {
-                #{$property}: var(--#{$variable-prefix}#{$key}) if($enable-important-utilities, !important, null);
-              }
-            }
-            @else {
-              @if $generate-rtl == true {
-                @include ltr-rtl($property, var(--#{$variable-prefix}#{$key}, $value), null, null, if($enable-important-utilities, !important, null));
-              }
-              @else {
-                #{$property}: var(--#{$variable-prefix}#{$key}, $value) if($enable-important-utilities, !important, null);
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$variable-prefix}#{$css-variable-name}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$variable-prefix}#{$css-variable-name}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$variable-prefix}#{$local-var}: #{$variable};
               }
             }
+            #{$property}: $value if($enable-important-utilities, !important, null);
           }
-          @else {
-            @if $generate-rtl == true {
-              @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
-            }
-            @else {
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
               #{$property}: $value if($enable-important-utilities, !important, null);
             }
           }
         }
       }
 
-      @each $pseudo in $state {
-        .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-          @each $property in $properties {
-            #{$property}: $value if($enable-important-utilities, !important, null);
-          }
-        }
-      }
       @if $is-rtl == false {
         /* rtl:end:remove */
       }

package/scss/mixins/_visually-hidden.scss

@@ -3,7 +3,7 @@
 // Hide content visually while keeping it accessible to assistive technologies
 //
 // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
-// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
   position: absolute !important;

package/scss/sidebar/_sidebar-nav.scss

@@ -100,6 +100,7 @@
     @include transition($sidebar-nav-group-transition);
 
     .nav-group-items {
+      padding: $sidebar-nav-group-items-padding-y $sidebar-nav-group-items-padding-x;
       overflow: hidden;
       @include transition($sidebar-nav-group-items-transition);
     }

package/scss/sidebar/_sidebar.scss

@@ -31,23 +31,6 @@
     }
   }
 
-  @include media-breakpoint-up($mobile-breakpoint) {
-    &.hide {
-      &:not(.sidebar-end){
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
-        ~ * {
-          --#{$variable-prefix}sidebar-occupy-start: 0;
-        }
-      }
-      &.sidebar-end {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
-        ~ * {
-          --#{$variable-prefix}sidebar-occupy-end: 0;
-        }
-      }
-    }
-  }
-
   &[class*="bg-"]  {
     border-color: rgba($black, .1);
   }
@@ -70,6 +53,23 @@
     }
   }
 
+  @include media-breakpoint-up($mobile-breakpoint) {
+    &.hide {
+      &:not(.sidebar-end){
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        ~ * {
+          --#{$variable-prefix}sidebar-occupy-start: 0;
+        }
+      }
+      &.sidebar-end {
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$variable-prefix}sidebar-width)));
+        ~ * {
+          --#{$variable-prefix}sidebar-occupy-end: 0;
+        }
+      }
+    }
+  }
+
   &.sidebar-fixed {
     @include media-breakpoint-up($mobile-breakpoint) {
       position: fixed;