Merge branch '20.1.x' into didimmova/fix-input-theme-20.1.x

Author: didimmova

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

@@ -276,8 +276,8 @@
 
     .igx-input-group--disabled {
         %igx-combo__toggle-button {
-            background: var-get($theme, 'toggle-button-background-disabled') !important;
-            color: var-get($theme, 'toggle-button-foreground-disabled') !important;
+            background: var-get($theme, 'toggle-button-background-disabled');
+            color: var-get($theme, 'toggle-button-foreground-disabled');
         }
 
         %igx-combo__clear-button {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -292,6 +292,12 @@
             box-shadow: none !important;
             border: none !important;
         }
+
+        .igx-input-group--disabled,
+        .igx-input-group--disabled igx-prefix,
+        .igx-input-group--disabled igx-suffix {
+            color: var-get($theme, 'cell-disabled-color');
+        }
     }
 
     @if $variant != 'indigo' {
@@ -1192,6 +1198,21 @@
         align-items: center;
         outline-style: none;
 
+        @extend %cell-input-overrides;
+
+        > igx-input-group,
+        igx-combo,
+        igx-simple-combo,
+        igx-select,
+        igx-date-picker,
+        igx-time-picker {
+            height: auto;
+        }
+
+        igx-input-group {
+            background: transparent;
+        }
+
         @if $variant != 'indigo' {
             padding-inline: pad-inline(
                 map.get($grid-cell-padding-inline, 'compact'),
@@ -1407,8 +1428,6 @@
         &%grid-cell-number {
             justify-content: flex-start !important;
         }
-
-        @extend %cell-input-overrides;
     }
 
     %grid-cell--pinned {

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -376,7 +376,7 @@
     %form-group-display--disabled {
         pointer-events: none;
         user-select: none;
-        color: var-get($theme, 'disabled-text-color') !important;
+        color: var-get($theme, 'disabled-text-color');
 
         igx-prefix,
         [igxPrefix] {
@@ -1445,7 +1445,7 @@
     %form-group-input--disabled {
         cursor: default;
 
-        color: var-get($theme, 'disabled-text-color') !important;
+        color: var-get($theme, 'disabled-text-color');
 
         &::placeholder {
             color: var-get($theme, 'disabled-placeholder-color');
@@ -1495,7 +1495,7 @@
     }
 
     %form-group-textarea--disabled {
-        color: var-get($theme, 'disabled-text-color') !important;
+        color: var-get($theme, 'disabled-text-color');
         cursor: default;
 
         &::placeholder {
@@ -2073,7 +2073,7 @@
     }
 
     %fluent-label-disabled {
-        color: var-get($theme, 'disabled-text-color') !important;
+        color: var-get($theme, 'disabled-text-color');
     }
 
     %fluent-label-filled {

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss

@@ -133,6 +133,10 @@
             }
 
             &:hover {
+                @include e(label) {
+                    @extend %radio-label--invalid--hover !optional;
+                }
+
                 @include e(ripple) {
                     @extend %radio-ripple--hover !optional;
                     @extend %radio-ripple--hover-invalid !optional;

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss

@@ -98,22 +98,6 @@
         user-select: none;
     }
 
-    %radio-label--invalid {
-        color: var-get($theme, 'error-color');
-
-        @if $variant == 'indigo' {
-            color: var-get($theme, 'label-color');
-
-            &:hover {
-                color: var-get($theme, 'label-color-hover');
-            }
-        }
-    }
-
-    %radio-label--disabled {
-        color: var-get($theme, 'disabled-label-color');
-    }
-
     %radio-composite {
         position: relative;
         display: inline-block;
@@ -247,11 +231,6 @@
 
         &::after {
             border: $border-width $border-style var-get($theme, 'error-color');
-
-            @if $bootstrap-theme {
-                background: transparent;
-                border: $border-width $border-style var-get($theme, 'error-color');
-            }
         }
     }
 
@@ -268,11 +247,10 @@
         @if $bootstrap-theme {
             &::after {
                 background: var-get($theme, 'error-color');
-                border-color: var-get($theme, 'error-color');
             }
 
             &::before {
-                background: white;
+                background: var-get($theme, 'fill-hover-border-color');
             }
         }
     }
@@ -317,11 +295,29 @@
     }
 
     %radio-label--hover {
+        color: var-get($theme, 'label-color-hover');
+    }
+
+    %radio-label--invalid {
+        color: var-get($theme, 'error-color');
+
+        @if $variant == 'indigo' {
+            color: var-get($theme, 'label-color');
+        }
+    }
+
+    %radio-label--invalid--hover {
+        color: var-get($theme, 'error-color');
+
         @if $variant == 'indigo' {
             color: var-get($theme, 'label-color-hover');
         }
     }
 
+    %radio-label--disabled {
+        color: var-get($theme, 'disabled-label-color');
+    }
+
     %radio-label--after {
         margin-inline-start: $label-margin;
     }