Merge branch 'master' into copilot/enhance-igx-badge-component

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 {

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -13,7 +13,7 @@
         'material': pad-inline(rem(4px), rem(8px), rem(16px)),
         'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
         'bootstrap': pad-inline(rem(4px), rem(8px), rem(16px)),
-        'indigo': pad-inline(rem(12px))
+        'indigo': pad-inline(rem(8px), rem(12px), rem(12px))
     ), $variant);
 
     $search-input-block-padding: map.get((
@@ -73,6 +73,16 @@
         igx-input-group {
             --theme: #{if($variant == 'indigo', 'indigo', 'material')};
             --ig-size: #{if($variant == 'indigo', 2, 1)};
+
+            @if $variant == 'bootstrap' or $variant == 'indigo' {
+                input {
+                    height: rem(28px);
+                }
+            } @else if $variant == 'fluent' {
+                input {
+                    height: rem(32px);
+                }
+            }
         }
     }
 
@@ -151,6 +161,18 @@
         %igx-combo__search {
             --igx-input-group-input-suffix-background: transparent;
             --igx-input-group-input-suffix-background--focused: transparent;
+
+            .igx-input-group__bundle::after {
+                border-block-end-color: var(--border-color);
+            }
+
+            .igx-input-group__bundle:hover::after {
+                border-block-end-color: #{if($variant == 'fluent', var(--hover-border-color), var(--border-color))};;
+            }
+
+            .igx-input-group--focused .igx-input-group__bundle::after {
+                border-block-end-color: var(--focused-bottom-line-color);
+            }
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -23,6 +23,11 @@
         }
     }
 
+    igx-date-range-start,
+    igx-date-range-end {
+        min-width: 0;
+    }
+
     igx-date-range-start,
     igx-date-range-end,
     %igx-date-range-picker__start,
@@ -57,18 +62,18 @@
 }
 
 /// Adds typography styles for the igx-date-range-picker component.
-/// Uses the 'subtitle-1'
+/// Uses the 'caption'
 /// categories from the typographic scale.
 /// @group typography
-/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
 @mixin date-range-typography(
     $categories: (
-        label: 'subtitle-1',
+        label: 'caption',
     )
 ) {
     $label: map.get($categories, 'label');
 
-    %igx-date-range__label {
+    %igx-date-range-picker__label {
         @include type-style($label);
     }
 }