feat(slider): implement indigo slider changes (#14274)

Author: didimmova

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

@@ -237,7 +237,7 @@
         border-radius: border-radius(rem(32px));
 
         @if $variant == 'indigo-design' {
-            border-radius: initial;
+            border-radius: border-radius(rem(4px));
         }
     }
 
@@ -290,6 +290,14 @@
             top: 0;
             align-items: flex-end;
         }
+
+        @if $variant == 'indigo-design' {
+            bottom: rem(3px);
+
+            &%igx-slider__ticks--top {
+                top: rem(3px);
+            }
+        }
     }
 
     %igx-slider__ticks-group {
@@ -303,7 +311,7 @@
         }
 
         &:last-of-type {
-            margin-inline-start: rem(-1px);
+            margin-inline-end: rem(-1px);
         }
     }
 
@@ -330,6 +338,10 @@
     %igx-slider__ticks--tall {
         %igx-slider__ticks-label {
             top: calc(#{$tick-height--tall} + #{$tick-height});
+
+            @if $variant == 'indigo-design' {
+                top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
+            }
         }
     }
 
@@ -348,6 +360,10 @@
 
         %igx-slider__ticks-label {
             top: calc(#{$tick-height--tall} + #{$tick-height});
+
+            @if $variant == 'indigo-design' {
+                top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
+            }
         }
     }
 
@@ -535,6 +551,10 @@
         display: flex;
         top: calc(((#{$thumb-label-height}) + rem(20px)) * -1);
         height: $thumb-label-height;
+
+        @if $variant == 'indigo-design' {
+            top: calc(((#{$thumb-label-height}) + rem(18px)) * -1);
+        }
     }
 
     %igx-slider-thumb-label__container {
@@ -561,6 +581,11 @@
             border-inline-start: rem(10px) solid transparent;
             border-inline-end: rem(10px) solid transparent;
             border-top: rem(10px) solid var-get($theme, 'label-background-color');
+
+            @if $variant == 'indigo-design' {
+                top: rem(16px);
+                border-top: rem(12px) solid var-get($theme, 'label-background-color');
+            }
         }
     }