From 980476de0437e8d0d605534bf5dc312b030dce76 Mon Sep 17 00:00:00 2001 From: Zhuliyan Penkov Date: Mon, 11 Dec 2023 13:59:01 +0200 Subject: [PATCH] feat(input): add valid state styles --- packages/bootstrap/scss/_variables.scss | 5 + packages/bootstrap/scss/input/_variables.scss | 7 ++ packages/classic/scss/_variables.scss | 7 +- packages/classic/scss/input/_variables.scss | 7 ++ .../core/scss/color-system/_variables.scss | 5 + packages/default/scss/_variables.scss | 13 ++ packages/default/scss/input/_theme.scss | 112 ++++++++++++++++++ packages/default/scss/input/_variables.scss | 7 ++ packages/fluent/scss/input/_layout.scss | 8 ++ packages/fluent/scss/input/_theme.scss | 52 ++++++++ packages/fluent/scss/input/_variables.scss | 7 ++ packages/material/scss/_variables.scss | 5 + packages/material/scss/input/_variables.scss | 7 ++ 13 files changed, 241 insertions(+), 1 deletion(-) diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index 72c6dfecfcf..2505eaac474 100644 --- a/packages/bootstrap/scss/_variables.scss +++ b/packages/bootstrap/scss/_variables.scss @@ -368,6 +368,11 @@ $kendo-invalid-text: $kendo-color-error !default; $kendo-invalid-border: $kendo-color-error !default; $kendo-invalid-shadow: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default; +$kendo-valid-bg: null !default; +$kendo-valid-text: $kendo-color-success !default; +$kendo-valid-border: $kendo-color-success !default; +$kendo-valid-shadow: 0 0 0 .25rem rgba( $kendo-valid-border, .25 ) !default; + // Loading $kendo-loading-opacity: .3 !default; $kendo-zindex-loading: 100 !default; diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss index 6de8e1943cc..969e48c2ff1 100644 --- a/packages/bootstrap/scss/input/_variables.scss +++ b/packages/bootstrap/scss/input/_variables.scss @@ -279,6 +279,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default; /// @group input $kendo-input-invalid-shadow: $kendo-invalid-shadow !default; +/// The border color of the valid Input components. +/// @group input +$kendo-input-valid-border: $kendo-valid-border !default; +/// The shadow of the valid Input components. +/// @group input +$kendo-input-valid-shadow: $kendo-valid-shadow !default; + /// The background color of the Picker components. /// @group picker $kendo-picker-bg: $kendo-button-bg !default; diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss index 60edec07c5a..ebfdbe2b26c 100644 --- a/packages/classic/scss/_variables.scss +++ b/packages/classic/scss/_variables.scss @@ -362,6 +362,11 @@ $kendo-invalid-text: $kendo-color-error !default; $kendo-invalid-border: $kendo-color-error !default; $kendo-invalid-shadow: null !default; +$kendo-valid-bg: null !default; +$kendo-valid-text: $kendo-color-success !default; +$kendo-valid-border: $kendo-color-success !default; +$kendo-valid-shadow: null !default; + // Loading $kendo-loading-opacity: .3 !default; -$kendo-zindex-loading: 100 !default; \ No newline at end of file +$kendo-zindex-loading: 100 !default; diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss index 43a19312ea2..088828be113 100644 --- a/packages/classic/scss/input/_variables.scss +++ b/packages/classic/scss/input/_variables.scss @@ -284,6 +284,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default; /// @group input $kendo-input-invalid-shadow: $kendo-invalid-shadow !default; +/// The border color of the valid Input components. +/// @group input +$kendo-input-valid-border: $kendo-valid-border !default; +/// The shadow of the valid Input components. +/// @group input +$kendo-input-valid-shadow: $kendo-valid-shadow !default; + /// The background color of the Picker components. /// @group picker $kendo-picker-bg: $kendo-button-bg !default; diff --git a/packages/core/scss/color-system/_variables.scss b/packages/core/scss/color-system/_variables.scss index 046cba23c45..1cbd3f2c1a4 100644 --- a/packages/core/scss/color-system/_variables.scss +++ b/packages/core/scss/color-system/_variables.scss @@ -85,6 +85,11 @@ $kendo-invalid-text: k-get-theme-color-var( error-190 ) !default; $kendo-invalid-border: k-get-theme-color-var( error-190 ) !default; $kendo-invalid-shadow: null !default; +$kendo-valid-bg: initial !default; +$kendo-valid-text: k-get-theme-color-var( success-190 ) !default; +$kendo-valid-border: k-get-theme-color-var( success-190 ) !default; +$kendo-valid-shadow: null !default; + // Disabled Styling $kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default; $kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default; diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index 304cc74f517..276f91c61d9 100644 --- a/packages/default/scss/_variables.scss +++ b/packages/default/scss/_variables.scss @@ -447,6 +447,19 @@ $kendo-invalid-border: $kendo-color-error !default; /// @group component $kendo-invalid-shadow: null !default; +/// Background color of the valid items. +/// @group component +$kendo-valid-bg: null !default; +/// Text color of the valid items. +/// @group component +$kendo-valid-text: $kendo-color-success !default; +/// Border color of the valid items. +/// @group component +$kendo-valid-border: $kendo-color-success !default; +/// Shadow of the valid items. +/// @group component +$kendo-valid-shadow: null !default; + // Loading $kendo-loading-opacity: .3 !default; $kendo-zindex-loading: 100 !default; diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss index 5926e01eaaa..f6a84b63819 100644 --- a/packages/default/scss/input/_theme.scss +++ b/packages/default/scss/input/_theme.scss @@ -70,6 +70,24 @@ } } + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + @include fill( $border: $kendo-input-valid-border ); + + .k-input-validation-icon { + color: $kendo-valid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-valid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-valid-shadow ); + } + } } @@ -146,6 +164,25 @@ @include focus-indicator( $kendo-input-invalid-shadow ); } } + + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + @include fill( $border: $kendo-input-valid-border ); + + .k-input-validation-icon { + color: $kendo-valid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-valid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-valid-shadow ); + } + } } @@ -231,6 +268,24 @@ } } + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + @include fill( $border: $kendo-input-valid-border ); + + .k-input-validation-icon { + color: $kendo-valid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-valid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-valid-shadow ); + } + } } @@ -313,6 +368,25 @@ @include focus-indicator( $kendo-input-invalid-shadow ); } } + + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + @include fill( $border: $kendo-input-valid-border ); + + .k-input-validation-icon { + color: $kendo-valid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-valid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-valid-shadow ); + } + } } @@ -384,6 +458,25 @@ @include focus-indicator( $kendo-input-invalid-shadow ); } } + + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + @include fill( $border: $kendo-input-valid-border ); + + .k-input-validation-icon { + color: $kendo-valid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-valid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-valid-shadow ); + } + } } @@ -466,6 +559,25 @@ @include focus-indicator( $kendo-input-invalid-shadow ); } } + + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + @include fill( $border: $kendo-input-valid-border ); + + .k-input-validation-icon { + color: $kendo-valid-text; + } + + &:focus, + &.k-focus { + @include focus-indicator( $kendo-input-valid-shadow ); + } + &:focus-within { + @include focus-indicator( $kendo-input-valid-shadow ); + } + } } } diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss index c4dbbbd049d..d7b6ce7d2c4 100644 --- a/packages/default/scss/input/_variables.scss +++ b/packages/default/scss/input/_variables.scss @@ -279,6 +279,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default; /// @group input $kendo-input-invalid-shadow: $kendo-invalid-shadow !default; +/// The border color of the valid Input components. +/// @group input +$kendo-input-valid-border: $kendo-valid-border !default; +/// The shadow of the valid Input components. +/// @group input +$kendo-input-valid-shadow: $kendo-valid-shadow !default; + /// The background color of the Picker components. /// @group picker $kendo-picker-bg: $kendo-button-bg !default; diff --git a/packages/fluent/scss/input/_layout.scss b/packages/fluent/scss/input/_layout.scss index e1b85cc244b..14f9dbceb69 100644 --- a/packages/fluent/scss/input/_layout.scss +++ b/packages/fluent/scss/input/_layout.scss @@ -143,6 +143,11 @@ &:invalid { box-shadow: none; } + + // Valid + &:valid { + box-shadow: none; + } } span.k-input-inner { white-space: nowrap; @@ -413,8 +418,11 @@ } + &.k-valid, &.k-invalid, + &.ng-valid.ng-touched, &.ng-invalid.ng-touched, + &.ng-valid.ng-dirty &.ng-invalid.ng-dirty { &:focus, diff --git a/packages/fluent/scss/input/_theme.scss b/packages/fluent/scss/input/_theme.scss index b4e0eed3d2e..81ae21c5709 100644 --- a/packages/fluent/scss/input/_theme.scss +++ b/packages/fluent/scss/input/_theme.scss @@ -73,6 +73,32 @@ } } } + + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + --INTERNAL--kendo-input-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} ); + + &::after { + border-color: var( --kendo-input-valid-border, #{$kendo-input-valid-border} ); + } + + .k-input-validation-icon { + color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} ); + } + + &:focus:hover, + &.k-focus:hover, + &:focus.k-hover, + &.k-focus.k-hover { + --INTERNAL--kendo-input-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} ); + + .k-input-validation-icon { + color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} ); + } + } + } } .k-picker { @@ -145,6 +171,32 @@ } } } + + // Valid + &.k-valid, + &.ng-valid.ng-touched, + &.ng-valid.ng-dirty { + --INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} ); + + &::after { + border-color: var( --kendo-input-valid-border, #{$kendo-input-valid-border} ); + } + + .k-input-validation-icon { + color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} ); + } + + &:focus:hover, + &.k-focus:hover, + &:focus.k-hover, + &.k-focus.k-hover { + --INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} ); + + .k-input-validation-icon { + color: var( --kendo-input-valid-text, #{$kendo-input-valid-text} ); + } + } + } } @each $component, $fill-modes in $kendo-input-theme-colors { diff --git a/packages/fluent/scss/input/_variables.scss b/packages/fluent/scss/input/_variables.scss index 842ce954561..19487d58321 100644 --- a/packages/fluent/scss/input/_variables.scss +++ b/packages/fluent/scss/input/_variables.scss @@ -635,6 +635,13 @@ $kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-borde /// @group input $kendo-input-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default; +/// The border color of the valid Input components. +/// @group input +$kendo-input-valid-border: var( --kendo-valid-border, #{$kendo-valid-border} ) !default; +/// The text color of the valid Input components. +/// @group input +$kendo-input-valid-text: var( --kendo-valid-text, #{$kendo-valid-text} ) !default; + /// The text color of the Input placeholder. /// @group input $kendo-input-placeholder-text: k-get-theme-color-var( neutral-130 ) !default; diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss index e44f00375ba..fd7e3121e2e 100644 --- a/packages/material/scss/_variables.scss +++ b/packages/material/scss/_variables.scss @@ -437,6 +437,11 @@ $kendo-invalid-text: $kendo-color-error !default; $kendo-invalid-border: $kendo-color-error !default; $kendo-invalid-shadow: null !default; +$kendo-valid-bg: null !default; +$kendo-valid-text: $kendo-color-success !default; +$kendo-valid-border: $kendo-color-success !default; +$kendo-valid-shadow: null !default; + // Loading $kendo-loading-opacity: .3 !default; $kendo-zindex-loading: 100 !default; diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss index 0ea48c64507..14a9f5717ea 100644 --- a/packages/material/scss/input/_variables.scss +++ b/packages/material/scss/input/_variables.scss @@ -280,6 +280,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default; /// @group input $kendo-input-invalid-shadow: $kendo-invalid-shadow !default; +/// The border color of the valid Input components. +/// @group input +$kendo-input-valid-border: $kendo-valid-border !default; +/// The shadow of the valid Input components. +/// @group input +$kendo-input-valid-shadow: $kendo-valid-shadow !default; + /// The background color of the Picker components. /// @group picker $kendo-picker-bg: $kendo-input-bg !default;