New to Kendo UI for Angular? Start a free 30-day trial

Customization

Variables

The following table lists the available variables for customizing the Material theme.

Common

NameTypeDefault valueComputed value
$kendo-calendar-weekend-textNullnullnull
Description
The text color of the weekend cells in the Calendar.
$kendo-calendar-navigation-hover-textString$kendo-link-hover-textvar(--kendo-color-secondary-hover, #d31857)
Description
The background color of the hovered items in the Calendar navigation.
$kendo-base-bgStringk-map-get( $theme, base-bg )var(--kendo-color-app-surface, #ffffff)
Description
The background of the components' chrome area.
$kendo-base-textStringk-map-get( $theme, component-text )var(--kendo-color-on-app-surface, #212121)
Description
The text color of the components' chrome area.
$kendo-base-borderStringrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border of the components' chrome area.
$kendo-base-gradientNullnullnull
Description
The gradient background of the components' chrome area.
$kendo-hover-bgStringk-map-get( $theme, hover-bg )var(--kendo-color-base-hover, #ebebeb)
Description
The background of hovered items.
$kendo-hover-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of hovered items.
$kendo-hover-borderStringrgba( $kendo-base-border, .15 )var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of hovered items.
$kendo-hover-gradientNullnullnull
Description
The gradient background of hovered items.
$kendo-selected-bgString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The background of selected items.
$kendo-selected-textString$kendo-color-secondary-contrastvar(--kendo-color-on-secondary, #ffffff)
Description
The text color of selected items.
$kendo-selected-borderStringrgba( $kendo-base-border, .1 )var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of selected items.
$kendo-selected-gradientNullnullnull
Description
The gradient background of selected items.
$kendo-disabled-textStringk-map-get( $theme, disabled-text )var(--kendo-color-on-app-surface, #212121)
Description
Text color of disabled items.
$kendo-list-sizesMap( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )(sm: (font-size: var(--kendo-font-size, inherit), line-height: 1.4285714286, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-4, 1rem), item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-4, 1rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: 1.4285714286, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-4, 1rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-4, 1rem), group-item-padding-y: var(--kendo-spacing-2, 0.5rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: 1.5, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-4, 1rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-4, 1rem), group-item-padding-y: var(--kendo-spacing-2\.5, 0.625rem), group-item-font-size: null, group-item-line-height: null))
Description
The map with the sizes of the List.
@group list
$kendo-paragraph-line-heightStringvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)
Description
The line height of the paragraph.
@group typography

Accessibility

NameTypeDefault valueComputed value
$wcag-min-contrast-ratioNumber74.5
Description
The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
$wcag-darkColorblackblack
Description
Default dark color for WCAG 2.0.
$wcag-lightColorwhitewhite
Description
Default light color for WCAG 2.0.

Appbar

NameTypeDefault valueComputed value
$kendo-appbar-margin-xNullnullnull
Description
The horizontal margin of the AppBar.
$kendo-appbar-margin-yNullnullnull
Description
The vertical margin of the AppBar.
$kendo-appbar-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the AppBar.
$kendo-appbar-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the AppBar.
$kendo-appbar-border-widthNumber0px0px
Description
The width of the border around the AppBar.
$kendo-appbar-zindexNumber10001000
Description
The z-index of the AppBar.
$kendo-appbar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the AppBar.
$kendo-appbar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the AppBar.
$kendo-appbar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the AppBar.
$kendo-appbar-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the AppBar sections.
$kendo-appbar-light-bgString$kendo-color-lightvar(--kendo-color-light, #f5f5f5)
Description
The background color of the AppBar based on light theme color.
$kendo-appbar-light-textStringif($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light ))var(--kendo-color-on-light, #000000)
Description
TThe text color of the AppBar based on light theme color.
$kendo-appbar-dark-bgString$kendo-color-darkvar(--kendo-color-dark, #424242)
Description
The background color of the AppBar based on dark theme color.
$kendo-appbar-dark-textStringif($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark ))var(--kendo-color-on-dark, #ffffff)
Description
The text color of the AppBar based on dark theme color.
$kendo-appbar-box-shadowString$box-shadow-depth-4var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadowString$kendo-appbar-box-shadowvar(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the AppBar with bottom position.

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber1px1px
Description
The border width of the Avatar.
$kendo-avatar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Avatar.
$kendo-avatar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Avatar.
$kendo-avatar-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Avatar.
$kendo-avatar-sizesMap( sm: k-spacing(4), md: k-spacing(8), lg: k-spacing(16) )(sm: var(--kendo-spacing-4, 1rem), md: var(--kendo-spacing-8, 2rem), lg: var(--kendo-spacing-16, 4rem))
Description
The sizes map of the Avatar.
$kendo-avatar-theme-colorsMap$kendo-theme-colors("primary": var(--kendo-color-primary, #3f51b5), "secondary": var(--kendo-color-secondary, #e51a5f), "tertiary": var(--kendo-color-tertiary, #00695c), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #424242), "light": var(--kendo-color-light, #f5f5f5), "inverse": var(--kendo-color-dark, #424242))
Description
The theme colors map of the Avatar.

Badge

NameTypeDefault valueComputed value
$kendo-badge-border-widthNumber1px1px
Description
The width of the border around the Badge.
$kendo-badge-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Badge.
$kendo-badge-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the Badge.
$kendo-badge-sm-padding-xStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The horizontal padding of the small Badge.
$kendo-badge-md-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the medium Badge.
$kendo-badge-lg-padding-xStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The horizontal padding of the large Badge.
$kendo-badge-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Badge.
$kendo-badge-sm-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the small Badge.
$kendo-badge-md-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the medium Badge.
$kendo-badge-lg-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the large Badge.
$kendo-badge-font-sizeStringvar( --kendo-font-size-xs, inherit )var(--kendo-font-size-xs, inherit)
Description
The font sizes of the Badge.
$kendo-badge-sm-font-sizeStringvar( --kendo-font-size-xs, inherit )var(--kendo-font-size-xs, inherit)
Description
The font size of the small Badge.
$kendo-badge-md-font-sizeStringvar( --kendo-font-size-xs, inherit )var(--kendo-font-size-xs, inherit)
Description
The font size of the medium Badge.
$kendo-badge-lg-font-sizeStringvar( --kendo-font-size-xs, inherit )var(--kendo-font-size-xs, inherit)
Description
The font size of the large Badge.
$kendo-badge-line-heightNumber11
Description
The line heights used along with the $kendo-font-size variable.
$kendo-badge-sm-line-heightNumber$kendo-badge-line-height1
Description
The line height used along with the $kendo-font-size variable of the small Badge.
$kendo-badge-md-line-heightNumber$kendo-badge-line-height1
Description
The line height used along with the $kendo-font-size variable of the medium Badge.
$kendo-badge-lg-line-heightNumber$kendo-badge-line-height1
Description
The line height used along with the $kendo-font-size variable of the large Badge.
$kendo-badge-min-widthCalculationcalc( #{$kendo-badge-line-height * 1em} + calc( #{$kendo-badge-padding-y} * 2 ) + #{$kendo-badge-border-width * 2})calc(1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)
Description
The calculated minimum width of the circular Badge.
$kendo-badge-sm-min-widthCalculationcalc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} )calc(1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px)
Description
The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-widthCalculationcalc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} )calc(1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)
Description
The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-widthCalculationcalc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} )calc(1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px)
Description
The calculated minimum width of the large circular Badge.
$kendo-badge-sizesMap( sm: ( padding-x: $kendo-badge-sm-padding-x, padding-y: $kendo-badge-sm-padding-y, font-size: $kendo-badge-sm-font-size, line-height: $kendo-badge-sm-line-height, min-width: $kendo-badge-sm-min-width ), md: ( padding-x: $kendo-badge-md-padding-x, padding-y: $kendo-badge-md-padding-y, font-size: $kendo-badge-md-font-size, line-height: $kendo-badge-md-line-height, min-width: $kendo-badge-md-min-width ), lg: ( padding-x: $kendo-badge-lg-padding-x, padding-y: $kendo-badge-lg-padding-y, font-size: $kendo-badge-lg-font-size, line-height: $kendo-badge-lg-line-height, min-width: $kendo-badge-lg-min-width ) )(sm: (padding-x: var(--kendo-spacing-0\.5, 0.125rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size-xs, inherit), line-height: 1, min-width: calc(1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px)), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size-xs, inherit), line-height: 1, min-width: calc(1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)), lg: (padding-x: var(--kendo-spacing-1\.5, 0.375rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size-xs, inherit), line-height: 1, min-width: calc(1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px)))
Description
The sizes map for the Badge.

Bottom-navigation

NameTypeDefault valueComputed value
$kendo-bottom-nav-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-yString$kendo-bottom-nav-padding-xvar(--kendo-spacing-0, 0px)
Description
The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gapString$kendo-bottom-nav-padding-xvar(--kendo-spacing-0, 0px)
Description
The spacing between the BottomNavigation items.
$kendo-bottom-nav-border-widthList1px 0px 0px 0px1px 0px 0px 0px
Description
The width of the border around the BottomNavigation.
$kendo-bottom-nav-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the BottomNavigation.
$kendo-bottom-nav-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the BottomNavigation.
$kendo-bottom-nav-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the BottomNavigation.
$kendo-bottom-nav-letter-spacingNumber.2px0.2px
Description
The letter spacing of the BottomNavigation.
$kendo-bottom-nav-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the BottomNavigation item.
$kendo-bottom-nav-item-min-widthNumber72px72px
Description
The minimum width of the BottomNavigation item.
$kendo-bottom-nav-item-max-widthNullnullnull
Description
The maximum width of the BottomNavigation item.
$kendo-bottom-nav-item-min-heightCalculationcalc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-padding-sm-x} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) )calc(40px + var(--kendo-spacing-2, 0.5rem) * 2 - var(--kendo-spacing-0, 0px) * 2)
Description
The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radiusNullnullnull
Description
The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gapList0 k-spacing(1)0 var(--kendo-spacing-1, 0.25rem)
Description
The spacing of the BottomNavigation item.
$kendo-bottom-nav-shadowString$box-shadow-depth-4var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the BottomNavigation.
$kendo-bottom-nav-flat-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the flat BottomNavigation.
$kendo-bottom-nav-flat-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the flat BottomNavigation.
$kendo-bottom-nav-flat-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the flat BottomNavigation.

Breadcrumb

NameTypeDefault valueComputed value
$kendo-breadcrumb-border-widthNumber0px0px
Description
The width of the border around the Breadcrumb.
$kendo-breadcrumb-margin-xNullnullnull
Description
The horizontal margin of the Breadcrumb.
$kendo-breadcrumb-margin-yNullnullnull
Description
The vertical margin of the Breadcrumb.
$kendo-breadcrumb-padding-xNullnullnull
Description
The horizontal padding of the Breadcrumb.
$kendo-breadcrumb-padding-yNullnullnull
Description
The vertical padding of the Breadcrumb.
$kendo-breadcrumb-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Breadcrumb.
$kendo-breadcrumb-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-sizeString$kendo-breadcrumb-font-sizevar(--kendo-font-size, inherit)
Description
The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the large Breadcrumb.
$kendo-breadcrumb-line-heightStringvar( --kendo-line-height, normal )!defaultvar(--kendo-line-height, normal)
Description
The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-heightString$kendo-breadcrumb-line-heightvar(--kendo-line-height, normal)
Description
The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line-height of the height Breadcrumb.
$kendo-breadcrumb-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The base background of the Breadcrumb.
$kendo-breadcrumb-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The base text color of the Breadcrumb.
$kendo-breadcrumb-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The base border color of the Breadcrumb.
$kendo-breadcrumb-focus-shadowList0 0 2px 1px rgba( black, .06 )0 0 2px 1px rgba(0, 0, 0, 0.06)
Description
The box shadow of the focused Breadcrumb.
$kendo-breadcrumb-link-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-xString$kendo-breadcrumb-link-padding-xvar(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-yString$kendo-breadcrumb-link-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-yStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-yString$kendo-breadcrumb-icon-link-padding-yvar(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-xString$kendo-breadcrumb-icon-link-padding-yvar(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-xString$kendo-breadcrumb-sm-icon-link-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-xString$kendo-breadcrumb-icon-link-padding-xvar(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-xString$kendo-breadcrumb-lg-icon-link-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-link-icon-spacingString$kendo-icon-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-initial-textStringinheritinherit
Description
The text color of the Breadcrumb link.
$kendo-breadcrumb-link-bgNullnullnull
Description
The background color of the Breadcrumb link.
$kendo-breadcrumb-link-textString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The text color of the Breadcrumb link.
$kendo-breadcrumb-link-borderNullnullnull
Description
The border color of the Breadcrumb link.
$kendo-breadcrumb-link-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-textNullnullnull
Description
The text color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-borderNullnullnull
Description
The border color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg ))var(--kendo-color-base-active, #d6d6d6)
Description
The background color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-textNullnullnull
Description
The text color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-borderNullnullnull
Description
The border color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-shadowNullnullnull
Description
The box shadow of the focused Breadcrumb link.
$kendo-breadcrumb-root-link-bgNullnullnull
Description
The background color of the Breadcrumb root link.
$kendo-breadcrumb-root-link-textNullnullnull
Description
The text color of the Breadcrumb root link.
$kendo-breadcrumb-root-link-borderNullnullnull
Description
The border color of the Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-textNullnullnull
Description
The text color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-borderNullnullnull
Description
The border color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg ))var(--kendo-color-base-active, #d6d6d6)
Description
The background color of the focused Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-textNullnullnull
Description
The text color of the focused Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-borderNullnullnull
Description
The border color of the focused Breadcrumb root link.
$kendo-breadcrumb-root-link-focus-shadowNullnullnull
Description
The box shadow of the focused Breadcrumb root link.
$kendo-breadcrumb-current-item-bgNullnullnull
Description
The background color of the current Breadcrumb root link.
$kendo-breadcrumb-current-item-textNullnullnull
Description
The text color of the current Breadcrumb root link.
$kendo-breadcrumb-current-item-borderNullnullnull
Description
The border color of the current Breadcrumb root link.
$kendo-breadcrumb-sizesMap( sm: ( link-padding-x: $kendo-breadcrumb-sm-link-padding-x, link-padding-y: $kendo-breadcrumb-sm-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, font-size: $kendo-breadcrumb-sm-font-size, line-height: $kendo-breadcrumb-sm-line-height ), md: ( link-padding-x: $kendo-breadcrumb-md-link-padding-x, link-padding-y: $kendo-breadcrumb-md-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, font-size: $kendo-breadcrumb-md-font-size, line-height: $kendo-breadcrumb-md-line-height ), lg: ( link-padding-x: $kendo-breadcrumb-lg-link-padding-x, link-padding-y: $kendo-breadcrumb-lg-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, font-size: $kendo-breadcrumb-lg-font-size, line-height: $kendo-breadcrumb-lg-line-height ) )(sm: (link-padding-x: var(--kendo-spacing-2\.5, 0.625rem), link-padding-y: var(--kendo-spacing-0\.5, 0.125rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (link-padding-x: var(--kendo-spacing-2\.5, 0.625rem), link-padding-y: var(--kendo-spacing-1, 0.25rem), icon-link-padding-x: var(--kendo-spacing-2\.5, 0.625rem), icon-link-padding-y: var(--kendo-spacing-2\.5, 0.625rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (link-padding-x: var(--kendo-spacing-2\.5, 0.625rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)))
Description
The sizes map for the Breadcrumb.

Button

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber1px1px
Description
The width of the border around the Button.
$kendo-button-border-radiusNullnullnull
Description
The border radius of the Button.
$kendo-button-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Button.
$kendo-button-sm-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the small Button.
$kendo-button-md-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the medium Button.
$kendo-button-lg-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the large Button.
$kendo-button-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Button.
$kendo-button-sm-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the small Button.
$kendo-button-md-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the medium Button.
$kendo-button-lg-padding-yStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the large Button.
$kendo-button-font-familyStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font family of the Button.
$kendo-button-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Button.
$kendo-button-sm-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the small Button.
$kendo-button-md-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the medium Button.
$kendo-button-lg-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the large Button.
$kendo-button-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
Line heights used along with the $kendo-font-size variable.
$kendo-button-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height used along with the $kendo-font-size variable of the medium Button.
$kendo-button-lg-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height used along with the $kendo-font-size variable of the large Button.
$kendo-button-calc-sizeCalculationcalc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} )calc(1.4285714286em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px)
Description
The calculated height of the Button.
$kendo-button-inner-calc-sizeCalculationcalc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) )calc(1.4285714286em + var(--kendo-spacing-2, 0.5rem) * 2)
Description
The calculated inner height of the Button excluding the border width.
$kendo-button-sizesMap( sm: ( padding-x: $kendo-button-sm-padding-x, padding-y: $kendo-button-sm-padding-y, font-size: $kendo-button-sm-font-size, line-height: $kendo-button-sm-line-height ), md: ( padding-x: $kendo-button-md-padding-x, padding-y: $kendo-button-md-padding-y, font-size: $kendo-button-md-font-size, line-height: $kendo-button-md-line-height ), lg: ( padding-x: $kendo-button-lg-padding-x, padding-y: $kendo-button-lg-padding-y, font-size: $kendo-button-lg-font-size, line-height: $kendo-button-lg-line-height ) )(sm: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: 1.4285714286), md: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size, inherit), line-height: 1.4285714286), lg: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), font-size: var(--kendo-font-size, inherit), line-height: 1.4285714286))
Description
The sizes map for the Button.
$kendo-button-theme-colorsMapk-map-merge( $kendo-theme-colors, ( "base": $kendo-base-bg ) )("primary": var(--kendo-color-primary, #3f51b5), "secondary": var(--kendo-color-secondary, #e51a5f), "tertiary": var(--kendo-color-tertiary, #00695c), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #424242), "light": var(--kendo-color-light, #f5f5f5), "inverse": var(--kendo-color-dark, #424242), "base": var(--kendo-color-app-surface, #ffffff))
Description
The theme colors map for the Button.
$kendo-button-bgStringif($kendo-enable-color-system, k-color( base ), $kendo-base-bg)var(--kendo-color-base, #ffffff)
Description
The base background of the Button.
$kendo-button-textStringif($kendo-enable-color-system, k-color( on-base ), $kendo-base-text)var(--kendo-color-on-base, #212121)
Description
The base text color of the Button.
$kendo-button-borderString$kendo-button-bgvar(--kendo-color-base, #ffffff)
Description
The base border color of the Button.
$kendo-button-gradientNullnullnull
Description
The base background gradient of the Button.
$kendo-button-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the Button.
$kendo-button-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), null)var(--kendo-color-base-hover, #ebebeb)
Description
The base background of the hovered Button.
$kendo-button-hover-textNullnullnull
Description
The base text color of the hovered Button.
$kendo-button-hover-borderStringif($kendo-enable-color-system, k-color( base-hover ), null)var(--kendo-color-base-hover, #ebebeb)
Description
The base border color of the hovered Button.
$kendo-button-hover-gradientNullnullnull
Description
The base background gradient of the hovered Button.
$kendo-button-hover-shadowNullnullnull
Description
The base shadow of the hovered Button.
$kendo-button-active-bgStringif($kendo-enable-color-system, k-color( base-active ), null)var(--kendo-color-base-active, #d6d6d6)
Description
The base background color of the active Button.
$kendo-button-active-textNullnullnull
Description
The base text color of the active Button.
$kendo-button-active-borderStringif($kendo-enable-color-system, k-color( base-active ), null)var(--kendo-color-base-active, #d6d6d6)
Description
The base border color of the active Button.
$kendo-button-active-gradientNullnullnull
Description
The base background gradient of the active Button.
$kendo-button-active-shadowString$box-shadow-depth-6var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the active Button.
$kendo-button-selected-bgString$kendo-button-active-bgvar(--kendo-color-base-active, #d6d6d6)
Description
The base background color of the selected Button.
$kendo-button-selected-textNull$kendo-button-active-textnull
Description
The base text color of the selected Button.
$kendo-button-selected-borderString$kendo-button-active-bgvar(--kendo-color-base-active, #d6d6d6)
Description
The base border color of the selected Button.
$kendo-button-selected-gradientNullnullnull
Description
The base background gradient of the selected Button.
$kendo-button-selected-shadowNullnullnull
Description
The base shadow of the selected Button.
$kendo-button-focus-bgStringif($kendo-enable-color-system, k-color( base-hover ), null)var(--kendo-color-base-hover, #ebebeb)
Description
The base background of the focused Button.
$kendo-button-focus-textNullnullnull
Description
The base text color of the focused Button.
$kendo-button-focus-borderStringif($kendo-enable-color-system, k-color( base-hover ), null)var(--kendo-color-base-hover, #ebebeb)
Description
The base border color of the focused Button.
$kendo-button-focus-gradientNullnullnull
Description
The base background gradient of focused Button.
$kendo-button-focus-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the focused Button.
$kendo-button-disabled-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-shade( $kendo-body-bg, 12% ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 9%, transparent)
Description
The base background color of the disabled Button.
$kendo-button-disabled-textStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), $kendo-disabled-text)color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 32%, transparent)
Description
The base text color of the disabled Button.
$kendo-button-disabled-borderColorif($kendo-enable-color-system, transparent, $kendo-button-disabled-bg)transparent
Description
The base border color of the disabled Button.
$kendo-button-disabled-gradientNullnullnull
Description
The base background gradient of the disabled Button.
$kendo-button-disabled-shadowStringnonenone
Description
The base shadow of the disabled Button.
$kendo-flat-button-hover-opacityNumber.080.08
Description
The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-opacityNumber.120.12
Description
The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
$kendo-flat-button-active-opacityNumber.160.16
Description
The overlay opacity of the active flat Button. Used to create a background for the flat Button.
$kendo-flat-button-selected-opacityNumber.220.22
Description
The overlay opacity of the selected flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-ring-opacityNullnullnull
Description
The opacity of the flat Button focus ring. Used to create a border for the flat Button.
$kendo-button-transitionListbox-shadow 280ms cubic-bezier( .4, 0, .2, 1 )box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)
Description
The box-shadow transition of the Button.

Calendar

NameTypeDefault valueComputed value
$kendo-calendar-border-widthNumber1px1px
Description
The width of the border around the Calendar.
$kendo-calendar-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Calendar.
$kendo-calendar-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Calendar.
$kendo-calendar-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the Calendar.
$kendo-calendar-cell-sizeNumber36px36px
Description
The size of the cells in the Calendar.
$kendo-calendar-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Calendar.
$kendo-calendar-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Calendar.
$kendo-calendar-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Calendar.
$kendo-calendar-header-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the header in the Calendar.
$kendo-calendar-header-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the header in the Calendar.
$kendo-calendar-header-border-widthNumber0px0px
Description
The height of the header in the Calendar.
$kendo-calendar-header-bgNullnullnull
Description
The background color of the header in the Calendar.
$kendo-calendar-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the header in the Calendar.
$kendo-calendar-header-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the header in the Calendar.
$kendo-calendar-header-gradientNullnullnull
Description
The gradient of the header in the Calendar.
$kendo-calendar-header-shadowNullnullnull
Description
The shadow of the header in the Calendar.
$kendo-calendar-nav-gapNullnullnull
Description
The gap between the items in the navigation of the Calendar.
$kendo-calendar-footer-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the footer in the Calendar.
$kendo-calendar-footer-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the footer in the Calendar.
$kendo-calendar-cell-padding-xNumber.25em0.25em
Description
The horizontal padding of the cells in the Calendar.
$kendo-calendar-cell-padding-yNumber$kendo-calendar-cell-padding-x0.25em
Description
The vertical padding of the cells in the Calendar.
$kendo-calendar-cell-line-heightNumber$kendo-calendar-line-height1.4285714286
Description
The line height of the cells in the Calendar.
$kendo-calendar-cell-border-radiusNumber100px100px
Description
The border radius of the cells in the Calendar.
$kendo-calendar-header-cell-padding-xNullnullnull
Description
The horizontal padding of the header cells in the Calendar.
$kendo-calendar-header-cell-padding-yNullnullnull
Description
The vertical padding of the header cells in the Calendar.
$kendo-calendar-header-cell-widthNumber$kendo-calendar-cell-size36px
Description
The width of the header cells in the Calendar.
$kendo-calendar-header-cell-heightNumber$kendo-calendar-cell-size36px
Description
The height of the header cells in the Calendar.
$kendo-calendar-header-cell-font-sizeStringvar( --kendo-font-size-sm, inherit )!defaultvar(--kendo-font-size-sm, inherit)
Description
The font size of the header cells in the Calendar.
$kendo-calendar-header-cell-line-heightNumber22
Description
The line height of the header cells in the Calendar.
$kendo-calendar-header-cell-bgNullnullnull
Description
The background color of the header cells in the Calendar.
$kendo-calendar-header-cell-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the header cells in the Calendar.
$kendo-calendar-header-cell-opacityNullnullnull
Description
The opacity of the header cells in the Calendar.
$kendo-calendar-caption-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the caption in the Calendar.
$kendo-calendar-caption-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the caption in the Calendar.
$kendo-calendar-caption-heightNumber$kendo-calendar-cell-size36px
Description
The height of the caption in the Calendar.
$kendo-calendar-caption-font-sizeNullnullnull
Description
The font size of the caption in the Calendar.
$kendo-calendar-caption-line-heightNullnullnull
Description
The line height of the caption in the Calendar.
$kendo-calendar-caption-font-weightStringboldbold
Description
The font weight of the caption in the Calendar.
$kendo-calendar-week-number-font-sizeNumber$kendo-font-size-sm0.75rem
Description
The font size of the week number cells in the Calendar.
$kendo-calendar-view-widthNumber($kendo-calendar-cell-size * 8)288px
Description
The width of the Calendar view.
$kendo-calendar-view-heightNumber($kendo-calendar-cell-size * 7)252px
Description
The height of the Calendar view.
$kendo-calendar-view-gapStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The gap between the items in the Calendar view.
$kendo-calendar-weekend-bgNullnullnull
Description
The background color of the weekend cells in the Calendar.
$kendo-calendar-today-styleStringcolorcolor
Description
The style of the current day in the Calendar.
$kendo-calendar-today-colorString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The color of the current day in the Calendar.
$kendo-calendar-week-number-bgNullnullnull
Description
The background color of the week number cells in the Calendar.
$kendo-calendar-week-number-textString$kendo-calendar-header-cell-textvar(--kendo-color-subtle, #757575)
Description
The text color of the week number cells in the Calendar.
$kendo-calendar-other-month-bgNullnullnull
Description
The background color of the preceding/subsequent month cells in the Calendar.
$kendo-calendar-other-month-textString$kendo-calendar-header-cell-textvar(--kendo-color-subtle, #757575)
Description
The text color of the preceding/subsequent month cells in the Calendar.
$kendo-calendar-cell-bgNullnullnull
Description
The background color of the cells in the Calendar.
$kendo-calendar-cell-textNullnullnull
Description
The text color of the cells in the Calendar.
$kendo-calendar-cell-borderNullnullnull
Description
The border color of the cells in the Calendar.
$kendo-calendar-cell-gradientNullnullnull
Description
The gradient of the cells in the Calendar.
$kendo-calendar-cell-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered cells in the Calendar.
$kendo-calendar-cell-hover-textString$kendo-hover-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the hovered cells in the Calendar.
$kendo-calendar-cell-hover-borderString$kendo-hover-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the hovered cells in the Calendar.
$kendo-calendar-cell-hover-gradientNullnullnull
Description
The gradient of the hovered cells in the Calendar.
$kendo-calendar-cell-selected-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the selected cells in the Calendar.
$kendo-calendar-cell-selected-textStringif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-calendar-cell-selected-bg ))var(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected cells in the Calendar.
$kendo-calendar-cell-selected-borderString$kendo-calendar-cell-selected-bgvar(--kendo-color-primary, #3f51b5)
Description
The border color of the selected cells in the Calendar.
$kendo-calendar-cell-selected-gradientNullnullnull
Description
The gradient of the selected cells in the Calendar.
$kendo-calendar-cell-selected-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-calendar-cell-selected-bg, .5 ))var(--kendo-color-primary-hover, #3a4ba7)
Description
The background color of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-selected-hover-textString$kendo-calendar-cell-selected-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-selected-hover-borderNullnullnull
Description
The border color of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-selected-hover-gradientNullnullnull
Description
The gradient of the selected and hovered cells in the Calendar.
$kendo-calendar-cell-focus-shadowNull$kendo-list-item-focus-shadownull
Description
The shadow of the focused cells in the Calendar.
$kendo-calendar-cell-selected-focus-shadowNull$kendo-calendar-cell-focus-shadownull
Description
The shadow of the selected and focused cells in the Calendar.
$kendo-calendar-navigation-widthNumber5em5em
Description
The width of the Calendar navigation.
$kendo-calendar-navigation-item-heightNumber2em2em
Description
The height of the items in the Calendar navigation.
$kendo-calendar-navigation-bgStringif($kendo-enable-color-system, k-color( surface ), k-true-mix( $kendo-calendar-text, $kendo-calendar-bg, 3))var(--kendo-color-surface, #f5f5f5)
Description
The background color of the Calendar navigation.
$kendo-calendar-navigation-textString$kendo-calendar-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Calendar navigation.
$kendo-calendar-navigation-borderString$kendo-calendar-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Calendar navigation.
$kendo-infinite-calendar-header-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the header in the Infinite Calendar.
$kendo-infinite-calendar-header-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the header in the Infinite Calendar.
$kendo-infinite-calendar-view-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Calendar view in the Infinite Calendar.
$kendo-infinite-calendar-view-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the Calendar view in the Infinite Calendar.
$kendo-infinite-calendar-view-heightNumber( $kendo-calendar-cell-size * 9 )324px
Description
The height of the Calendar view in the Infinite Calendar.
$kendo-calendar-range-cell-border-radiusStringk-border-radius(full)var(--kendo-border-radius-full, 9999px)
Description
The border radius of the range cells in the Multiview Calendar.
$kendo-calendar-sm-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the small Calendar.
$kendo-calendar-sm-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the small Calendar.
$kendo-calendar-sm-cell-sizeNumber32px32px
Description
The size of the cells in the small Calendar.
$kendo-calendar-sm-cell-padding-xStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The horizontal padding of the cells in the small Calendar.
$kendo-calendar-sm-cell-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the cells in the small Calendar.
$kendo-calendar-md-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the medium Calendar.
$kendo-calendar-md-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the medium Calendar.
$kendo-calendar-md-cell-sizeNumber36px36px
Description
The size of the cells in the medium Calendar.
$kendo-calendar-md-cell-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the cells in the medium Calendar.
$kendo-calendar-md-cell-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the cells in the medium Calendar.
$kendo-calendar-lg-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the large Calendar.
$kendo-calendar-lg-line-heightStringvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)
Description
The line height of the large Calendar.
$kendo-calendar-lg-cell-sizeNumber40px40px
Description
The size of the cells in the large Calendar.
$kendo-calendar-lg-cell-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the cells in the large Calendar.
$kendo-calendar-lg-cell-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the cells in the large Calendar.
$kendo-calendar-sizesMap( sm: ( font-size: $kendo-calendar-sm-font-size, line-height: $kendo-calendar-sm-line-height, cell-size: $kendo-calendar-sm-cell-size, cell-padding-x: $kendo-calendar-sm-cell-padding-y, cell-padding-y: $kendo-calendar-sm-cell-padding-x ), md: ( font-size: $kendo-calendar-md-font-size, line-height: $kendo-calendar-md-line-height, cell-size: $kendo-calendar-md-cell-size, cell-padding-x: $kendo-calendar-md-cell-padding-y, cell-padding-y: $kendo-calendar-md-cell-padding-x ), lg: ( font-size: $kendo-calendar-lg-font-size, line-height: $kendo-calendar-lg-line-height, cell-size: $kendo-calendar-lg-cell-size, cell-padding-x: $kendo-calendar-lg-cell-padding-y, cell-padding-y: $kendo-calendar-lg-cell-padding-x ) )(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 32px, cell-padding-x: var(--kendo-spacing-0\.5, 0.125rem), cell-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 36px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), cell-size: 40px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)))
Description
The sizes Map of the Calendar.

Captcha

NameTypeDefault valueComputed value
$kendo-captcha-spacerStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacer of the Captcha.
$kendo-captcha-widthNumber335px335px
Description
The width of the Captcha.
$kendo-captcha-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Captcha.
$kendo-captcha-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Captcha.
$kendo-captcha-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Captcha.
$kendo-captcha-gapString$kendo-captcha-spacervar(--kendo-spacing-2, 0.5rem)
Description
The gap of the Captcha.
$kendo-captcha-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Captcha.
$kendo-captcha-textString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The text color of the Captcha.
$kendo-captcha-borderString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the Captcha.
$kendo-captcha-image-wrap-gapString$kendo-captcha-spacervar(--kendo-spacing-2, 0.5rem)
Description
The gap of the Captcha image wrapper.
$kendo-captcha-image-controls-gapString$kendo-captcha-spacervar(--kendo-spacing-2, 0.5rem)
Description
The gap of the Captcha image controls.
$kendo-captcha-validation-message-margin-topCalculationcalc( #{$kendo-captcha-spacer} / 2 )calc(var(--kendo-spacing-2, 0.5rem) / 2)
Description
The top margin of the Captcha validation message.
$kendo-captcha-validation-message-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the Captcha validation message.
$kendo-captcha-validation-message-font-styleStringitalicitalic
Description
The font style of the Captcha validation message.

Card

NameTypeDefault valueComputed value
$kendo-card-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Card.
$kendo-card-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the Card.
$kendo-card-border-widthNumber0px0px
Description
The width of the border around the Card.
$kendo-card-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Card.
$kendo-card-inner-border-radiusCalculationcalc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )calc(var(--kendo-border-radius-md, 0.25rem) - 0px)
Description
The inner border radius of the Card.
$kendo-card-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Card.
$kendo-card-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Card.
$kendo-card-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the Card.
$kendo-card-deck-gapStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the Cards in the Card deck.
$kendo-card-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Card.
$kendo-card-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Card.
$kendo-card-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Card.
$kendo-card-shadowString$box-shadow-depth-1var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the Card.
$kendo-card-focus-bgNullnullnull
Description
The background color of the focused Card.
$kendo-card-focus-textNullnullnull
Description
The text color of the focused Card.
$kendo-card-focus-borderNullnullnull
Description
The border color of the focused Card.
$kendo-card-focus-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the focused Card.
$kendo-card-header-padding-xString$kendo-card-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Card header.
$kendo-card-header-padding-yString$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the Card header.
$kendo-card-header-border-widthNumber1px1px
Description
The bottom border width of the Card header.
$kendo-card-header-bgNullnullnull
Description
The background color of the Card header.
$kendo-card-header-textNullnullnull
Description
The text color of the Card header.
$kendo-card-header-borderString$kendo-card-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Card header.
$kendo-card-body-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Card body.
$kendo-card-body-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Card body.
$kendo-card-footer-padding-xString$kendo-card-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Card footer.
$kendo-card-footer-padding-yString$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the Card footer.
$kendo-card-footer-border-widthNumber1px1px
Description
The top border width of the Card footer.
$kendo-card-footer-bgNullnullnull
Description
The background color of the Card footer.
$kendo-card-footer-textNullnullnull
Description
The text color of the Card footer.
$kendo-card-footer-borderString$kendo-card-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Card footer.
$kendo-card-title-margin-bottomStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The bottom margin of the Card title.
$kendo-card-title-font-sizeNumber$kendo-h5-font-size24px
Description
The font size of the Card title.
$kendo-card-title-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Card title.
$kendo-card-title-line-heightNumber1.251.25
Description
The line height of the Card title.
$kendo-card-title-font-weightNumber500500
Description
The font weight of the Card title.
$kendo-card-title-letter-spacingNullnullnull
Description
The letter spacing of the Card title.
$kendo-card-subtitle-margin-bottomStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Card subtitle.
$kendo-card-subtitle-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Card subtitle.
$kendo-card-subtitle-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the Card subtitle.
$kendo-card-subtitle-font-weightNumber500500
Description
The font weight of the Card subtitle.
$kendo-card-subtitle-letter-spacingNullnullnull
Description
The letter spacing of the Card subtitle.
$kendo-card-subtitle-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Card subtitle.
$kendo-card-img-max-widthNumber100px100px
Description
The maximum width of the Card image.
$kendo-card-avatar-sizeNumber45px45px
Description
The size of the Avatar in the Card.
$kendo-card-avatar-spacingString$kendo-card-header-padding-xvar(--kendo-spacing-4, 1rem)
Description
The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Card actions.
$kendo-card-actions-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Card actions.
$kendo-card-actions-border-widthNumber1px1px
Description
The top border width of the Card actions.
$kendo-card-actions-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the Card actions.
$kendo-card-deck-scroll-button-radiusNumber50%50%
Description
The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offsetCalculationcalc( #{$kendo-card-deck-gap} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The border radius of the scroll button in the Card deck.
$kendo-card-callout-widthNumber20px20px
Description
The width of the Card callout.
$kendo-card-callout-heightNumber20px20px
Description
The height of the Card callout.

Charts

NameTypeDefault valueComputed value
$kendo-series-aStringif($kendo-enable-color-system, k-color( series-a ), get-base-hue( purple, 500 ))var(--kendo-color-series-a, #9c27b0)
Description
The first base series color and its light and dark shades.
$kendo-series-bStringif($kendo-enable-color-system, k-color( series-b ), get-base-hue( blue, 500 ))var(--kendo-color-series-b, #2196f3)
Description
The second base series color and its light and dark shades.
$kendo-series-cStringif($kendo-enable-color-system, k-color( series-c ), get-base-hue( teal, 500 ))var(--kendo-color-series-c, #009688)
Description
The third base series color and its light and dark shades.
$kendo-series-dStringif($kendo-enable-color-system, k-color( series-d ), get-base-hue( yellow, 500 ))var(--kendo-color-series-d, #ffeb3b)
Description
The fourth base series color and its light and dark shades.
$kendo-series-eStringif($kendo-enable-color-system, k-color( series-e ), get-base-hue( red, 500 ))var(--kendo-color-series-e, #f44336)
Description
The fifth base series color and its light and dark shades.
$kendo-series-fStringif($kendo-enable-color-system, k-color( series-f ), get-base-hue( green, 500 ))var(--kendo-color-series-f, #4caf50)
Description
The sixth base series color and its light and dark shades.
$kendo-series-1String$kendo-series-avar(--kendo-color-series-a, #9c27b0)
Description
The series colors in order:
base, light, dark, lighter, darker
$kendo-chart-major-linesStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 8%, transparent)
Description
The color of the Chart grid lines (major).
$kendo-chart-minor-linesStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 4%, transparent)
Description
The color of the Chart grid lines (minor).

Chat

NameTypeDefault valueComputed value
$kendo-chat-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Chat.
$kendo-chat-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Chat.
$kendo-chat-widthNumber500px500px
Description
The width of the Chat.
$kendo-chat-heightNumber600px600px
Description
The height of the Chat.
$kendo-chat-border-widthNumber1px1px
Description
The border width of the Chat.
$kendo-chat-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Chat.
$kendo-chat-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Chat.
$kendo-chat-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Chat.
$kendo-chat-item-spacing-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal spacing between the items of the Chat.
$kendo-chat-item-spacing-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical spacing between the items of the Chat.
$kendo-chat-message-list-padding-xString$kendo-chat-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Chat message list.
$kendo-chat-message-list-padding-yString$kendo-chat-padding-yvar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Chat message list.
$kendo-chat-message-list-spacingString$kendo-chat-item-spacing-yvar(--kendo-spacing-4, 1rem)
Description
The spacing of the Chat message list.
$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The font size of the Chat timestamp.
$kendo-chat-timestamp-line-heightNullnullnull
Description
The line height of the Chat timestamp.
$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text transform of the Chat timestamp.
$kendo-chat-timestamp-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Chat timestamp.
$kendo-chat-timestamp-bgNullnullnull
Description
The background color of the Chat timestamp.
$kendo-chat-bubble-padding-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the Chat bubble message.
$kendo-chat-bubble-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Chat bubble message.
$kendo-chat-bubble-spacingStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The spacing of the Chat bubble message.
$kendo-chat-bubble-line-heightNumber1.251.25
Description
The line height of the Chat bubble message.
$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border radius of the Chat bubble message.
$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border radius of the Chat small bubble message
$kendo-chat-avatar-sizeNumber32px32px
Description
The size of the Chat Avatar.
$kendo-chat-avatar-spacingString$kendo-chat-item-spacing-xvar(--kendo-spacing-2, 0.5rem)
Description
The spacing of the Chat Avatar.
$kendo-chat-toolbar-padding-xString$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Chat Toolbar.
$kendo-chat-toolbar-padding-yString$kendo-toolbar-md-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Chat Toolbar.
$kendo-chat-toolbar-spacingString$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The spacing of the Chat Toolbar.
$kendo-chat-toolbar-bgStringif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 ))var(--kendo-color-surface, #f5f5f5)
Description
The background color of the Chat Toolbar.
$kendo-chat-toolbar-textString$kendo-toolbar-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Chat Toolbar.
$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the Chat Toolbar.
$kendo-chat-quick-reply-padding-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the Chat quick reply.
$kendo-chat-quick-reply-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Chat quick reply.
$kendo-chat-quick-reply-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing of the Chat quick reply.
$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height1.25
Description
The line height of the Chat quick reply.
$kendo-chat-bgString$kendo-app-bgvar(--kendo-color-app-surface, #ffffff)
Description
The background color of the Chat.
$kendo-chat-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Chat.
$kendo-chat-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Chat.
$kendo-chat-bubble-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Chat bubble.
$kendo-chat-bubble-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Chat bubble.
$kendo-chat-bubble-borderString$kendo-chat-bubble-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The border color of the Chat bubble.
$kendo-chat-bubble-shadowString$box-shadow-depth-1var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the Chat bubble.
$kendo-chat-bubble-hover-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the hovered Chat bubble.
$kendo-chat-bubble-selected-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the selected Chat bubble.
$kendo-chat-alt-bubble-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the Chat alt bubble.
$kendo-chat-alt-bubble-textStringif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg ))var(--kendo-color-on-primary, #ffffff)
Description
The text color of the Chat alt bubble.
$kendo-chat-alt-bubble-borderString$kendo-chat-alt-bubble-bgvar(--kendo-color-primary, #3f51b5)
Description
The border color of the Chat alt bubble.
$kendo-chat-alt-bubble-shadowString$box-shadow-depth-1var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the Chat alt bubble.
$kendo-chat-alt-bubble-hover-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the hovered Chat alt bubble.
$kendo-chat-alt-bubble-selected-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the selected Chat alt bubble.
$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The background color of the Chat quick reply.
$kendo-chat-quick-reply-textString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The text color of the Chat quick reply.
$kendo-chat-quick-reply-borderString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The border color of the Chat quick reply.
$kendo-chat-quick-reply-hover-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-textString$kendo-color-primary-contrastvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-borderString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The border color of the hovered Chat quick reply.

Checkbox

NameTypeDefault valueComputed value
$kendo-checkbox-border-widthNumber2px2px
Description
The border width of the CheckBox.
$kendo-checkbox-sm-sizeStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The size of a small CheckBox.
$kendo-checkbox-md-sizeStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The size of a medium CheckBox.
$kendo-checkbox-lg-sizeStringk-spacing(5)var(--kendo-spacing-5, 1.25rem)
Description
The size of a large CheckBox.
$kendo-checkbox-sm-glyph-sizeStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-sizeStringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)
Description
The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-sizeStringk-spacing(4.5)var(--kendo-spacing-4\.5, 1.125rem)
Description
The glyph size of a large CheckBox.
$kendo-checkbox-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small CheckBox.
$kendo-checkbox-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium CheckBox.
$kendo-checkbox-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large CheckBox.
$kendo-checkbox-bgNullnullnull
Description
The background color of the CheckBox.
$kendo-checkbox-textNullnullnull
Description
The text color of the CheckBox.
$kendo-checkbox-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)
Description
The border color of the CheckBox.
$kendo-checkbox-hover-bgNullnullnull
Description
The background color of the hovered CheckBox.
$kendo-checkbox-hover-textNullnullnull
Description
The text color of the hovered CheckBox.
$kendo-checkbox-hover-borderNullnullnull
Description
The border color of the hovered CheckBox.
$kendo-checkbox-checked-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textStringif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))var(--kendo-color-on-primary, #ffffff)
Description
The text color of the checked CheckBox.
$kendo-checkbox-checked-borderString$kendo-checkbox-checked-bgvar(--kendo-color-primary, #3f51b5)
Description
The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bgString$kendo-checkbox-checked-bgvar(--kendo-color-primary, #3f51b5)
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textString$kendo-checkbox-checked-textvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderString$kendo-checkbox-checked-bordervar(--kendo-color-primary, #3f51b5)
Description
The border color of the indeterminate CheckBox.
$kendo-checkbox-focus-borderNullnullnull
Description
The border color of the focused CheckBox.
$kendo-checkbox-focus-shadowNullnullnull
Description
The box shadow of the focused CheckBox.
$kendo-checkbox-focus-checked-borderNullnullnull
Description
The border color of the focused and checked CheckBox.
$kendo-checkbox-focus-checked-shadowNullnullnull
Description
The box shadow of the focused and checked CheckBox.
$kendo-checkbox-disabled-bgNullnullnull
Description
The background color of the disabled CheckBox.
$kendo-checkbox-disabled-textNullnullnull
Description
The text color of the disabled CheckBox.
$kendo-checkbox-disabled-borderStringif($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 ))var(--kendo-color-base-emphasis, #adadad)
Description
The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bgString$kendo-checkbox-disabled-bordervar(--kendo-color-base-emphasis, #adadad)
Description
The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-textStringif($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg ))var(--kendo-color-on-base, #212121)
Description
The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-borderString$kendo-checkbox-disabled-checked-bgvar(--kendo-color-base-emphasis, #adadad)
Description
The border color of the disabled and checked CheckBox.
$kendo-checkbox-invalid-bgNullnullnull
Description
The background color of an invalid CheckBox.
$kendo-checkbox-invalid-textString$kendo-invalid-textvar(--kendo-color-error, #f31700)
Description
The text color of an invalid CheckBox.
$kendo-checkbox-invalid-borderString$kendo-invalid-bordervar(--kendo-color-error, #f31700)
Description
The border color of an invalid CheckBox.
$kendo-checkbox-indicator-typeStringimageimage
Description
The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-checkbox-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='var%28--kendo-color-on-primary, %23ffffff%29' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/%3e%3c/svg%3e")
Description
The image for a checked CheckBox indicator.
$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='var%28--kendo-color-on-primary, %23ffffff%29' stroke-width='3' d='M4 10h12'/%3e%3c/svg%3e")
Description
The image for a indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-yString$kendo-list-md-item-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacityNumber.20.2
Description
The opacity of the CheckBox' ripple.

Chip

NameTypeDefault valueComputed value
$kendo-chip-border-widthNumber1px1px
Description
The width of the border around the Chip.
$kendo-chip-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing between the text and the icons of the Chip.
$kendo-chip-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the Chip.
$kendo-chip-sm-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the small Chip.
$kendo-chip-md-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the large Chip.
$kendo-chip-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Chip.
$kendo-chip-sm-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the small Chip.
$kendo-chip-md-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the medium Chip.
$kendo-chip-lg-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the large Chip.
$kendo-chip-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Chip.
$kendo-chip-sm-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the small Chip.
$kendo-chip-md-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the medium Chip.
$kendo-chip-lg-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the large Chip.
$kendo-chip-line-heightNumberk-math-div( 18, 14 )1.2857142857
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1.2857142857
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1.2857142857
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1.2857142857
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + calc( #{$kendo-chip-padding-y} * 2 ) + #{$kendo-chip-border-width * 2} )calc(1.2857142857em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px)
Description
The calculated height of the Chip.
$kendo-chip-sizesMap( sm: ( padding-x: $kendo-chip-sm-padding-x, padding-y: $kendo-chip-sm-padding-y, font-size: $kendo-chip-sm-font-size, line-height: $kendo-chip-sm-line-height ), md: ( padding-x: $kendo-chip-md-padding-x, padding-y: $kendo-chip-md-padding-y, font-size: $kendo-chip-md-font-size, line-height: $kendo-chip-md-line-height ), lg: ( padding-x: $kendo-chip-lg-padding-x, padding-y: $kendo-chip-lg-padding-y, font-size: $kendo-chip-lg-font-size, line-height: $kendo-chip-lg-line-height ) )(sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: 1.2857142857), md: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: 1.2857142857), lg: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: 1.2857142857))
Description
The map with the sizes of the Chip.
$kendo-chip-base-bgStringif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black))var(--kendo-color-base-subtle, #ebebeb)
Description
The base background of the Chip.
$kendo-chip-theme-colorsMap( "base": $kendo-chip-base-bg, "error": k-map-get( $kendo-theme-colors, "error" ), "info": k-map-get( $kendo-theme-colors, "info" ), "warning": k-map-get( $kendo-theme-colors, "warning" ), "success": k-map-get( $kendo-theme-colors, "success" ) )("base": var(--kendo-color-base-subtle, #ebebeb), "error": var(--kendo-color-error, #f31700), "info": var(--kendo-color-info, #0058e9), "warning": var(--kendo-color-warning, #ffc000), "success": var(--kendo-color-success, #37b400))
Description
The theme colors map for the Chip.
$kendo-chip-solid-bgStringif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )))var(--kendo-color-base-subtle, #ebebeb)
Description
The base background color of the solid Chip.
$kendo-chip-solid-textString$kendo-button-textvar(--kendo-color-on-base, #212121)
Description
The base text color of the solid Chip.
$kendo-chip-solid-borderString$kendo-chip-solid-bgvar(--kendo-color-base-subtle, #ebebeb)
Description
The base border color of the solid Chip.
$kendo-chip-solid-shadowNullnullnull
Description
The base shadow of the solid Chip.
$kendo-chip-solid-gradientNull$kendo-button-gradientnull
Description
The base gradient of the solid Chip.
$kendo-chip-solid-focus-bgStringif($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% ))var(--kendo-color-base-subtle-active, #c2c2c2)
Description
The base background color of the focused solid Chip.
$kendo-chip-solid-focus-textNullnullnull
Description
The base text color of the focused solid Chip.
$kendo-chip-solid-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% ))var(--kendo-color-base-subtle-hover, #d6d6d6)
Description
The base background color of the hovered solid Chip.
$kendo-chip-solid-hover-textNullnullnull
Description
The base text color of the hovered solid Chip.
$kendo-chip-solid-selected-bgStringif($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% ))var(--kendo-color-base-subtle-active, #c2c2c2)
Description
The base background color of the selected solid Chip.
$kendo-chip-solid-selected-textNullnullnull
Description
The base text color of the selected solid Chip.
$kendo-chip-outline-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The base background color of the outline Chip.
$kendo-chip-outline-textStringif($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text)var(--kendo-color-base-on-surface, #212121)
Description
The base text color of the outline Chip.
$kendo-chip-outline-borderString$kendo-chip-outline-textvar(--kendo-color-base-on-surface, #212121)
Description
The base border color of the outline Chip.
$kendo-chip-outline-shadowNullnullnull
Description
The base shadow of the outline Chip.
$kendo-chip-outline-hover-bgStringif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% ))var(--kendo-color-base-subtle-hover, #d6d6d6)
Description
The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-textStringif($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))var(--kendo-color-base-on-subtle, #212121)
Description
The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bgStringif($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% ))var(--kendo-color-base-subtle-active, #c2c2c2)
Description
The base background color of the selected outline Chip.
$kendo-chip-outline-selected-textString$kendo-chip-outline-hover-textvar(--kendo-color-base-on-subtle, #212121)
Description
The base text color of the selected outline Chip.
$kendo-chip-list-sizesMap( sm: k-spacing(1), md: k-spacing(1), lg: k-spacing(1) )(sm: var(--kendo-spacing-1, 0.25rem), md: var(--kendo-spacing-1, 0.25rem), lg: var(--kendo-spacing-1, 0.25rem))
Description
The sizes of the Chip list.

Cologradient

NameTypeDefault valueComputed value
$kendo-color-gradient-spacerStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The spacer of the ColorGradient.
$kendo-color-gradient-widthNumber294px294px
Description
The width of the ColorGradient.
$kendo-color-gradient-border-widthNumber1px1px
Description
The width of the border around the ColorGradient.
$kendo-color-gradient-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the ColorGradient.
$kendo-color-gradient-padding-yString$kendo-color-gradient-spacervar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-xString$kendo-color-gradient-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the ColorGradient.
$kendo-color-gradient-gapString$kendo-color-gradient-spacervar(--kendo-spacing-3, 0.75rem)
Description
The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ColorGradient.
$kendo-color-gradient-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ColorGradient.
$kendo-color-gradient-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the ColorGradient.
$kendo-color-gradient-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ColorGradient.
$kendo-color-gradient-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ColorGradient.
$kendo-color-gradient-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the ColorGradient.
$kendo-color-gradient-focus-borderString$kendo-hover-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the focused ColorGradient.
$kendo-color-gradient-canvas-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-gapString$kendo-color-gradient-spacervar(--kendo-spacing-3, 0.75rem)
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-gradient-canvas-rectangle-heightNumber180px180px
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-slider-track-sizeNumber10px10px
Description
The width of the ColorGradient slider.
$kendo-color-gradient-slider-border-radiusNumber10px10px
Description
The border radius of the ColorGradient slider.
$kendo-color-gradient-slider-draghandle-border-widthNumber3px3px
Description
The width of the border around the ColorGradient slider drag handle.
$kendo-color-gradient-slider-vertical-sizeNumber180px180px
Description
The height of the ColorGradient vertical slider.
$kendo-color-gradient-slider-horizontal-sizeNumber100%100%
Description
The width of the ColorGradient horizontal slider.
$kendo-color-gradient-draghandle-widthNumber14px14px
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-heightNumber14px14px
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-widthNumber1px1px
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-outline-widthNumber1px1px
Description
The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-radiusNumber50%50%
Description
The border radius of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-textNullnullnull
Description
The text color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-bgColortransparenttransparent
Description
The background color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-borderColorrgba( white, .8 )rgba(255, 255, 255, 0.8)
Description
The color of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadowColorrgba( $kendo-color-black, .5)rgba(0, 0, 0, 0.5)
Description
The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-shadowColor$kendo-color-black#000000
Description
The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-hover-shadowColor$kendo-color-black#000000
Description
The outline color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-yNumber- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px
Description
The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-xNumber- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px
Description
The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-input-widthNumber50px50px
Description
The width of the ColorGradient input.
$kendo-color-gradient-input-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weightStringvar( --kendo-font-weight-medium, normal )var(--kendo-font-weight-medium, normal)
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacerStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the items in the ColorGradient contrast tool.

Color System

NameTypeDefault valueComputed value
$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #212121, subtle: #757575, surface: #f5f5f5, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.12), border-alt: rgba(0, 0, 0, 0.15), base-subtle: #ebebeb, base-subtle-hover: #d6d6d6, base-subtle-active: #c2c2c2, base: #ffffff, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #adadad, base-on-subtle: #212121, on-base: #212121, base-on-surface: #212121, primary-subtle: #d1d5ee, primary-subtle-hover: #c5cae8, primary-subtle-active: #b5bde3, primary: #3f51b5, primary-hover: #3a4ba7, primary-active: #354498, primary-emphasis: #97a0d7, primary-on-subtle: #161c3f, on-primary: #ffffff, primary-on-surface: #3f51b5, secondary-subtle: #fbcdd9, secondary-subtle-hover: #f9afc3, secondary-subtle-active: #f79bb3, secondary: #e51a5f, secondary-hover: #d31857, secondary-active: #c01650, secondary-emphasis: #f58da9, secondary-on-subtle: #500c22, on-secondary: #ffffff, secondary-on-surface: #ae1549, tertiary-subtle: #c9dbd8, tertiary-subtle-hover: #a9c6c1, tertiary-subtle-active: #92b8b1, tertiary: #00695c, tertiary-hover: #006155, tertiary-active: #00584d, tertiary-emphasis: #84aea7, tertiary-on-subtle: #002520, on-tertiary: #ffffff, tertiary-on-surface: #054f46, info-subtle: #c8d7fb, info-subtle-hover: #a7c0f7, info-subtle-active: #8fb0f6, info: #0058e9, info-hover: #0251d6, info-active: #034ac3, info-emphasis: #80a5f4, info-on-subtle: #071f51, on-info: #ffffff, info-on-surface: #0443b0, success-subtle: #d7f0cc, success-subtle-hover: #bae2ad, success-subtle-active: #a7db97, success: #37b400, success-hover: #33a600, success-active: #2e9704, success-emphasis: #93d775, success-on-subtle: #163f09, on-success: #ffffff, success-on-surface: #2b8906, warning-subtle: #fff0ce, warning-subtle-hover: #ffe7b0, warning-subtle-active: #ffe19c, warning: #ffc000, warning-hover: #ebb201, warning-active: #d6a202, warning-emphasis: #ffdd8f, warning-on-subtle: #59430a, on-warning: #000000, warning-on-surface: #ffc000, error-subtle: #fcc7c2, error-subtle-hover: #feafa8, error-subtle-active: #fe9a91, error: #f31700, error-hover: #e01701, error-active: #cc1505, error-emphasis: #fc8d83, error-on-subtle: #550c07, on-error: #ffffff, error-on-surface: #b91406, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #eeeeee, light: #f5f5f5, light-hover: #ebebeb, light-active: #d6d6d6, light-emphasis: #e0e0e0, light-on-subtle: #212121, on-light: #000000, light-on-surface: #ebebeb, dark-subtle: #c7c7c7, dark-subtle-hover: #c2c2c2, dark-subtle-active: #bdbdbd, dark: #424242, dark-hover: #212121, dark-active: #000000, dark-emphasis: #9e9e9e, dark-on-subtle: #212121, on-dark: #ffffff, dark-on-surface: #616161, inverse-subtle: #c7c7c7, inverse-subtle-hover: #c2c2c2, inverse-subtle-active: #bdbdbd, inverse: #424242, inverse-hover: #212121, inverse-active: #000000, inverse-emphasis: #9e9e9e, inverse-on-subtle: #212121, on-inverse: #ffffff, inverse-on-surface: #616161, series-a: #9c27b0, series-a-bold: #751d84, series-a-bolder: #4e1458, series-a-subtle: #b55dc4, series-a-subtler: #cd93d7, series-b: #2196f3, series-b-bold: #1971b6, series-b-bolder: #114b7a, series-b-subtle: #59b0f6, series-b-subtler: #90cbf9, series-c: #009688, series-c-bold: #007166, series-c-bolder: #004b44, series-c-subtle: #40b0a6, series-c-subtler: #80cbc4, series-d: #ffeb3b, series-d-bold: #bfb02c, series-d-bolder: #80761e, series-d-subtle: #fff06c, series-d-subtler: #fff59d, series-e: #f44336, series-e-bold: #b73229, series-e-bolder: #7a221b, series-e-subtle: #f77268, series-e-subtler: #faa19b, series-f: #4caf50, series-f-bold: #39833c, series-f-bolder: #265828, series-f-subtle: #79c37c, series-f-subtler: #a6d7a8)
Description
The global default Colors map.
$kendo-color-primaryColormaterial-color( $primary-palette, main )var(--kendo-color-primary, #3f51b5)
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-color-primary-contrastColormaterial-color( $primary-palette, main-contrast )var(--kendo-color-on-primary, #ffffff)
Description
The color used along with the primary color denoted by $kendo-color-primary.
Used to provide contrast between the background and foreground colors.
$kendo-color-secondaryColormaterial-color( $secondary-palette, main )var(--kendo-color-secondary, #e51a5f)
Description
The secondary color of the theme.
$kendo-color-secondary-contrastColormaterial-color( $secondary-palette, main-contrast )var(--kendo-color-on-secondary, #ffffff)
Description
The color used along with the secondary color denoted by $kendo-color-secondary.
Used to provide contrast between the background and foreground colors.
$kendo-color-tertiaryColormaterial-color($tertiary-palette, main)var(--kendo-color-tertiary, #00695c)
Description
The tertiary color of the theme.
$kendo-color-tertiary-contrastColormaterial-color($tertiary-palette, main-contrast)white
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary.
Used to provide contrast between the background and foreground colors.
$kendo-color-infoColor#0058e9var(--kendo-color-info, #0058e9)
Description
The color for informational messages and states.
$kendo-color-successColor#37b400var(--kendo-color-success, #37b400)
Description
The color for success messages and states.
$kendo-color-warningColor#ffc000var(--kendo-color-warning, #ffc000)
Description
The color for warning messages and states.
$kendo-color-errorColor#f31700var(--kendo-color-error, #f31700)
Description
The color for error messages and states.
$kendo-color-darkColorget-base-hue( gray, 800 )var(--kendo-color-dark, #424242)
Description
The dark color of the theme.
$kendo-color-lightColorget-base-hue( gray, 100 )var(--kendo-color-light, #f5f5f5)
Description
The light color of the theme.
$kendo-color-inverseStringif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )var(--kendo-color-dark, #424242)
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
$kendo-color-whiteColor#ffffff#ffffff
Description
The color white.
Note: you cannot change this value.
$kendo-color-blackColor#000000#000000
Description
The color black.
Note: you cannot change this value.
$kendo-color-rgba-transparentColorrgba(0, 0, 0, 0)rgba(0, 0, 0, 0)
Description
The color transparent.
Note: you cannot change this value.
$kendo-gradient-transparent-to-blackGradientrgba(black, 0), blackrgba(0, 0, 0, 0), black
Description
A gradient that goes from transparent to black.
Note: you cannot change this value.
$kendo-gradient-transparent-to-whiteGradientrgba(white, 0), whitergba(255, 255, 255, 0), white
Description
A gradient that goes from transparent to white.
Note: you cannot change this value.
$kendo-gradient-black-to-transparentGradientblack, rgba(black, 0)black, rgba(0, 0, 0, 0)
Description
A gradient that goes from black to transparent.
Note: you cannot change this value.
$kendo-gradient-white-to-transparentGradientwhite, rgba(white, 0)white, rgba(255, 255, 255, 0)
Description
A gradient that goes from white to transparent.
Note: you cannot change this value.
$kendo-gradient-rainbowGradient#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
Description
A gradient that cycles through the colors of the rainbow.
Note: you cannot change this value.

Coloreditor

NameTypeDefault valueComputed value
$kendo-color-editor-spacerStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The spacer of the ColorEditor.
$kendo-color-editor-min-widthNumber294px294px
Description
The minimum width of the ColorEditor.
$kendo-color-editor-border-widthNumber1px1px
Description
The width of the border around the ColorEditor.
$kendo-color-editor-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the ColorEditor.
$kendo-color-editor-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ColorEditor.
$kendo-color-editor-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ColorEditor.
$kendo-color-editor-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the ColorEditor.
$kendo-color-editor-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ColorEditor.
$kendo-color-editor-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ColorEditor.
$kendo-color-editor-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the ColorEditor.
$kendo-color-editor-focus-borderString$kendo-hover-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadowString$box-shadow-depth-3var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the focused ColorEditor.
$kendo-color-editor-header-padding-yString$kendo-color-editor-spacervar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-xString$kendo-color-editor-header-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-widthNumber32px32px
Description
The width of the ColorEditor preview.
$kendo-color-editor-color-preview-heightNumber12px12px
Description
The height of the ColorEditor preview.
$kendo-color-editor-preview-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-yString$kendo-color-editor-spacervar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-xString$kendo-color-editor-views-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-gapString$kendo-color-editor-spacervar(--kendo-spacing-3, 0.75rem)
Description
The spacing of the ColorEditor views container.
$kendo-color-editor-color-gradient-focus-outline-colorColorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)
Description
The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outlineNumber2px2px
Description
The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offsetNumber2px2px
Description
The outline offset of the focused ColorGradient.

Colorpalette

NameTypeDefault valueComputed value
$kendo-color-palette-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ColorPalette.
$kendo-color-palette-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ColorPalette.
$kendo-color-palette-line-heightNumber00
Description
The line height of the ColorPalette.
$kendo-color-palette-tile-widthStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The width of the ColorPalette tile.
$kendo-color-palette-tile-heightString$kendo-color-palette-tile-widthvar(--kendo-spacing-6, 1.5rem)
Description
The height of the ColorPalette tile.
$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
Description
The shadow of the ColorPalette focused tile.
$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)
Description
The shadow of the ColorPalette hovered tile.
$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white
Description
The shadow of the ColorPalette selected tile.

Component

NameTypeDefault valueComputed value
$kendo-component-bgStringk-map-get( $theme, component-bg )var(--kendo-color-surface-alt, #ffffff)
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
$kendo-component-textStringk-map-get( $theme, component-text )var(--kendo-color-on-app-surface, #212121)
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
$kendo-component-borderStringk-map-get( $theme, component-border )var(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.

Dialog

NameTypeDefault valueComputed value
$kendo-dialog-titlebar-bgNullnullnull
Description
The background color of the Dialog titlebar.
$kendo-dialog-titlebar-textNullnullnull
Description
The text color of the Dialog titlebar.
$kendo-dialog-titlebar-borderNullnullnull
Description
The border color of the Dialog titlebar.
$kendo-dialog-buttongroup-padding-xString$kendo-actions-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-yString$kendo-actions-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Dialog action buttons.
$kendo-dialog-buttongroup-border-widthNumber1px1px
Description
The width of the top border of the Dialog action buttons.
$kendo-dialog-button-spacingString$kendo-actions-button-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The spacing between the Dialog action buttons.
$kendo-dialog-theme-colorsMap( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )("primary": var(--kendo-color-primary, #3f51b5), "light": var(--kendo-color-light, #f5f5f5), "dark": var(--kendo-color-dark, #424242))
Description
The theme colors map for the Dialog.

Dock-manager

NameTypeDefault valueComputed value
$kendo-dock-manager-border-widthNumber1px1px
Description
The width of the border around the DockManager component.
$kendo-dock-manager-border-styleStringsolidsolid
Description
The style of the border around the DockManager component.
$kendo-dock-manager-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-widthNumber$kendo-dock-manager-border-width1px
Description
The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-yNullnullnull
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-xNullnullnull
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weightStringvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)
Description
The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-xString$kendo-dock-manager-pane-header-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-yString$kendo-dock-manager-pane-header-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-yNullnullnull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-xNullnullnull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-widthNumber300px300px
Description
The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffff
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadowList4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-dock-indicator-paddingStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bgString$kendo-base-bgvar(--kendo-color-app-surface, #ffffff)
Description
The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-textString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-widthNumber1px1px
Description
The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-styleStringsolidsolid
Description
The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outlineString$kendo-dock-indicator-textvar(--kendo-color-primary, #3f51b5)
Description
The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadowListdrop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) )drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2))
Description
The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bgStringif($kendo-enable-color-system, k-color( primary-hover ), k-color-mix( $kendo-color-white, $kendo-color-primary, 8% ))var(--kendo-color-primary-hover, #3a4ba7)
Description
The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-widthNumber1px1px
Description
The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-styleStringdasheddashed
Description
The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radiusStringk-border-radius(sm)var(--kendo-border-radius-sm, 0.125rem)
Description
The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 ))color-mix(in srgb, var(--kendo-color-primary, #3f51b5) 16%, transparent)
Description
The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-borderString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The border color of the dropping area in the DockManager component.

Drawer

NameTypeDefault valueComputed value
$kendo-drawer-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Drawer.
$kendo-drawer-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Drawer.
$kendo-drawer-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Drawer.
$kendo-drawer-border-widthNumber1px1px
Description
The border width of the Drawer.
$kendo-drawer-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Drawer.
$kendo-drawer-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Drawer.
$kendo-drawer-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Drawer.
$kendo-drawer-content-padding-xNullnullnull
Description
The horizontal padding of the Drawer content.
$kendo-drawer-content-padding-yNullnullnull
Description
The vertical padding of the Drawer content.
$kendo-drawer-scrollbar-widthNumber7px7px
Description
The width of the Drawer scrollbar.
$kendo-drawer-scrollbar-colorColorrgba( 156, 156, 156, .7 )rgba(156, 156, 156, 0.7)
Description
The color of the Drawer scrollbar track.
$kendo-drawer-scrollbar-bgColor#dedede#dedede
Description
The background color of the Drawer scrollbar thumb.
$kendo-drawer-scrollbar-radiusNumber20px20px
Description
The border radius of the Drawer scrollbar.
$kendo-drawer-scrollbar-hover-colorColorrgba( 156, 156, 156, 1 )rgb(156, 156, 156)
Description
The hover color of the Drawer scrollbar track.
$kendo-drawer-item-padding-xString$kendo-padding-md-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Drawer item.
$kendo-drawer-item-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the Drawer item.
$kendo-drawer-item-font-sizeNumber16px16px
Description
The font size of the Drawer item.
$kendo-drawer-item-line-heightNumber$kendo-line-height-lg1.5
Description
The line height of the Drawer item.
$kendo-drawer-item-level-padding-xString$kendo-drawer-item-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Drawer item in each level.
$kendo-drawer-item-level-countNumber55
Description
The count of the Drawer item levels.
$kendo-drawer-icon-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the Drawer icon.
$kendo-drawer-icon-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Drawer icon.
$kendo-drawer-mini-initial-widthCalculationcalc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size})calc(2 * var(--kendo-spacing-4, 1rem) + 16px)
Description
The initial width of the mini Drawer.
$kendo-drawer-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered Drawer item.
$kendo-drawer-hover-textString$kendo-hover-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the hovered Drawer item.
$kendo-drawer-focus-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the focused Drawer item.
$kendo-drawer-focus-shadowStringnonenone
Description
The box shadow of the focused Drawer item.
$kendo-drawer-selected-bgNullnullnull
Description
The background color of the selected Drawer item.
$kendo-drawer-selected-textString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the selected Drawer item.
$kendo-drawer-selected-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the selected and hovered Drawer item.
$kendo-drawer-selected-hover-textString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the selected and hovered Drawer item.

Dropdowntree

NameTypeDefault valueComputed value
$kendo-dropdowntree-popup-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the DropdownTree popup

Dropzone

NameTypeDefault valueComputed value
$kendo-dropzone-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the DropZone.
$kendo-dropzone-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the DropZone.
$kendo-dropzone-border-widthNumber1px1px
Description
The border width of the DropZone.
$kendo-dropzone-min-heightNumber220px220px
Description
The minimum height of the DropZone.
$kendo-dropzone-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the DropZone.
$kendo-dropzone-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the DropZone.
$kendo-dropzone-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the DropZone.
$kendo-dropzone-bgStringif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 ))var(--kendo-color-base-subtle, #ebebeb)
Description
The background color of the DropZone.
$kendo-dropzone-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the DropZone.
$kendo-dropzone-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the DropZone.
$kendo-dropzone-icon-spacingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing below the DropZone icon.
$kendo-dropzone-icon-textStringif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))var(--kendo-color-subtle, #757575)
Description
The text color of the DropZone icon.
$kendo-dropzone-icon-hover-textString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The text color of the hovered DropZone icon.
$kendo-dropzone-hint-font-sizeNullnullnull
Description
The font size of the DropZone hint.
$kendo-dropzone-hint-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing below the DropZone hint.
$kendo-dropzone-hint-textNullnullnull
Description
The text color of the DropZone hint.
$kendo-dropzone-note-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the DropZone note.
$kendo-dropzone-note-spacingNullnullnull
Description
The spacing below the DropZone note.
$kendo-dropzone-note-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the DropZone note.

Editor

NameTypeDefault valueComputed value
$kendo-editor-border-widthNumber1px1px
Description
The width of the border around the Еditor.
$kendo-editor-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Еditor.
$kendo-editor-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Еditor.
$kendo-editor-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Еditor.
$kendo-editor-placeholder-textString$kendo-input-placeholder-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Еditor placeholder.
$kendo-editor-placeholder-opacityNumber$kendo-input-placeholder-opacity1
Description
The opacity of the Editor placeholder.
$kendo-editor-selected-textString$kendo-color-primary-contrastvar(--kendo-color-on-primary, #ffffff)
Description
The selected text color of the Editor.
$kendo-editor-selected-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The selected background color of the Editor.
$kendo-editor-highlighted-bgStringif($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%))var(--kendo-color-primary-subtle, #d1d5ee)
Description
The highlighted background color of the Editor.
$kendo-editor-export-tool-icon-margin-xNumber.5em0.5em
Description
The horizontal margin of the Editor's export tool icon.
$kendo-editor-resize-handle-sizeNumber8px8px
Description
The size of the Editor's resize handle.
$kendo-editor-resize-handle-border-widthNumber1px1px
Description
The border width of the Editor's resize handle.
$kendo-editor-resize-handle-borderColor#000000#000000
Description
The border color of the Editor's resize handle.
$kendo-editor-resize-handle-bgColor#ffffff#ffffff
Description
The background color of the Editor's resize handle.
$kendo-editor-selectednode-outline-widthNumber2px2px
Description
The outline width of the Editor's selected node.
$kendo-editor-selectednode-outline-colorColor#88ccff#88ccff
Description
The outline color of the Editor's selected node.

Elevation

NameTypeDefault valueComputed value
$kendo-elevationMap$_default-elevation(1: (0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)), 2: (0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)), 3: (0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)), 4: (0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)), 5: (0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)), 6: (0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)), 7: (0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)), 8: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)), 9: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)))
Description
The global default Elevation map.

Expander

NameTypeDefault valueComputed value
$kendo-expander-spacing-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical spacing of the ExpansionPanel.
$kendo-expander-border-widthNumber1px1px
Description
The width of the border around the ExpansionPanel.
$kendo-expander-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ExpansionPanel.
$kendo-expander-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ExpansionPanel.
$kendo-expander-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The hine height of the ExpansionPanel.
$kendo-expander-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ExpansionPanel.
$kendo-expander-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ExpansionPanel.
$kendo-expander-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the ExpansionPanel.
$kendo-expander-focus-shadowListinset 0 0 0 2px rgba( black, .08 )inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the ExpansionPanel header.
$kendo-expander-header-textString$kendo-expander-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ExpansionPanel header.
$kendo-expander-header-bgColortransparenttransparent
Description
The background color of the ExpansionPanel header.
$kendo-expander-header-borderNullnullnull
Description
The border color of the ExpansionPanel header.
$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bgColorrgba( black, .12 )rgba(0, 0, 0, 0.12)
Description
The background color of the focused ExpansionPanel header.
$kendo-expander-header-focus-shadowStringnonenone
Description
The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-textString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-yStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the ExpansionPanel content.

Filemanager

NameTypeDefault valueComputed value
$kendo-file-manager-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The space between the FileManager items.
$kendo-file-manager-border-widthNumber1px1px
Description
The border width of the FileManager.
$kendo-file-manager-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the FileManager.
$kendo-file-manager-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the FileManager.
$kendo-file-manager-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the FileManager.
$kendo-file-manager-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the FileManager.
$kendo-file-manager-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the FileManager.
$kendo-file-manager-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the FileManager.
$kendo-file-manager-toolbar-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Toolbar.
$kendo-file-manager-toolbar-bgStringif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 ))var(--kendo-color-surface, #f5f5f5)
Description
The background color of the FileManager Toolbar.
$kendo-file-manager-toolbar-textNullnullnull
Description
The text color of the FileManager Toolbar.
$kendo-file-manager-toolbar-borderNullnullnull
Description
The border color of the FileManager Toolbar.
$kendo-file-manager-toolbar-gradientNullnullnull
Description
The gradient of the FileManager Toolbar.
$kendo-file-manager-navigation-padding-xString$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-yString$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the FileManager Navigation.
$kendo-file-manager-navigation-widthNumber20%20%
Description
The width of the FileManager Navigation.
$kendo-file-manager-navigation-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Navigation.
$kendo-file-manager-navigation-bgNullnullnull
Description
The background color of the FileManager Navigation.
$kendo-file-manager-navigation-textNullnullnull
Description
The text color of the FileManager Navigation.
$kendo-file-manager-navigation-borderNullnullnull
Description
The border color of the FileManager Navigation.
$kendo-file-manager-breadcrumb-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-bgString$kendo-file-manager-toolbar-bgvar(--kendo-color-surface, #f5f5f5)
Description
The background color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-textNullnullnull
Description
The text color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-borderNullnullnull
Description
The border color of the FileManager Breadcrumb.
$kendo-file-manager-listview-bgNullnullnull
Description
The background color of the FileManager ListView.
$kendo-file-manager-listview-textNullnullnull
Description
The text color of the FileManager ListView.
$kendo-file-manager-listview-borderNullnullnull
Description
The border color of the FileManager ListView.
$kendo-file-manager-listview-item-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the FileManager ListView item.
$kendo-file-manager-listview-item-widthNumber120px120px
Description
The width of the FileManager ListView item.
$kendo-file-manager-listview-item-heightNumber120px120px
Description
The height of the FileManager ListView item.
$kendo-file-manager-listview-item-bgNullnullnull
Description
The background color of the FileManager ListView item.
$kendo-file-manager-listview-item-textNullnullnull
Description
The text color of the FileManager ListView item.
$kendo-file-manager-listview-item-borderNullnullnull
Description
The border color of the FileManager ListView item.
$kendo-file-manager-listview-item-icon-bgNullnullnull
Description
The background color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-textStringif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))var(--kendo-color-subtle, #757575)
Description
The text color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-borderNullnullnull
Description
The border color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-selected-bgNullnullnull
Description
Background color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit
Description
Text color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-borderNullnullnull
Description
Border color of the FileManager selected ListView item icon.
$kendo-file-manager-grid-bgNullnullnull
Description
The background color of the FileManager Grid.
$kendo-file-manager-grid-textNullnullnull
Description
The text color of the FileManager Grid.
$kendo-file-manager-grid-borderNullnullnull
Description
The border color of the FileManager Grid.
$kendo-file-manager-preview-padding-xString$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-yString$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the FileManager preview.
$kendo-file-manager-preview-widthNumber20%20%
Description
The width of the FileManager preview.
$kendo-file-manager-preview-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager preview.
$kendo-file-manager-preview-spacingString$kendo-file-manager-spacervar(--kendo-spacing-4, 1rem)
Description
The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The gap between the columns in the FileManager preview.
$kendo-file-manager-preview-bgNullnullnull
Description
The background color of the FileManager preview.
$kendo-file-manager-preview-textNullnullnull
Description
The text color of the FileManager preview.
$kendo-file-manager-preview-borderNullnullnull
Description
The border color of the FileManager preview.
$kendo-file-manager-preview-icon-bgNullnullnull
Description
The background color of the FileManager preview icon.
$kendo-file-manager-preview-icon-textStringif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))var(--kendo-color-subtle, #757575)
Description
The text color of the FileManager preview icon.
$kendo-file-manager-preview-icon-borderNullnullnull
Description
The border color of the FileManager preview icon.

Filter

NameTypeDefault valueComputed value
$kendo-filter-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Filter.
$kendo-filter-padding-yString$kendo-filter-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Filter.
$kendo-filter-bottom-marginNumber2.1em2.1em
Description
The bottom margin of the Filter.
$kendo-filter-line-sizeNumber1px1px
Description
The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-widthNumber15em15em
Description
The width of the dropdown elements in the Filter items.
$kendo-filter-preview-field-textString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The text color of the Filter preview field.
$kendo-filter-preview-operator-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadowList0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused Filter toolbar.

Floating-action-button

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber0px0px
Description
The width of the border around the FAB.
$kendo-fab-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the FAB.
$kendo-fab-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the FAB.
$kendo-fab-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the FAB.
$kendo-fab-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the FAB.
$kendo-fab-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the FAB.
$kendo-fab-sm-padding-xCalculationcalc( #{$kendo-fab-padding-x} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The horizontal padding of the small FAB.
$kendo-fab-md-padding-xString$kendo-fab-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-xCalculationcalc( #{$kendo-fab-padding-x} * 1.5 )calc(var(--kendo-spacing-4, 1rem) * 1.5)
Description
The horizontal padding of the large FAB.
$kendo-fab-padding-yString$kendo-fab-padding-xvar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the FAB.
$kendo-fab-sm-padding-yCalculationcalc( #{$kendo-fab-padding-y} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical padding of the small FAB.
$kendo-fab-md-padding-yString$kendo-fab-padding-yvar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the medium FAB.
$kendo-fab-lg-padding-yCalculationcalc( #{$kendo-fab-padding-y} * 1.5 )calc(var(--kendo-spacing-4, 1rem) * 1.5)
Description
The vertical padding of the large FAB.
$kendo-fab-icon-padding-xStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-yString$kendo-fab-icon-padding-xvar(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the FAB icon.
$kendo-fab-icon-spacingCalculationcalc( #{k-spacing(1)} * 1.5 )calc(var(--kendo-spacing-1, 0.25rem) * 1.5)
Description
The spacing FAB icon.
$kendo-fab-items-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the FAB items.
$kendo-fab-items-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the FAB items.
$kendo-fab-item-text-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-yString$kendo-fab-item-text-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the FAB item text.
$kendo-fab-item-text-border-widthNumber1px1px
Description
The width of the FAB item text border.
$kendo-fab-item-text-border-radiusNumber2px2px
Description
The border radius of the FAB item text.
$kendo-fab-item-text-font-sizeStringvar( --kendo-font-size-xs, inherit )var(--kendo-font-size-xs, inherit)
Description
The font size of the FAB item text.
$kendo-fab-item-text-line-heightNumber1.21.2
Description
The line height of the FAB item text.
$kendo-fab-item-icon-padding-xCalculationcalc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} )calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem))
Description
The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-yCalculation$kendo-fab-item-icon-padding-xcalc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem))
Description
The vertical padding of the FAB item icon.
$kendo-fab-item-icon-border-widthNumber00
Description
The border width of the FAB item icon.
$kendo-fab-item-icon-border-radiusNumber50%50%
Description
The border radius of the FAB item icon.
$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": var(--kendo-color-primary, #3f51b5), "secondary": var(--kendo-color-secondary, #e51a5f), "tertiary": var(--kendo-color-tertiary, #00695c), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #424242), "light": var(--kendo-color-light, #f5f5f5), "inverse": var(--kendo-color-dark, #424242))
Description
The theme colors map for the FAB.
$kendo-fab-sizesMap( sm: ( padding-x: $kendo-fab-sm-padding-x, padding-y: $kendo-fab-sm-padding-y ), md: ( padding-x: $kendo-fab-md-padding-x, padding-y: $kendo-fab-md-padding-y ), lg: ( padding-x: $kendo-fab-lg-padding-x, padding-y: $kendo-fab-lg-padding-y ) )(sm: (padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: calc(var(--kendo-spacing-4, 1rem) / 2)), md: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)), lg: (padding-x: calc(var(--kendo-spacing-4, 1rem) * 1.5), padding-y: calc(var(--kendo-spacing-4, 1rem) * 1.5)))
Description
The size map for the FAB.
$kendo-fab-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the disabled FAB.
$kendo-fab-active-shadowString$box-shadow-depth-7var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the active FAB.
$kendo-fab-item-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The base text color of the FAB item.
$kendo-fab-item-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The base background color of the FAB item.
$kendo-fab-item-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The base border color of the FAB item.
$kendo-fab-item-icon-textString$kendo-button-textvar(--kendo-color-on-base, #212121)
Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bgString$kendo-button-bgvar(--kendo-color-base, #ffffff)
Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-borderString$kendo-button-bordervar(--kendo-color-base, #ffffff)
Description
The base border color of the FAB item icon.
$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the disabled FAB item.
$kendo-fab-item-active-shadowString$kendo-fab-active-shadowvar(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the active FAB item.

Floating-label

NameTypeDefault valueComputed value
$kendo-floating-label-scaleNumber11
Description
The transformation scale of the Floating Label.
$kendo-floating-label-font-sizeString$kendo-input-font-sizevar(--kendo-font-size-lg, inherit)
Description
The font size of the Floating Label.
$kendo-floating-label-max-widthNumber90%90%
Description
The maximum width of the Floating Label.
$kendo-floating-label-line-heightNumber$kendo-input-line-height1.25
Description
The line height of the Floating Label.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.25 * var(--kendo-font-size-lg, inherit))
Description
The height of the Floating Label.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(var(--kendo-spacing-4, 1rem) + 1px)
Description
The horizontal offset of the Floating Label.
$kendo-floating-label-offset-yCalculationcalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.25 * var(--kendo-font-size-lg, inherit)) + 1px + var(--kendo-spacing-2, 0.5rem))
Description
The vertical offset of the Floating Label.
$kendo-floating-label-focus-scaleNumber.750.75
Description
The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-xNumber0px0px
Description
The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-yNumber0px0px
Description
The vertical offset of the focused Floating Label.
$kendo-floating-label-transitionList.15s cubic-bezier( .4, 0, .2, 1 )0.15s cubic-bezier(0.4, 0, 0.2, 1)
Description
The transition of the Floating Label.
$kendo-floating-label-bgNullnullnull
Description
The background color of the Floating Label.
$kendo-floating-label-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Floating Label.
$kendo-floating-label-focus-bgNullnullnull
Description
The background color of the focused Floating Label.
$kendo-floating-label-focus-textString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The text color of the focused Floating Label.

Form

NameTypeDefault valueComputed value
$kendo-form-spacerCalculationcalc( #{$kendo-padding-md-x} * 2 )calc(var(--kendo-spacing-4, 1rem) * 2)
Description
The padding of the inline Form.
$kendo-form-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Form.
$kendo-form-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Form.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(var(--kendo-line-height, normal) * 1em)
Description
The line height of the Form in em units.
$kendo-form-sm-line-heightNumber$kendo-line-height-sm1.2
Description
The line height of the small Form.
$kendo-form-lg-line-heightNumber$kendo-line-height-lg1.5
Description
The line height of the large Form.
$kendo-form-fieldset-marginList2em 0 02em 0 0
Description
The margin of the Form fieldset.
$kendo-form-fieldset-paddingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The padding of the Form fieldset.
$kendo-form-legend-marginList0 0 1em0 0 1em
Description
The margin of the Form legend.
$kendo-form-legend-paddingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The padding of the Form legend.
$kendo-form-legend-border-widthList0 0 2px0 0 2px
Description
The border width of the Form legend.
$kendo-form-legend-border-styleStringsolidsolid
Description
The border style of the Form legend.
$kendo-form-legend-border-colorString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Form legend.
$kendo-form-legend-widthNumber100%100%
Description
The width of the Form legend.
$kendo-form-legend-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Form legend.
$kendo-form-legend-text-transformStringuppercaseuppercase
Description
The text capitalization of the Form legend.
$kendo-form-label-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The bottom margin of the Form label.
$kendo-form-button-margin-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal margin of the Form buttons.
$kendo-form-hint-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the Form hint.
$kendo-form-hint-font-styleStringnormalnormal
Description
The font style of the Form hint.
$kendo-form-hint-margin-topStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The top margin of the Form hint.
$kendo-form-sm-rows-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The row spacing of the small Form.
$kendo-form-md-rows-spacingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The row spacing of the medium Form.
$kendo-form-lg-rows-spacingStringk-spacing(7)var(--kendo-spacing-7, 1.75rem)
Description
The row spacing of the large Form.
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 0var(--kendo-spacing-6, 1.5rem) 0 0
Description
The margin of the Form separator.
$kendo-form-separator-border-colorString$kendo-form-legend-border-colorvar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Form separator.
$kendo-horizontal-form-label-padding-topCalculationcalc( #{k-spacing(2.5)} / 2 )calc(var(--kendo-spacing-2\.5, 0.625rem) / 2)
Description
The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal margin of the label in the horizontal Form.
$kendo-horizontal-form-label-widthNumber25%25%
Description
The width of the label in the horizontal Form.
$kendo-horizontal-form-label-alignStringflex-endflex-end
Description
The horizontal alignment of the label in the horizontal Form.
$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - var(--kendo-spacing-2\.5, 0.625rem))
Description
The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-widthNumber25%25%
Description
The width of the inline Form element.
$kendo-forms-invalid-colorStringinheritinherit
Description
The invalid text color of the Form.
$kendo-label-optional-margin-xStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The horizontal margin of the optional label in the Form.
$kendo-label-optional-font-sizeNumber12px12px
Description
The font size of the optional label in the Form.
$kendo-label-optional-font-styleStringitalicitalic
Description
The font style of the optional label in the Form.
$kendo-fieldset-marginStringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The margin of the Form fieldset.
$kendo-fieldset-font-sizeNumber$kendo-h4-font-size34px
Description
The font size of the Form fieldset.
$kendo-fieldset-bgNullnullnull
Description
The background color of the Form fieldset.
$kendo-fieldset-textNullnullnull
Description
The text color of the Form fieldset.
$kendo-fieldset-borderNullnullnull
Description
The border color of the Form fieldset.
$kendo-fieldset-legend-bgNullnullnull
Description
The background color of the Form legend.
$kendo-fieldset-legend-textNullnullnull
Description
The text color of the Form legend.
$kendo-fieldset-legend-borderNullnullnull
Description
The border color of the Form legend.
$kendo-form-sizesMap( sm: ( form-rows-spacing: $kendo-form-sm-rows-spacing ), md: ( form-rows-spacing: $kendo-form-md-rows-spacing ), lg: ( form-rows-spacing: $kendo-form-lg-rows-spacing ) )(sm: (form-rows-spacing: var(--kendo-spacing-4, 1rem)), md: (form-rows-spacing: var(--kendo-spacing-6, 1.5rem)), lg: (form-rows-spacing: var(--kendo-spacing-7, 1.75rem)))
Description
The sizes map for the Form.

Gantt

NameTypeDefault valueComputed value
$kendo-gantt-border-widthNumber1px1px
Description
The border width of the Gantt.
$kendo-gantt-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Gantt.
$kendo-gantt-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Gantt.
$kendo-gantt-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Gantt.
$kendo-gantt-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Gantt.
$kendo-gantt-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Gantt.
$kendo-gantt-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Gantt.
$kendo-gantt-treelist-bgNullnullnull
Description
The background color of the Gantt TreeList.
$kendo-gantt-treelist-textNullnullnull
Description
The text color of the Gantt TreeList.
$kendo-gantt-treelist-borderNullnullnull
Description
The border color of the Gantt TreeList.
$kendo-gantt-nonwork-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 ))color-mix(in srgb, var(--kendo-color-on-base, #212121) 3%, transparent)
Description
The background color of the Gantt non-working days.
$kendo-gantt-nonwork-textNullnullnull
Description
The text color of the Gantt non-working days.
$kendo-gantt-nonwork-borderNullnullnull
Description
The border color of the Gantt non-working days.
$kendo-gantt-line-sizeNumber2px2px
Description
The size of the Gantt connecting lines.
$kendo-gantt-line-fillStringif($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg ))var(--kendo-color-subtle, #757575)
Description
The background fill color of the Gantt connecting lines.
$kendo-gantt-line-selected-fillString$kendo-selected-bgvar(--kendo-color-secondary, #e51a5f)
Description
The background fill of the selected Gantt connecting lines.
$kendo-gantt-dot-sizeNumber8px8px
Description
The size of the Gantt task dot.
$kendo-gantt-dot-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing of the Gantt task dot.
$kendo-gantt-dot-bgString$kendo-gantt-textvar(--kendo-color-on-app-surface, #212121)
Description
The background color of the Gantt task dot.
$kendo-gantt-dot-borderNullnullnull
Description
The border color of the Gantt task dot.
$kendo-gantt-dot-hover-bgString$kendo-gantt-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the hovered Gantt task dot.
$kendo-gantt-dot-hover-borderString$kendo-gantt-textvar(--kendo-color-on-app-surface, #212121)
Description
The border color of the hovered Gantt task dot.
$kendo-gantt-milestone-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the Gantt milestone.
$kendo-gantt-milestone-borderString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The border color of the Gantt milestone.
$kendo-gantt-milestone-selected-bgString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The background color of the selected Gantt milestone.
$kendo-gantt-milestone-selected-borderString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The border color of the selected Gantt milestone.
$kendo-gantt-summary-bgStringif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-color-primary, $kendo-gantt-bg ))var(--kendo-color-primary-emphasis, #97a0d7)
Description
The background color of the Gantt summary.
$kendo-gantt-summary-progress-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the Gantt summary progress.
$kendo-gantt-summary-selected-bgStringif($kendo-enable-color-system, k-color( secondary-subtle-active ), k-color-mix( $kendo-color-secondary, $kendo-gantt-bg ))var(--kendo-color-secondary-subtle-active, #f79bb3)
Description
The background color of the selected Gantt summary.
$kendo-gantt-summary-progress-selected-bgString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The background color of the selected Gantt summary progress.
$kendo-gantt-task-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Gantt task.
$kendo-gantt-task-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Gantt task.
$kendo-gantt-task-border-widthNumber0px0px
Description
The border width of the Gantt task.
$kendo-gantt-task-bgStringif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-color-primary, $kendo-gantt-bg ))var(--kendo-color-primary-emphasis, #97a0d7)
Description
The background color of the Gantt task.
$kendo-gantt-task-textString$kendo-color-primary-contrastvar(--kendo-color-on-primary, #ffffff)
Description
The text color of the Gantt task.
$kendo-gantt-task-borderNullnullnull
Description
The border color of the Gantt task.
$kendo-gantt-task-progress-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the Gantt task progress.
$kendo-gantt-task-selected-bgStringif($kendo-enable-color-system, k-color( secondary-subtle-active ), k-color-mix( $kendo-color-secondary, $kendo-gantt-bg ))var(--kendo-color-secondary-subtle-active, #f79bb3)
Description
The background color of selected the Gantt task.
$kendo-gantt-task-selected-textString$kendo-color-secondary-contrastvar(--kendo-color-on-secondary, #ffffff)
Description
The text color of the selected Gantt task.
$kendo-gantt-task-selected-borderNullnullnull
Description
The border color of the selected Gantt task.
$kendo-gantt-task-progress-selected-bgString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The background color of the selected Gantt task progress.
$kendo-gantt-planned-margin-yNumber.35em0.35em
Description
The vertical margin of the Gantt task planned line.
$kendo-gantt-planned-border-widthNumber2px2px
Description
The border width of the Gantt task planned line.
$kendo-gantt-planned-line-heightNumber.75em0.75em
Description
The line height of the Gantt task planned line.
$kendo-gantt-planned-dependency-margin-yNumber.7em0.7em
Description
The vertical margin of the Gantt planned dependencies.
$kendo-gantt-planned-moment-widthNumber6px6px
Description
The default width of the Gantt planned line dot.
$kendo-gantt-planned-moment-heightNumber$kendo-gantt-planned-moment-width6px
Description
The default height of the Gantt planned line dot.
$kendo-gantt-planned-moment-border-radiusCalculationcalc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 )calc((4px + 6px) / 2)
Description
The border radius of the Gantt planned line dot.
$kendo-gantt-planned-moment-left-margin-xCalculationcalc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} )calc(1px - calc((4px + 6px) / 2))
Description
The horizontal margin of the Gantt planned line dot.
$kendo-gantt-planned-milestone-moment-margin-xNumberk-math-div( $kendo-gantt-planned-moment-width, 2 )3px
Description
The horizontal margin of the Gantt milestone planned line dot.
$kendo-gantt-planned-duration-heightNumber$kendo-gantt-planned-border-width2px
Description
The default height of the Gantt planned line.
$kendo-gantt-planned-duration-hover-heightCalculationcalc( #{$kendo-gantt-planned-border-width} + 1px )calc(2px + 1px)
Description
The height of the hovered Gantt planned line.
$kendo-gantt-planned-single-drag-hint-topNumber.85em0.85em
Description
The top position of the Gantt drag hint.
$kendo-gantt-planned-summary-drag-hint-topNumber1.35em1.35em
Description
The top position of the Gantt summary drag hint.
$kendo-gantt-planned-milestone-drag-hint-topNumber1.15em1.15em
Description
The top position of the Gantt planned milestone drag hint.
$kendo-gantt-rtl-milestone-wrap-margin-xNumber-2.4em-2.4em
Description
The horizontal margin of the Gantt milestone wrap.
$kendo-gantt-rtl-milestone-planned-moment-margin-xNumber.2em0.2em
Description
The horizontal margin of the Gantt milestone line dot.
$kendo-gantt-rtl-milestone-dot-start-margin-xNumber-.1em-0.1em
Description
The horizontal margin of the Gantt milestone task dot.
$kendo-gantt-planned-offset-resize-handler-margin-xNumber1.4em1.4em
Description
The horizontal offset of the Gantt delayed task resize handler.
$kendo-gantt-planned-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the Gantt planned Tooltip.
$kendo-gantt-planned-borderString$kendo-gantt-planned-bgvar(--kendo-color-primary, #3f51b5)
Description
The border color of the Gantt planned Tooltip.
$kendo-gantt-delayed-bgString$kendo-color-errorvar(--kendo-color-error, #f31700)
Description
The background color of the Gantt delayed task.
$kendo-gantt-delayed-bg-lighterStringif($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5))var(--kendo-color-error-emphasis, #fc8d83)
Description
The complement background color of the Gantt delayed task.
$kendo-gantt-advanced-bgString$kendo-color-successvar(--kendo-color-success, #37b400)
Description
The background color of the Gantt advanced task.
$kendo-gantt-advanced-bg-lighterStringif($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5))var(--kendo-color-success-emphasis, #93d775)
Description
The complement background color of the Gantt advanced task.
$kendo-gantt-action-on-offset-textColor#000000#000000
Description
The text color of the Gantt delayed task action.
$kendo-gantt-offset-resize-handler-topNumber50%50%
Description
The top position of the Gantt delayed task resize handler.
$kendo-gantt-validation-tooltip-widthNumber200px200px
Description
The default width of the Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-label-widthNumber50px50px
Description
The default width of the Gantt validation Tooltip label.
$kendo-gantt-validation-tooltip-borderColor#656565#656565
Description
The border color of the Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-valid-borderString$kendo-color-successvar(--kendo-color-success, #37b400)
Description
The border color of the valid Gantt validation Tooltip.
$kendo-gantt-validation-tooltip-invalid-borderString$kendo-color-errorvar(--kendo-color-error, #f31700)
Description
The border color of the invalid Gantt validation Tooltip.

Grid

NameTypeDefault valueComputed value
$kendo-grid-padding-xString$kendo-table-md-cell-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Grid.
$kendo-grid-padding-yString$kendo-table-md-cell-padding-yvar(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the Grid.
$kendo-grid-header-padding-xString$kendo-grid-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Grid header.
$kendo-grid-header-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Grid header.
$kendo-grid-grouping-header-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Grid grouping header.
$kendo-grid-grouping-header-padding-yString$kendo-grid-grouping-header-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Grid grouping header.
$kendo-grid-cell-padding-xString$kendo-grid-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Grid cell.
$kendo-grid-cell-padding-yString$kendo-grid-padding-yvar(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the Grid cell.
$kendo-grid-filter-cell-padding-xString$kendo-grid-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Grid filter cell.
$kendo-grid-filter-cell-padding-yString$kendo-grid-padding-yvar(--kendo-spacing-2\.5, 0.625rem)
Description
The vertical padding of the Grid filter cell.
$kendo-grid-edit-cell-padding-xString$kendo-grid-cell-padding-xvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Grid edit cell.
$kendo-grid-edit-cell-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the Grid filter cell.
$kendo-grid-bgString$kendo-table-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Grid.
$kendo-grid-textString$kendo-table-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Grid.
$kendo-grid-borderString$kendo-table-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Grid.
$kendo-grid-header-bgString$kendo-table-header-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of Grid header.
$kendo-grid-header-textString$kendo-table-header-textvar(--kendo-color-subtle, #757575)
Description
The text color of Grid header.
$kendo-grid-header-borderString$kendo-table-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of Grid header.
$kendo-grid-header-gradientNullnullnull
Description
The background gradient of Grid header.
$kendo-grid-footer-bgString$kendo-table-footer-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of Grid footer.
$kendo-grid-footer-textString$kendo-table-footer-textvar(--kendo-color-subtle, #757575)
Description
The text color of Grid footer.
$kendo-grid-footer-borderString$kendo-table-footer-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of Grid footer.
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgtransparent
Description
The background color of the Grid alternating rows.
$kendo-grid-alt-textNull$kendo-table-alt-row-textnull
Description
The text color of the Grid alternating rows.
$kendo-grid-alt-borderNull$kendo-table-alt-row-bordernull
Description
The border color of the Grid alternating rows.
$kendo-grid-hover-bgString$kendo-table-hover-bgcolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 8%, transparent)
Description
The background color of hovered Grid rows.
$kendo-grid-hover-textNull$kendo-table-hover-textnull
Description
The text color of hovered Grid rows.
$kendo-grid-hover-borderString$kendo-table-hover-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of hovered Grid rows.
$kendo-grid-selected-bgString$kendo-table-selected-bgcolor-mix(in srgb, var(--kendo-color-primary, #3f51b5) 12%, transparent)
Description
The background color of selected Grid rows.
$kendo-grid-selected-textNull$kendo-table-selected-textnull
Description
The text color of selected Grid rows.
$kendo-grid-selected-borderNull$kendo-table-selected-bordernull
Description
The border color of selected Grid rows.
$kendo-grid-selection-aggregates-bgString$kendo-grid-header-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-textString$kendo-grid-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-borderString$kendo-grid-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-border-widthNumber$kendo-grid-border-width1px
Description
The border width of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the selection aggregates items.
$kendo-grid-selection-aggregates-line-heightNumber20px20px
Description
The line height of the Grid selection aggregates container.
$kendo-grid-selection-aggregates-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of the Grid selection aggregates container.
$kendo-grid-row-resizer-hover-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .24 ))color-mix(in srgb, var(--kendo-color-on-base, #212121) 20%, transparent)
Description
The background color of the Grid row resize indicator.
$kendo-grid-row-resizer-active-bgString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The background color of the active Grid row resize indicator.
$kendo-grid-row-resizer-heightStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The height of the Grid row resize indicator.

Input

NameTypeDefault valueComputed value
$kendo-input-default-widthNumber100%100%
Description
The default width of the Input components.
$kendo-input-border-widthNumber1px1px
Description
The border width of the Input components.
$kendo-input-border-radiusNullnullnull
Description
The border radius of the Input components.
$kendo-input-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Input components.
$kendo-input-sm-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the small Input components.
$kendo-input-md-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the medium Input components.
$kendo-input-lg-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the large Input components.
$kendo-input-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Input components.
$kendo-input-sm-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the small Input components.
$kendo-input-md-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the medium Input components.
$kendo-input-lg-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the large Input components.
$kendo-input-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Input components.
$kendo-input-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the Input components.
$kendo-input-sm-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the small Input components.
$kendo-input-md-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the medium Input components.
$kendo-input-lg-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the large Input components.
$kendo-input-line-heightNumber1.251.25
Description
The line height of the Input components.
$kendo-input-sm-line-heightNumber1.251.25
Description
The line height of the small Input components.
$kendo-input-md-line-heightNumber1.251.25
Description
The line height of the medium Input components.
$kendo-input-lg-line-heightNumber1.51.5
Description
The line height of the large Input components.
$kendo-input-sizesMap( sm: ( padding-x: $kendo-input-sm-padding-x, padding-y: $kendo-input-sm-padding-y, font-size: $kendo-input-sm-font-size, line-height: $kendo-input-sm-line-height, button-padding-x: k-spacing(1), button-padding-y: k-spacing(1) ), md: ( padding-x: $kendo-input-md-padding-x, padding-y: $kendo-input-md-padding-y, font-size: $kendo-input-md-font-size, line-height: $kendo-input-md-line-height, button-padding-x: k-spacing(1), button-padding-y: k-spacing(1) ), lg: ( padding-x: $kendo-input-lg-padding-x, padding-y: $kendo-input-lg-padding-y, font-size: $kendo-input-lg-font-size, line-height: $kendo-input-lg-line-height, button-padding-x: k-spacing(1), button-padding-y: k-spacing(1) ) )(sm: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size-lg, inherit), line-height: 1.25, button-padding-x: var(--kendo-spacing-1, 0.25rem), button-padding-y: var(--kendo-spacing-1, 0.25rem)), md: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-lg, inherit), line-height: 1.25, button-padding-x: var(--kendo-spacing-1, 0.25rem), button-padding-y: var(--kendo-spacing-1, 0.25rem)), lg: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-lg, inherit), line-height: 1.5, button-padding-x: var(--kendo-spacing-1, 0.25rem), button-padding-y: var(--kendo-spacing-1, 0.25rem)))
Description
The sizes map for the Input components.
$kendo-input-bgStringif($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 ))var(--kendo-color-surface, #f5f5f5)
Description
The background color of the Input components.
$kendo-input-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Input components.
$kendo-input-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( $kendo-component-border, .38 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)
Description
The border color of the Input components.
$kendo-input-shadowNullnullnull
Description
The shadow of the Input components.
$kendo-input-hover-bgNullnullnull
Description
The background color of the hovered Input components.
$kendo-input-hover-textNullnullnull
Description
The text color of the hovered Input components.
$kendo-input-hover-borderString$kendo-input-textvar(--kendo-color-on-app-surface, #212121)
Description
The border color of the hovered Input components.
$kendo-input-hover-shadowNullnullnull
Description
The shadow of the hovered Input components.
$kendo-input-focus-bgNullnullnull
Description
The background color of the focused Input components.
$kendo-input-focus-textNullnullnull
Description
The text color of the focused Input components.
$kendo-input-focus-borderString$kendo-color-primaryvar(--kendo-color-primary, #3f51b5)
Description
The border color of the focused Input components.
$kendo-input-focus-shadowNullnullnull
Description
The shadow of the focused Input components.
$kendo-input-selected-bgNullnullnull
Description
The background color of the selected Input components.
$kendo-input-selected-textNullnullnull
Description
The text color of the selected Input components.
$kendo-input-disabled-bgStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), k-try-shade( $kendo-component-bg, .25 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent)
Description
The background color of the disabled Input components.
$kendo-input-disabled-textStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 27%, transparent), $kendo-disabled-text)color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 27%, transparent)
Description
The text color of the disabled Input components.
$kendo-input-disabled-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ))color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent)
Description
The border color of the disabled Input components.
$kendo-input-disabled-gradientNullnullnull
Description
The gradient of the disabled Input components.
$kendo-input-disabled-shadowNullnullnull
Description
The shadow of the disabled Input components.
$kendo-input-outline-bgNullnullnull
Description
The background color of the outline Input components.
$kendo-input-outline-textString$kendo-input-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the outline Input components.
$kendo-input-outline-borderString$kendo-input-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)
Description
The border color of the outline Input components.
$kendo-input-outline-hover-bgNullnullnull
Description
The background color of the outline hovered Input components.
$kendo-input-outline-hover-textNullnullnull
Description
The text color of the outline hovered Input components.
$kendo-input-outline-hover-borderString$kendo-input-hover-bordervar(--kendo-color-on-app-surface, #212121)
Description
The border color of the outline hovered Input components.
$kendo-input-outline-focus-bgNullnullnull
Description
The background color of the outline focused Input components.
$kendo-input-outline-focus-textNullnullnull
Description
The text color of the outline focused Input components.
$kendo-input-outline-focus-borderString$kendo-input-focus-bordervar(--kendo-color-primary, #3f51b5)
Description
The border color of the outline focused Input components.
$kendo-input-outline-focus-shadowNull$kendo-input-focus-shadownull
Description
The shadow of the outline focused Input components.
$kendo-input-flat-bgNullnullnull
Description
The background color of the flat Input components.
$kendo-input-flat-textString$kendo-input-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the flat Input components.
$kendo-input-flat-borderString$kendo-input-bordercolor-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 44%, transparent)
Description
The border color of the flat Input components.
$kendo-input-flat-hover-bgNullnullnull
Description
The background color of the flat hovered Input components.
$kendo-input-flat-hover-textNullnullnull
Description
The text color of the flat hovered Input components.
$kendo-input-flat-hover-borderString$kendo-input-hover-bordervar(--kendo-color-on-app-surface, #212121)
Description
The border color of the flat hovered Input components.
$kendo-input-flat-focus-bgNullnullnull
Description
The background color of the flat focused Input components.
$kendo-input-flat-focus-textNullnullnull
Description
The text color of the flat focused Input components.
$kendo-input-flat-focus-borderString$kendo-input-focus-bordervar(--kendo-color-primary, #3f51b5)
Description
The border color of the flat focused Input components.
$kendo-input-flat-focus-shadowNull$kendo-input-focus-shadownull
Description
The shadow of the flat focused Input components.
$kendo-input-placeholder-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Input placeholder.
$kendo-input-placeholder-opacityNumber11
Description
The opacity of the Input placeholder.
$kendo-input-clear-value-textNullnullnull
Description
The color of the Input clear value icon.
$kendo-input-clear-value-opacityNumber.50.5
Description
The opacity of the Input clear value icon.
$kendo-input-clear-value-hover-textNullnullnull
Description
The color of the hovered Input clear value icon.
$kendo-input-clear-value-hover-opacityNumber11
Description
The opacity of the hovered Input clear value icon.
$kendo-input-values-margin-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical margin of the clear value icon.
$kendo-input-values-margin-xString$kendo-input-values-margin-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The horizontal margin of the clear value icon.
$kendo-input-button-widthNullnullnull
Description
The width of the Input button.
$kendo-input-button-border-widthNumber1px1px
Description
The border width of the Input button.
$kendo-input-spinner-widthNullnullnull
Description
The width of the Input spinner button.
$kendo-input-spinner-icon-offsetNullnullnull
Description
The icon offset of the Input spinner button.
$kendo-input-separator-textString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The color of the Input separator.
$kendo-input-separator-opacityNumber.50.5
Description
The opacity of the Input separator.
$kendo-input-prefix-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Input prefix.
$kendo-input-suffix-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The text color of the Input suffix.
$kendo-input-invalid-borderString$kendo-invalid-bordervar(--kendo-color-error, #f31700)
Description
The border color of the invalid Input components.
$kendo-input-invalid-shadowNull$kendo-invalid-shadownull
Description
The shadow of the invalid Input components.

List

NameTypeDefault valueComputed value
$kendo-list-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the List components.
$kendo-list-font-sizeNullnullnull
Description
The font size of the List component, if no size is set.
$kendo-list-line-heightNullnullnull
Description
The line height of the List component, if no size is set.
$kendo-list-header-padding-xNullnullnull
Description
The horizontal padding of the List header, if no size is set.
$kendo-list-header-padding-yNullnullnull
Description
The vertical padding of the List header, if no size is set.
$kendo-list-header-border-widthList0 0 1px0 0 1px
Description
The border width of the List header.
$kendo-list-header-font-sizeNullnullnull
Description
The font size of the List header, if no size is set.
$kendo-list-header-line-heightNullnullnull
Description
The line height of the List header, if no size is set.
$kendo-list-header-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of the List header.
$kendo-list-item-padding-xNullnullnull
Description
The horizontal padding of the List items, when no size is set.
$kendo-list-item-padding-yNullnullnull
Description
The vertical padding of the List items, when no size is set.
$kendo-list-item-font-sizeNullnullnull
Description
The font size of the List items, if no size is set.
$kendo-list-item-line-heightNullnullnull
Description
The line height of the List items, if no size is set.
$kendo-list-group-item-padding-xNullnullnull
Description
The horizontal padding of the List group items, when no size is set.
$kendo-list-group-item-padding-yNullnullnull
Description
The vertical padding of the List group items, when no size is set.
$kendo-list-group-item-border-widthList1px 0 01px 0 0
Description
The border width of the List group items.
$kendo-list-group-item-font-sizeNullnullnull
Description
The font size of the List group items, if no size is set.
$kendo-list-group-item-line-heightNullnullnull
Description
The line height of the List group items, if no size is set.
$kendo-list-group-item-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of a List group item.
$kendo-list-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the List component.
$kendo-list-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the List component.
$kendo-list-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the List component.
$kendo-list-header-bgNullnullnull
Description
The background color of the List header.
$kendo-list-header-textNullnullnull
Description
The text color of the List header.
$kendo-list-header-borderStringinheritinherit
Description
The border color of the List header.
$kendo-list-header-shadowNullnullnull
Description
The box shadow of the List header.
$kendo-list-item-bgNullnullnull
Description
The background color of the List items.
$kendo-list-item-textNullnullnull
Description
The text color of the List items.
$kendo-list-item-hover-bgString$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the hovered List items.
$kendo-list-item-hover-textString$kendo-hover-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the hovered List items.
$kendo-list-item-focus-bgString$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background color of the focused List items.
$kendo-list-item-focus-textNullnullnull
Description
The text color of the focused List items.
$kendo-list-item-focus-shadowNullnullnull
Description
The box shadow of the focused List items.
$kendo-list-item-selected-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the selected List items.
$kendo-list-item-selected-textString$kendo-color-secondaryvar(--kendo-color-secondary, #e51a5f)
Description
The text color of the selected List items.
$kendo-list-group-item-bgNullnullnull
Description
The background color of the List group items.
$kendo-list-group-item-textNullnullnull
Description
The text color of the List group items.
$kendo-list-group-item-borderStringinheritinherit
Description
The border color of the List group items.
$kendo-list-group-item-shadowNullnullnull
Description
The base shadow of the List group items.
$kendo-list-no-data-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The color of the 'No Data' text.
$kendo-list-option-label-textString$kendo-subtle-textvar(--kendo-color-subtle, #757575)
Description
The color of the 'Option Label' text.

Listbox

NameTypeDefault valueComputed value
$kendo-listbox-spacingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The spacing between the ListBox elements.
$kendo-listbox-button-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the ListBox buttons.
$kendo-listbox-widthNumber10em10em
Description
The width of the ListBox.
$kendo-listbox-default-heightNumber200px200px
Description
The height of the ListBox.
$kendo-listbox-border-widthNumber1px1px
Description
The width of the border around the ListBox.
$kendo-listbox-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ListBox.
$kendo-listbox-font-sizeString$kendo-list-md-font-sizevar(--kendo-font-size, inherit)
Description
The font size of the ListBox.
$kendo-listbox-line-heightNumber$kendo-list-md-line-height1.4285714286
Description
The line height of the ListBox.
$kendo-listbox-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ListBox.
$kendo-listbox-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ListBox.
$kendo-listbox-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the ListBox.
$kendo-listbox-item-padding-xString$kendo-list-md-item-padding-xvar(--kendo-spacing-4, 1rem)
Description
The inline padding of the ListBox item.
$kendo-listbox-item-padding-yString$kendo-list-md-item-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The block padding of the ListBox item.
$kendo-listbox-drop-hint-widthNumber2px2px
Description
The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-widthNumber2px2px
Description
The width of the border around the ListBox drop hint.

Listview

NameTypeDefault valueComputed value
$kendo-listview-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the ListView.
$kendo-listview-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the ListView.
$kendo-listview-border-widthNumber1px1px
Description
The width of the border around bordered ListView.
$kendo-listview-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ListView.
$kendo-listview-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ListView.
$kendo-listview-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the ListView.
$kendo-listview-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the ListView.
$kendo-listview-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ListView.
$kendo-listview-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the ListView.
$kendo-listview-item-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the ListView items.
$kendo-listview-item-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the ListView items.
$kendo-listview-item-selected-textNullnullnull
Description
The text color of the selected ListView items.
$kendo-listview-item-selected-bgStringif($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 ))var(--kendo-color-base-active, #d6d6d6)
Description
The background color of the selected ListView items.
$kendo-listview-item-selected-borderNullnullnull
Description
The border color of the selected ListView items.
$kendo-listview-item-focus-textNullnullnull
Description
The text color of the focused ListView items.
$kendo-listview-item-focus-bgStringif($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 ))var(--kendo-color-base-active, #d6d6d6)
Description
The background color of the focused ListView items.
$kendo-listview-item-focus-borderNullnullnull
Description
The border color of the focused ListView items.
$kendo-listview-item-focus-shadowNullnullnull
Description
The box shadow of the focused ListView items.

Loader

NameTypeDefault valueComputed value
$kendo-loader-segment-border-radiusNumber50%50%
Description
The border radius of the Loader segment.
$kendo-loader-sm-segment-sizeStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The size of the small Loader segment.
$kendo-loader-md-segment-sizeStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The size of the medium Loader segment.
$kendo-loader-lg-segment-sizeStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The size of the large Loader segment.
$kendo-loader-sm-paddingCalculationcalc( #{ $kendo-loader-sm-segment-size} / 2 )calc(var(--kendo-spacing-1, 0.25rem) / 2)
Description
The padding of the small Loader.
$kendo-loader-md-paddingCalculationcalc( #{ $kendo-loader-md-segment-size} / 2 )calc(var(--kendo-spacing-2, 0.5rem) / 2)
Description
The padding of the medium Loader.
$kendo-loader-lg-paddingCalculationcalc( #{ $kendo-loader-lg-segment-size} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The padding of the large Loader.
$kendo-loader-sm-spinner-3-widthCalculationcalc( #{ $kendo-loader-sm-segment-size} * 4 )calc(var(--kendo-spacing-1, 0.25rem) * 4)
Description
The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-widthCalculationcalc( #{ $kendo-loader-md-segment-size} * 4 )calc(var(--kendo-spacing-2, 0.5rem) * 4)
Description
The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-widthCalculationcalc( #{ $kendo-loader-lg-segment-size} * 4 )calc(var(--kendo-spacing-4, 1rem) * 4)
Description
The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-heightCalculationcalc( #{ $kendo-loader-sm-spinner-3-width} * #{$equilateral-height} )calc(calc(var(--kendo-spacing-1, 0.25rem) * 4) * 0.8660254038)
Description
The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-heightCalculationcalc( #{ $kendo-loader-md-spinner-3-width} * #{$equilateral-height} )calc(calc(var(--kendo-spacing-2, 0.5rem) * 4) * 0.8660254038)
Description
The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-heightCalculationcalc( #{ $kendo-loader-lg-spinner-3-width} * #{$equilateral-height} )calc(calc(var(--kendo-spacing-4, 1rem) * 4) * 0.8660254038)
Description
The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-widthCalculationcalc( #{ $kendo-loader-sm-segment-size} * 4 )calc(var(--kendo-spacing-1, 0.25rem) * 4)
Description
The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-widthCalculationcalc( #{ $kendo-loader-md-segment-size} * 4 )calc(var(--kendo-spacing-2, 0.5rem) * 4)
Description
The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-widthCalculationcalc( #{ $kendo-loader-lg-segment-size} * 4 )calc(var(--kendo-spacing-4, 1rem) * 4)
Description
The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-heightCalculation$kendo-loader-sm-spinner-4-widthcalc(var(--kendo-spacing-1, 0.25rem) * 4)
Description
The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-heightCalculation$kendo-loader-md-spinner-4-widthcalc(var(--kendo-spacing-2, 0.5rem) * 4)
Description
The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-heightCalculation$kendo-loader-lg-spinner-4-widthcalc(var(--kendo-spacing-4, 1rem) * 4)
Description
The height of the large spinner-4 Loader.
$kendo-loader-secondary-bgColor#000000#000000
Description
The color of the Loader based on the secondary theme color.
$kendo-loader-container-panel-border-widthNumber1px1px
Description
The border width of the container panel.
$kendo-loader-container-panel-border-styleStringsolidsolid
Description
The border style of the container panel.
$kendo-loader-container-panel-border-colorString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the container panel.
$kendo-loader-container-panel-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the container panel.
$kendo-loader-container-panel-bgColor$kendo-color-white#ffffff
Description
The background color of the container panel.
$kendo-loader-sm-container-paddingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The padding of the small Loader container.
$kendo-loader-md-container-paddingStringk-spacing(5)var(--kendo-spacing-5, 1.25rem)
Description
The padding of the medium Loader container.
$kendo-loader-lg-container-paddingStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The padding of the large Loader container.
$kendo-loader-sm-container-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The gap of the small Loader container.
$kendo-loader-md-container-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The gap of the medium Loader container.
$kendo-loader-lg-container-gapStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The gap of the large Loader container.
$kendo-loader-sm-container-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the small Loader container.
$kendo-loader-md-container-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the medium Loader container.
$kendo-loader-lg-container-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the large Loader container.

Loading

NameTypeDefault valueComputed value
$kendo-loading-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Loading indicator.
$kendo-loading-textStringcurrentColorcurrentColor
Description
The text color of the Loading indicator.
$kendo-loading-opacityNumber.30.3
Description
The opacity of the Loading indicator.

Menu

NameTypeDefault valueComputed value
$kendo-menu-popup-padding-xNullnullnull
Description
Horizontal padding of the menu popup.
$kendo-menu-popup-padding-yNullnullnull
Description
Vertical padding of the menu popup.
$kendo-menu-popup-border-widthNumber$kendo-popup-border-width0px
Description
Width of the border around the menu popup.
$kendo-menu-popup-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightNumber1.251.25
Description
Line heights used along with $kendo-font-size.
$kendo-menu-popup-bgString$kendo-popup-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background of the menu popup.
$kendo-menu-popup-textString$kendo-popup-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the menu popup.
$kendo-menu-popup-borderString$kendo-popup-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the menu popup.
$kendo-menu-popup-gradientNullnullnull
Description
The background gradient of the menu popup.
$kendo-menu-popup-item-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Vertical padding of the menu item in popup.
$kendo-menu-popup-item-padding-endCalculationcalc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )calc(var(--kendo-spacing-4, 1rem) * 2 + 16px)
Description
The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-startString$kendo-menu-popup-sm-item-padding-xvar(--kendo-spacing-4, 1rem)
Description
The start margin of the menu item expand icon.
$kendo-menu-popup-sm-item-icon-margin-endCalculationcalc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )calc(-1 * (calc(var(--kendo-spacing-4, 1rem) * 2 + 16px) - var(--kendo-spacing-4, 1rem)/2))
Description
The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The spacing between the menu items in popup.
$kendo-menu-popup-item-bgNullnullnull
Description
The background of the menu item in popup.
$kendo-menu-popup-item-textNullnullnull
Description
The text color of the menu item in popup.
$kendo-menu-popup-item-borderNullnullnull
Description
The border color of the menu item in popup.
$kendo-menu-popup-item-gradientNullnullnull
Description
The background gradient of the menu item in popup.
$kendo-menu-popup-item-hover-bgString$kendo-list-item-hover-bgvar(--kendo-color-base-hover, #ebebeb)
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textString$kendo-list-item-hover-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-borderNullnullnull
Description
The border color of hovered menu item in popup.
$kendo-menu-popup-item-hover-gradientNullnullnull
Description
The background gradient of hovered menu item in popup.
$kendo-menu-popup-item-expanded-bgString$kendo-list-item-selected-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-textString$kendo-list-item-selected-textvar(--kendo-color-secondary, #e51a5f)
Description
The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-borderNullnullnull
Description
The border color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-gradientNullnullnull
Description
The background gradient of expanded menu item in popup.
$kendo-menu-popup-item-focus-shadowNullnullnull
Description
The base shadow of focused menu item in popup.

Menu-button

NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the button arrow in the Menu Button.

Notification

NameTypeDefault valueComputed value
$kendo-notification-group-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The row-gap between the elements in the Notification group.
$kendo-notification-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Notification.
$kendo-notification-padding-yStringk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)
Description
The vertical padding of the Notification.
$kendo-notification-border-widthNumber0px0px
Description
The width of the border around the Notification.
$kendo-notification-border-radiusStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The border radius of the Notification.
$kendo-notification-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Notification.
$kendo-notification-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Notification.
$kendo-notification-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the Notification.
$kendo-notification-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Notification.
$kendo-notification-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Notification.
$kendo-notification-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Notification.
$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the Notification.
$kendo-notification-icon-spacingString$kendo-icon-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal spacing of the Notification icon.
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": var(--kendo-color-primary, #3f51b5), "secondary": var(--kendo-color-secondary, #e51a5f), "tertiary": var(--kendo-color-tertiary, #00695c), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #424242), "light": var(--kendo-color-light, #f5f5f5), "inverse": var(--kendo-color-dark, #424242))
Description
The theme colors map for the Notification.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: var(--kendo-color-on-inverse, #ffffff), background-color: var(--kendo-color-dark, #424242), border: var(--kendo-color-dark, #424242)), "light": (color: var(--kendo-color-on-light, #000000), background-color: var(--kendo-color-light, #f5f5f5), border: var(--kendo-color-light, #f5f5f5)), "dark": (color: var(--kendo-color-on-dark, #ffffff), background-color: var(--kendo-color-dark, #424242), border: var(--kendo-color-dark, #424242)), "error": (color: var(--kendo-color-on-error, #ffffff), background-color: var(--kendo-color-error, #f31700), border: var(--kendo-color-error, #f31700)), "warning": (color: var(--kendo-color-on-warning, #000000), background-color: var(--kendo-color-warning, #ffc000), border: var(--kendo-color-warning, #ffc000)), "success": (color: var(--kendo-color-on-success, #ffffff), background-color: var(--kendo-color-success, #37b400), border: var(--kendo-color-success, #37b400)), "info": (color: var(--kendo-color-on-info, #ffffff), background-color: var(--kendo-color-info, #0058e9), border: var(--kendo-color-info, #0058e9)), "tertiary": (color: var(--kendo-color-on-tertiary, #ffffff), background-color: var(--kendo-color-tertiary, #00695c), border: var(--kendo-color-tertiary, #00695c)), "secondary": (color: var(--kendo-color-on-secondary, #ffffff), background-color: var(--kendo-color-secondary, #e51a5f), border: var(--kendo-color-secondary, #e51a5f)), "primary": (color: var(--kendo-color-on-primary, #ffffff), background-color: var(--kendo-color-primary, #3f51b5), border: var(--kendo-color-primary, #3f51b5)))
Description
The generated theme colors map for the Notification.

Orgchart

NameTypeDefault valueComputed value
$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing index of the OrgChart.
$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart.
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart.
$kendo-orgchart-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the OrgChart.
$kendo-orgchart-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the OrgChart.
$kendo-orgchart-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the OrgChart.
$kendo-orgchart-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the OrgChart.
$kendo-orgchart-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the OrgChart.
$kendo-orgchart-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the OrgChart.
$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The spacing of the OrgChart node.
$kendo-orgchart-group-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The spacing of the OrgChart group.
$kendo-orgchart-node-container-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The spacing of the OrgChart node container.
$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart node group.
$kendo-orgchart-node-group-padding-xString$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart node group.
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
$kendo-orgchart-node-group-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the OrgChart node group.
$kendo-orgchart-node-group-bgStringif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))var(--kendo-color-surface, #f5f5f5)
Description
The background color of the OrgChart node group.
$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the OrgChart node group.
$kendo-orgchart-node-group-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the OrgChart node group.
$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull
Description
The border color of the focused OrgChart node group.
$kendo-orgchart-node-group-focus-shadowList0 2px 4px -1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $elevation, .2 )), 0 4px 5px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 14%, transparent), rgba( $elevation, .14 )), 0 1px 10px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 12%, transparent), rgba( $elevation, .12 ))0 2px 4px -1px color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 12%, transparent)
Description
The shadow of the focused OrgChart node group.
$kendo-orgchart-node-group-title-font-sizeStringvar( --kendo-font-size-xl, inherit )var(--kendo-font-size-xl, inherit)
Description
The font size of the OrgChart node group title.