From c869e56732b7d1ab6a5d3361f7cf82d9445a9558 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 21 Dec 2020 09:26:02 +0200
Subject: [PATCH] fix(material/slider): incorrectly inheriting color when
 nested inside component with theme

The slider theme selectors were a bit too broad which meant that it
would automatically inherit the colors from a parent component,
if the Material theming classes were used somewhere up the chain
(e.g. a slider inside a tab group).

These changes use more specific selectors to avoid the issue.

Fixes #21271.
---
 src/material/slider/_slider-theme.scss | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index 1fb9df17f543..f9267f350f49 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -52,16 +52,18 @@
     background-color: $mat-slider-off-color;
   }
 
-  .mat-primary {
-    @include _inner-content-theme($primary);
-  }
+  .mat-slider {
+    &.mat-primary {
+      @include _inner-content-theme($primary);
+    }
 
-  .mat-accent {
-    @include _inner-content-theme($accent);
-  }
+    &.mat-accent {
+      @include _inner-content-theme($accent);
+    }
 
-  .mat-warn {
-    @include _inner-content-theme($warn);
+    &.mat-warn {
+      @include _inner-content-theme($warn);
+    }
   }
 
   .mat-slider:hover,
@@ -71,7 +73,7 @@
     }
   }
 
-  .mat-slider-disabled {
+  .mat-slider.mat-slider-disabled {
     .mat-slider-track-background,
     .mat-slider-track-fill,
     .mat-slider-thumb {
@@ -85,7 +87,7 @@
     }
   }
 
-  .mat-slider-min-value {
+  .mat-slider.mat-slider-min-value {
     .mat-slider-focus-ring {
       $opacity: 0.12;
       $color: theming.get-color-from-palette($foreground, base, $opacity);