New to Kendo UI for Vue? Start a free 30-day trial
Customizing Common
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $border-radius | 2px | 2px | |
Description Border radius for all components. | |||
| $base-bg | #fafafa | #fafafa | |
Description The background of the components' chrome area. | |||
| $base-text | $body-text | ||
Description The text color of the components' chrome area. | |||
| $base-border | rgba( black, .08 ) | rgba( black, .08 ) | |
Description The border color of the components' chrome area. | |||
| $base-gradient | rgba( black, 0 ), rgba( black, .02 ) | rgba( black, 0 ), rgba( black, .02 ) | |
Description The gradient background of the components' chrome area. | |||
| $hovered-bg | try-shade( $base-bg, .5 ) | try-shade( $base-bg, .5 ) | |
Description The background of hovered items. | |||
| $hovered-text | $base-text | ||
Description The text color of hovered items. | |||
| $hovered-border | $base-border | rgba( black, .08 ) | |
Description The border color of hovered items. | |||
| $hovered-gradient | $base-gradient | rgba( black, 0 ), rgba( black, .02 ) | |
Description The gradient background of hovered items. | |||
| $selected-bg | $primary | #ff6358 | |
Description The background of selected items. | |||
| $selected-text | contrast-wcag( $selected-bg ) | contrast-wcag( $selected-bg ) | |
Description The text color of selected items. | |||
| $selected-border | $base-border | rgba( black, .08 ) | |
Description The border color of selected items. | |||
| $selected-gradient | $base-gradient | rgba( black, 0 ), rgba( black, .02 ) | |
Description The gradient background of selected items. | |||
