refactor(multiple): fix warnings related to division operator in latest version of Sass

The latest version of Sass prints a warning when the division operator is used. These changes migrate us to the recommended `math.div` function.

Fixes #22866.

Author: crisbeto

WORKSPACE

@@ -15,11 +15,11 @@ http_archive(
 # Add sass rules
 http_archive(
     name = "io_bazel_rules_sass",
-    sha256 = "c310ba8fe69cce7793954a7f1778b65a86b06690215a504751e12b7df3ab51f8",
-    strip_prefix = "rules_sass-1.32.13",
+    sha256 = "80d3e70ab5a8d59494aa9e3a7e4722f9f9a6fe98d1497be6bfa0b9e106b1ea54",
+    strip_prefix = "rules_sass-1.34.1",
     urls = [
-        "https://github.com/bazelbuild/rules_sass/archive/1.32.13.zip",
-        "https://mirror.bazel.build/github.com/bazelbuild/rules_sass/archive/1.32.13.zip",
+        "https://github.com/bazelbuild/rules_sass/archive/1.34.1.zip",
+        "https://mirror.bazel.build/github.com/bazelbuild/rules_sass/archive/1.34.1.zip",
     ],
 )
 

package.json

@@ -63,7 +63,7 @@
     "@types/googlemaps": "^3.43.1",
     "@types/youtube": "^0.0.42",
     "core-js-bundle": "^3.8.2",
-    "material-components-web": "^12.0.0-canary.00b5899dc.0",
+    "material-components-web": "12.0.0-canary.08db3d737.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",
@@ -95,53 +95,53 @@
     "@bazel/terser": "3.5.0",
     "@bazel/typescript": "3.5.0",
     "@firebase/app-types": "^0.6.1",
-    "@material/animation": "^12.0.0-canary.00b5899dc.0",
-    "@material/auto-init": "^12.0.0-canary.00b5899dc.0",
-    "@material/banner": "^12.0.0-canary.00b5899dc.0",
-    "@material/base": "^12.0.0-canary.00b5899dc.0",
-    "@material/button": "^12.0.0-canary.00b5899dc.0",
-    "@material/card": "^12.0.0-canary.00b5899dc.0",
-    "@material/checkbox": "^12.0.0-canary.00b5899dc.0",
-    "@material/chips": "^12.0.0-canary.00b5899dc.0",
-    "@material/circular-progress": "^12.0.0-canary.00b5899dc.0",
-    "@material/data-table": "^12.0.0-canary.00b5899dc.0",
-    "@material/density": "^12.0.0-canary.00b5899dc.0",
-    "@material/dialog": "^12.0.0-canary.00b5899dc.0",
-    "@material/dom": "^12.0.0-canary.00b5899dc.0",
-    "@material/drawer": "^12.0.0-canary.00b5899dc.0",
-    "@material/elevation": "^12.0.0-canary.00b5899dc.0",
-    "@material/fab": "^12.0.0-canary.00b5899dc.0",
-    "@material/feature-targeting": "^12.0.0-canary.00b5899dc.0",
-    "@material/floating-label": "^12.0.0-canary.00b5899dc.0",
-    "@material/form-field": "^12.0.0-canary.00b5899dc.0",
-    "@material/icon-button": "^12.0.0-canary.00b5899dc.0",
-    "@material/image-list": "^12.0.0-canary.00b5899dc.0",
-    "@material/layout-grid": "^12.0.0-canary.00b5899dc.0",
-    "@material/line-ripple": "^12.0.0-canary.00b5899dc.0",
-    "@material/linear-progress": "^12.0.0-canary.00b5899dc.0",
-    "@material/list": "^12.0.0-canary.00b5899dc.0",
-    "@material/menu": "^12.0.0-canary.00b5899dc.0",
-    "@material/menu-surface": "^12.0.0-canary.00b5899dc.0",
-    "@material/notched-outline": "^12.0.0-canary.00b5899dc.0",
-    "@material/radio": "^12.0.0-canary.00b5899dc.0",
-    "@material/ripple": "^12.0.0-canary.00b5899dc.0",
-    "@material/rtl": "^12.0.0-canary.00b5899dc.0",
-    "@material/segmented-button": "^12.0.0-canary.00b5899dc.0",
-    "@material/select": "^12.0.0-canary.00b5899dc.0",
-    "@material/shape": "^12.0.0-canary.00b5899dc.0",
-    "@material/slider": "^12.0.0-canary.00b5899dc.0",
-    "@material/snackbar": "^12.0.0-canary.00b5899dc.0",
-    "@material/switch": "^12.0.0-canary.00b5899dc.0",
-    "@material/tab": "^12.0.0-canary.00b5899dc.0",
-    "@material/tab-bar": "^12.0.0-canary.00b5899dc.0",
-    "@material/tab-indicator": "^12.0.0-canary.00b5899dc.0",
-    "@material/tab-scroller": "^12.0.0-canary.00b5899dc.0",
-    "@material/textfield": "^12.0.0-canary.00b5899dc.0",
-    "@material/theme": "^12.0.0-canary.00b5899dc.0",
-    "@material/tooltip": "^12.0.0-canary.00b5899dc.0",
-    "@material/top-app-bar": "^12.0.0-canary.00b5899dc.0",
-    "@material/touch-target": "^12.0.0-canary.00b5899dc.0",
-    "@material/typography": "^12.0.0-canary.00b5899dc.0",
+    "@material/animation": "12.0.0-canary.08db3d737.0",
+    "@material/auto-init": "12.0.0-canary.08db3d737.0",
+    "@material/banner": "12.0.0-canary.08db3d737.0",
+    "@material/base": "12.0.0-canary.08db3d737.0",
+    "@material/button": "12.0.0-canary.08db3d737.0",
+    "@material/card": "12.0.0-canary.08db3d737.0",
+    "@material/checkbox": "12.0.0-canary.08db3d737.0",
+    "@material/chips": "12.0.0-canary.08db3d737.0",
+    "@material/circular-progress": "12.0.0-canary.08db3d737.0",
+    "@material/data-table": "12.0.0-canary.08db3d737.0",
+    "@material/density": "12.0.0-canary.08db3d737.0",
+    "@material/dialog": "12.0.0-canary.08db3d737.0",
+    "@material/dom": "12.0.0-canary.08db3d737.0",
+    "@material/drawer": "12.0.0-canary.08db3d737.0",
+    "@material/elevation": "12.0.0-canary.08db3d737.0",
+    "@material/fab": "12.0.0-canary.08db3d737.0",
+    "@material/feature-targeting": "12.0.0-canary.08db3d737.0",
+    "@material/floating-label": "12.0.0-canary.08db3d737.0",
+    "@material/form-field": "12.0.0-canary.08db3d737.0",
+    "@material/icon-button": "12.0.0-canary.08db3d737.0",
+    "@material/image-list": "12.0.0-canary.08db3d737.0",
+    "@material/layout-grid": "12.0.0-canary.08db3d737.0",
+    "@material/line-ripple": "12.0.0-canary.08db3d737.0",
+    "@material/linear-progress": "12.0.0-canary.08db3d737.0",
+    "@material/list": "12.0.0-canary.08db3d737.0",
+    "@material/menu": "12.0.0-canary.08db3d737.0",
+    "@material/menu-surface": "12.0.0-canary.08db3d737.0",
+    "@material/notched-outline": "12.0.0-canary.08db3d737.0",
+    "@material/radio": "12.0.0-canary.08db3d737.0",
+    "@material/ripple": "12.0.0-canary.08db3d737.0",
+    "@material/rtl": "12.0.0-canary.08db3d737.0",
+    "@material/segmented-button": "12.0.0-canary.08db3d737.0",
+    "@material/select": "12.0.0-canary.08db3d737.0",
+    "@material/shape": "12.0.0-canary.08db3d737.0",
+    "@material/slider": "12.0.0-canary.08db3d737.0",
+    "@material/snackbar": "12.0.0-canary.08db3d737.0",
+    "@material/switch": "12.0.0-canary.08db3d737.0",
+    "@material/tab": "12.0.0-canary.08db3d737.0",
+    "@material/tab-bar": "12.0.0-canary.08db3d737.0",
+    "@material/tab-indicator": "12.0.0-canary.08db3d737.0",
+    "@material/tab-scroller": "12.0.0-canary.08db3d737.0",
+    "@material/textfield": "12.0.0-canary.08db3d737.0",
+    "@material/theme": "12.0.0-canary.08db3d737.0",
+    "@material/tooltip": "12.0.0-canary.08db3d737.0",
+    "@material/top-app-bar": "12.0.0-canary.08db3d737.0",
+    "@material/touch-target": "12.0.0-canary.08db3d737.0",
+    "@material/typography": "12.0.0-canary.08db3d737.0",
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
@@ -210,7 +210,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "sass": "^1.32.13",
+    "sass": "^1.34.1",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.4",
     "send": "^0.17.1",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^12.0.0 || ^13.0.0-0"
-MDC_PACKAGE_VERSION = "^12.0.0-canary.00b5899dc.0"
+MDC_PACKAGE_VERSION = "12.0.0-canary.08db3d737.0"
 TSLIB_PACKAGE_VERSION = "^2.1.0"
 RXJS_PACKAGE_VERSION = "^6.5.3"
 

src/material-experimental/mdc-card/card.scss

@@ -1,4 +1,5 @@
 @use '@material/card' as mdc-card;
+@use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
 
 // TODO(jelbourn): move header and title-group styles to their own files.
@@ -43,7 +44,7 @@ $mat-card-default-padding: 16px !default;
   // When a subtitle is inside of a header, we want to move it up slightly to reduce the space with
   // the title, and add a margin bottom to create space underneath the header.
   .mat-mdc-card-subtitle {
-    margin-top: -($mat-card-default-padding / 2);
+    margin-top: -(private.private-div($mat-card-default-padding, 2));
     margin-bottom: $mat-card-default-padding;
   }
 }

src/material-experimental/mdc-form-field/_form-field-density.scss

@@ -2,6 +2,7 @@
 @use '@material/textfield' as mdc-textfield;
 @use 'sass:map';
 @use '../../material/core/theming/theming';
+@use '../../material/core/style/private';
 @use 'form-field-sizing';
 
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
@@ -54,7 +55,7 @@
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $vertical-deduction: (mdc-textfield.$height - $height) / 2;
+  $vertical-deduction: private.private-div(mdc-textfield.$height - $height, 2);
   // Map that describes the padding for form-fields with label.
   $with-label-padding: (
     top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
@@ -77,7 +78,7 @@
   // form-field because we do not know what type of form-field control is set up. Hence
   // we always use a fixed position for the label. This does not have any implications.
   .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
-    top: $height / 2;
+    top: private.private-div($height, 2);
   }
 
   // For the outline appearance, we re-create the active floating label transform. This is

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -2,6 +2,7 @@
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 @use '../../material/core/theming/palette';
+@use '../../material/core/style/private';
 @use '@material/theme/theme-color' as mdc-theme-color;
 
 // Width of the Material Design form-field select arrow.
@@ -65,8 +66,8 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
       content: '';
       width: 0;
       height: 0;
-      border-left: ($mat-form-field-select-arrow-width / 2) solid transparent;
-      border-right: ($mat-form-field-select-arrow-width / 2) solid transparent;
+      border-left: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
+      border-right: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
       border-top: $mat-form-field-select-arrow-height solid;
       position: absolute;
       right: 0;

src/material-experimental/mdc-select/select.scss

@@ -2,6 +2,7 @@
 @use '@material/list' as mdc-list;
 @use '../../material/core/style/variables';
 @use '../../material/core/style/vendor-prefixes';
+@use '../../material/core/style/private';
 @use '../../cdk/a11y';
 
 $mat-select-arrow-size: 5px !default;
@@ -105,7 +106,8 @@ $scale: 0.75 !default;
 .mat-mdc-select-placeholder {
   // Delay the transition until the label has animated about a third of the way through, in
   // order to prevent the placeholder from overlapping for a split second.
-  transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+  transition: color variables.$swift-ease-out-duration
+      private.private-div(variables.$swift-ease-out-duration, 3)
       variables.$swift-ease-out-timing-function;
 
   ._mat-animation-noopable & {
@@ -137,7 +139,8 @@ $scale: 0.75 !default;
     }
 
     .mdc-floating-label--float-above {
-      max-width: calc(100% / #{$scale} - #{$mat-select-placeholder-arrow-space / $scale});
+      $arrow-scale: private.private-div($mat-select-placeholder-arrow-space, $scale);
+      max-width: calc(100% / #{$scale} - #{$arrow-scale});
     }
   }
   &.mat-form-field-appearance-outline {

src/material-experimental/mdc-slide-toggle/slide-toggle.scss

@@ -1,9 +1,10 @@
+@use 'sass:map';
 @use '@material/switch/deprecated' as mdc-switch with ($deprecated-suffix: '');
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
-@use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
+@use '../../material/core/style/private';
 @use '../../cdk/a11y';
 
 @include mdc-switch.without-ripple($query: mdc-helpers.$mat-base-styles-query);
@@ -87,7 +88,7 @@
       // Usually 1px would be enough, but MDC reduces the opacity on the
       // element so we need to make this a bit more prominent.
       outline: solid 2px;
-      outline-offset: mdc-switch.$track-height / 2;
+      outline-offset: private.private-div(mdc-switch.$track-height, 2);
     }
   }
 }

src/material/badge/_badge-theme.scss

@@ -7,6 +7,7 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 $font-size: 12px;
@@ -25,13 +26,13 @@ $large-size: $default-size + 6;
 
   &.mat-badge-above {
     .mat-badge-content {
-      top: -$size / 2;
+      top: private.private-div(-$size, 2);
     }
   }
 
   &.mat-badge-below {
     .mat-badge-content {
-      bottom: -$size / 2;
+      bottom: private.private-div(-$size, 2);
     }
   }
 
@@ -64,27 +65,27 @@ $large-size: $default-size + 6;
   &.mat-badge-overlap {
     &.mat-badge-before {
       .mat-badge-content {
-        left: -$size / 2;
+        left: private.private-div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-before {
       .mat-badge-content {
         left: auto;
-        right: -$size / 2;
+        right: private.private-div(-$size, 2);
       }
     }
 
     &.mat-badge-after {
       .mat-badge-content {
-        right: -$size / 2;
+        right: private.private-div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-after {
       .mat-badge-content {
         right: auto;
-        left: -$size / 2;
+        left: private.private-div(-$size, 2);
       }
     }
   }

src/material/card/card.scss

@@ -59,8 +59,8 @@ $header-size: 40px !default;
 
 .mat-card-actions {
   @extend %mat-card-section-base;
-  margin-left: -$padding / 2;
-  margin-right: -$padding / 2;
+  margin-left: private.private-div(-$padding, 2);
+  margin-right: private.private-div(-$padding, 2);
   padding: 8px 0;
 }