@coreui/coreui 4.2.6 → 4.3.0-beta.0

package/scss/helpers/_icon-link.scss

@@ -0,0 +1,25 @@
+.icon-link {
+  display: inline-flex;
+  gap: $icon-link-gap;
+  align-items: center;
+  text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+  text-underline-offset: $icon-link-underline-offset;
+  backface-visibility: hidden;
+
+  > .bi {
+    flex-shrink: 0;
+    width: $icon-link-icon-size;
+    height: $icon-link-icon-size;
+    fill: currentcolor;
+    @include transition($icon-link-icon-transition);
+  }
+}
+
+.icon-link-hover {
+  &:hover,
+  &:focus-visible {
+    > .bi {
+      transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+    }
+  }
+}

package/scss/mixins/_alert.scss

@@ -1,15 +1,18 @@
+@include deprecate("`alert-variant()`", "v4.3.0", "v6.0.0");
+
 // scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border, $color) {
   --#{$prefix}alert-color: #{$color};
   --#{$prefix}alert-bg: #{$background};
   --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
 
   @if $enable-gradients {
     background-image: var(--#{$prefix}gradient);
   }
 
   .alert-link {
-    color: shade-color($color, 20%);
+    color: var(--#{$prefix}alert-link-color);
   }
 }
 // scss-docs-end alert-variant-mixin

package/scss/mixins/_banner.scss

@@ -0,0 +1,7 @@
+@mixin bsBanner($file) {
+  /*!
+   * CoreUI #{$file} v4.3.0-beta.0 (https://coreui.io)
+   * Copyright (c) 2023 creativeLabs Łukasz Holeczek
+   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+   */
+}

package/scss/mixins/_breakpoints.scss

@@ -22,19 +22,6 @@
   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 
-// Name of the previous breakpoint, or null for the first breakpoint.
-//
-//    >> breakpoint-before(lg)
-//    md
-//    >> breakpoint-next(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    md
-//    >> breakpoint-next(lg, $breakpoint-names: (xs sm md lg xl))
-//    md
-@function breakpoint-before($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n - 1), null);
-}
-
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))

package/scss/mixins/_caret.scss

@@ -1,44 +1,49 @@
 // scss-docs-start caret-mixins
-@mixin caret-down {
-  border-top: $caret-width solid;
-  border-right: $caret-width solid transparent;
+@mixin caret-down($width: $caret-width) {
+  border-top: $width solid;
+  border-right: $width solid transparent;
   border-bottom: 0;
-  border-left: $caret-width solid transparent;
+  border-left: $width solid transparent;
 }
 
-@mixin caret-up {
+@mixin caret-up($width: $caret-width) {
   border-top: 0;
-  border-right: $caret-width solid transparent;
-  border-bottom: $caret-width solid;
-  border-left: $caret-width solid transparent;
+  border-right: $width solid transparent;
+  border-bottom: $width solid;
+  border-left: $width solid transparent;
 }
 
-@mixin caret-end {
-  border-top: $caret-width solid transparent;
+@mixin caret-end($width: $caret-width) {
+  border-top: $width solid transparent;
   border-right: 0;
-  border-bottom: $caret-width solid transparent;
-  border-left: $caret-width solid;
+  border-bottom: $width solid transparent;
+  border-left: $width solid;
 }
 
-@mixin caret-start {
-  border-top: $caret-width solid transparent;
-  border-right: $caret-width solid;
-  border-bottom: $caret-width solid transparent;
+@mixin caret-start($width: $caret-width) {
+  border-top: $width solid transparent;
+  border-right: $width solid;
+  border-bottom: $width solid transparent;
 }
 
-@mixin caret($direction: down) {
+@mixin caret(
+  $direction: down,
+  $width: $caret-width,
+  $spacing: $caret-spacing,
+  $vertical-align: $caret-vertical-align
+) {
   @if $enable-caret {
     &::after {
       display: inline-block;
-      @include ltr-rtl("margin-left", $caret-spacing);
-      vertical-align: $caret-vertical-align;
+      margin-left: $spacing;
+      vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
-        @include caret-down();
+        @include caret-down($width);
       } @else if $direction == up {
-        @include caret-up();
+        @include caret-up($width);
       } @else if $direction == end {
-        @include caret-end();
+        @include caret-end($width);
       }
     }
 
@@ -49,15 +54,15 @@
 
       &::before {
         display: inline-block;
-        @include ltr-rtl("margin-right", $caret-spacing);
-        vertical-align: $caret-vertical-align;
+        margin-right: $spacing;
+        vertical-align: $vertical-align;
         content: "";
-        @include caret-start();
+        @include caret-start($width);
       }
     }
 
     &:empty::after {
-      @include ltr-rtl("margin-left", 0);
+      margin-left: 0;
     }
   }
 }

package/scss/mixins/_color-mode.scss

@@ -0,0 +1,21 @@
+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $root: false) {
+  @if $color-mode-type == "media-query" {
+    @if $root == true {
+      @media (prefers-color-scheme: $mode) {
+        :root {
+          @content;
+        }
+      }
+    } @else {
+      @media (prefers-color-scheme: $mode) {
+        @content;
+      }
+    }
+  } @else {
+    [data-coreui-theme="#{$mode}"] {
+      @content;
+    }
+  }
+}
+// scss-docs-end color-mode-mixin

package/scss/mixins/_forms.scss

@@ -21,7 +21,8 @@
   $icon,
   $tooltip-color: color-contrast($color),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $border-color: $color
 ) {
   .#{$state}-feedback {
     display: none;
@@ -56,7 +57,7 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         @include ltr-rtl("padding-right", $input-height-inner);
@@ -67,7 +68,7 @@
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -85,20 +86,20 @@
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
           @include ltr-rtl("padding-right", $form-select-feedback-icon-padding-end);
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
           @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;
         }
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -114,7 +115,7 @@
 
   .form-check-input {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       &:checked {
         background-color: $color;

package/scss/mixins/_grid.scss

@@ -51,7 +51,7 @@
 // Row columns
 //
 // Specify on a parent element(e.g., .row) to force immediate children into NN
-// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// number of columns. Supports wrapping to new lines, but does not do a Masonry
 // style grid.
 @mixin row-cols($count) {
   > * {

package/scss/mixins/_list-group.scss

@@ -1,4 +1,7 @@
+@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, $variant) {
   $background: map-get($variant, "bg");

package/scss/mixins/_utilities.scss

@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
   $values: map-get($utility, values);
 
   // If the values are a list or string, convert it into a map
@@ -31,9 +31,6 @@
     // Don't prefix if value key is null (e.g. 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 {
@@ -48,6 +45,7 @@
     }
 
     $is-css-var: map-get($utility, css-var);
+    $is-dark-mode: map-get($utility, dark-mode);
     $is-local-vars: map-get($utility, local-vars);
     $is-rtl: map-get($utility, rtl);
 
@@ -57,8 +55,15 @@
       }
 
       @if $is-css-var {
-        .#{$property-class + $infix + $property-class-modifier} {
-          --#{$prefix}#{$css-variable-name}: #{$value};
+        @if $enable-dark-mode and $is-dark-mode {
+          #{theme-prefix("dark", "#{$property-class + $infix + $property-class-modifier}")},
+          .#{$property-class + $infix + $property-class-modifier} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
+        } @else {
+          .#{$property-class + $infix + $property-class-modifier} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
         }
 
         @each $pseudo in $state {
@@ -67,19 +72,34 @@
           }
         }
       } @else {
-        .#{$property-class + $infix + $property-class-modifier} {
-          @each $property in $properties {
-            @if $is-local-vars {
-              @each $local-var, $variable in $is-local-vars {
-                --#{$prefix}#{$local-var}: #{$variable};
+        @if $enable-dark-mode and $is-dark-mode {
+          #{theme-prefix("dark", "#{$property-class + $infix + $property-class-modifier}")},
+          .#{$property-class + $infix + $property-class-modifier} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
               }
-            }
-            @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);
             }
           }
+        } @else {
+          .#{$property-class + $infix + $property-class-modifier} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
+              @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);
+              }
+
+            }
+          }
         }
 
         @each $pseudo in $state {

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.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};
@@ -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};
+    }
+  }
+}

package/scss/vendor/_rfs.scss

@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist, scss/dollar-variable-default
+// stylelint-disable scss/dimension-no-non-numeric-values
 
 // SCSS RFS mixin
 //
@@ -154,8 +154,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     &.enable-rfs {
       @content;
     }
-  }
-  @else {
+  } @else {
     @content;
   }
 }
@@ -168,7 +167,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
       @content;
     }
 
-    @include _rfs-media-query {
+    @include _rfs-media-query () {
       .enable-rfs &,
       &.enable-rfs {
         @content;
@@ -182,7 +181,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
         @content;
       }
     }
-    @include _rfs-media-query {
+    @include _rfs-media-query () {
       @content;
     }
   }
@@ -193,12 +192,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   // Convert to list
   $values: if(type-of($values) != list, ($values,), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
+      $val: $val + " 0";
     }
     @else {
       // Cache $value unit
@@ -206,15 +205,14 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 
       @if $unit == px {
         // Convert to rem if needed
-        $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
+        $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
       }
       @else if $unit == rem {
         // Convert to px if needed
-        $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
-      }
-      @else {
+        $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
+      } @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-        $val: $val + ' ' + $value;
+        $val: $val + " " + $value;
       }
     }
   }
@@ -228,30 +226,26 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   // Convert to list
   $values: if(type-of($values) != list, ($values,), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
-    }
-
-    @else {
+      $val: $val + " 0";
+    } @else {
       // Cache $value unit
       $unit: if(type-of($value) == "number", unit($value), false);
 
       // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
       @if not $unit or $unit != px and $unit != rem {
-        $val: $val + ' ' + $value;
-      }
-
-      @else {
+        $val: $val + " " + $value;
+      } @else {
         // Remove unit from $value for calculations
         $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + ' ' +  if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
+          $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
         }
         @else {
           // Calculate the minimum value
@@ -273,7 +267,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
           // Return the calculated value
-          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
+          $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
         }
       }
     }
@@ -287,22 +281,22 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 @mixin rfs($values, $property: font-size) {
   @if $values != null {
     $val: rfs-value($values);
-    $fluidVal: rfs-fluid-value($values);
+    $fluid-val: rfs-fluid-value($values);
 
     // Do not print the media query if responsive & non-responsive values are the same
-    @if $val == $fluidVal {
+    @if $val == $fluid-val {
       #{$property}: $val;
     }
     @else {
-      @include _rfs-rule {
-        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
+      @include _rfs-rule () {
+        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
 
         // Include safari iframe resize fix if needed
         min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
       }
 
-      @include _rfs-media-query-rule {
-        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
+      @include _rfs-media-query-rule () {
+        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
       }
     }
   }
@@ -351,4 +345,4 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 
 @mixin margin-left($value) {
   @include rfs($value, margin-left);
-}
+}

package/scss/mixins/_css-vars.scss

@@ -1,87 +0,0 @@
-@mixin css-vars() {
-  .accordion {
-    @if variable-exists("accordion-button-bg") {
-      --#{$prefix}accordion-button-bg: #{$accordion-button-bg};
-    }
-    @if variable-exists("accordion-button-color") {
-      --#{$prefix}accordion-button-color: #{$accordion-button-color};
-    }
-    @if variable-exists("accordion-border-color") {
-      --#{$prefix}accordion-border-color: #{$accordion-border-color};
-    }
-    @if variable-exists("accordion-button-active-color") {
-      --#{$prefix}accordion-button-active-color: #{$accordion-button-active-color};
-    }
-    @if variable-exists("accordion-button-active-bg") {
-      --#{$prefix}accordion-button-active-bg: #{$accordion-button-active-bg};
-    }
-    @if variable-exists("accordion-button-focus-border-color") {
-      --#{$prefix}accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
-    }
-  }
-
-  .badge {
-    @if variable-exists("badge-color") {
-      --#{$prefix}badge-color: #{$badge-color};
-    }
-  }
-
-
-  // // Accordion
-  // --#{$prefix}accordion-border-color: #{$accordion-border-color};
-  // --#{$prefix}accordion-button-active-color: #{$accordion-button-active-color};
-  // --#{$prefix}accordion-button-active-bg: #{$accordion-button-active-bg};
-  // --#{$prefix}accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
-
-  // // Badge
-  // --#{$prefix}badge-color: #{$badge-color};
-
-  // // Breadcrumb
-  // --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
-  // --#{$prefix}breadcrumb-active-color: #{$breadcrumb-active-color};
-  // --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-
-  // // Card
-  // --#{$prefix}card-bg: #{$card-bg};
-  // --#{$prefix}card-border-color: #{$card-border-color};
-  // --#{$prefix}card-color: #{$card-color};
-  // --#{$prefix}card-cap-color: #{$card-cap-color};
-  // --#{$prefix}card-cap-bg: #{$card-cap-bg};
-
-  // // Close
-  // --#{$prefix}btn-close-color: #{$btn-close-color};
-  // --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
-
-  // // Dropdown
-  // --#{$prefix}dropdown-color: #{$dropdown-color};
-  // --#{$prefix}dropdown-bg: #{$dropdown-bg};
-  // --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
-  // --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
-  // --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
-  // --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
-  // --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
-  // --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  // --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
-
-  // // Images
-  // --#{$prefix}thumbnail-bg: #{$thumbnail-bg};
-  // --#{$prefix}thumbnail-border-color: #{$thumbnail-border-color};
-
-  // // Images / Figure
-  // --#{$prefix}figure-caption-color: $figure-caption-color;
-
-  // // List Group
-  // --#{$prefix}list-group-action-color: #{$list-group-action-color};
-  // --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
-  // --#{$prefix}list-group-hover-bg: #{$list-group-hover-bg};
-  // --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
-  // --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
-  // --#{$prefix}list-group-color: #{$list-group-color};
-  // --#{$prefix}list-group-bg: #{$list-group-bg};
-  // --#{$prefix}list-group-border-color: #{$list-group-border-color};
-  // --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
-  // --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
-  // --#{$prefix}list-group-active-color: #{$list-group-active-color};
-  // --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
-  // --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
-}