From b40967fd1561b2395eef6aff5b6a13e213327756 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 15 Aug 2018 00:54:47 +0200
Subject: [PATCH] fix(progress-bar): query state animation not working (#11459)

Currently the animation for a progress bar in the `query` state is disabled by default due to the `_noop-animation` producing the wrong selector. It looks like using the ampersand inside interpolation (e.g. in `@at-root ._mat-animation-noopable#{&}`) doesn't work as expected once we have more than one selector. What ends up happening is that SASS interpolates the first selector, but then leaves the other one as it is, which causes it to disable the animation.

Fixes #11453.
---
 src/lib/progress-bar/progress-bar.scss | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss
index d91971807262..29362645d0d5 100644
--- a/src/lib/progress-bar/progress-bar.scss
+++ b/src/lib/progress-bar/progress-bar.scss
@@ -40,7 +40,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   // The progress bar buffer is the bar indicator showing the buffer value and is only visible
   // beyond the current value of the primary progress bar.
   .mat-progress-bar-buffer {
-    @include _noop-animation();
     transform-origin: top left;
     transition: transform $mat-progress-bar-piece-animation-duration ease;
 
@@ -58,7 +57,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
   // The progress bar fill fills the progress bar with the indicator color.
   .mat-progress-bar-fill {
-    @include _noop-animation();
     animation: none;
     transform-origin: top left;
     transition: transform $mat-progress-bar-piece-animation-duration ease;
@@ -70,7 +68,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
   // A pseudo element is created for each progress bar bar that fills with the indicator color.
   .mat-progress-bar-fill::after {
-    @include _noop-animation();
     animation: none;
     content: '';
     display: inline-block;
@@ -95,12 +92,10 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   &[mode='indeterminate'],
   &[mode='query'] {
     .mat-progress-bar-fill {
-      @include _noop-animation();
       transition: none;
     }
     .mat-progress-bar-primary {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
@@ -108,14 +103,12 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     }
     .mat-progress-bar-primary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
     }
     .mat-progress-bar-secondary {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
@@ -124,7 +117,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     }
     .mat-progress-bar-secondary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
@@ -134,7 +126,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   &[mode='buffer'] {
     .mat-progress-bar-background {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-background-scroll
           $mat-progress-bar-piece-animation-duration infinite linear;
@@ -144,6 +135,21 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
       display: block;
     }
   }
+
+  // Disabled animations handling.
+  &._mat-animation-noopable {
+    .mat-progress-bar-fill,
+    .mat-progress-bar-fill::after,
+    .mat-progress-bar-buffer,
+    .mat-progress-bar-primary,
+    .mat-progress-bar-primary.mat-progress-bar-fill::after,
+    .mat-progress-bar-secondary,
+    .mat-progress-bar-secondary.mat-progress-bar-fill::after,
+    .mat-progress-bar-background {
+      animation: none;
+      transition: none;
+    }
+  }
 }