@coreui/coreui 4.0.2 → 4.1.0

package/scss/mixins/_utilities.scss

@@ -35,8 +35,8 @@
     // 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);
+    // 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
@@ -51,6 +51,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,27 +60,24 @@
         /* 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}#{$property-class}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$variable-prefix}#{$property-class}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $value in $is-local-vars {
+                --#{$variable-prefix}#{$local-var}: #{$value};
               }
             }
-          }
-          @else {
             @if $generate-rtl == true {
               @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
             }
@@ -87,15 +86,16 @@
             }
           }
         }
-      }
 
-      @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.scss

@@ -31,6 +31,28 @@
     }
   }
 
+  &[class*="bg-"]  {
+    border-color: rgba($black, .1);
+  }
+
+  @each $width, $value in $sidebar-widths {
+    &.sidebar-#{$width} {
+      --#{$variable-prefix}sidebar-width: #{$value};
+      @include media-breakpoint-up($mobile-breakpoint) {
+        &:not(.sidebar-end):not(.hide) {
+          ~ * {
+            --#{$variable-prefix}sidebar-occupy-start: #{$value};
+          }
+        }
+        &.sidebar-end:not(.hide) {
+          ~ * {
+            --#{$variable-prefix}sidebar-occupy-end: #{$value};
+          }
+        }
+      }
+    }
+  }
+
   @include media-breakpoint-up($mobile-breakpoint) {
     &.hide {
       &:not(.sidebar-end){
@@ -48,22 +70,6 @@
     }
   }
 
-  &[class*="bg-"]  {
-    border-color: rgba($black, .1);
-  }
-
-  @each $width, $value in $sidebar-widths {
-    &.sidebar-#{$width} {
-      --#{$variable-prefix}sidebar-width: #{$value};
-      --#{$variable-prefix}sidebar-occupy-start: #{$value};
-
-      ~ * {
-        --#{$variable-prefix}sidebar-width: #{$value};
-        --#{$variable-prefix}sidebar-occupy-end: #{$value};
-      }
-    }
-  }
-
   &.sidebar-fixed {
     @include media-breakpoint-up($mobile-breakpoint) {
       position: fixed;