Skip to content

Commit

Permalink
feat(input): add valid state styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhpenkov @Juveniel
zhpenkov authored and Juveniel committed Jan 2, 2024
1 parent e75acac commit 980476d
Show file tree
Hide file tree
Showing 13 changed files with 241 additions and 1 deletion.
5 changes: 5 additions & 0 deletions packages/bootstrap/scss/_variables.scss
View file
Expand Up @@ -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;
7 changes: 7 additions & 0 deletions packages/bootstrap/scss/input/_variables.scss
View file
Expand Up @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion packages/classic/scss/_variables.scss
View file
Expand Up @@ -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;
$kendo-zindex-loading: 100 !default;
7 changes: 7 additions & 0 deletions packages/classic/scss/input/_variables.scss
View file
Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions packages/core/scss/color-system/_variables.scss
View file
Expand Up @@ -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;
Expand Down
13 changes: 13 additions & 0 deletions packages/default/scss/_variables.scss
View file
Expand Up @@ -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;
112 changes: 112 additions & 0 deletions packages/default/scss/input/_theme.scss
View file
Expand Up @@ -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 );
}
}
}


Expand Down Expand Up @@ -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 );
}
}
}


Expand Down Expand Up @@ -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 );
}
}
}


Expand Down Expand Up @@ -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 );
}
}
}


Expand Down Expand Up @@ -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 );
}
}
}


Expand Down Expand Up @@ -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 );
}
}
}

}
Expand Down
7 changes: 7 additions & 0 deletions packages/default/scss/input/_variables.scss
View file
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions packages/fluent/scss/input/_layout.scss
View file
Expand Up @@ -143,6 +143,11 @@
&:invalid {
box-shadow: none;
}

// Valid
&:valid {
box-shadow: none;
}
}
span.k-input-inner {
white-space: nowrap;
Expand Down Expand Up @@ -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,
Expand Down
52 changes: 52 additions & 0 deletions packages/fluent/scss/input/_theme.scss
View file
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
7 changes: 7 additions & 0 deletions packages/fluent/scss/input/_variables.scss
View file
Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions packages/material/scss/_variables.scss
View file
Expand Up @@ -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;
7 changes: 7 additions & 0 deletions packages/material/scss/input/_variables.scss
View file
Expand Up @@ -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;
Expand Down

0 comments on commit 980476d

Please sign in to comment.