@coreui/coreui 4.1.1 → 4.1.4

package/scss/_offcanvas.scss

@@ -5,9 +5,9 @@
   display: flex;
   flex-direction: column;
   max-width: 100%;
-  color: $offcanvas-color;
+  color: var(--#{$variable-prefix}offcanvas-color, $offcanvas-color);
   visibility: hidden;
-  background-color: $offcanvas-bg-color;
+  background-color: var(--#{$variable-prefix}offcanvas-bg-color, $offcanvas-bg-color);
   background-clip: padding-box;
   outline: 0;
   @include box-shadow($offcanvas-box-shadow);
@@ -15,7 +15,7 @@
 }
 
 .offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+  @include overlay-backdrop($zindex-offcanvas-backdrop, var(--#{$variable-prefix}offcanvas-backdrop-bg, $offcanvas-backdrop-bg), $offcanvas-backdrop-opacity);
 }
 
 .offcanvas-header {
@@ -47,7 +47,7 @@
   top: 0;
   @include ltr-rtl("left", 0);
   width: $offcanvas-horizontal-width;
-  @include ltr-rtl("border-right", $offcanvas-border-width solid $offcanvas-border-color);
+  @include ltr-rtl("border-right", $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color));
   @include ltr-rtl-value-only("transform", translateX(-100%), translateX(100%));
 }
 
@@ -55,7 +55,7 @@
   top: 0;
   @include ltr-rtl("right", 0);
   width: $offcanvas-horizontal-width;
-  @include ltr-rtl("border-left", $offcanvas-border-width solid $offcanvas-border-color);
+  @include ltr-rtl("border-left", $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color));
   @include ltr-rtl-value-only("transform", translateX(100%), translateX(-100%));
 }
 
@@ -65,7 +65,7 @@
   left: 0;
   height: $offcanvas-vertical-height;
   max-height: 100%;
-  border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+  border-bottom: $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color);
   transform: translateY(-100%);
 }
 
@@ -74,10 +74,10 @@
   left: 0;
   height: $offcanvas-vertical-height;
   max-height: 100%;
-  border-top: $offcanvas-border-width solid $offcanvas-border-color;
+  border-top: $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color);
   transform: translateY(100%);
 }
 
 .offcanvas.show {
-  transform: none;
+  transform: none !important; // stylelint-disable-line declaration-no-important
 }

package/scss/_toasts.scss

@@ -41,8 +41,10 @@
   @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
 
   .btn-close {
-    margin-right: $toast-padding-x * -.5;
-    margin-left: $toast-padding-x;
+    @include ltr-rtl("margin-right", $toast-padding-x * -.5);
+    @include ltr-rtl("margin-left", $toast-padding-x);
+    // margin-right: $toast-padding-x * -.5;
+    // margin-left: $toast-padding-x;
   }
 }
 

package/scss/coreui-grid.rtl.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/coreui-grid.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/coreui-reboot.rtl.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/coreui-reboot.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/coreui-utilities.rtl.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/coreui-utilities.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/coreui.rtl.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/coreui.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.1
+ * @version v4.1.4
  * @link https://coreui.io/
  * Copyright (c) 2021 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)

package/scss/forms/_form-select.scss

@@ -6,8 +6,7 @@
 .form-select {
   display: block;
   width: 100%;
-  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-  // stylelint-disable-next-line property-no-vendor-prefix
+  @include ltr-rtl-value-only("padding", $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x, $form-select-padding-y $form-select-padding-x $form-select-padding-y $form-select-indicator-padding);
   -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
@@ -17,7 +16,7 @@
   background-color: var(--#{$variable-prefix}form-select-bg, $form-select-bg);
   background-image: escape-svg($form-select-indicator);
   background-repeat: no-repeat;
-  background-position: $form-select-bg-position;
+  @include ltr-rtl-value-only("background-position", $form-select-bg-position);
   background-size: $form-select-bg-size;
   border: $form-select-border-width solid var(--#{$variable-prefix}form-select-border-color, $form-select-border-color);
   @include border-radius($form-select-border-radius, 0);

package/scss/mixins/_forms.scss

@@ -5,11 +5,11 @@
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {
     .was-validated #{if(&, "&", "")}:#{$state},
-    #{if(&, "&", "")}.is-#{$state} {
+    #{if(&, "&", "")}.is-#{$state}, #{if(&, "&", "")}.ng-#{$state} {
       @content;
     }
   } @else {
-    #{if(&, "&", "")}.is-#{$state} {
+    #{if(&, "&", "")}.is-#{$state}, #{if(&, "&", "")}.ng-#{$state}  {
       @content;
     }
   }
@@ -62,7 +62,7 @@
         @include ltr-rtl("padding-right", $input-height-inner);
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
-        background-position: right $input-height-inner-quarter center;
+        @include ltr-rtl-value-only("background-position", right $input-height-inner-quarter center, left $input-height-inner-quarter center);
         background-size: $input-height-inner-half $input-height-inner-half;
       }
 
@@ -78,7 +78,8 @@
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
         @include ltr-rtl("padding-right", $input-height-inner);
-        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+        @include ltr-rtl-value-only("background-position", top $input-height-inner-quarter right $input-height-inner-quarter, top $input-height-inner-quarter left $input-height-inner-quarter);
+
       }
     }
   }
@@ -92,7 +93,7 @@
         &:not([multiple])[size="1"] {
           @include ltr-rtl("padding-right", $form-select-feedback-icon-padding-end);
           background-image: escape-svg($form-select-indicator), escape-svg($icon);
-          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          @include ltr-rtl-value-only("background-position", #{$form-select-bg-position, $form-select-feedback-icon-position});
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }

package/scss/mixins/_ltr-rtl.scss

@@ -15,16 +15,15 @@
 }
 
 @function reflect($element) {
-  @if type-of($element) == string {
-    @if str-index($element, "left") {
-      @return str-replace($element, "left", "right");
-    }
-    @if str-index($element, "right") {
-      @return str-replace($element, "right", "left");
-    }
+  $string: #{$element};
+  @if str-index($string, "left") {
+    @return str-replace($string, "left", "right");
+  }
+  @if str-index($string, "right") {
+    @return str-replace($string, "right", "left");
   }
 
-  @return $element;
+  @return unquote($string);
 }
 
 @mixin ltr-rtl($property, $value, $property-rtl: null, $value-rtl: null, $important: null) {
@@ -59,7 +58,7 @@
   }
 }
 
-@mixin ltr-rtl-value-only($property, $value, $value-rtl, $important: null) {
+@mixin ltr-rtl-value-only($property, $value, $value-rtl: null, $important: null) {
   $value-reflected: reflect($value);
 
   @if $enable-ltr and $enable-rtl {
@@ -67,14 +66,21 @@
       #{$property}: $value $important;
     }
     @include rtl() {
-      #{$property}: $value-rtl $important;
+      @if $value-rtl {
+        #{$property}: $value-rtl $important;
+      } @else {
+        #{$property}: $value-reflected $important;
+      }
     }
   }
   @else {
     @if $enable-rtl {
-      #{$property}: $value-rtl $important;
-    }
-    @else {
+      @if $value-rtl {
+        #{$property}: $value-rtl $important;
+      } @else {
+        #{$property}: $value-reflected $important;
+      }
+    } @else {
       #{$property}: $value $important;
     }
   }

package/scss/mixins/_utilities.scss

@@ -31,6 +31,9 @@
     // Don't prefix if value key is null (eg. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
+    // Generate RTL version
+    $generate-rtl: if(map-has-key($utility, rtl), map-get($utility, rtl), false);
+
     @if map-get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
@@ -71,7 +74,11 @@
                 --#{$variable-prefix}#{$local-var}: #{$variable};
               }
             }
-            #{$property}: $value if($enable-important-utilities, !important, null);
+            @if $generate-rtl == true {
+              @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
+            } @else {
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
           }
         }