diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss index aa1f82b961..107287eb7c 100644 --- a/scss/vendor/_rfs.scss +++ b/scss/vendor/_rfs.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // stylelint-disable scss/dimension-no-non-numeric-values // SCSS RFS mixin @@ -52,54 +54,12 @@ $enable-rfs: true !default; // Cache $rfs-base-value unit $rfs-base-value-unit: unit($rfs-base-value); -@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: unit($dividend); - $divisor-unit: 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; -} - // Remove px-unit from $rfs-base-value for calculations @if $rfs-base-value-unit == px { - $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1); + $rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1); } @else if $rfs-base-value-unit == rem { - $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value)); + $rfs-base-value: math.div($rfs-base-value, math.div($rfs-base-value * 0 + 1, $rfs-rem-value)); } // Cache $rfs-breakpoint unit to prevent multiple calls @@ -107,14 +67,14 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Remove unit from $rfs-breakpoint for calculations @if $rfs-breakpoint-unit-cache == px { - $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1); + $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1); } @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" { - $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value)); + $rfs-breakpoint: math.div($rfs-breakpoint, math.div($rfs-breakpoint * 0 + 1, $rfs-rem-value)); } // Calculate the media query value -$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); +$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width); $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height); @@ -167,7 +127,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; @@ -181,7 +141,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; } } @@ -205,11 +165,11 @@ $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, #{math.div($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); + $val: $val + " " + if($rfs-unit == px, #{math.div($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; @@ -241,21 +201,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height $val: $val + " " + $value; } @else { // Remove unit from $value for calculations - $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value))); + $value: math.div($value, $value * 0 + if($unit == px, 1, math.div(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, #{math.div($value, $rfs-rem-value)}rem, #{$value}px); } @else { // Calculate the minimum value - $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor); + $value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor); // Calculate difference between $value and the minimum value $value-diff: abs($value) - $value-min; // Base value formatting - $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px); + $min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px); // Use negative value if needed $min-width: if($value < 0, -$min-width, $min-width); @@ -264,7 +224,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height $variable-unit: if($rfs-two-dimensional, vmin, vw); // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; + $variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; // Return the calculated value $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")"; @@ -288,14 +248,14 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height #{$property}: $val; } @else { - @include _rfs-rule () { + @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 () { + @include _rfs-media-query-rule() { #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val); } }