Use "sass:list" for nth function

Calling global `nth` is deprecated. This uses "sass:list" instead.

scss/components/_close-button.scss

@@ -6,6 +6,8 @@
 /// @group close-button
 ////
 
+@use "sass:list";
+
 /// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
 /// @type List
 $closebutton-position: right top !default;
@@ -78,8 +80,8 @@ $closebutton-color-hover: $black !default;
 /// Sets the size and position of a close button.
 /// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
 @mixin close-button-size($size) {
-  $x: nth($closebutton-position, 1);
-  $y: nth($closebutton-position, 2);
+  $x: list.nth($closebutton-position, 1);
+  $y: list.nth($closebutton-position, 2);
 
   #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
   #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
@@ -89,8 +91,8 @@ $closebutton-color-hover: $black !default;
 
 /// Adds styles for a close button, using the styles in the settings variables.
 @mixin close-button {
-  $x: nth($closebutton-position, 1);
-  $y: nth($closebutton-position, 2);
+  $x: list.nth($closebutton-position, 1);
+  $y: list.nth($closebutton-position, 2);
 
   position: absolute;
   z-index: $closebutton-z-index;

scss/components/_dropdown-menu.scss

@@ -6,6 +6,8 @@
 /// @group dropdown-menu
 ////
 
+@use "sass:list";
+
 /// Enables arrows for items with dropdown menus.
 /// @type Boolean
 $dropdownmenu-arrows: true !default;
@@ -53,7 +55,7 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
 // Border width for dropdown sub-menus.
 // Used to adjust top margin of a sub-menu if a border is used.
 // @type Length
-$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
+$dropdownmenu-border-width: list.nth($dropdownmenu-border, 1);
 
 /// Text color of an active dropdown menu item. Explicit override for menu defaults
 /// @type Color

scss/util/_breakpoint.scss

@@ -6,6 +6,8 @@
 /// @group breakpoints
 ////
 
+@use "sass:list";
+
 /// Patch to fix issue #12080
 $-zf-size: null;
 
@@ -38,11 +40,11 @@ $-zf-zero-breakpoint: small !default;
 
 $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
 
-@if nth(map-values($breakpoints), 1) != 0 {
+@if list.nth(map-values($breakpoints), 1) != 0 {
   @error 'The first key in the $breakpoints map must have a value of "0".';
 }
 @else {
-  $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
+  $-zf-zero-breakpoint: list.nth(map-keys($breakpoints), 1);
 }
 
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
@@ -58,15 +60,15 @@ $breakpoint-classes: (small medium large) !default;
   $std-web-dpi: 96;
 
   // Size or keyword
-  $bp: nth($val, 1);
+  $bp: list.nth($val, 1);
   // Value of the following breakpoint
   $bp-next: null;
   // Value for max-width media queries
   $bp-min: null;
   // Value for min-width media queries
   $bp-max: null;
   // Direction of media query (up, down, or only)
-  $dir: if(length($val) > 1, nth($val, 2), up);
+  $dir: if(length($val) > 1, list.nth($val, 2), up);
   // If named, name of the breakpoint
   $name: null;
   // If the breakpoint is a HiDPI breakpoint
@@ -151,20 +153,20 @@ $breakpoint-classes: (small medium large) !default;
 /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
 @mixin breakpoint($values...) {
   @for $i from 1 through length($values) {
-    $value: nth($values, $i);
+    $value: list.nth($values, $i);
     $str: breakpoint($value);
-    $bp: index($-zf-breakpoints-keys, nth($value, 1));
+    $bp: index($-zf-breakpoints-keys, list.nth($value, 1));
     $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
     // Direction of media query (up, down, or only)
-    $dir: if(length($value) > 1, nth($value, 2), up);
+    $dir: if(length($value) > 1, list.nth($value, 2), up);
 
     $old-zf-size: null;
 
     // Make breakpoint size available as a variable
     @if global-variable-exists(-zf-size) {
       $old-zf-size: $-zf-size;
     }
-    $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
+    $-zf-size: list.nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
 
     // If $str is still an empty string, no media query is needed
     @if $str == '' {
@@ -233,7 +235,7 @@ $breakpoint-classes: (small medium large) !default;
   }
   // Otherwise, return the value
   @else {
-    @return map-get($map, nth($values, $i));
+    @return map-get($map, list.nth($values, $i));
   }
 
 }

scss/util/_color.scss

@@ -3,6 +3,7 @@
 // Licensed under MIT Open Source
 
 @use "sass:color";
+@use "sass:list";
 @import 'math';
 
 $contrast-warnings: true !default;
@@ -34,15 +35,15 @@ $success-color: null !default;
   $rgba2: ();
 
   @for $i from 1 through 3 {
-    $rgb: nth($rgba, $i);
+    $rgb: list.nth($rgba, $i);
     $rgb: divide($rgb, 255);
 
     $rgb: if($rgb < 0.03928, divide($rgb, 12.92), pow(divide($rgb + 0.055, 1.055), 2.4));
 
     $rgba2: append($rgba2, $rgb);
   }
 
-  @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
+  @return 0.2126 * list.nth($rgba2, 1) + 0.7152 * list.nth($rgba2, 2) + 0.0722 * list.nth($rgba2, 3);
 }
 
 /// Checks the contrast ratio of two colors.
@@ -75,14 +76,14 @@ $success-color: null !default;
 ///
 /// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.
 @function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {
-  $contrast: color-contrast($base, nth($colors, 1));
-  $best: nth($colors, 1);
+  $contrast: color-contrast($base, list.nth($colors, 1));
+  $best: list.nth($colors, 1);
 
   @for $i from 2 through length($colors) {
-    $current-contrast: color-contrast($base, nth($colors, $i));
+    $current-contrast: color-contrast($base, list.nth($colors, $i));
     @if ($current-contrast - $contrast > $tolerance) {
-      $contrast: color-contrast($base, nth($colors, $i));
-      $best: nth($colors, $i);
+      $contrast: color-contrast($base, list.nth($colors, $i));
+      $best: list.nth($colors, $i);
     }
   }
 

scss/util/_direction.scss

@@ -6,6 +6,8 @@
 /// @group functions
 ////
 
+@use "sass:list";
+
 /// Returns the opposite direction of $dir
 ///
 /// @param {Keyword} $dir - Used direction between "top", "right", "bottom" and "left".
@@ -26,6 +28,6 @@
   $demi: $length * 0.5;
   $opposite-place: (($place + $demi - 1) % $length) + 1;
 
-  @return nth($dirs, $opposite-place);
+  @return list.nth($dirs, $opposite-place);
 }
 

scss/util/_math.scss

@@ -3,6 +3,7 @@
 // Licensed under MIT Open Source
 
 @use "sass:math";
+@use "sass:list";
 
 ////
 /// @group functions
@@ -68,8 +69,8 @@
 /// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
 /// @return {Number} A percentage value for the height relative to the width of a responsive container.
 @function ratio-to-percentage($ratio) {
-  $w: nth($ratio, 1);
-  $h: nth($ratio, 3);
+  $w: list.nth($ratio, 1);
+  $h: list.nth($ratio, 3);
   @return divide($h, $w) * 100%;
 }
 
@@ -100,9 +101,9 @@
   @else if type-of($fraction) == 'list' {
     // "50 of 100", "50/100"...
     @if length($fraction) == 3
-    and type-of(nth($fraction, 1) == 'number')
-    and type-of(nth($fraction, 3) == 'number') {
-      @return (nth($fraction, 1), nth($fraction, 3));
+    and type-of(list.nth($fraction, 1) == 'number')
+    and type-of(list.nth($fraction, 3) == 'number') {
+      @return (list.nth($fraction, 1), list.nth($fraction, 3));
     }
   }
 
@@ -117,8 +118,8 @@
 /// @return {Boolean} `true` if `$value` represents a fraction, `false` otherwise.
 @function zf-is-fraction($value, $allow-no-denominator: false) {
   $parsed: zf-parse-fraction($value);
-  @return not(nth($parsed, 1) == null
-    or (nth($parsed, 2) == null and $allow-no-denominator == false));
+  @return not(list.nth($parsed, 1) == null
+    or (list.nth($parsed, 2) == null and $allow-no-denominator == false));
 }
 
 /// Calculate a percentage from a given fraction.
@@ -130,8 +131,8 @@
   $denominator: null
 ) {
   $parsed: zf-parse-fraction($fraction);
-  $parsed-nominator: nth($parsed, 1);
-  $parsed-denominator: nth($parsed, 2);
+  $parsed-nominator: list.nth($parsed, 1);
+  $parsed-denominator: list.nth($parsed, 2);
 
   @if $parsed-nominator == null {
     @error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';

scss/util/_value.scss

@@ -6,6 +6,8 @@
 /// @group functions
 ////
 
+@use "sass:list";
+
 /// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
 ///
 /// @param {Mixed} $val - Value to check.
@@ -37,13 +39,13 @@
     @return $val;
   }
   @if $length == 2 {
-    @return map-get((top: nth($val, 1), bottom: nth($val, 1), left: nth($val, 2), right: nth($val, 2), ), $side);
+    @return map-get((top: list.nth($val, 1), bottom: list.nth($val, 1), left: list.nth($val, 2), right: list.nth($val, 2), ), $side);
   }
   @if $length == 3 {
-    @return map-get((top: nth($val, 1), left: nth($val, 2), right: nth($val, 2), bottom: nth($val, 3), ), $side);
+    @return map-get((top: list.nth($val, 1), left: list.nth($val, 2), right: list.nth($val, 2), bottom: list.nth($val, 3), ), $side);
   }
   @if $length == 4 {
-    @return map-get((top: nth($val, 1), right: nth($val, 2), bottom: nth($val, 3), left: nth($val, 4), ), $side);
+    @return map-get((top: list.nth($val, 1), right: list.nth($val, 2), bottom: list.nth($val, 3), left: list.nth($val, 4), ), $side);
   }
 }