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 5b001acd553..9638b638ca7 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 @@ -1000,6 +1000,36 @@ } } + @include mx(bootstrap, warning) { + @include e(input) { + @extend %bootstrap-input--warning !optional; + + &:hover { + @extend %bootstrap-input--warning !optional; + } + } + + @include e(file-input) { + @extend %bootstrap-input--warning !optional; + + &:hover { + @extend %bootstrap-input--warning !optional; + } + } + + @include e(label) { + @extend %bootstrap-label !optional; + } + + @include e(textarea) { + @extend %bootstrap-input--warning !optional; + + &:hover { + @extend %bootstrap-input--warning !optional; + } + } + } + @include mx(bootstrap, textarea-group) { @include e(bundle) { @extend %form-group-bundle-bootstrap--textarea !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 82406dd8fd0..36ab839fdcf 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 @@ -2461,12 +2461,38 @@ %bootstrap-input--success { border: rem(1px) solid var-get($theme, 'success-secondary-color'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color'); + + &:focus { + box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color'); + + + %bootstrap-file-input { + box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color'); + } + } } %bootstrap-input--error { border: rem(1px) solid var-get($theme, 'error-secondary-color'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); + + &:focus { + box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); + + + %bootstrap-file-input { + box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); + } + } + } + + %bootstrap-input--warning { + border: rem(1px) solid var-get($theme, 'warning-secondary-color'); + + &:focus { + box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38); + + + %bootstrap-file-input { + box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: 0.38); + } + } } %bootstrap-input--disabled {