From 995d514dc6ac1934218bbb7d492469c6a0cfffc4 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 4 Jun 2025 21:15:04 +0300 Subject: [PATCH 1/2] fix(combo): align case sensitive icon styling with WC --- .../core/styles/components/combo/_combo-theme.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 9b76e6ebbc4..8a3067da075 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -165,10 +165,6 @@ %igx-combo__case-icon, %igx-combo__case-icon--active { line-height: 0; - - igx-icon { - --size: rem(18px); - } } // The wrapping element here is needed @@ -177,6 +173,7 @@ igx-icon { // Important is needed since the .igx-icon--inactive has !important color: color($color: 'gray', $variant: 600) !important; + opacity: 1; } } @@ -244,6 +241,13 @@ } } + @if $variant == 'fluent' or $variant == 'bootstrap' { + %igx-combo__search { + --igx-input-group-input-suffix-background: transparent; + --igx-input-group-input-suffix-background--focused: transparent; + } + } + .igx-input-group { %igx-combo__toggle-button { background: var-get($theme, 'toggle-button-background'); From acb0f94c23aeea698dc7a3f8add34556ae967f6e Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 5 Jun 2025 10:19:33 +0300 Subject: [PATCH 2/2] fix(combo): remove !important --- .../src/lib/core/styles/components/combo/_combo-theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 8a3067da075..58e551cb3c5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -171,8 +171,8 @@ // in order to override the !important rule of .igx-icon--inactive. %igx-combo__case-icon { igx-icon { - // Important is needed since the .igx-icon--inactive has !important - color: color($color: 'gray', $variant: 600) !important; + --igx-icon-disabled-color: var(--ig-gray-600); + opacity: 1; } }