refactor(slider): add separate class selector for labels

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss

@@ -34,10 +34,6 @@
         @include e(thumb-#{$t}) {
             @extend %igx-thumb-display !optional;
 
-            .label {
-                @extend %igx-thumb-label !optional;
-            }
-
             .dot {
                 @extend %igx-thumb-dot !optional;
             }
@@ -46,12 +42,24 @@
         @include e(thumb-#{$t}, $m: active) {
             @extend %igx-thumb--active !optional;
 
+            .dot {
+                @extend %igx-thumb-dot--active !optional;
+            }
+        }
+
+        @include e(label-#{$t}) {
+            @extend %igx-thumb-display !optional;
+
             .label {
-                @extend %igx-thumb-label--active !optional;
+                @extend %igx-thumb-label !optional;
             }
+        }
 
-            .dot {
-                @extend %igx-thumb-dot--active !optional;
+        @include e(label-#{$t}, $m: active) {
+            @extend %igx-thumb--active !optional;
+
+            .label {
+                @extend %igx-thumb-label--active !optional;
             }
         }
     }
@@ -91,10 +99,6 @@
                 @extend %igx-thumb-display !optional;
                 @extend %igx-thumb--disabled !optional;
 
-                .label {
-                    @extend %igx-thumb-label !optional;
-                }
-
                 .dot {
                     @extend %igx-thumb-dot--disabled !optional;
                 }

projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts

@@ -23,22 +23,22 @@ export class IgxThumbLabelComponent {
     @Input()
     public continuous: boolean;
 
-    @HostBinding('class.igx-slider__thumb-from')
+    @HostBinding('class.igx-slider__label-from')
     public get thumbFromClass() {
         return this.type === SliderHandle.FROM;
     }
 
-    @HostBinding('class.igx-slider__thumb-to')
+    @HostBinding('class.igx-slider__label-to')
     public get thumbToClass() {
         return this.type === SliderHandle.TO;
     }
 
-    @HostBinding('class.igx-slider__thumb-from--active')
+    @HostBinding('class.igx-slider__label-from--active')
     public get thumbFromActiveClass() {
         return this.type === SliderHandle.FROM && this.active;
     }
 
-    @HostBinding('class.igx-slider__thumb-to--active')
+    @HostBinding('class.igx-slider__label-to--active')
     public get thumbToActiveClass() {
         return this.type === SliderHandle.TO && this.active;
     }