Customizing Common
Variables
The following table lists the available variables for customization.
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-border-radius | Number | $border-radius | 0.375rem |
Description
Border radius for all components. | |||
$kendo-chip-lg-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the large Chip. | |||
$kendo-base-bg | Color | $gray-100 | #f8f9fa |
Description
The background of the components' chrome area. | |||
$kendo-base-text | Color | $kendo-body-text | #212529 |
Description
The text color of the components' chrome area. | |||
$kendo-base-border | Color | k-try-shade( $kendo-base-bg, 1 ) | #e4e5e6 |
Description
The border color of the components' chrome area. | |||
$kendo-base-gradient | Null | null | null |
Description
The gradient background of the components' chrome area. | |||
$kendo-hover-bg | Color | $gray-200 | #e9ecef |
Description
The background of hovered items. | |||
$kendo-hover-text | Color | $kendo-base-text | #212529 |
Description
The text color of hovered items. | |||
$kendo-hover-border | Color | k-try-shade( $kendo-hover-bg, 1 ) | #d6d9dc |
Description
The border color of hovered items. | |||
$kendo-hover-gradient | Null | null | null |
Description
The gradient background of hovered items. | |||
$kendo-selected-bg | Color | $kendo-color-primary | #0d6efd |
Description
The background of selected items. | |||
$kendo-selected-text | Color | k-contrast-color( $kendo-selected-bg ) | white |
Description
The text color of selected items. | |||
$kendo-selected-border | Color | k-try-shade( $kendo-selected-bg, 1 ) | #0c65e9 |
Description
The border color of selected items. | |||
$kendo-selected-gradient | Null | null | null |
Description
The gradient background of selected items. | |||
$kendo-disabled-text | Color | if( $kendo-is-dark-theme, $gray-600, $gray-500) | #adb5bd |
Description
Text color of disabled items. |