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

fixes #13694 closes #13704 BREAKING CHANGE: requires [email protected]
vuetifyjs · Jun 1, 2021 · 52c98d5 · 52c98d5
1 parent 603135d
commit 52c98d5
Show file tree

Hide file tree

Showing 19 changed files with 139 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "jest-serializer-html": "^7.0.0",
     "lerna": "^3.16.2",
     "moment": "^2.27.0",
-    "sass": "^1.26.11",
+    "sass": "^1.34.0",
     "semver": "^6.2.0",
     "shelljs": "^0.8.4",
     "stylus": "^0.54.5",

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -64,7 +64,7 @@
     "minify-css-string": "^1.0.0",
     "mkdirp": "^1.0.4",
     "raw-loader": "^4.0.1",
-    "sass-loader": "^9.0.2",
+    "sass-loader": "^10.2.0",
     "sitemap-webpack-plugin": "^0.8.1",
     "vee-validate": "^3.3.7",
     "vue-cli-plugin-vuetify": "~2.0.7",

diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
@@ -92,7 +92,7 @@
     "postcss-loader": "^3.0.0",
     "pug": "^2.0.4",
     "pug-loader": "^2.4.0",
-    "sass-loader": "^10.0.2",
+    "sass-loader": "^10.2.0",
     "style-loader": "^0.23.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

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

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

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

diff --git a/packages/vuetify/src/components/VChip/VChip.sass b/packages/vuetify/src/components/VChip/VChip.sass
@@ -1,4 +1,5 @@
 // Imports
+@use 'sass:math'
 @import './_variables.scss'
 
 // Theme
@@ -199,6 +200,6 @@
 .v-chip
   @each $name, $size in $icon-sizes
     &.v-size--#{$name}
-      border-radius: #{map-get($size, 'height') / 2}px
+      border-radius: #{math.div(map-get($size, 'height'), 2)}px
       font-size: #{map-get($size, 'font-size')}px
       height: #{map-get($size, 'height')}px
diff --git a/packages/vuetify/src/components/VColorPicker/_variables.scss b/packages/vuetify/src/components/VColorPicker/_variables.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../../styles/styles.sass';
 
 $color-picker-border-radius: $border-radius-root !default;
@@ -18,7 +19,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: $color-picker-slider-height / 2 !default;
+$color-picker-slider-border-radius: math.div($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;
diff --git a/packages/vuetify/src/components/VGrid/VGrid.sass b/packages/vuetify/src/components/VGrid/VGrid.sass
@@ -1,3 +1,4 @@
+@use 'sass:math'
 @import '../../styles/styles.sass'
 @import './_mixins'
 
@@ -15,17 +16,17 @@
   +make-row
 
   & + .row
-    margin-top: $grid-gutter / 2
+    margin-top: math.div($grid-gutter, 2)
 
     &--dense
-      margin-top: $form-grid-gutter / 2
+      margin-top: math.div($form-grid-gutter, 2)
 
   &--dense
-    margin: -$form-grid-gutter / 2
+    margin: math.div(-$form-grid-gutter, 2)
 
     > .col,
     > [class*="col-"]
-      padding: $form-grid-gutter / 2
+      padding: math.div($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).

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

diff --git a/packages/vuetify/src/components/VGrid/_mixins.sass b/packages/vuetify/src/components/VGrid/_mixins.sass
@@ -1,3 +1,5 @@
+@use 'sass:math'
+
 =make-container($padding-x: $container-padding-x)
   width: 100%
   padding: $padding-x
@@ -14,24 +16,24 @@
   display: flex
   flex-wrap: wrap
   flex: 1 1 auto
-  margin: -$gutter / 2
+  margin: math.div(-$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: $gutter / 2
+  padding: math.div($gutter, 2)
 
 =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))
 
 =make-col-offset($size, $columns: $grid-columns)
-  $num: $size / $columns
+  $num: math.div($size, $columns)
   +ltr()
     margin-left: if($num == 0, 0, percentage($num))
   +rtl()
@@ -41,7 +43,7 @@
   // Common properties for all breakpoints
   %grid-column
     width: 100%
-    padding: $gutter / 2
+    padding: math.div($gutter, 2)
   @each $breakpoint in map-keys($breakpoints)
     $infix: breakpoint-infix($breakpoint, $breakpoints)
     // Allow columns to stretch full width below their breakpoints

diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass b/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

diff --git a/packages/vuetify/src/components/VSlider/VSlider.sass b/packages/vuetify/src/components/VSlider/VSlider.sass
@@ -1,4 +1,5 @@
 // Imports
+@use 'sass:math'
 @import './_variables.scss'
 
 // Theme
@@ -47,7 +48,7 @@
   position: absolute
   width: $slider-thumb-size
   height: $slider-thumb-size
-  left: -#{$slider-thumb-size / 2}
+  left: math.div(-$slider-thumb-size, 2)
   top: 50%
   border-radius: $slider-thumb-border-radius
   transition: $slider-transition
@@ -64,8 +65,8 @@
     background: currentColor
     opacity: $slider-thumb-before-opacity
     position: absolute
-    left: -#{$slider-thumb-focused-size-increase / 2}
-    top: -#{$slider-thumb-focused-size-increase / 2}
+    left: math.div(-$slider-thumb-focused-size-increase, 2)
+    top: math.div(-$slider-thumb-focused-size-increase, 2)
     transform: scale(0.1)
     pointer-events: none
 
@@ -240,9 +241,9 @@
   pointer-events: none
 
   .v-slider__thumb
-    width: #{$slider-thumb-size - 4}
-    height: #{$slider-thumb-size - 4}
-    left: -#{($slider-thumb-size - 4) / 2}
+    width: $slider-thumb-size - 4
+    height: $slider-thumb-size - 4
+    left: math.div(4 - $slider-thumb-size, 2)
 
     &:before
       display: none

diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/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

diff --git a/packages/vuetify/src/components/VTimeline/VTimeline.sass b/packages/vuetify/src/components/VTimeline/VTimeline.sass
@@ -1,4 +1,5 @@
 // Imports
+@use 'sass:math'
 @import './_variables.scss'
 @import './_mixins.sass'
 
@@ -65,7 +66,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)
@@ -74,13 +75,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
@@ -123,19 +124,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($timeline-divider-width / 2, right, left)
+  +timeline-line-align(math.div($timeline-divider-width, 2), right, left)
 
 .v-timeline--dense:not(.v-timeline--reverse)
-  +timeline-line-align($timeline-divider-width / 2, left, right)
+  +timeline-line-align(math.div($timeline-divider-width, 2), left, right)
 
 .v-timeline--dense
   .v-timeline-item

diff --git a/packages/vuetify/src/components/VTimeline/_mixins.sass b/packages/vuetify/src/components/VTimeline/_mixins.sass
@@ -1,11 +1,13 @@
+@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: #{($dot-size - $inner-dot-size) / 2}
+    margin: math.div($dot-size - $inner-dot-size, 2)
     width: $inner-dot-size
 
 @mixin timeline-wedge-align($direction)
@@ -34,9 +36,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)