From 814fb506cc07431bade431306d44f639029f8118 Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 27 Oct 2025 16:14:23 +0200 Subject: [PATCH 1/2] fix(combo): style component using sass theme --- .../styles/components/combo/_combo-theme.scss | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 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 c13e6c3747e..d42785f7ffa 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 @@ -216,6 +216,12 @@ %form-group-bundle:not(%form-group-bundle--disabled):hover { %igx-combo__toggle-button { color: var-get($theme, 'toggle-button-foreground-focus'); + background: var-get($theme, 'toggle-button-background-focus'); + } + + %igx-combo__clear-button { + color: var-get($theme, 'clear-button-foreground-focus'); + background: var-get($theme, 'clear-button-background-focus'); } } } @@ -224,6 +230,14 @@ %igx-combo__toggle-button { color: var-get($theme, 'toggle-button-foreground-filled'); } + + @if $variant == 'material' { + &.igx-input-group--focused { + %igx-combo__toggle-button { + color: var-get($theme, 'toggle-button-foreground-filled'); + } + } + } } .igx-input-group--focused { @@ -254,14 +268,6 @@ } } - //.igx-input-group:not(.igx-input-group--box) { - // %igx-combo__toggle-button:focus { - // @if $variant == 'material' { - // background: var-get($theme, 'toggle-button-background-focus--border'); - // } - // } - //} - .igx-input-group--disabled { %igx-combo__toggle-button { background: var-get($theme, 'toggle-button-background-disabled') !important; @@ -274,12 +280,4 @@ } } } - - %form-group-bundle { - &:hover { - %igx-combo__clear-button { - color: inherit; - } - } - } } From dda069af12222e81010337bba2372832fb805718 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 30 Oct 2025 17:57:16 +0200 Subject: [PATCH 2/2] fix(combo): material border type issue --- .../src/lib/core/styles/components/combo/_combo-theme.scss | 6 ++++++ 1 file changed, 6 insertions(+) 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 d42785f7ffa..5f3860c4913 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 @@ -210,6 +210,12 @@ color: var-get($theme, 'clear-button-foreground-focus'); background: var-get($theme, 'clear-button-background-focus'); } + + &%form-group-bundle--border { + %igx-combo__toggle-button { + background: var-get($theme, 'toggle-button-background-focus--border'); + } + } } @if $variant == 'indigo' {