From: Antti Hukkanen <antti.hukkanen@mainiotech.fi>
Date: Fri, 16 Jul 2021 16:11:22 +0000 (+0300)
Subject: refactor: get rid of slash divisions for dart sass compatibility
X-Git-Tag: v6.7.1~27
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d06431e40c08478e5cf51c551a3f6c33ee228bbf;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

refactor: get rid of slash divisions for dart sass compatibility

# Conflicts:
#	scss/forms/_label.scss
---

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 1e05469c8..321678dd9 100644
--- a/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@ -58,7 +58,7 @@ $accordionmenu-arrow-size: 6px !default;
       @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
       position: absolute;
       top: 50%;
-      margin-top: -1 * ($accordionmenu-arrow-size / 2);
+      margin-top: -1 * ($accordionmenu-arrow-size * 0.5);
       #{$global-right}: 1rem;
     }
   }
diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 035097f4a..92da7d269 100644
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -130,7 +130,7 @@ $buttongroup-radius-on-each: true !default;
         &:first-child:nth-last-child(#{$i}) {
           &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
             display: inline-block;
-            width: calc(#{percentage(1 / $i)} - #{$spacing});
+            width: calc(#{percentage(divide(1, $i))} - #{$spacing});
             margin-#{$global-right}: $spacing;
 
             &:last-child {
diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 3aa14cdd6..3d180a25c 100644
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -107,7 +107,7 @@ $dropdown-menu-item-background-active: transparent !default;
         @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
         #{$global-right}: 5px;
         #{$global-left}: auto;
-        margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+        margin-top: -1 * ($dropdownmenu-arrow-size * 0.5);
       }
     }
   }
diff --git a/scss/components/_table.scss b/scss/components/_table.scss
index 1627f8829..d09bc7a1b 100644
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
@@ -50,7 +50,7 @@ $table-stripe: even !default;
 
 /// Default color for header background.
 /// @type Color
-$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default;
 
 /// Default color of header rows on hover.
 /// @type List
diff --git a/scss/forms/_label.scss b/scss/forms/_label.scss
index ca0255758..8620876a2 100644
--- a/scss/forms/_label.scss
+++ b/scss/forms/_label.scss
@@ -37,7 +37,7 @@ $form-label-line-height: 1.8 !default;
 
   margin: 0 0 $form-spacing;
   line-height: $global-lineheight;
-  padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
+  padding: ($form-spacing * 0.5 + rem-calc($input-border-width)) 0;
 }
 
 @mixin foundation-form-label {
diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss
index 99a283919..f907df9be 100644
--- a/scss/forms/_range.scss
+++ b/scss/forms/_range.scss
@@ -40,7 +40,7 @@ $slider-radius: $global-radius !default;
 
 @mixin foundation-range-input {
   input[type='range'] {  // sass-lint:disable-line no-qualifying-elements
-    $margin: ($slider-handle-height - $slider-height) / 2;
+    $margin: ($slider-handle-height - $slider-height) * 0.5;
 
     display: block;
     width: 100%;
diff --git a/scss/forms/_text.scss b/scss/forms/_text.scss
index 5b67b5ceb..0081c53a0 100644
--- a/scss/forms/_text.scss
+++ b/scss/forms/_text.scss
@@ -52,7 +52,7 @@ $input-border-focus: 1px solid $dark-gray !default;
 
 /// Padding of text inputs.
 /// @type Color
-$input-padding: $form-spacing / 2 !default;
+$input-padding: $form-spacing * 0.5 !default;
 
 /// Box shadow inside text inputs when not focused.
 /// @type Shadow
diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 06585d5e8..bda00e9c0 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -102,7 +102,7 @@
   flex-wrap: wrap;
 
   > #{$selector} {
-    $pct: percentage(1/$n);
+    $pct: percentage(divide(1, $n));
 
     flex: 0 0 $pct;
     max-width: $pct;
diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss
index c7b5fb368..7ec0f4599 100644
--- a/scss/grid/_gutter.scss
+++ b/scss/grid/_gutter.scss
@@ -18,7 +18,7 @@
   $gutters: $grid-column-gutter
 ) {
   @include -zf-breakpoint-value($gutter, $gutters) {
-    $padding: rem-calc($-zf-bp-value) / 2;
+    $padding: rem-calc($-zf-bp-value) * 0.5;
 
     padding-right: $padding;
     padding-left: $padding;
diff --git a/scss/grid/_layout.scss b/scss/grid/_layout.scss
index dde2083ed..ba8e2812e 100644
--- a/scss/grid/_layout.scss
+++ b/scss/grid/_layout.scss
@@ -21,14 +21,14 @@
 ) {
   & > #{$selector} {
     float: $global-left;
-    width: percentage(1/$n);
+    width: percentage(divide(1, $n));
 
     // If a $gutter value is passed
     @if($gutter) {
       // Gutters
       @if type-of($gutter) == 'map' {
         @each $breakpoint, $value in $gutter {
-          $padding: rem-calc($value) / 2;
+          $padding: rem-calc($value) * 0.5;
 
           @include breakpoint($breakpoint) {
             padding-right: $padding;
@@ -37,7 +37,7 @@
         }
       }
       @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
-        $padding: rem-calc($gutter) / 2;
+        $padding: rem-calc($gutter) * 0.5;
         padding-right: $padding;
         padding-left: $padding;
       }
@@ -64,12 +64,12 @@
   @for $i from 1 to $n {
     @if $i == 1 {
       &:nth-child(#{$n}n+1):last-child {
-        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+        margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
       }
     }
     @else {
       &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
-        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+        margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
       }
     }
   }
diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
index 56f6f7e1f..40f71344e 100644
--- a/scss/grid/_position.scss
+++ b/scss/grid/_position.scss
@@ -32,7 +32,7 @@
 
   // Push/pull
   @else if type-of($position) == 'number' {
-    $offset: percentage($position / $grid-column-count);
+    $offset: percentage(divide($position, $grid-column-count));
 
     position: relative;
     #{$global-left}: $offset;
diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss
index 9356fb25e..0168c4131 100644
--- a/scss/grid/_row.scss
+++ b/scss/grid/_row.scss
@@ -80,7 +80,7 @@
 /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
 @mixin grid-row-nest($gutters: $grid-column-gutter) {
   @include -zf-each-breakpoint {
-    $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
+    $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) * 0.5 * -1;
 
     margin-right: $margin;
     margin-left: $margin;
diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 8a9ab56a1..952009181 100644
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -461,7 +461,7 @@ $input-background-focus: $white;
 $input-background-disabled: $light-gray;
 $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
-$input-padding: $form-spacing / 2;
+$input-padding: $form-spacing * 0.5;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1);
 $input-shadow-focus: 0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;
@@ -807,7 +807,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
 $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
 $table-head-row-hover: darken($table-head-background, $table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
 $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index f05325a82..08fbdef7a 100644
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -119,7 +119,7 @@ $breakpoint-classes: (small medium large) !default;
       // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
       // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
       // See https://github.com/foundation/foundation-sites/issues/11313
-      $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
+      $bp-max: if($hidpi, $bp-next - divide(1, $std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
     }
   }
 
diff --git a/scss/util/_color.scss b/scss/util/_color.scss
index 8b15c813a..262ed4174 100644
--- a/scss/util/_color.scss
+++ b/scss/util/_color.scss
@@ -33,9 +33,9 @@ $success-color:null;
 
   @for $i from 1 through 3 {
     $rgb: nth($rgba, $i);
-    $rgb: $rgb / 255;
+    $rgb: divide($rgb, 255);
 
-    $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
+    $rgb: if($rgb < 0.03928, divide($rgb, 12.92), pow(divide($rgb + 0.055, 1.055), 2.4));
 
     $rgba2: append($rgba2, $rgb);
   }
@@ -54,13 +54,13 @@ $success-color:null;
   // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
   $luminance1: color-luminance($color1) + 0.05;
   $luminance2: color-luminance($color2) + 0.05;
-  $ratio: $luminance1 / $luminance2;
+  $ratio: divide($luminance1, $luminance2);
 
   @if $luminance2 > $luminance1 {
-    $ratio: 1 / $ratio;
+    $ratio: divide(1, $ratio);
   }
 
-  $ratio: round($ratio * 10) / 10;
+  $ratio: round($ratio * 10) * 0.1;
 
   @return $ratio;
 }
diff --git a/scss/util/_direction.scss b/scss/util/_direction.scss
index 8241e8da1..eff40d167 100644
--- a/scss/util/_direction.scss
+++ b/scss/util/_direction.scss
@@ -23,7 +23,7 @@
 
   // Calculate the opposite place in a circle, with a starting index of 1
   $length: length($dirs);
-  $demi: $length / 2;
+  $demi: $length * 0.5;
   $opposite-place: (($place + $demi - 1) % $length) + 1;
 
   @return nth($dirs, $opposite-place);
diff --git a/scss/util/_math.scss b/scss/util/_math.scss
index c94b2c9c4..a9dddcbe6 100644
--- a/scss/util/_math.scss
+++ b/scss/util/_math.scss
@@ -33,7 +33,7 @@
     $prec2 : pow(10, $prec);
     $exponent: round($exponent * $prec2);
     $denominator: gcd($exponent, $prec2);
-    @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
+    @return nth-root(pow($base, divide($exponent, $denominator)), divide($prec2, $denominator), $prec);
   }
 
   $value: $base;
@@ -44,7 +44,7 @@
   }
   @else if $exponent < 1 {
     @for $i from 0 through -$exponent {
-      $value: $value / $base;
+      $value: divide($value, $base);
     }
   }
 
@@ -56,7 +56,7 @@
   $x: 1;
 
   @for $i from 0 through $prec {
-    $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
+    $x: divide(1, $n) * (($n - 1) * $x + divide($num, pow($x, $n - 1)));
   }
 
   @return $x;
@@ -68,7 +68,7 @@
 @function ratio-to-percentage($ratio) {
   $w: nth($ratio, 1);
   $h: nth($ratio, 3);
-  @return $h / $w * 100%;
+  @return divide($h, $w) * 100%;
 }
 
 /// Parse the given `$fraction` to numerators and denumerators.
@@ -143,5 +143,5 @@
     }
   }
 
-  @return percentage($parsed-nominator / $parsed-denominator);
+  @return percentage(divide($parsed-nominator, $parsed-denominator));
 }
diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 512f2827f..a723df58f 100644
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -96,7 +96,7 @@ $-zf-pb-value: null;
   $hover-shadow: ();
 
   // Spacing between bars is calculated based on the total height of the icon and the weight of each bar
-  $spacing: ($height - ($weight * $bars)) / ($bars - 1);
+  $spacing: divide($height - ($weight * $bars), $bars - 1);
 
   @if unit($spacing) == 'px' {
     $spacing: floor($spacing);
@@ -197,7 +197,7 @@ $-zf-pb-value: null;
   @for $i from 2 through $max {
     &:nth-last-child(#{$i}):first-child,
     &:nth-last-child(#{$i}):first-child ~ #{$elem} {
-      width: percentage(1 / $i);
+      width: percentage(divide(1, $i));
     }
   }
 }
diff --git a/scss/util/_unit.scss b/scss/util/_unit.scss
index beebcdf53..e1bd81a0f 100644
--- a/scss/util/_unit.scss
+++ b/scss/util/_unit.scss
@@ -2,6 +2,8 @@
 // https://get.foundation
 // Licensed under MIT Open Source
 
+@import 'math';
+
 ////
 /// @group functions
 ////
@@ -14,7 +16,7 @@ $global-font-size: 100% !default;
 ///
 /// @returns {Number} The same number, sans unit.
 @function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
+  @return divide($num, $num * 0 + 1);
 }
 
 /// Converts one or more pixel values into matching rem values.
@@ -35,7 +37,7 @@ $global-font-size: 100% !default;
   // If the base font size is a %, then multiply it by 16px
   // This is because 100% font size = 16px in most all browsers
   @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
+    $base: divide($base, 100%) * 16px;
   }
 
   // Using rem as base allows correct scaling
@@ -86,7 +88,7 @@ $global-font-size: 100% !default;
 
   // Calculate rem if units for $value is not rem or em
   @if unit($value) != 'rem' {
-    $value: strip-unit($value) / strip-unit($base) * 1rem;
+    $value: divide(strip-unit($value), strip-unit($base)) * 1rem;
   }
 
   // Turn 0rem into 0
@@ -114,7 +116,7 @@ $global-font-size: 100% !default;
 
   // If the base font size is a %, then multiply it by 16px
   @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
+    $base: divide($base, 100%) * 16px;
   }
 
   @if unit($base) == 'rem' {
@@ -127,7 +129,7 @@ $global-font-size: 100% !default;
 
   // Now let's convert our value to pixels too
   @if unit($value) == '%' {
-    $value: ($value / 100%) * $base;
+    $value: divide($value, 100%) * $base;
   }
 
   @if unit($value) == 'rem' {
@@ -140,12 +142,12 @@ $global-font-size: 100% !default;
 
   // 'px'
   @if unit($value) == 'px' {
-    @return strip-unit($value) / strip-unit($base);
+    @return divide(strip-unit($value), strip-unit($base));
   }
 
   // assume that line-heights greater than 10 are meant to be absolute in 'px'
   @if unitless($value) and ($value > 10) {
-    @return $value / strip-unit($base);
+    @return divide($value, strip-unit($base));
   }
 
   @return $value;
diff --git a/scss/xy-grid/_gutters.scss b/scss/xy-grid/_gutters.scss
index ff3ea3c90..839e8746f 100644
--- a/scss/xy-grid/_gutters.scss
+++ b/scss/xy-grid/_gutters.scss
@@ -26,7 +26,7 @@
   // Output our margin gutters.
   @if (type-of($gutters) == 'map') {
     @include -zf-breakpoint-value(auto, $gutters) {
-      $gutter: rem-calc($-zf-bp-value) / 2;
+      $gutter: rem-calc($-zf-bp-value) * 0.5;
 
       // Loop through each gutter position
       @each $value in $gutter-position {
@@ -35,7 +35,7 @@
     }
   }
   @else if (type-of($gutters) == 'number') {
-    $gutter: rem-calc($gutters) / 2;
+    $gutter: rem-calc($gutters) * 0.5;
 
     // Loop through each gutter position
     @each $value in $gutter-position {
diff --git a/scss/xy-grid/_layout.scss b/scss/xy-grid/_layout.scss
index d087825ac..d62e797c1 100644
--- a/scss/xy-grid/_layout.scss
+++ b/scss/xy-grid/_layout.scss
@@ -28,7 +28,7 @@
   $vertical: false,
   $output: (base size gutters)
 ) {
-  $size: percentage(1/$n);
+  $size: percentage(divide(1, $n));
 
   & > #{$selector} {
     @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);
diff --git a/scss/xy-grid/_position.scss b/scss/xy-grid/_position.scss
index 414f5bb77..b59e44a89 100644
--- a/scss/xy-grid/_position.scss
+++ b/scss/xy-grid/_position.scss
@@ -25,7 +25,7 @@
 
   $offset: $size;
   @if ($gutter-type == 'margin') {
-    $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) / 2);
+    $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) * 0.5);
     $offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter}));
   }
   @return $offset;
diff --git a/test/sass/_components.scss b/test/sass/_components.scss
index 0e8bf0e70..f6dd2a082 100644
--- a/test/sass/_components.scss
+++ b/test/sass/_components.scss
@@ -9,7 +9,7 @@
 
   @include test('Ratio to Percentage [function]') {
     $test: ratio-to-percentage(3 by 4);
-    $expect: 4 / 3 * 100%;
+    $expect: divide(4, 3) * 100%;
 
     @include assert-equal($test, $expect,
       'Creates a percentage value from a ratio');