refactor(material/core): post migration fixup

angular · Feb 20, 2021 · 95c58d0 · 95c58d0
1 parent d94af9c
commit 95c58d0
Show file tree

Hide file tree

Showing 21 changed files with 142 additions and 103 deletions.
diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss
@@ -40,7 +40,8 @@
     bottom: 0;
     position: absolute;
     top: 0;
-    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    transition: background variables.$swift-ease-in-duration
+      variables.$swift-ease-in-timing-function;
     width: 1px;
   }
 
@@ -84,7 +85,8 @@
     background: transparent;
     cursor: col-resize;
     height: 100%;
-    transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    transition: background variables.$swift-ease-in-duration
+      variables.$swift-ease-in-timing-function;
     @include vendor-prefixes.user-select(none);
     width: 100%;
 

diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss
@@ -63,63 +63,67 @@ $mat-button-state-target: '.mdc-button__ripple';
 
     .mat-mdc-button, .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
         @include mdc-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
         @include mdc-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(error);
       }
     }
 
     .mat-mdc-raised-button,
     .mat-mdc-unelevated-button {
       &.mat-unthemed {
-        @include mdc-button-container-fill-color(
-            mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
+        @include mdc-button-container-fill-color(mdc-helpers.$mdc-theme-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
       }
 
       &.mat-primary {
-        @include mdc-button-container-fill-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(primary,
+          $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-button-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
-        @include mdc-button-container-fill-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(secondary,
+          $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-button-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
-        @include mdc-button-container-fill-color(error, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-container-fill-color(error,
+          $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-button-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-states-base-color(
-          on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include _mat-button-ripple-ink-color(on-error);
       }
 
@@ -130,7 +134,8 @@ $mat-button-state-target: '.mdc-button__ripple';
 
     .mat-mdc-outlined-button {
       &.mat-unthemed {
-        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
@@ -211,32 +216,33 @@ $mat-button-state-target: '.mdc-button__ripple';
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
 
       &.mat-unthemed {
-        @include mdc-states-base-color(
-          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
-        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
-        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-states-base-color(
-          on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(
-          on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(
-          on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(on-error);
@@ -290,29 +296,29 @@ $mat-button-state-target: '.mdc-button__ripple';
           $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
 
       &.mat-unthemed {
-        @include mdc-states-base-color(
-          mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
-          $ripple-target: $mat-button-state-target);
-        @include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
+        @include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
+          $query: mdc-helpers.$mat-theme-styles-query);
       }
 
       &.mat-primary {
-        @include mdc-states-base-color(
-          primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
-        @include mdc-states-base-color(
-          secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
-        @include mdc-states-base-color(
-          error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
+        @include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
+          $ripple-target: $mat-button-state-target);
         @include mdc-icon-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
         @include _mat-button-ripple-ink-color(error);
       }

diff --git a/src/material-experimental/mdc-chips/_chips-theme.scss b/src/material-experimental/mdc-chips/_chips-theme.scss
@@ -13,8 +13,10 @@
                   text-primary-on-dark,
                   $query: mdc-helpers.$mat-theme-styles-query
   );
-  @include mdc-chip-leading-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-chip-leading-icon-color(text-primary-on-dark,
+    $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-chip-trailing-icon-color(text-primary-on-dark,
+    $query: mdc-helpers.$mat-theme-styles-query);
 }
 
 @mixin color($config-or-theme) {

diff --git a/src/material-experimental/mdc-dialog/dialog.scss b/src/material-experimental/mdc-dialog/dialog.scss
@@ -12,7 +12,8 @@ $mat-dialog-content-max-height: 65vh !default;
 $mat-dialog-button-horizontal-margin: 8px !default;
 
 @include mdc-dialog-core-styles($query: mdc-helpers.$mat-base-styles-query);
-@include mdc-dialog-structure-overrides.private-dialog-structure-overrides($mat-dialog-content-max-height);
+@include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
+  $mat-dialog-content-max-height);
 
 // The dialog container is focusable. We remove the default outline shown in browsers.
 .mat-mdc-dialog-container {

diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss
@@ -16,7 +16,8 @@
 
 // Mixin that overwrites the default MDC text-field color styles to be based on
 // the given theme palette. The MDC text-field is styled using `primary` by default.
-@mixin _mat-mdc-text-field-color-styles($palette-name, $query: mdc-helpers.$mat-theme-styles-query) {
+@mixin _mat-mdc-text-field-color-styles($palette-name,
+  $query: mdc-helpers.$mat-theme-styles-query) {
   $_mdc-text-field-focused-label-color: mdc-text-field.$focused-label-color;
   mdc-text-field.$focused-label-color: rgba(mdc-theme-prop-value($palette-name), 0.87);
 

diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss
@@ -9,9 +9,12 @@
 
 
 // Base styles for MDC text-field, notched-outline, floating label and line-ripple.
-@include mdc-text-field-without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-floating-label-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
-@include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-text-field-without-ripple(
+  $query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-floating-label-core-styles(
+  $query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-notched-outline-core-styles(
+  $query: mdc-helpers.$mat-base-styles-without-animation-query);
 @include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
 
 // MDC text-field overwrites.

diff --git a/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss b/src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss
@@ -11,7 +11,8 @@
   // lightening the color of the primary bar.
   $buffer-color: color.adjust(mdc-theme-prop-value($color), $lightness: 30%);
   @include mdc-linear-progress-bar-color($color, $query: mdc-helpers.$mat-theme-styles-query);
-  @include mdc-linear-progress-buffer-color($buffer-color, $query: mdc-helpers.$mat-theme-styles-query);
+  @include mdc-linear-progress-buffer-color($buffer-color,
+    $query: mdc-helpers.$mat-theme-styles-query);
 }
 
 @mixin color($config-or-theme) {

diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.scss b/src/material-experimental/mdc-progress-bar/progress-bar.scss
@@ -1,7 +1,8 @@
 @use '../mdc-helpers/mdc-helpers';
 @import '@material/linear-progress/mixins.import';
 
-@include mdc-linear-progress-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-linear-progress-core-styles($query:
+  mdc-helpers.$mat-base-styles-without-animation-query);
 
 .mat-mdc-progress-bar {
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.

diff --git a/src/material-experimental/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit.scss
@@ -58,7 +58,8 @@
       right: 0;
       transform-origin: 50%;
       transform: scaleX(0.5);
-      transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+      transition: background-color variables.$swift-ease-in-duration
+        variables.$swift-ease-in-timing-function;
       visibility: hidden;
     }
 

diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss
@@ -11,7 +11,7 @@ $margin: 0 !default;
 $line-height: 36px !default;
 $border-radius: 4px !default;
 $focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function,
-                              background-color 200ms variables.$swift-ease-in-out-timing-function !default;
+                   background-color 200ms variables.$swift-ease-in-out-timing-function !default;
 
 // Stroked button padding is 1px less horizontally than default/flat/raised
 // button's padding.
@@ -82,8 +82,8 @@ $mini-fab-padding: 8px !default;
   transform: translate3d(0, 0, 0);
 
   // Animation.
-  transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              elevation.transition-property-value();
+  transition: background variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function, elevation.transition-property-value();
 }
 
 // Applies styles to fab and mini-fab button types only

diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
@@ -184,8 +184,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
   display: inline-block;
 
   // Animation
-  transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
-              elevation.transition-property-value();
+  transition: background variables.$swift-ease-out-duration
+    variables.$swift-ease-out-timing-function, elevation.transition-property-value();
 
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
@@ -275,8 +275,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
   display: inline-flex;
   justify-content: center;
   transition: background-color checkbox-common.$transition-duration
-                  variables.$linear-out-slow-in-timing-function,
-              opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
+    variables.$linear-out-slow-in-timing-function, opacity checkbox-common.$transition-duration
+    variables.$linear-out-slow-in-timing-function;
 
   ._mat-animation-noopable & {
     transition: none;
@@ -426,7 +426,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-unchecked-checked {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-in-background;
     }
 
     .mat-checkbox-checkmark-path {
@@ -440,7 +441,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-unchecked-indeterminate {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-in-background;
     }
 
     .mat-checkbox-mixedmark {
@@ -451,7 +453,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-checked-unchecked {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-out-background;
     }
 
     .mat-checkbox-checkmark-path {
@@ -486,7 +489,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   &-indeterminate-unchecked {
     .mat-checkbox-background {
-      animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
+      animation: checkbox-common.$transition-duration * 2 linear 0ms
+        mat-checkbox-fade-out-background;
     }
 
     .mat-checkbox-mixedmark {

diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
@@ -32,7 +32,8 @@ $chip-remove-font-size: 18px;
 }
 
 @mixin _mat-chip-theme-color($palette) {
-  @include _mat-chip-element-color(theming.color($palette, default-contrast), theming.color($palette));
+  @include _mat-chip-element-color(theming.color($palette, default-contrast),
+    theming.color($palette));
 
   .mat-ripple-element {
     @include _mat-chips-ripple-background($palette, default-contrast, 0.1);

diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -20,17 +20,18 @@ $_mat-pseudo-checkmark-size: checkbox-common.$size - (2 * $_mat-pseudo-checkbox-
   box-sizing: border-box;
   position: relative;
   flex-shrink: 0;
-  transition:
-      border-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function,
-      background-color checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
+  transition: border-color checkbox-common.$transition-duration
+    variables.$linear-out-slow-in-timing-function, background-color
+    checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
 
   // Used to render the checkmark/mixedmark inside of the box.
   &::after {
     position: absolute;
     opacity: 0;
     content: '';
     border-bottom: checkbox-common.$border-width solid currentColor;
-    transition: opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
+    transition: opacity checkbox-common.$transition-duration
+      variables.$linear-out-slow-in-timing-function;
   }
 
   &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {