Customizing Common

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-icon-size	Number	16px	16px
Description Icon size.
$kendo-icon-size-xs	Calculation	calc( #{$kendo-icon-size} * .75 )	calc(16px * 0.75)
Description xtra small icon size.
$kendo-icon-size-sm	Calculation	calc( #{$kendo-icon-size} * .875 )	calc(16px * 0.875)
Description Small icon size.
$kendo-icon-size-md	Number	$kendo-icon-size	16px
Description Medium icon size.
$kendo-icon-size-lg	Calculation	calc( #{$kendo-icon-size} * 1.25 )	calc(16px * 1.25)
Description Large icon size.
$kendo-icon-size-xl	Calculation	calc( #{$kendo-icon-size} * 1.5 )	calc(16px * 1.5)
Description Extra large icon size.
$kendo-icon-size-xxl	Calculation	calc( #{$kendo-icon-size} * 2 )	calc(16px * 2)
Description Double extra large icon size.
$kendo-icon-size-xxxl	Calculation	calc( #{$kendo-icon-size} * 3 )	calc(16px * 3)
Description Triple extra large icon size.
$kendo-body-bg	String	$kendo-color-white	var(--kendo-color-app-surface, #ffffff)
Description Background color of the body.
$kendo-body-text	String	#424242	var(--kendo-color-on-app-surface, #3d3d3d)
Description Text color of the body.
$kendo-subtle-text	String	#666666	var(--kendo-color-subtle, #666666)
Description Subtle text color.
$kendo-link-text	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description Text color of the links.
$kendo-link-hover-text	String	$kendo-color-primary-darker	var(--kendo-color-primary-hover, #ea5a51)
Description Text color of the links on hover.
$kendo-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description Horizontal padding.
$kendo-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description Vertical padding.
$kendo-padding-sm-x	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description Small horizontal padding.
$kendo-padding-sm-y	String	k-spacing(0.5)	var(--kendo-spacing-0\.5, 0.125rem)
Description Small vertical padding.
$kendo-padding-md-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description Medium horizontal padding.
$kendo-padding-md-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description Medium vertical padding.
$kendo-padding-lg-x	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description Large horizontal padding.
$kendo-padding-lg-y	String	k-spacing(1.5)	var(--kendo-spacing-1\.5, 0.375rem)
Description Large vertical padding.
$kendo-focus-shadow	List	inset 0 0 0 2px rgba(0, 0, 0, .13)	inset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description Box shadow of focused items.
$kendo-transition	List	color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out	color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out
Description Transition used across all components.
$kendo-base-bg	String	#fafafa	var(--kendo-color-surface, #fafafa)
Description The background of the components' chrome area.
$kendo-base-text	String	$kendo-body-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the components' chrome area.
$kendo-base-border	String	rgba(black, 0.08)	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the components' chrome area.
$kendo-base-gradient	Null	rgba(black, 0), rgba(black, 0.02)	null
Description The gradient background of the components' chrome area.
$kendo-hover-bg	String	k-try-shade($kendo-base-bg, 0.5)	var(--kendo-color-base-hover, #ebebeb)
Description The background of hovered items.
$kendo-hover-text	String	$kendo-base-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of hovered items.
$kendo-hover-border	String	$kendo-base-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of hovered items.
$kendo-hover-gradient	Null	$kendo-base-gradient	null
Description The gradient background of hovered items.
$kendo-selected-bg	String	$kendo-color-primary	var(--kendo-color-primary, #ff6358)
Description The background of selected items.
$kendo-selected-text	String	k-contrast-legacy($kendo-selected-bg)	var(--kendo-color-on-primary, #ffffff)
Description The text color of selected items.
$kendo-selected-border	String	$kendo-base-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of selected items.
$kendo-selected-gradient	Null	$kendo-base-gradient	null
Description The gradient background of selected items.
$kendo-selected-hover-bg	String	k-try-shade($kendo-selected-bg, 0.5)	var(--kendo-color-primary-hover, #ea5a51)
Description The background of selected and hovered items.
$kendo-selected-hover-text	String	$kendo-selected-text	var(--kendo-color-on-primary, #ffffff)
Description The text color of selected and hovered items.
$kendo-selected-hover-border	String	$kendo-base-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border of selected and hovered items.
$kendo-selected-hover-gradient	Null	$kendo-base-gradient	null
Description The gradient of selected and hovered items.
$kendo-display	Map	( 1: ( font-size: $kendo-display1-font-size, font-family: $kendo-display1-font-family, line-height: $kendo-display1-line-height, font-weight: $kendo-display1-font-weight, letter-spacing: $kendo-display1-letter-spacing ), 2: ( font-size: $kendo-display2-font-size, font-family: $kendo-display2-font-family, line-height: $kendo-display2-line-height, font-weight: $kendo-display2-font-weight, letter-spacing: $kendo-display2-letter-spacing ), 3: ( font-size: $kendo-display3-font-size, font-family: $kendo-display3-font-family, line-height: $kendo-display3-line-height, font-weight: $kendo-display3-font-weight, letter-spacing: $kendo-display3-letter-spacing ), 4: ( font-size: $kendo-display4-font-size, font-family: $kendo-display4-font-family, line-height: $kendo-display4-line-height, font-weight: $kendo-display4-font-weight, letter-spacing: $kendo-display4-letter-spacing ) )	1: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 8)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null 2: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 7)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null 3: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 6)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null 4: "font-size":"calc(var(--kendo-font-size, 0.875rem) * 5)","font-family":"var(--kendo-font-family, inherit)","line-height":1.2,"font-weight":"var(--kendo-font-weight-light, normal)","letter-spacing":null
Description The displays Map.
$kendo-disabled-bg	Null	null	null
Description The background color of disabled items.
$kendo-disabled-text	Null	null	null
Description The text color of disabled items.
$kendo-disabled-border	Null	null	null
Description The border color of disabled items.
$kendo-disabled-opacity	Number	null	0.6
Description The opacity of disabled items.
$kendo-disabled-filter	String	null	grayscale(0.1)
Description The filter of disabled items.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components