Customizing Common

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-interactive-bg	Color	`#f6f6f6`	`#f6f6f6`
Description The background of the components' chrome area.
$kendo-interactive-text	Color	`#656565`	`#656565`
Description The text color of the components' chrome area.
$kendo-interactive-border	Color	`rgba( black, .08 )`	`rgba(0, 0, 0, 0.08)`
Description The border color of the components' chrome area.
$kendo-interactive-gradient	List	`rgba( black, 0 ), rgba( black, .02 )`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of the components' chrome area.
$kendo-hover-bg	Color	`k-color-shade( $kendo-component-bg, .5 )`	`whitesmoke`
Description The background of hovered items.
$kendo-hover-text	Color	`$kendo-component-text`	`#494949`
Description The text color of hover items.
$kendo-hover-border	Color	`rgba( black, .15 )`	`rgba(0, 0, 0, 0.15)`
Description The border color of hover items.
$kendo-hover-gradient	List	`rgba( black, 0 ), rgba( black, .02 )`	`rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)`
Description The gradient background of hover items.
$kendo-selected-bg	Color	`$kendo-color-primary`	`#622331`
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	`rgba( black, .1 )`	`rgba(0, 0, 0, 0.1)`
Description The border color of selected items.
$kendo-selected-gradient	String	`none`	`none`
Description The gradient background of selected items.