Fixed all deprecation warnings with scss-migrator

Author: peter1357908

_sass/bootstrap/_variables.scss

@@ -299,7 +299,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      $spacer / 2 !default;
+$headings-margin-bottom:      $spacer * 0.5 !default;
 $headings-font-family:        null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -495,7 +495,7 @@ $input-height-border:                   $input-border-width * 2 !default;
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
+$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * 0.5) !default;
 
 $input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
 $input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -565,7 +565,7 @@ $custom-radio-indicator-border-radius:          50% !default;
 $custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
 
 $custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-border-radius:         $custom-control-indicator-size * 0.5 !default;
 $custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
 
 $custom-select-padding-y:           $input-padding-y !default;
@@ -710,12 +710,12 @@ $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              $spacer / 2 !default;
+$nav-divider-margin-y:              $spacer * 0.5 !default;
 
 
 // Navbar
 
-$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-y:                  $spacer * 0.5 !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
@@ -724,7 +724,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * 0.5 !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -844,7 +844,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-group-margin:                 $grid-gutter-width * 0.5 !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;

_sass/bootstrap/mixins/_grid-framework.scss

@@ -8,8 +8,8 @@
   %grid-column {
     position: relative;
     width: 100%;
-    padding-right: $gutter / 2;
-    padding-left: $gutter / 2;
+    padding-right: $gutter * 0.5;
+    padding-left: $gutter * 0.5;
   }
 
   @each $breakpoint in map-keys($breakpoints) {

_sass/bootstrap/mixins/_grid.scss

@@ -2,19 +2,21 @@
 //
 // Generate semantic grid columns with these mixins.
 
+@use "sass:math";
+
 @mixin make-container($gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: $gutter / 2;
-  padding-left: $gutter / 2;
+  padding-right: $gutter * 0.5;
+  padding-left: $gutter * 0.5;
   margin-right: auto;
   margin-left: auto;
 }
 
 @mixin make-row($gutter: $grid-gutter-width) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -$gutter / 2;
-  margin-left: -$gutter / 2;
+  margin-right: -$gutter * 0.5;
+  margin-left: -$gutter * 0.5;
 }
 
 // For each breakpoint, define the maximum width of the container in a media query
@@ -33,16 +35,16 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: $gutter / 2;
-  padding-left: $gutter / 2;
+  padding-right: $gutter * 0.5;
+  padding-left: $gutter * 0.5;
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage($size / $columns);
+  flex: 0 0 percentage(math.div($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage($size / $columns);
+  max-width: percentage(math.div($size, $columns));
 }
 
 @mixin make-col-auto() {
@@ -52,7 +54,7 @@
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: $size / $columns;
+  $num: math.div($size, $columns);
   margin-left: if($num == 0, 0, percentage($num));
 }
 
@@ -63,7 +65,7 @@
 // style grid.
 @mixin row-cols($count) {
   > * {
-    flex: 0 0 100% / $count;
-    max-width: 100% / $count;
+    flex: 0 0 math.div(100%, $count);
+    max-width: math.div(100%, $count);
   }
 }

_sass/bootstrap/vendor/_rfs.scss

@@ -9,6 +9,8 @@
 // Configuration
 
 // Base font size
+@use "sass:math";
+
 $rfs-base-font-size: 1.25rem !default;
 $rfs-font-size-unit: rem !default;
 
@@ -43,21 +45,21 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
 
 // Remove px-unit from $rfs-base-font-size for calculations
 @if $rfs-base-font-size-unit == "px" {
-  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+  $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
 }
 @else if $rfs-base-font-size-unit == "rem" {
-  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+  $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 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));
 }
 
 // Responsive font-size mixin
@@ -79,15 +81,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
     // Remove px-unit from $fs for calculations
     @if $fs-unit == "px" {
-      $fs: $fs / ($fs * 0 + 1);
+      $fs: math.div($fs, $fs * 0 + 1);
     }
     @else if $fs-unit == "rem" {
-      $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+      $fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value));
     }
 
     // Set default font-size
     @if $rfs-font-size-unit == rem {
-      $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+      $rfs-static: #{math.div($fs, $rfs-rem-value)}rem#{$rfs-suffix};
     }
     @else if $rfs-font-size-unit == px {
       $rfs-static: #{$fs}px#{$rfs-suffix};
@@ -103,20 +105,20 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
       $variable-unit: null;
 
       // Calculate minimum font-size for given font-size
-      $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
+      $fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor);
 
       // Calculate difference between given font-size and minimum font-size for given font-size
       $fs-diff: $fs - $fs-min;
 
       // Base font-size formatting
       // No need to check if the unit is valid, because we did that before
-      $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
+      $min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
 
       // If two-dimensional, use smallest of screen width and height
       $variable-unit: if($rfs-two-dimensional, vmin, vw);
 
       // Calculate the variable width between 0 and $rfs-breakpoint
-      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+      $variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
       // Set the calculated font-size.
       $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
@@ -132,7 +134,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
       // RFS breakpoint formatting
       @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
-        $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
+        $mq-value: #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit};
       }
       @else if $rfs-breakpoint-unit == px {
         $mq-value: #{$rfs-breakpoint}px;

_sass/libraries/hamburgers/_base.scss

@@ -1,5 +1,7 @@
 // Hamburger
 // ==================================================
+@use "sass:math";
+
 .hamburger {
   padding: $hamburger-padding-y $hamburger-padding-x;
   display: inline-block;
@@ -55,7 +57,7 @@
 .hamburger-inner {
   display: block;
   top: 50%;
-  margin-top: $hamburger-layer-height / -2;
+  margin-top: math.div($hamburger-layer-height, -2);
 
   &,
   &::before,

_sass/libraries/hamburgers/types/_slider.scss

@@ -1,10 +1,12 @@
+@use "sass:math";
+
 @if index($hamburger-types, slider) {
   /*
    * Slider
    */
   .hamburger--slider {
     .hamburger-inner {
-      top: $hamburger-layer-height / 2;
+      top: $hamburger-layer-height * 0.5;
 
       &::before {
         top: $hamburger-layer-height + $hamburger-layer-spacing;
@@ -25,7 +27,7 @@
         transform: translate3d(0, $y-offset, 0) rotate(45deg);
 
         &::before {
-          transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
+          transform: rotate(-45deg) translate3d(math.div($hamburger-layer-width, -7), $hamburger-layer-spacing * -1, 0);
           opacity: 0;
         }