revert: fix(styles): use math.div instead of /

This reverts commit 52c98d5.

fixes #13737

package.json

@@ -64,7 +64,7 @@
     "jest-serializer-html": "^7.0.0",
     "lerna": "^3.16.2",
     "moment": "^2.27.0",
-    "sass": "^1.34.0",
+    "sass": "~1.32.13",
     "semver": "^6.2.0",
     "shelljs": "^0.8.4",
     "stylus": "^0.54.5",

packages/vuetify/src/components/VAlert/VAlert.sass

@@ -1,5 +1,4 @@
 // Imports
-@use 'sass:math'
 @import './_variables.scss'
 
 // Theme
@@ -139,8 +138,8 @@
         margin-right: $alert-border-icon-margin
 
 .v-alert--dense
-  padding-top: math.div($alert-padding, 2)
-  padding-bottom: math.div($alert-padding, 2)
+  padding-top: $alert-padding / 2
+  padding-bottom: $alert-padding / 2
 
   .v-alert__border
     border-width: $alert-dense-border-width

packages/vuetify/src/components/VBanner/VBanner.sass

@@ -1,5 +1,4 @@
 // Imports
-@use 'sass:math'
 @import './_variables.scss'
 
 // Theme
@@ -24,7 +23,7 @@
   display: flex
   flex: 1 0 auto
   justify-content: flex-end
-  margin-bottom: math.div(-$banner-y-padding, 2)
+  margin-bottom: -$banner-y-padding / 2
 
   +ltr()
     margin-left: $banner-actions-start-margin
@@ -83,8 +82,8 @@
     text-overflow: ellipsis
 
   .v-banner__wrapper
-    padding-top: math.div($banner-y-padding, 2)
-    padding-bottom: math.div($banner-y-padding, 2)
+    padding-top: $banner-y-padding / 2
+    padding-bottom: $banner-y-padding / 2
 
 .v-banner--has-icon
   .v-banner__wrapper

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -1,5 +1,4 @@
 // Imports
-@use 'sass:math'
 @import './_variables.scss'
 
 // Theme
@@ -84,7 +83,7 @@
       &.v-size--#{$name}
         height: #{$size}px
         min-width: #{round($size * 1.777777777777778)}px // default ratio
-        padding: 0 #{math.div($size, 2.25)}px
+        padding: 0 #{$size / 2.25}px
 
   > .v-btn__content .v-icon
     color: inherit
@@ -220,10 +219,10 @@
 
       &.v-btn--absolute
         &.v-btn--bottom
-          bottom: -#{math.div($size, 2)}px
+          bottom: -#{$size / 2}px
 
         &.v-btn--top
-          top: -#{math.div($size, 2)}px
+          top: -#{$size / 2}px
 
 .v-btn--loading
   pointer-events: none

packages/vuetify/src/components/VChip/VChip.sass

@@ -1,5 +1,4 @@
 // Imports
-@use 'sass:math'
 @import './_variables.scss'
 
 // Theme
@@ -200,7 +199,7 @@
 .v-chip
   @each $name, $size in $icon-sizes
     &.v-size--#{$name}
-      border-radius: #{math.div(map-get($size, 'height'), 2)}px
+      border-radius: #{map-get($size, 'height') / 2}px
       font-size: #{map-get($size, 'font-size')}px
       height: #{map-get($size, 'height')}px
 

packages/vuetify/src/components/VColorPicker/_variables.scss

@@ -1,4 +1,3 @@
-@use 'sass:math';
 @import '../../styles/styles.sass';
 
 $color-picker-border-radius: $border-radius-root !default;
@@ -19,7 +18,7 @@ $color-picker-input-font-size: 0.75rem !default;
 $color-picker-input-margin: 8px !default;
 $color-picker-input-margin-bottom: 8px !default;
 $color-picker-slider-height: 10px !default;
-$color-picker-slider-border-radius: math.div($color-picker-slider-height, 2) !default;
+$color-picker-slider-border-radius: $color-picker-slider-height / 2 !default;
 $color-picker-preview-dot-size: 30px !default;
 $color-picker-preview-dot-margin: 24px !default;
 $color-picker-hue-margin-bottom: 24px !default;

packages/vuetify/src/components/VGrid/VGrid.sass

@@ -1,4 +1,3 @@
-@use 'sass:math'
 @import '../../styles/styles.sass'
 @import './_mixins'
 
@@ -16,17 +15,17 @@
   +make-row
 
   & + .row
-    margin-top: math.div($grid-gutter, 2)
+    margin-top: $grid-gutter / 2
 
     &--dense
-      margin-top: math.div($form-grid-gutter, 2)
+      margin-top: $form-grid-gutter / 2
 
   &--dense
-    margin: math.div(-$form-grid-gutter, 2)
+    margin: -$form-grid-gutter / 2
 
     > .col,
     > [class*="col-"]
-      padding: math.div($form-grid-gutter, 2)
+      padding: $form-grid-gutter / 2
 
   // Remove the negative margin from default .row, then the horizontal padding
   // from all immediate children columns (to prevent runaway style inheritance).

packages/vuetify/src/components/VGrid/_grid.sass

@@ -1,4 +1,3 @@
-@use 'sass:math'
 @import '../../styles/styles.sass'
 
 .container
@@ -28,20 +27,20 @@
       &-#{$size}
         .layout
           .flex
-            padding: math.div($gutter, 2)
+            padding: $gutter / 2
 
         .layout:only-child
-          margin: math.div(-$gutter, 2)
+          margin: -$gutter / 2
 
         .layout:not(:only-child)
-          margin: auto math.div(-$gutter, 2)
+          margin: auto (-$gutter / 2)
 
         *:not(:only-child)
           .layout:first-child
-            margin-top: math.div(-$gutter, 2)
+            margin-top: -$gutter / 2
 
           .layout:last-child
-            margin-bottom: math.div(-$gutter, 2)
+            margin-bottom: -$gutter / 2
 
 .layout
   display: flex
@@ -74,9 +73,9 @@
     $n: $grid-columns
     @while $n > 0
       .flex.#{$size}#{$n}
-        flex-basis: math.div($n, $grid-columns) * 100%
+        flex-basis: $n / $grid-columns * 100%
         flex-grow: 0
-        max-width: math.div($n, $grid-columns) * 100%
+        max-width: $n / $grid-columns * 100%
 
       .flex.order-#{$size}#{$n}
         order: $n
@@ -88,9 +87,9 @@
       .flex.offset-#{$size}#{$m}
         // Offsets can only ever work in row layouts
         +ltr()
-          margin-left: math.div($m, $grid-columns) * 100%
+          margin-left: $m / $grid-columns * 100%
         +rtl()
-          margin-right: math.div($m, $grid-columns) * 100%
+          margin-right: $m / $grid-columns * 100%
 
       $m: $m - 1
 

packages/vuetify/src/components/VGrid/_mixins.sass

@@ -1,5 +1,3 @@
-@use 'sass:math'
-
 =make-container($padding-x: $container-padding-x)
   width: 100%
   padding: $padding-x
@@ -16,24 +14,24 @@
   display: flex
   flex-wrap: wrap
   flex: 1 1 auto
-  margin: math.div(-$gutter, 2)
+  margin: -$gutter / 2
 
 =make-col-ready($gutter: $grid-gutter)
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%
-  padding: math.div($gutter, 2)
+  padding: $gutter / 2
 
 =make-col($size, $columns: $grid-columns)
-  flex: 0 0 percentage(math.div($size, $columns))
+  flex: 0 0 percentage($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(math.div($size, $columns))
+  max-width: percentage($size / $columns)
 
 =make-col-offset($size, $columns: $grid-columns)
-  $num: math.div($size, $columns)
+  $num: $size / $columns
   +ltr()
     margin-left: if($num == 0, 0, percentage($num))
   +rtl()
@@ -43,7 +41,7 @@
   // Common properties for all breakpoints
   %grid-column
     width: 100%
-    padding: math.div($gutter, 2)
+    padding: $gutter / 2
   @each $breakpoint in map-keys($breakpoints)
     $infix: breakpoint-infix($breakpoint, $breakpoints)
     // Allow columns to stretch full width below their breakpoints

packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass

@@ -110,7 +110,7 @@
   opacity: $progress-linear-stream-opacity
   pointer-events: none
   position: absolute
-  top: calc(50% - #{$progress-linear-stream-border-width} / 2)
+  top: calc(50% - #{$progress-linear-stream-border-width / 2})
   transition: inherit
 
 .v-progress-linear--reverse

packages/vuetify/src/components/VSlider/VSlider.sass

@@ -1,5 +1,4 @@
 // Imports
-@use 'sass:math'
 @import './_variables.scss'
 
 // Theme
@@ -48,7 +47,7 @@
   position: absolute
   width: $slider-thumb-size
   height: $slider-thumb-size
-  left: math.div(-$slider-thumb-size, 2)
+  left: -$slider-thumb-size / 2
   top: 50%
   border-radius: $slider-thumb-border-radius
   transition: $slider-transition
@@ -65,8 +64,8 @@
     background: currentColor
     opacity: $slider-thumb-before-opacity
     position: absolute
-    left: math.div(-$slider-thumb-focused-size-increase, 2)
-    top: math.div(-$slider-thumb-focused-size-increase, 2)
+    left: -$slider-thumb-focused-size-increase / 2
+    top: -$slider-thumb-focused-size-increase / 2
     transform: scale(0.1)
     pointer-events: none
 
@@ -243,7 +242,7 @@
   .v-slider__thumb
     width: $slider-thumb-size - 4
     height: $slider-thumb-size - 4
-    left: math.div(4 - $slider-thumb-size, 2)
+    left: -($slider-thumb-size - 4) / 2
 
     &:before
       display: none

packages/vuetify/src/components/VSwitch/VSwitch.sass

@@ -112,7 +112,7 @@
       height: $switch-track-inset-height
       left: -4px
       opacity: $switch-track-inset-opacity
-      top: calc(50% - #{$switch-track-inset-height} / 2)
+      top: calc(50% - #{$switch-track-inset-height / 2})
 
     .v-input--selection-controls__ripple,
     .v-input--switch__thumb

packages/vuetify/src/components/VTimeline/VTimeline.sass

@@ -1,5 +1,4 @@
 // Imports
-@use 'sass:math'
 @import './_variables.scss'
 @import './_mixins.sass'
 
@@ -66,7 +65,7 @@
 .v-timeline-item__opposite
   flex: 1 1 auto
   align-self: center
-  max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width} / 2)
+  max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
 
 // Before/after directions
 .v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
@@ -75,13 +74,13 @@
       +timeline-item-align(left)
       +timeline-wedge-align(left)
       .v-timeline-item__body
-        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width} / 2)
+        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width / 2})
 
     &:nth-child(even):not(.v-timeline-item--after), &--before
       +timeline-item-align(right)
       +timeline-wedge-align(right)
       .v-timeline-item__body
-        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width} / 2)
+        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
 
 // Wedge
 .v-timeline-item__body
@@ -124,19 +123,19 @@
       +timeline-item-align(right)
       +timeline-wedge-align(right)
       .v-timeline-item__body
-        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width} / 2)
+        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width / 2})
 
     &:nth-child(even):not(.v-timeline-item--before), &--after
       +timeline-item-align(left)
       +timeline-wedge-align(left)
       .v-timeline-item__body
-        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width} / 2)
+        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
 
 .v-timeline--reverse.v-timeline--dense
-  +timeline-line-align(math.div($timeline-divider-width, 2), right, left)
+  +timeline-line-align($timeline-divider-width / 2, right, left)
 
 .v-timeline--dense:not(.v-timeline--reverse)
-  +timeline-line-align(math.div($timeline-divider-width, 2), left, right)
+  +timeline-line-align($timeline-divider-width / 2, left, right)
 
 .v-timeline--dense
   .v-timeline-item

packages/vuetify/src/components/VTimeline/_mixins.sass

@@ -1,13 +1,11 @@
-@use 'sass:math'
-
 @mixin timeline-dots($dot-size, $inner-dot-size)
   height: $dot-size
-  left: calc(50% - #{$dot-size} / 2)
+  left: calc(50% - #{$dot-size / 2})
   width: $dot-size
 
   .v-timeline-item__inner-dot
     height: $inner-dot-size
-    margin: math.div($dot-size - $inner-dot-size, 2)
+    margin: ($dot-size - $inner-dot-size) / 2
     width: $inner-dot-size
 
 @mixin timeline-wedge-align($direction)
@@ -36,9 +34,9 @@
 @mixin timeline-line-align($center, $first, $second)
   &:before
     +ltr()
-      #{$first}: calc(#{$center} - #{$timeline-line-width} / 2)
+      #{$first}: calc(#{$center} - #{$timeline-line-width / 2})
       #{$second}: initial
 
     +rtl()
       #{$first}: initial
-      #{$second}: calc(#{$center} - #{$timeline-line-width} / 2)
+      #{$second}: calc(#{$center} - #{$timeline-line-width / 2})