@coreui/coreui 5.1.2 → 5.3.0

package/scss/functions/_maps.scss

@@ -0,0 +1,57 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "color" as *;
+@use "rgba-css-var" as *;
+@use "to-rgb" as *;
+@use "../variables" as *;
+
+// stylelint-disable scss/dollar-variable-pattern
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: list.append($_args, if($arg == "$prefix", $prefix, if($arg == "$key", $key, if($arg == "$value", $value, $arg))));
+    }
+
+    $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
+  }
+  @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+// Internal Bootstrap function to turn maps into its negative variant.
+// It prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+  $result: ();
+  @each $key, $value in $map {
+    @if $key != 0 {
+      $result: map.merge($result, ("n" + $key: (-$value)));
+    }
+  }
+  @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+  $result: ();
+  @each $key, $value in $map {
+    @if (list.index($values, $key) != null) {
+      $result: map.merge($result, ($key: $value));
+    }
+  }
+  @return $result;
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map.merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}

package/scss/functions/_math.scss

@@ -0,0 +1,87 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+    @return $value1 + $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+    @return $value1 - $value2;
+  }
+
+  @if meta.type-of($value2) != number {
+    $value2: string.unquote("(") + $value2 + string.unquote(")");
+  }
+
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(" - ") + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%
+  );
+  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+    $result: $result * map.get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}

package/scss/functions/_rgba-css-var.scss

@@ -0,0 +1,9 @@
+@function rgba-css-var($prefix, $identifier, $target) {
+  @if $identifier == "body" and $target == "bg" {
+    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+  } @if $identifier == "body" and $target == "text" {
+    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+  }
+}

package/scss/functions/_str-replace.scss

@@ -0,0 +1,19 @@
+@use "sass:string";
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Kitty Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/scss/functions/_to-rgb.scss

@@ -0,0 +1,5 @@
+@use "sass:color";
+
+@function to-rgb($value) {
+  @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
+}

package/scss/helpers/_clearfix.scss

@@ -1,3 +1,5 @@
+@use "../mixins/clearfix" as *;
+
 .clearfix {
   @include clearfix();
 }

package/scss/helpers/_color-bg.scss

@@ -1,8 +1,14 @@
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@use "../functions/color" as *;
+@use "../functions/color-contrast" as *;
+@use "../functions/to-rgb" as *;
+@use "../mixins/color-mode" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
 @each $color, $value in $theme-colors {
   .text-bg-#{$color} {
     color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
 
@@ -12,7 +18,7 @@
       $color-rgb: to-rgb($value);
       .text-bg-#{$color} {
         color: color-contrast($value) if($enable-important-utilities, !important, null);
-        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+        background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }

package/scss/helpers/_colored-links.scss

@@ -1,15 +1,19 @@
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@use "../functions/color" as *;
+@use "../functions/color-contrast" as *;
+@use "../functions/to-rgb" as *;
+@use "../variables" as *;
+
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    text-decoration-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
         $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }
@@ -17,14 +21,14 @@
 
 // One-off special link helper as a bridge until v6
 .link-body-emphasis {
-  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
   @if $link-shade-percentage != 0 {
     &:hover,
     &:focus {
-      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
-      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+      color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
     }
   }
 }

package/scss/helpers/_focus-ring.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .focus-ring:focus {
   outline: 0;
   // By default, there is no `--cui-focus-ring-x`, `--cui-focus-ring-y`, or `--cui-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values

package/scss/helpers/_icon-link.scss

@@ -1,3 +1,6 @@
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+
 .icon-link {
   display: inline-flex;
   gap: $icon-link-gap;

package/scss/helpers/_position.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../mixins/breakpoints" as *;
+@use "../variables" as *;
+
 // Shorthand
 
 .fixed-top {
@@ -17,7 +21,7 @@
 }
 
 // Responsive sticky top and bottom
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/scss/helpers/_ratio.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .ratio {
@@ -12,8 +14,8 @@
 
   > * {
     position: absolute;
+    inset-inline-start: 0;
     top: 0;
-    @include ltr-rtl("left", 0);
     width: 100%;
     height: 100%;
   }

package/scss/helpers/_stretched-link.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 //
 // Stretched link
 //

package/scss/helpers/_text-truncation.scss

@@ -1,3 +1,5 @@
+@use "../mixins/text-truncate" as *;
+
 //
 // Text truncation
 //

package/scss/helpers/_visually-hidden.scss

@@ -1,3 +1,5 @@
+@use "../mixins/visually-hidden" as *;
+
 //
 // Visually hidden
 //

package/scss/helpers/_vr.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .vr {
   display: inline-block;
   align-self: stretch;

package/scss/mixins/_alert.scss

@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../mixins/deprecate" as *;
+
 @include deprecate("`alert-variant()`", "v4.3.0", "v6.0.0");
 
 // scss-docs-start alert-variant-mixin

package/scss/mixins/_avatar.scss

@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../mixins/deprecate" as *;
+
 @include deprecate("`avatar()`", "v5.1.0", "v6.0.0");
 
 @mixin avatar($width) {

package/scss/mixins/_backdrop.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 // Shared between modals and offcanvases
 @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
   position: fixed;

package/scss/mixins/_border-radius.scss

@@ -1,14 +1,18 @@
 // stylelint-disable property-disallowed-list
+@use "sass:list";
+@use "sass:meta";
+@use "../variables" as *;
+
 // Single side border-radius
 
 // Helper function to replace negative values with 0
 @function valid-radius($radius) {
   $return: ();
   @each $value in $radius {
-    @if type-of($value) == number {
-      $return: append($return, max($value, 0));
+    @if meta.type-of($value) == number {
+      $return: list.append($return, max($value, 0));
     } @else {
-      $return: append($return, $value);
+      $return: list.append($return, $value);
     }
   }
   @return $return;
@@ -33,8 +37,8 @@
 
 @mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-top-right-radius", valid-radius($radius));
-    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));
+    border-start-end-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
@@ -47,32 +51,32 @@
 
 @mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-top-left-radius", valid-radius($radius));
-    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));
+    border-start-start-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-top-right-radius", valid-radius($radius));
+    border-start-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));
+    border-end-start-radius: valid-radius($radius);
   }
 }
 // scss-docs-end border-radius-mixins

package/scss/mixins/_box-shadow.scss

@@ -1,12 +1,15 @@
+@use "sass:list";
+@use "../variables" as *;
+
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
     $result: ();
 
     @each $value in $shadow {
       @if $value != null {
-        $result: append($result, $value, "comma");
+        $result: list.append($result, $value, "comma");
       }
-      @if $value == none and length($shadow) > 1 {
+      @if $value == none and list.length($shadow) > 1 {
         @warn "The keyword 'none' must be used as a single argument.";
       }
     }

package/scss/mixins/_breakpoints.scss

@@ -1,3 +1,7 @@
+@use "sass:list";
+@use "sass:map";
+@use "../variables" as *;
+
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -14,12 +18,12 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -27,7 +31,7 @@
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
@@ -41,7 +45,7 @@
 //    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $max: map-get($breakpoints, $name);
+  $max: map.get($breakpoints, $name);
   @return if($max and $max > 0, $max - .02, null);
 }
 
@@ -125,3 +129,76 @@
     }
   }
 }
+
+//
+// Container query mixins
+//
+
+// Container query for applying styles when the container’s inline size is at least the breakpoint’s minimum width.
+@mixin container-breakpoint-up($name, $breakpoints: $cq-grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @container (min-width: #{$min}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Container query for applying styles when the container’s inline size is at most the breakpoint’s maximum width.
+@mixin container-breakpoint-down($name, $breakpoints: $cq-grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @container (max-width: #{$max}) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Container query for applying styles between two breakpoints.
+@mixin container-breakpoint-between($lower, $upper, $breakpoints: $cq-grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @container (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    // When the upper breakpoint is the last one.
+    @include container-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    // When the lower breakpoint is the smallest.
+    @include container-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Container query for applying styles only within a single breakpoint range.
+@mixin container-breakpoint-only($name, $breakpoints: $cq-grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
+  $max: breakpoint-max($next, $breakpoints);
+
+  @if $min != null and $max != null {
+    @container (min-width: #{$min}) and (max-width: #{$max}) {
+      @content;
+    }
+  } @else if $max == null {
+    // Last breakpoint – no maximum query.
+    @include container-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    // First breakpoint – no minimum query.
+    @include container-breakpoint-down($next, $breakpoints) {
+      @content;
+    }
+  }
+}