Get rid of deprecation warnings (streamlit#4097)

edgar88 · Nov 23, 2021 · 4b007e2 · 4b007e2
1 parent f4a66f3
commit 4b007e2
Showing 1 changed file with 30 additions and 17 deletions.
diff --git a/frontend/src/assets/css/vendor/rfs.scss b/frontend/src/assets/css/vendor/rfs.scss
@@ -9,6 +9,8 @@
 // Configuration
 
 // Base value
+@use "sass:math";
+
 $rfs-base-value: 1.25rem !default;
 $rfs-unit: rem !default;
 
@@ -60,33 +62,37 @@ $rfs-base-value-unit: unit($rfs-base-value);
 
 // Remove px-unit from $rfs-base-value for calculations
 @if $rfs-base-value-unit == px {
-  $rfs-base-value: $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: $rfs-base-value /
-    ($rfs-base-value * 0 + 1 / $rfs-rem-value);
+  $rfs-base-value: math.div(
+    $rfs-base-value,
+    $rfs-base-value * 0 + math.div(1, $rfs-rem-value)
+  );
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
 $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == px {
-  $rfs-breakpoint: $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: $rfs-breakpoint /
-    ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+  $rfs-breakpoint: math.div(
+    $rfs-breakpoint,
+    $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value)
+  );
 }
 
 // Calculate the media query value
 $rfs-mq-value: if(
   $rfs-breakpoint-unit == px,
   #{$rfs-breakpoint}px,
-  #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}
+  #{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(
@@ -180,7 +186,7 @@ $rfs-mq-property-height: if(
           " " +
           if(
             $rfs-unit == rem,
-            #{$value / ($value * 0 + $rfs-rem-value)}rem,
+            #{math.div($value, $value * 0 + $rfs-rem-value)}rem,
             $value
           );
       } @else if $unit == rem {
@@ -189,7 +195,7 @@ $rfs-mq-property-height: if(
           " " +
           if(
             $rfs-unit == px,
-            #{$value / ($value * 0 + 1) * $rfs-rem-value}px,
+            #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px,
             $value
           );
       } @else {
@@ -223,26 +229,32 @@ $rfs-mq-property-height: if(
         $val: $val + " " + $value;
       } @else {
         // Remove unit from $value for calculations
-        $value: $value / ($value * 0 + if($unit == px, 1, 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, #{$value / $rfs-rem-value}rem, #{$value}px);
+            if(
+              $rfs-unit == rem,
+              #{math.div($value, $rfs-rem-value)}rem,
+              #{$value}px
+            );
         } @else {
           // Calculate the minimum value
           $value-min: $rfs-base-value +
-            (abs($value) - $rfs-base-value) /
-            $rfs-factor;
+            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,
-            #{$value-min / $rfs-rem-value}rem,
+            #{math.div($value-min, $rfs-rem-value)}rem,
             #{$value-min}px
           );
 
@@ -253,9 +265,10 @@ $rfs-mq-property-height: if(
           $variable-unit: if($rfs-two-dimensional, vmin, vw);
 
           // Calculate the variable width between 0 and $rfs-breakpoint
-          $variable-width: #{$value-diff *
-            100 /
-            $rfs-breakpoint}#{$variable-unit};
+          $variable-width: #{math.div(
+              $value-diff * 100,
+              $rfs-breakpoint
+            )}#{$variable-unit};
 
           // Return the calculated value
           $val: $val +