Merge branch 'master' into didimmova/fix-checkbox-label-hover-master

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -247,7 +247,6 @@
             background: var-get($theme, 'indicator-dot-color');
 
             @if $variant != 'indigo' {
-                @include animation('scale-out-center' .15s $ease-out-quad forwards);
                 inset: rem(1px);
             } @else {
                 width: rem(8px);
@@ -261,11 +260,11 @@
         &:hover {
             border-color: var-get($theme, 'indicator-active-border-color');
 
-            @if $variant == 'indigo' {
-                &::after {
-                    background: var-get($theme, 'indicator-hover-dot-color');
-                }
+            &::after {
+                background: var-get($theme, 'indicator-hover-dot-color');
+            }
 
+            @if $variant == 'indigo' {
                 &::before {
                     position: absolute;
                     content: '';
@@ -290,7 +289,7 @@
                 content: '';
                 width: inherit;
                 height: inherit;
-                border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
+                border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
                 inset-inline-start: 0;
                 top: 0;
                 border-radius: border-radius(50%);
@@ -304,12 +303,14 @@
             }
         }
 
-        @if $variant == 'indigo' {
-            &:hover {
-                &::after {
-                    background: var-get($theme, 'indicator-active-hover-dot-color');
-                }
+        &:hover {
+            border-color: var-get($theme, 'indicator-active-hover-dot-color');
 
+            &::after {
+                background: var-get($theme, 'indicator-active-hover-dot-color');
+            }
+
+            @if $variant == 'indigo' {
                 &::before {
                     border-color: var-get($theme, 'indicator-active-hover-dot-color');
                 }

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable max-nesting-depth */
 @use 'sass:map';
 @use 'sass:math';
 @use '../../base' as *;
@@ -49,13 +50,6 @@
         'indigo': rem(8px),
     ), $variant);
 
-    $mark-stroke: map.get((
-        'material': 3,
-        'fluent': 1,
-        'bootstrap': 3,
-        'indigo': 3,
-    ), $variant);
-
     $mark-offset: map.get((
         'material': 0,
         'fluent': -1px,
@@ -64,7 +58,7 @@
     ), $variant);
 
     $mark-length: 24;
-    $mark-x-factor: math.div($mark-stroke, $mark-length);
+    $mark-x-factor: calc(#{var-get($theme, 'tick-width')} / $mark-length);
 
     $ripple-size: rem(40px);
     $ripple-radius: math.div($ripple-size, 2);
@@ -205,7 +199,7 @@
         inset: 0;
         stroke: var-get($theme, 'tick-color');
         stroke-linecap: square;
-        stroke-width: $mark-stroke;
+        stroke-width: var-get($theme, 'tick-width');
         stroke-dasharray: $mark-length;
         stroke-dashoffset: $mark-length;
         fill: none;
@@ -366,7 +360,7 @@
     %cbx-composite-mark--in {
         stroke-dashoffset: 41; /* length of path - adjacent line length */
         opacity: 1;
-        transform: rotate(45deg) translateX(-#{$mark-x-factor}em);
+        transform: rotate(45deg) translateX(calc(#{$mark-x-factor} * -1em));
     }
 
     %cbx-composite-mark--fluent {