Customizing Common

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-icon-sizeNumber16px16px
Description
Icon size.
$kendo-icon-size-xsCalculationcalc( #{$kendo-icon-size} * .75 )calc(16px * 0.75)
Description
xtra small icon size.
$kendo-icon-size-smCalculationcalc( #{$kendo-icon-size} * .875 )calc(16px * 0.875)
Description
Small icon size.
$kendo-icon-size-mdNumber$kendo-icon-size16px
Description
Medium icon size.
$kendo-icon-size-lgCalculationcalc( #{$kendo-icon-size} * 1.25 )calc(16px * 1.25)
Description
Large icon size.
$kendo-icon-size-xlCalculationcalc( #{$kendo-icon-size} * 1.5 )calc(16px * 1.5)
Description
Extra large icon size.
$kendo-icon-size-xxlCalculationcalc( #{$kendo-icon-size} * 2 )calc(16px * 2)
Description
Double extra large icon size.
$kendo-icon-size-xxxlCalculationcalc( #{$kendo-icon-size} * 3 )calc(16px * 3)
Description
Triple extra large icon size.
$kendo-body-bgString$kendo-color-whitevar(--kendo-color-app-surface, #ffffff)
Description
Background color of the body.
$kendo-body-textString#424242var(--kendo-color-on-app-surface, #3d3d3d)
Description
Text color of the body.
$kendo-subtle-textString#666666var(--kendo-color-subtle, #666666)
Description
Subtle text color.
$kendo-link-textString$kendo-color-primaryvar(--kendo-color-primary, #ff6358)
Description
Text color of the links.
$kendo-link-hover-textString$kendo-color-primary-darkervar(--kendo-color-primary-hover, #ea5a51)
Description
Text color of the links on hover.
$kendo-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Horizontal padding.
$kendo-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
Vertical padding.
$kendo-padding-sm-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
Small horizontal padding.
$kendo-padding-sm-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
Small vertical padding.
$kendo-padding-md-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Medium horizontal padding.
$kendo-padding-md-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
Medium vertical padding.
$kendo-padding-lg-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
Large horizontal padding.
$kendo-padding-lg-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
Large vertical padding.
$kendo-focus-shadowListinset 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-transitionListcolor .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-outcolor 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-disabled-filterStringgrayscale(.1)grayscale(0.1)
Description
Filter used for disabled items.
$kendo-disabled-opacityNumber.60.6
Description
Opacity used for disabled items.
$kendo-base-bgString#fafafavar(--kendo-color-surface, #fafafa)
Description
The background of the components' chrome area.
$kendo-base-textString$kendo-body-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the components' chrome area.
$kendo-base-borderStringrgba(black, 0.08)var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the components' chrome area.
$kendo-base-gradientNullrgba(black, 0), rgba(black, 0.02)null
Description
The gradient background of the components' chrome area.
$kendo-hover-bgStringk-try-shade($kendo-base-bg, 0.5)var(--kendo-color-base-hover, #ebebeb)
Description
The background of hovered items.
$kendo-hover-textString$kendo-base-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of hovered items.
$kendo-hover-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of hovered items.
$kendo-hover-gradientNull$kendo-base-gradientnull
Description
The gradient background of hovered items.
$kendo-selected-bgString$kendo-color-primaryvar(--kendo-color-primary, #ff6358)
Description
The background of selected items.
$kendo-selected-textStringk-contrast-legacy($kendo-selected-bg)var(--kendo-color-on-primary, #ffffff)
Description
The text color of selected items.
$kendo-selected-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of selected items.
$kendo-selected-gradientNull$kendo-base-gradientnull
Description
The gradient background of selected items.
$kendo-selected-hover-bgStringk-try-shade($kendo-selected-bg, 0.5)var(--kendo-color-primary-hover, #ea5a51)
Description
The background of selected and hovered items.
$kendo-selected-hover-textString$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of selected and hovered items.
$kendo-selected-hover-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border of selected and hovered items.
$kendo-selected-hover-gradientNull$kendo-base-gradientnull
Description
The gradient of selected and hovered items.
$kendo-disabled-textString#8f8f8fvar(--kendo-color-on-app-surface, #3d3d3d)
Description
Text color of disabled items.
$kendo-displayMap( 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.

In this article

Not finding the help you need?