Customizing Common

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radiusNumber$border-radius0.375rem
Description
Border radius for all components.
$kendo-chip-lg-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the large Chip.
$kendo-base-bgColor$gray-100#f8f9fa
Description
The background of the components' chrome area.
$kendo-base-textColor$kendo-body-text#212529
Description
The text color of the components' chrome area.
$kendo-base-borderColork-try-shade( $kendo-base-bg, 1 )#e4e5e6
Description
The border color of the components' chrome area.
$kendo-base-gradientNullnullnull
Description
The gradient background of the components' chrome area.
$kendo-hover-bgColor$gray-200#e9ecef
Description
The background of hovered items.
$kendo-hover-textColor$kendo-base-text#212529
Description
The text color of hovered items.
$kendo-hover-borderColork-try-shade( $kendo-hover-bg, 1 )#d6d9dc
Description
The border color of hovered items.
$kendo-hover-gradientNullnullnull
Description
The gradient background of hovered items.
$kendo-selected-bgColor$kendo-color-primary#0d6efd
Description
The background of selected items.
$kendo-selected-textColork-contrast-color( $kendo-selected-bg )white
Description
The text color of selected items.
$kendo-selected-borderColork-try-shade( $kendo-selected-bg, 1 )#0c65e9
Description
The border color of selected items.
$kendo-selected-gradientNullnullnull
Description
The gradient background of selected items.
$kendo-disabled-textColorif( $kendo-is-dark-theme, $gray-600, $gray-500)#adb5bd
Description
Text color of disabled items.

In this article

Not finding the help you need?