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 af8207e86bc..9b76e6ebbc4 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 @@ -261,7 +261,6 @@ } } - %form-group-bundle:not(%form-group-bundle--disabled):hover, %form-group-bundle:not(%form-group-bundle--disabled):focus-within { %igx-combo__toggle-button { color: var-get($theme, 'toggle-button-foreground-focus'); @@ -274,6 +273,14 @@ } } + @if $variant == 'indigo' { + %form-group-bundle:not(%form-group-bundle--disabled):hover { + %igx-combo__toggle-button { + color: var-get($theme, 'toggle-button-foreground-focus'); + } + } + } + .igx-input-group--filled { %igx-combo__toggle-button { color: var-get($theme, 'toggle-button-foreground-filled'); @@ -293,8 +300,10 @@ } .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) { - %igx-combo__toggle-button { - background: var-get($theme, 'toggle-button-background-focus--border'); + @if $variant != 'fluent' { + %igx-combo__toggle-button { + background: var-get($theme, 'toggle-button-background-focus--border'); + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index 954ada68b74..6f74b401fbc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -244,6 +244,24 @@ } } + @include m(warning) { + @include e(label) { + @extend %form-group-label--warning !optional; + } + + @include e(line) { + @extend %form-group-line--warning !optional; + } + + @include e(hint) { + @extend %form-group-helper--warning !optional; + } + + @include e(bundle) { + @extend %form-group-bundle--warning !optional; + } + } + @include m(invalid) { @include e(label) { @extend %form-group-label--error !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 28b0696f88a..1e7ae03f498 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -512,6 +512,7 @@ } %form-group-display--disabled { + pointer-events: none; user-select: none; color: var-get($theme, 'disabled-text-color') !important; @@ -613,6 +614,13 @@ caret-color: initial; } + %form-group-bundle--warning { + &::after { + border-block-end-color: var-get($theme, 'warning-secondary-color'); + } + caret-color: initial; + } + %form-group-bundle--error { &::after { border-block-end-color: var-get($theme, 'error-secondary-color'); @@ -803,6 +811,25 @@ &::after { display: none; } + + &:hover { + %form-group-bundle-start { + border-color: var-get($theme, 'hover-border-color'); + } + + %igx-input-group__filler { + border-color: var-get($theme, 'hover-border-color'); + } + + %igx-input-group__notch { + border-block-start-color: var-get($theme, 'hover-border-color'); + border-block-end-color: var-get($theme, 'hover-border-color'); + } + + %form-group-bundle-end { + border-color: var-get($theme, 'hover-border-color'); + } + } } %form-group-bundle-border--disabled { @@ -981,6 +1008,21 @@ } } + %form-group-label--focused-border:not(:is( + %form-group-border--error, + %form-group-border--warning, + %form-group-border--success)) + { + &:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'focused-border-color'); + } + } + } + %form-group-label--float-border { --label-position: #{sizable(18px, 22px, 26px)}; @@ -1064,6 +1106,10 @@ color: var-get($theme, 'focused-secondary-color'); } + %form-group-label--warning { + color: var-get($theme, 'warning-secondary-color'); + } + %form-group-label--success { color: var-get($theme, 'success-secondary-color'); } @@ -1305,10 +1351,19 @@ %igx-input-group__filler { border-block-color: var-get($theme, 'success-secondary-color'); } + + %form-group-bundle--border:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'success-secondary-color'); + } + } } %form-group-line--warning { - background: var-get($theme, 'error-secondary-color'); + background: var-get($theme, 'warning-secondary-color'); } %form-group-border--warning { @@ -1328,6 +1383,15 @@ %igx-input-group__filler { border-block-color: var-get($theme, 'warning-secondary-color'); } + + %form-group-bundle--border:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'warning-secondary-color'); + } + } } %form-group-line--error { @@ -1351,6 +1415,15 @@ %igx-input-group__filler { border-block-color: var-get($theme, 'error-secondary-color'); } + + %form-group-bundle--border:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'error-secondary-color'); + } + } } %form-group-border--disabled { @@ -1413,6 +1486,10 @@ color: var-get($theme, 'success-secondary-color'); } + %form-group-helper--warning { + color: var-get($theme, 'warning-secondary-color'); + } + %form-group-helper--error { color: var-get($theme, 'error-secondary-color'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss index 4cd0fbaa821..0829bce9fad 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss @@ -101,13 +101,20 @@ } } - %form-group-bundle:hover, %form-group-bundle:focus-within { %igx-select__toggle-button { color: var-get($theme, 'toggle-button-foreground-focus'); } } + @if $variant == 'indigo' { + %form-group-bundle:hover { + %igx-select__toggle-button { + color: var-get($theme, 'toggle-button-foreground-focus'); + } + } + } + .igx-input-group--filled { %igx-select__toggle-button { color: var-get($theme, 'toggle-button-foreground-filled'); @@ -120,8 +127,10 @@ } .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) { - %igx-select__toggle-button { - background: var-get($theme, 'toggle-button-background-focus--border'); + @if $variant != 'fluent' { + %igx-select__toggle-button { + background: var-get($theme, 'toggle-button-background-focus--border'); + } } }