From 7632bcb5de724dd2092de5d159eb2ffc31c2f7bc Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 2 Mar 2022 15:23:21 +0200 Subject: [PATCH 1/2] fix:(input-group) fluent theme input focus styles --- .../core/styles/components/input/_input-group-component.scss | 1 + .../lib/core/styles/components/input/_input-group-theme.scss | 2 +- .../lib/core/styles/themes/schemas/light/_input-group.scss | 5 ++--- 3 files changed, 4 insertions(+), 4 deletions(-) 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 aa3a07d33cf..5ed2511bafa 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 @@ -614,6 +614,7 @@ @include e(bundle) { @extend %form-group-bundle--focus !optional; + &:focus-within, &:hover { @extend %form-group-bundle--fluent--focus !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 d6fa973c80f..a8d35f3cab0 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 @@ -737,7 +737,7 @@ %form-group-bundle--fluent--focus { border-color: var-get($theme, 'focused-border-color'); - box-shadow: none; + box-shadow: 0 0 0 1px var-get($theme, 'focused-border-color'); } %form-group-bundle--fluent--hover-disabled, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss index a6cd43fa427..67f53ceb98f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -203,8 +203,7 @@ $light-input-group: extend( /// /// @prop {Map} border-color [color: ('grays', 500)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [color: ('grays', 800)] - The hover input border for input groups of type border and fluent. -/// @prop {Map} focused-border-color [color: ('grays', 500)] - The focused input border color for input groups of type border and fluent. -/// @prop {Map} disabled-border-color [color: ('grays', 500)] - The disabled border color for input groups of type border and fluent. +/// @prop {Map} disabled-border-color [color: ('info')] - The disabled border color for input groups of type border and fluent. /// /// @prop {Map} border-disabled-background [color: ('grays', 100)] - The background color of an input group of type border in the disabled state. /// @@ -241,7 +240,7 @@ $fluent-input-group: extend( ), focused-border-color: ( - color: ('grays', 500) + color: ('info') ), disabled-border-color: ( From a31f86806bf4e9715129b6a90afa4f455975ebad Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 4 Mar 2022 11:35:16 +0200 Subject: [PATCH 2/2] fix:(input-group) Fix disabled colors - Fix idle caret color. - Fix border color. - Remove unused placeholders. --- .../components/input/_input-group-component.scss | 14 ++------------ .../components/input/_input-group-theme.scss | 9 +++++++++ .../styles/themes/schemas/light/_input-group.scss | 13 +++++++------ 3 files changed, 18 insertions(+), 18 deletions(-) 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 5ed2511bafa..8a68c283bb0 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 @@ -257,10 +257,6 @@ @include e(textarea) { @extend %form-group-textarea--cosy !optional; } - - @include e(hint) { - @extend %form-group-hint--cosy !optional; - } } @include m(compact) { @@ -285,10 +281,6 @@ @include e(textarea) { @extend %form-group-textarea--compact !optional; } - - @include e(hint) { - @extend %form-group-hint--compact !optional; - } } @include m(box) { @@ -635,6 +627,7 @@ @include e(bundle) { @extend %form-group-bundle-success--fluent !optional; + &:focus-within, &:hover { @extend %form-group-bundle-success--fluent--hover !optional; } @@ -649,6 +642,7 @@ @include e(bundle) { @extend %form-group-bundle-error--fluent !optional; + &:focus-within, &:hover { @extend %form-group-bundle-error--fluent--hover !optional; } @@ -890,10 +884,6 @@ @extend %form-group-display--disabled-bootstrap !optional; } - @include e(label) { - @extend %bootstrap-label--disabled !optional; - } - @include e(input) { @extend %bootstrap-input--disabled !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 a8d35f3cab0..270c316fe50 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 @@ -736,6 +736,7 @@ } %form-group-bundle--fluent--focus { + caret-color: var-get($theme, 'focused-text-color'); border-color: var-get($theme, 'focused-border-color'); box-shadow: 0 0 0 1px var-get($theme, 'focused-border-color'); } @@ -751,11 +752,19 @@ border-color: var-get($theme, 'error-secondary-color'); } + %form-group-bundle-error--fluent--hover { + box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color'); + } + %form-group-bundle-success--fluent--hover, %form-group-bundle-success--fluent { border-color: var-get($theme, 'success-secondary-color'); } + %form-group-bundle-success--fluent--hover { + box-shadow: 0 0 0 1px var-get($theme, 'success-secondary-color'); + } + %fluent-input { padding: 0; margin: 0; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss index 67f53ceb98f..2542e69944f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -201,10 +201,11 @@ $light-input-group: extend( /// Generates a fluent input-group schema. /// @type {Map} /// -/// @prop {Map} border-color [color: ('grays', 500)] - The border color for input groups of type border and fluent. +/// @prop {Map} border-color [color: ('grays', 700)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [color: ('grays', 800)] - The hover input border for input groups of type border and fluent. -/// @prop {Map} disabled-border-color [color: ('info')] - The disabled border color for input groups of type border and fluent. +/// @prop {Map} disabled-border-color [color: ('grays', 100)] - The disabled border color for input groups of type border and fluent. /// +/// @prop {Map} focused-border-color [color: ('info')] - The focused input border color for input groups of type border and fluent. /// @prop {Map} border-disabled-background [color: ('grays', 100)] - The background color of an input group of type border in the disabled state. /// /// @prop {Color} search-disabled-background [color: ('grays', 100)] - The background color of an input group of type search in the disabled state. @@ -232,7 +233,7 @@ $fluent-input-group: extend( variant: 'fluent', border-color: ( - color: ('grays', 500) + color: ('grays', 700) ), hover-border-color: ( @@ -244,7 +245,7 @@ $fluent-input-group: extend( ), disabled-border-color: ( - color: ('grays', 500) + color: ('grays', 100) ), border-disabled-background: ( @@ -256,11 +257,11 @@ $fluent-input-group: extend( ), input-prefix-background: ( - color: ('grays', 200), + color: ('grays', 100), ), input-suffix-background: ( - color: ('grays', 200), + color: ('grays', 100), ), ) );