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

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/_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

@@ -39,12 +39,12 @@
       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);
     }
   }
 }
@@ -77,12 +77,12 @@
   &:hover {
     .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) */"};
+      transform: rotate(0deg);
     }
   }
 }
@@ -95,10 +95,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));
         }
       }
     }

package/scss/sidebar/_sidebar-nav.scss

@@ -94,7 +94,7 @@
     @include transition(inherit);
 
     &:first-child {
-      margin-left: calc(var(--#{$prefix}sidebar-nav-link-padding-x) * -1); // stylelint-disable-line function-disallowed-list
+      @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) * -1));
     }
   }
   // stylelint-disable-next-line selector-no-qualifying-type
@@ -140,7 +140,7 @@
       display: block;
       flex: 0 12px;
       height: 12px;
-      margin-left: auto;
+      @include ltr-rtl("margin-left", auto);
       content: "";
       background-image: var(--#{$prefix}sidebar-nav-group-indicator);
       background-repeat: no-repeat;
@@ -154,10 +154,10 @@
     list-style: none;
 
     .nav-link {
-      padding-left: var(--#{$prefix}sidebar-nav-icon-width);
+      @include ltr-rtl("padding-left", var(--#{$prefix}sidebar-nav-icon-width));
 
       .nav-icon {
-        margin-left: calc(var(--#{$prefix}sidebar-nav-icon-width) * -1); // stylelint-disable-line function-disallowed-list
+        @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-icon-width) * -1));
       }
     }
   }

package/scss/sidebar/_sidebar.scss

@@ -25,9 +25,7 @@
   --#{$prefix}sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height};
   --#{$prefix}sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg};
   --#{$prefix}sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)};
-
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
-
   --#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
   --#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
   --#{$prefix}sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
@@ -70,12 +68,12 @@
   padding: var(--#{$prefix}sidebar-padding-y) var(--#{$prefix}sidebar-padding-x);
   color: var(--#{$prefix}sidebar-color);
   background: var(--#{$prefix}sidebar-bg);
+  @include ltr-rtl("border-right", var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color));
   box-shadow: none;
   @include transition($sidebar-transition);
 
   &:not(.sidebar-end){
-    margin-left: 0;
-    border-right: var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color);
+    @include ltr-rtl("margin-left", 0);
     ~ * {
       --#{$prefix}sidebar-occupy-start: #{$sidebar-width};
     }
@@ -83,8 +81,7 @@
 
   &.sidebar-end {
     order: 99;
-    margin-right: 0;
-    border-left: var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color);
+    @include ltr-rtl("margin-right", 0);
     ~ * {
       --#{$prefix}sidebar-occupy-end: #{$sidebar-width};
     }
@@ -115,13 +112,13 @@
   @include media-breakpoint-up($mobile-breakpoint) {
     &.hide {
       &:not(.sidebar-end){
-        margin-left: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
           --#{$prefix}sidebar-occupy-start: 0;
         }
       }
       &.sidebar-end {
-        margin-right: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
         ~ * {
           --#{$prefix}sidebar-occupy-end: 0;
         }
@@ -137,11 +134,11 @@
       z-index: $zindex-fixed;
 
       &:not(.sidebar-end) {
-        left: 0;
+        @include ltr-rtl("left", 0);
       }
 
       &.sidebar-end {
-        right: 0;
+        @include ltr-rtl("right", 0);
       }
     }
   }
@@ -161,14 +158,14 @@
     z-index: $zindex-fixed + 2;
 
     &:not(.sidebar-end) {
-      left: 0;
+      @include ltr-rtl("left", 0);
       ~ * {
         --#{$prefix}sidebar-occupy-start: 0;
       }
     }
 
     &.sidebar-end {
-      right: 0;
+      @include ltr-rtl("right", 0);
       ~ * {
         --#{$prefix}sidebar-occupy-end: 0;
       }
@@ -184,23 +181,23 @@
     z-index: $zindex-fixed + 1;
 
     &:not(.sidebar-end) {
-      left: 0;
+      @include ltr-rtl("left", 0);
       ~ * {
         --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
       }
 
       &:not(.show) {
-        margin-left: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
+        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
       }
     }
     &.sidebar-end {
-      right: 0;
+      @include ltr-rtl("right", 0);
       ~ * {
         --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
       }
 
       &:not(.show) {
-        margin-right: calc(-1 * var(--#{$prefix}sidebar-width)); // stylelint-disable-line function-disallowed-list
+        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
       }
     }
   }
@@ -209,7 +206,7 @@
 .sidebar-close {
   position: absolute;
   top: 0;
-  right: 0;
+  @include ltr-rtl("right", 0);
   width: var(--#{$prefix}sidebar-width);
   height: var(--#{$prefix}sidebar-header-height);
   color: var(--#{$prefix}sidebar-color);
@@ -228,6 +225,8 @@
 .sidebar-brand {
   display: flex;
   flex: 0 0 var(--#{$prefix}sidebar-brand-height);
+  align-items: center;
+  justify-content: center;
   color: var(--#{$prefix}sidebar-brand-color);
   background: var(--#{$prefix}sidebar-brand-bg);
 
@@ -281,10 +280,9 @@
     background-position: center;
     background-size: calc(var(--#{$prefix}sidebar-toggler-indicator-height) * .25); // stylelint-disable-line function-disallowed-list
     @include transition($sidebar-toggler-transition);
-
-    /* rtl:raw:
-    transform: rotate(-180deg);
-    */
+    @include rtl() {
+      transform: rotate(-180deg);
+    }
   }
 
   &:focus {
@@ -301,7 +299,7 @@
   .sidebar-end & {
     justify-content: flex-start;
     &::before {
-      transform: rotate(-180deg) #{"/* rtl:rotate(0deg) */"};
+      transform: rotate(-180deg);
     }
   }
 }
@@ -319,3 +317,13 @@
     @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .sidebar {
+      --#{$prefix}sidebar-bg: #{$sidebar-bg-dark};
+      --#{$prefix}sidebar-border-width: #{$sidebar-border-width-dark};
+      --#{$prefix}sidebar-border-color: #{$sidebar-border-color-dark};
+    }
+  }
+}