@coreui/coreui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/scss/mixins/_buttons.scss

@@ -4,87 +4,91 @@
 // and disabled options for all buttons
 
 // scss-docs-start btn-variant-mixin
-@mixin button-variant(
-  $background,
-  $border,
-  $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
-  $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
-  $active-color: color-contrast($active-background),
-  $disabled-background: $background,
-  $disabled-border: $border,
-  $disabled-color: color-contrast($disabled-background)
-) {
+@mixin button-variant($variant) {
+  $background: map-get($variant, "bg");
+  $border-color: map-get($variant, "border-color");
+  $color: map-get($variant, "color");
+  $hover-background: map-get($variant, "hover-bg");
+  $hover-border-color: map-get($variant, "hover-border-color");
+  $hover-color: map-get($variant, "hover-color");
+  $active-background: map-get($variant, "active-bg");
+  $active-border-color: map-get($variant, "active-border-color");
+  $active-color: map-get($variant, "active-color");
+  $disabled-background: map-get($variant, "disabled-bg");
+  $disabled-border-color: map-get($variant, "disabled-border-color");
+  $disabled-color: map-get($variant, "disabled-color");
+  $shadow: map-get($variant, "shadow");
+
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
-  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-border-color: #{$border-color};
   --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border-color, 15%))};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
   --#{$prefix}btn-disabled-color: #{$disabled-color};
   --#{$prefix}btn-disabled-bg: #{$disabled-background};
-  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border-color};
 }
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant(
-  $color,
-  $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $color,
-  $active-color: color-contrast($active-background)
-) {
+@mixin button-outline-variant($variant) {
+  $color: map-get($variant, "color");
+  $hover-background: map-get($variant, "hover-bg");
+  $hover-border-color: map-get($variant, "hover-border-color");
+  $hover-color: map-get($variant, "hover-color");
+  $active-background: map-get($variant, "active-bg");
+  $active-border-color: map-get($variant, "active-border-color");
+  $active-color: map-get($variant, "active-color");
+  $disabled-color: map-get($variant, "disabled-color");
+  $shadow: map-get($variant, "shadow");
+
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-border-color: #{$color};
-  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border};
+  --#{$prefix}btn-hover-border-color: #{$active-border-color};
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
   --#{$prefix}btn-disabled-color: #{$color};
   --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: #{$color};
   --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-ghost-variant-mixin
-@mixin button-ghost-variant(
-  $color,
-  $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $color,
-  $active-color: color-contrast($active-background)
-) {
+@mixin button-ghost-variant($variant) {
+  $color: map-get($variant, "color");
+  $hover-background: map-get($variant, "hover-bg");
+  $hover-border-color: map-get($variant, "hover-border-color");
+  $hover-color: map-get($variant, "hover-color");
+  $active-background: map-get($variant, "active-bg");
+  $active-border-color: map-get($variant, "active-border-color");
+  $active-color: map-get($variant, "active-color");
+  $disabled-color: map-get($variant, "disabled-color");
+  $shadow: map-get($variant, "shadow");
+
   --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-hover-color: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
-  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
+  --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border};
-  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$color};
-  --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: #{$color};
-  --#{$prefix}gradient: none;
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-shadow: #{$shadow};
 }
 // scss-docs-end btn-ghost-variant-mixin
 
-
+// Button sizes
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}btn-padding-y: #{$padding-y};

package/scss/mixins/_caret.scss

@@ -35,7 +35,7 @@
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $spacing;
+      @include ltr-rtl("margin-left", $spacing);
       vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
@@ -54,7 +54,7 @@
 
       &::before {
         display: inline-block;
-        margin-right: $spacing;
+        @include ltr-rtl("margin-right", $spacing);
         vertical-align: $vertical-align;
         content: "";
         @include caret-start($width);
@@ -62,7 +62,7 @@
     }
 
     &:empty::after {
-      margin-left: 0;
+      @include ltr-rtl("margin-left", 0);
     }
   }
 }

package/scss/mixins/_forms.scss

@@ -60,10 +60,10 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        @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,8 +78,8 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
-        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+        @include ltr-rtl("padding-right", $input-height-inner);
+        @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,8 +92,8 @@
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
           --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
-          padding-right: $form-select-feedback-icon-padding-end;
-          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          @include ltr-rtl("padding-right", $form-select-feedback-icon-padding-end);
+          @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;
         }
       }
@@ -132,7 +132,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      margin-left: .5em;
+      @include ltr-rtl("margin-left", .5em);
     }
   }
 

package/scss/mixins/_grid.scss

@@ -45,7 +45,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
+  @include ltr-rtl("margin-left", if($num == 0, 0, percentage($num)));
 }
 
 // Row columns

package/scss/mixins/_list-group.scss

@@ -1,27 +1,19 @@
-@include deprecate("`list-group-item-variant()`", "v5.0.0", "v6.0.0");
-
+@include deprecate("`list-group-item-variant()`", "v4.3.0", "v6.0.0");
 
 // List Groups
 
 // scss-docs-start list-group-mixin
-@mixin list-group-item-variant($state, $background, $color) {
-  .list-group-item-#{$state} {
-    color: $color;
-    background-color: $background;
-
-    &.list-group-item-action {
-      &:hover,
-      &:focus {
-        color: $color;
-        background-color: shade-color($background, 10%);
-      }
+@mixin list-group-item-variant($state, $variant) {
+  $background: map-get($variant, "bg");
+  $background-hover: map-get($variant, "bg-hover");
+  $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
 
-      &.active {
-        color: $white;
-        background-color: $color;
-        border-color: $color;
-      }
-    }
-  }
+  --#{$prefix}list-group-color: #{$color};
+  --#{$prefix}list-group-bg: #{$background};
+  --#{$prefix}list-group-hover-bg: #{$background-hover};
+  --#{$prefix}list-group-action-hover-color: #{$color};
+  --#{$prefix}list-group-action-active-color: #{$white};
+  --#{$prefix}list-group-action-active-bg: #{$color};
+  --#{$prefix}list-group-action-active-border-color: #{$color};
 }
 // scss-docs-end list-group-mixin

package/scss/mixins/_lists.scss

@@ -2,6 +2,6 @@
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 @mixin list-unstyled {
-  padding-left: 0;
+  @include ltr-rtl("padding-left", 0);
   list-style: none;
 }

package/scss/mixins/_ltr-rtl.scss

@@ -0,0 +1,87 @@
+@mixin ltr {
+  @if $enable-ltr {
+    html:not([dir="rtl"]) & {
+      @content;
+    }
+  }
+}
+
+@mixin rtl {
+  @if $enable-rtl {
+    *[dir="rtl"] & {
+      @content;
+    }
+  }
+}
+
+@function reflect($element) {
+  $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 unquote($string);
+}
+
+@mixin ltr-rtl($property, $value, $property-rtl: null, $value-rtl: null, $important: null) {
+  $property-reflected: reflect($property);
+  $value-reflected: reflect($value);
+
+  @if $enable-ltr and $enable-rtl {
+    @include ltr() {
+      #{$property}: $value $important;
+    }
+    @include rtl() {
+      @if $value-rtl {
+        #{$property-reflected}: $value-rtl $important;
+      }
+      @else {
+        #{$property-reflected}: $value-reflected $important;
+      }
+    }
+  }
+  @else {
+    @if $enable-rtl {
+      @if $value-rtl {
+        #{$property-reflected}: $value-rtl $important;
+      }
+      @else {
+        #{$property-reflected}: $value-reflected $important;
+      }
+    }
+    @else {
+      #{$property}: $value $important;
+    }
+  }
+}
+
+@mixin ltr-rtl-value-only($property, $value, $value-rtl: null, $important: null) {
+  $value-reflected: reflect($value);
+
+  @if $enable-ltr and $enable-rtl {
+    @include ltr() {
+      #{$property}: $value $important;
+    }
+    @include rtl() {
+      @if $value-rtl {
+        #{$property}: $value-rtl $important;
+      } @else {
+        #{$property}: $value-reflected $important;
+      }
+    }
+  }
+  @else {
+    @if $enable-rtl {
+      @if $value-rtl {
+        #{$property}: $value-rtl $important;
+      } @else {
+        #{$property}: $value-reflected $important;
+      }
+    } @else {
+      #{$property}: $value $important;
+    }
+  }
+}

package/scss/mixins/_utilities.scss

@@ -92,7 +92,12 @@
                   --#{$prefix}#{$local-var}: #{$variable};
                 }
               }
-              #{$property}: $value if($enable-important-utilities, !important, null);
+              @if $is-rtl == true {
+                @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
+              } @else {
+                #{$property}: $value if($enable-important-utilities, !important, null);
+              }
+
             }
           }
         }

package/scss/mixins/_visually-hidden.scss

@@ -6,7 +6,6 @@
 // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
-  position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
@@ -15,6 +14,11 @@
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
+
+  // Fix for positioned table caption that could become anonymous cells
+  &:not(caption) {
+    position: absolute !important;
+  }
 }
 
 // Use to only display content when it's focused, or one of its child elements is focused

package/scss/sidebar/_sidebar-narrow.scss

@@ -1,4 +1,13 @@
 %sidebar-narrow {
+  // scss-docs-start sidebar-narrow-css-vars
+  --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
+  // scss-docs-end sidebar-narrow-css-vars
+
+  .sidebar-nav {
+    --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};
+    --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
+  }
+
   @include media-breakpoint-up($mobile-breakpoint) {
     z-index: $zindex-fixed + 1;
     flex: 0 0 var(--#{$prefix}sidebar-narrow-width);
@@ -19,14 +28,22 @@
       display: block;
     }
 
+    .sidebar-header {
+      justify-content: center;
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    .nav-icon {
+      flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list
+    }
+
     .d-narrow-none,
     .nav-label,
     .nav-title,
     .nav-group-items,
     .nav-group.show .nav-group-items,
-    .sidebar-footer,
-    .sidebar-form,
-    .sidebar-header {
+    .sidebar-form {
       height: 0 !important; // stylelint-disable-line declaration-no-important
       padding: 0;
       margin: 0;
@@ -35,16 +52,11 @@
     }
 
     .sidebar-toggler {
-      position: fixed;
-      bottom: 0;
-
-      &::before {
-        transform: rotate(180deg) #{"/* rtl:rotate(0deg) */"};
-      }
+      @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
     }
 
     &.sidebar-end .sidebar-toggler::before {
-      transform: rotate(0deg) #{"/* rtl:rotate(180deg) */"};
+      transform: rotate(0deg);
     }
   }
 }
@@ -57,6 +69,10 @@
   &.sidebar-end ~ * {
     --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
   }
+
+  .nav-link {
+    overflow: hidden;
+  }
 }
 
 .sidebar-narrow-unfoldable {
@@ -75,16 +91,20 @@
   }
 
   &:hover {
+    box-shadow: $box-shadow;
+
     .sidebar-toggler {
-      &::before {
-        transform: rotate(-180deg) #{"/* rtl:rotate(0deg) */"};
-      }
+      @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
     }
 
-    &.sidebar-end .sidebar-toggler::before {
-      transform: rotate(0deg) #{"/* rtl:rotate(180deg) */"};
+    &.sidebar-end .sidebar-toggler {
+      transform: rotate(0deg);
     }
   }
+
+  .nav-link {
+    overflow: hidden;
+  }
 }
 
 // Responsive behavior
@@ -95,10 +115,10 @@
       &.sidebar-narrow,
       &.sidebar-narrow-unfoldable {
         &:not(.sidebar-end) {
-          margin-left: calc(var(--#{$prefix}sidebar-narrow-width) * -1); // stylelint-disable-line function-disallowed-list
+          @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
         }
         &.sidebar-end {
-          margin-right: calc(var(--#{$prefix}sidebar-narrow-width) * -1); // stylelint-disable-line function-disallowed-list
+          @include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
         }
       }
     }