New to Kendo UI for Angular? Start a free 30-day trial
Customizing Picker
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-picker-bg | String | $kendo-button-bg | var(--kendo-color-base, #dee2e6) |
Description
The background color of the Picker components. | |||
| $kendo-picker-text | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The text color of the Picker components. | |||
| $kendo-picker-border | String | $kendo-button-border | var(--kendo-color-base, #dee2e6) |
Description
The border color of the Picker components. | |||
| $kendo-picker-gradient | Null | $kendo-button-gradient | null |
Description
The gradient of the Picker components. | |||
| $kendo-picker-shadow | Null | $kendo-button-shadow | null |
Description
The shadow of the Picker components. | |||
| $kendo-picker-hover-bg | String | $kendo-button-hover-bg | var(--kendo-color-base-hover, #ced4da) |
Description
The background color of the hovered Picker components. | |||
| $kendo-picker-hover-text | Null | $kendo-button-hover-text | null |
Description
The text color of the hovered Picker components. | |||
| $kendo-picker-hover-border | String | $kendo-button-hover-border | var(--kendo-color-base-hover, #ced4da) |
Description
The border color of the hovered Picker components. | |||
| $kendo-picker-hover-gradient | Null | $kendo-button-hover-gradient | null |
Description
The gradient of the hovered Picker components. | |||
| $kendo-picker-hover-shadow | Null | $kendo-button-hover-shadow | null |
Description
The shadow of the hovered Picker components. | |||
| $kendo-picker-focus-bg | String | $kendo-button-active-bg | var(--kendo-color-base-active, #bdc4cb) |
Description
The background color of the focused Picker components. | |||
| $kendo-picker-focus-text | Null | $kendo-button-focus-text | null |
Description
The text color of the focused Picker components. | |||
| $kendo-picker-focus-border | String | $kendo-button-focus-border | var(--kendo-color-base-active, #bdc4cb) |
Description
The border color of the focused Picker components. | |||
| $kendo-picker-focus-gradient | Null | $kendo-button-focus-gradient | null |
Description
The gradient of the focused Picker components. | |||
| $kendo-picker-focus-shadow | List | $kendo-button-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, #dee2e6) 50%, transparent) |
Description
The shadow of the focused Picker components. | |||
| $kendo-picker-disabled-bg | Null | null | null |
Description
The background color of the disabled Picker components. | |||
| $kendo-picker-disabled-text | Null | null | null |
Description
The text color of the disabled Picker components. | |||
| $kendo-picker-disabled-border | Null | null | null |
Description
The border color of the disabled Picker components. | |||
| $kendo-picker-disabled-gradient | Null | null | null |
Description
The gradient of the disabled Picker components. | |||
| $kendo-picker-disabled-shadow | Null | null | null |
Description
The shadow of the disabled Picker components. | |||
| $kendo-picker-outline-bg | Null | null | null |
Description
The background color of the outline Picker components. | |||
| $kendo-picker-outline-text | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The text color of the outline Picker components. | |||
| $kendo-picker-outline-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 50%, transparent) |
Description
The border color of the outline Picker components. | |||
| $kendo-picker-outline-hover-bg | String | $kendo-picker-outline-text | var(--kendo-color-on-base, #212529) |
Description
The background color of the outline hovered Picker components. | |||
| $kendo-picker-outline-hover-text | String | if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) | var(--kendo-color-base-subtle, #e9ecef) |
Description
The text color of the outline hovered Picker components. | |||
| $kendo-picker-outline-hover-border | String | $kendo-picker-outline-hover-bg | var(--kendo-color-on-base, #212529) |
Description
The border color of the outline hovered Picker components. | |||
| $kendo-picker-outline-focus-bg | Null | null | null |
Description
The background color of the outline focused Picker components. | |||
| $kendo-picker-outline-focus-text | Null | null | null |
Description
The text color of the outline focused Picker components. | |||
| $kendo-picker-outline-focus-border | Null | null | null |
Description
The border color of the outline focused Picker components. | |||
| $kendo-picker-outline-focus-shadow | List | $kendo-picker-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, #dee2e6) 50%, transparent) |
Description
The shadow of the outline focused Picker components. | |||
| $kendo-picker-outline-hover-focus-bg | Null | null | null |
Description
The background color of the outline hovered and focused Picker components. | |||
| $kendo-picker-outline-hover-focus-text | Null | null | null |
Description
The text color of the outline hovered and focused Picker components. | |||
| $kendo-picker-outline-hover-focus-border | Null | null | null |
Description
The border color of the outline hovered and focused Picker components. | |||
| $kendo-picker-flat-bg | Null | null | null |
Description
The background color of the flat Picker components. | |||
| $kendo-picker-flat-text | String | $kendo-button-text | var(--kendo-color-on-base, #212529) |
Description
The text color of the flat Picker components. | |||
| $kendo-picker-flat-border | String | $kendo-button-border | var(--kendo-color-base, #dee2e6) |
Description
The border color of the flat Picker components. | |||
| $kendo-picker-flat-hover-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-text, .08 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 8%, transparent) |
Description
The background color of the flat hovered Picker components. | |||
| $kendo-picker-flat-hover-text | Null | null | null |
Description
The text color of the flat hovered Picker components. | |||
| $kendo-picker-flat-hover-border | Null | null | null |
Description
The border color of the flat hovered Picker components. | |||
| $kendo-picker-flat-focus-bg | Null | null | null |
Description
The background color of the flat focused Picker components. | |||
| $kendo-picker-flat-focus-text | Null | null | null |
Description
The text color of the flat focused Picker components. | |||
| $kendo-picker-flat-focus-border | Null | null | null |
Description
The border color of the flat focused Picker components. | |||
| $kendo-picker-flat-focus-shadow | List | $kendo-picker-focus-shadow | 0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, #dee2e6) 50%, transparent) |
Description
The shadow of the flat focused Picker components. | |||
| $kendo-picker-flat-hover-focus-bg | Null | null | null |
Description
The background color of the flat hovered and focused Picker components. | |||
| $kendo-picker-flat-hover-focus-text | Null | null | null |
Description
The text color of the flat hovered and focused Picker components. | |||
| $kendo-picker-flat-hover-focus-border | Null | null | null |
Description
The border color of the flat hovered and focused Picker components. | |||
