From 5e154458fd4ebf357c9c001285adbd8da8174c0e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 11 May 2022 13:43:37 +0200
Subject: [PATCH] fix(material/core): noop animations not applying to selector
 lists

The way the `private-animation-noop` mixin was written meant that if it was included in a list of selectors, it would only be applied to the first selector in the list. This caused some animations in the MDC button not to be disabled.

These changes simplify the mixin, because the old approach was only relevant for on case in the progress spinner that we can write out manually instead.
---
 src/material/core/style/_private.scss         | 19 +++++--------------
 .../progress-spinner/progress-spinner.scss    | 13 ++++++++-----
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/material/core/style/_private.scss b/src/material/core/style/_private.scss
index 2eecc6c575a3..dde4c62d9c1f 100644
--- a/src/material/core/style/_private.scss
+++ b/src/material/core/style/_private.scss
@@ -22,20 +22,11 @@
 // NOTE: Currently this mixin should only be used with components that do not
 // have any projected content.
 @mixin private-animation-noop() {
-  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
-  // done to allow a class to be added to be added to base of the scss nesting
-  // context.
-  // For example:
-  // .my-root {
-  //   .my-subclass {
-  //      @include mat-private-animation-noop();
-  //    }
-  // }
-  // results in:
-  // ._mat-animation-noopable.my-root .my-subclass { ... }
-  @at-root ._mat-animation-noopable#{&} {
-    transition: none;
-    animation: none;
+  &._mat-animation-noopable {
+    // Use !important here since we don't know what context this mixin will
+    // be included in and MDC can have some really specific selectors.
+    transition: none !important;
+    animation: none !important;
     @content;
   }
 }
diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss
index b856d51c513b..2db723c01002 100644
--- a/src/material/progress-spinner/progress-spinner.scss
+++ b/src/material/progress-spinner/progress-spinner.scss
@@ -1,7 +1,6 @@
 @use '@angular/cdk';
 
 @use '../core/style/variables';
-@use '../core/style/private';
 
 $_default-radius: 45px;
 $_default-circumference: variables.$pi * $_default-radius * 2;
@@ -24,7 +23,6 @@ $_default-circumference: variables.$pi * $_default-radius * 2;
   }
 
   circle {
-    @include private.private-animation-noop();
     fill: transparent;
     transition: stroke-dashoffset 225ms linear;
 
@@ -37,15 +35,13 @@ $_default-circumference: variables.$pi * $_default-radius * 2;
     }
   }
 
-  &.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
+  &[mode='indeterminate'] {
     svg {
-      @include private.private-animation-noop();
       animation: mat-progress-spinner-linear-rotate variables.$swift-ease-in-out-duration * 4
           linear infinite;
     }
 
     circle {
-      @include private.private-animation-noop();
       transition-property: stroke;
       // Note: we multiply the duration by 8, because the animation is spread out in 8 stages.
       animation-duration: variables.$swift-ease-in-out-duration * 8;
@@ -53,6 +49,13 @@ $_default-circumference: variables.$pi * $_default-radius * 2;
       animation-iteration-count: infinite;
     }
   }
+
+  &._mat-animation-noopable {
+    svg, circle {
+      animation: none;
+      transition: none;
+    }
+  }
 }