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..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,12 +210,24 @@ 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' { %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 +236,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 +274,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 +286,4 @@ } } } - - %form-group-bundle { - &:hover { - %igx-combo__clear-button { - color: inherit; - } - } - } }