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-border-radiusNumberk-map-get( $kendo-spacing, 1 )4px
Description
Border radius for all components.
$kendo-base-bgColork-map-get( $theme, base-bg )#ffffff
Description
The background of the components' chrome area.
$kendo-base-textColork-map-get( $theme, component-text )rgba(0, 0, 0, 0.87)
Description
The text color of the components' chrome area.
$kendo-base-borderColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )rgba(0, 0, 0, 0.08)
Description
The border of the components' chrome area.
$kendo-base-gradientNullnullnull
Description
The gradient background of the components' chrome area.
$kendo-hover-bgColork-map-get( $theme, hover-bg )rgba(0, 0, 0, 0.04)
Description
The background of hovered items.
$kendo-hover-textColor$kendo-base-textrgba(0, 0, 0, 0.87)
Description
The text color of hovered items.
$kendo-hover-borderColorrgba( $kendo-base-border, .15 )rgba(0, 0, 0, 0.15)
Description
The border color of hovered items.
$kendo-hover-gradientNullnullnull
Description
The gradient background of hovered items.
$kendo-selected-bgColor$kendo-color-secondary#e51a5f
Description
The background of selected items.
$kendo-selected-textColor$kendo-color-secondary-contrastwhite
Description
The text color of selected items.
$kendo-selected-borderColorrgba( $kendo-base-border, .1 )rgba(0, 0, 0, 0.1)
Description
The border color of selected items.
$kendo-selected-gradientNullnullnull
Description
The gradient background of selected 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: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 6px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 8px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 10px, group-item-font-size: null, group-item-line-height: null))
Description
The map with the sizes of the List.
@group list

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-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the AppBar.
$kendo-appbar-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the AppBar.
$kendo-appbar-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the AppBar.
$kendo-appbar-line-heightNumber$kendo-line-height-md2
Description
The line height of the AppBar.
$kendo-appbar-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the AppBar sections.
$kendo-appbar-light-bgColor$kendo-color-light#f5f5f5
Description
The background color of the AppBar based on light theme color.
$kendo-appbar-light-textColork-contrast-color( $kendo-color-light )black
Description
TThe text color of the AppBar based on light theme color.
$kendo-appbar-dark-bgColor$kendo-color-dark#424242
Description
The background color of the AppBar based on dark theme color.
$kendo-appbar-dark-textColork-contrast-color( $kendo-color-dark )white
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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Avatar.
$kendo-avatar-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Avatar.
$kendo-avatar-line-heightNumber$kendo-line-height-md2
Description
The line height of the Avatar.
$kendo-avatar-sizesMap( sm: k-map-get( $kendo-spacing, 4 ), md: k-map-get( $kendo-spacing, 8 ), lg: k-map-get( $kendo-spacing, 16 ) )(sm: 16px, md: 32px, lg: 64px)
Description
The sizes map of the Avatar.
$kendo-avatar-theme-colorsMap$kendo-theme-colors("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #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-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Badge.
$kendo-badge-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the Badge.
$kendo-badge-sm-padding-xNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The horizontal padding of the small Badge.
$kendo-badge-md-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the medium Badge.
$kendo-badge-lg-padding-xNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The horizontal padding of the large Badge.
$kendo-badge-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the Badge.
$kendo-badge-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small Badge.
$kendo-badge-md-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the medium Badge.
$kendo-badge-lg-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the large Badge.
$kendo-badge-font-sizeNumber$kendo-font-size-xs10px
Description
The font sizes of the Badge.
$kendo-badge-sm-font-sizeNumber$kendo-font-size-xs10px
Description
The font size of the small Badge.
$kendo-badge-md-font-sizeNumber$kendo-font-size-xs10px
Description
The font size of the medium Badge.
$kendo-badge-lg-font-sizeNumber$kendo-font-size-xs10px
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} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2})calc( 1em + 8px + 2px)
Description
The calculated minimum width of the circular Badge.
$kendo-badge-sm-min-widthCalculationcalc( #{$kendo-badge-sm-line-height * 1em} + #{$kendo-badge-sm-padding-y * 2} + #{$kendo-badge-border-width * 2} )calc( 1em + 4px + 2px )
Description
The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-widthCalculationcalc( #{$kendo-badge-md-line-height * 1em} + #{$kendo-badge-md-padding-y * 2} + #{$kendo-badge-border-width * 2} )calc( 1em + 8px + 2px )
Description
The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-widthCalculationcalc( #{$kendo-badge-lg-line-height * 1em} + #{$kendo-badge-lg-padding-y * 2} + #{$kendo-badge-border-width * 2} )calc( 1em + 12px + 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: 2px, padding-y: 2px, font-size: 10px, line-height: 1, min-width: calc( 1em + 4px + 2px )), md: (padding-x: 4px, padding-y: 4px, font-size: 10px, line-height: 1, min-width: calc( 1em + 8px + 2px )), lg: (padding-x: 6px, padding-y: 6px, font-size: 10px, line-height: 1, min-width: calc( 1em + 12px + 2px )))
Description
The sizes map for the Badge.

Bottom-navigation

NameTypeDefault valueComputed value
$kendo-bottom-nav-padding-xNumber0px0px
Description
The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-yNumber$kendo-bottom-nav-padding-x0px
Description
The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gapNumber$kendo-bottom-nav-padding-x0px
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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the BottomNavigation.
$kendo-bottom-nav-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the BottomNavigation.
$kendo-bottom-nav-line-heightStringnormalnormal
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-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-yNumber00
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} + #{$kendo-padding-sm-x * 2} - #{$kendo-bottom-nav-padding-x * 2} )calc( 40px + 16px - 0px )
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-map-get( $kendo-spacing, 1 )0 4px
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-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the flat BottomNavigation.
$kendo-bottom-nav-flat-bgColor$kendo-component-bg#ffffff
Description
The background color of the flat BottomNavigation.
$kendo-bottom-nav-flat-borderColor$kendo-component-borderrgba(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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Breadcrumb.
$kendo-breadcrumb-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-sizeNumber$kendo-breadcrumb-font-size14px
Description
The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the large Breadcrumb.
$kendo-breadcrumb-line-heightNumber$kendo-line-height-md2
Description
The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-heightNumber$kendo-line-height-md2
Description
The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-heightNumber$kendo-breadcrumb-line-height2
Description
The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-heightNumber$kendo-line-height-md2
Description
The line-height of the height Breadcrumb.
$kendo-breadcrumb-bgColor$kendo-component-bg#ffffff
Description
The base background of the Breadcrumb.
$kendo-breadcrumb-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The base text color of the Breadcrumb.
$kendo-breadcrumb-borderColor$kendo-component-borderrgba(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-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-xNumber$kendo-breadcrumb-link-padding-x10px
Description
The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-yNumber$kendo-breadcrumb-link-padding-y4px
Description
The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radiusNumber$kendo-border-radius-md4px
Description
The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-yNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-yNumber$kendo-breadcrumb-icon-link-padding-y10px
Description
The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-yNumberk-map-get( $kendo-spacing, 3 )12px
Description
The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-xNumber$kendo-breadcrumb-icon-link-padding-y10px
Description
The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-xNumber$kendo-breadcrumb-sm-icon-link-padding-y8px
Description
The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-xNumber$kendo-breadcrumb-icon-link-padding-x10px
Description
The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-xNumber$kendo-breadcrumb-lg-icon-link-padding-y12px
Description
The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-link-icon-spacingNumber$kendo-icon-spacing8px
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-textColor$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-bgColor$kendo-hover-bgrgba(0, 0, 0, 0.04)
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-bgColork-map-get( $theme, focus-bg )rgba(0, 0, 0, 0.12)
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-bgColor$kendo-hover-bgrgba(0, 0, 0, 0.04)
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-bgColork-map-get( $theme, focus-bg )rgba(0, 0, 0, 0.12)
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: 10px, link-padding-y: 2px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 2), md: (link-padding-x: 10px, link-padding-y: 4px, icon-link-padding-x: 10px, icon-link-padding-y: 10px, font-size: 14px, line-height: 2), lg: (link-padding-x: 10px, link-padding-y: 6px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 14px, line-height: 2))
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-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Button.
$kendo-button-sm-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the small Button.
$kendo-button-md-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the medium Button.
$kendo-button-lg-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the large Button.
$kendo-button-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the Button.
$kendo-button-sm-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the small Button.
$kendo-button-md-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the medium Button.
$kendo-button-lg-padding-yNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The vertical padding of the large Button.
$kendo-button-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Button.
$kendo-button-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Button.
$kendo-button-sm-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the small Button.
$kendo-button-md-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium Button.
$kendo-button-lg-font-sizeNumber$kendo-font-size-md14px
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} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )calc( 1.4285714286em + 16px + 2px )
Description
The calculated height of the Button.
$kendo-button-inner-calc-sizeCalculationcalc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )calc( 1.4285714286em + 16px )
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: 16px, padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (padding-x: 16px, padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (padding-x: 16px, padding-y: 10px, font-size: 14px, 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": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242, "base": #ffffff)
Description
The theme colors map for the Button.
$kendo-button-bgColor$kendo-base-bg#ffffff
Description
The base background of the Button.
$kendo-button-textColor$kendo-base-textrgba(0, 0, 0, 0.87)
Description
The base text color of the Button.
$kendo-button-borderColor$kendo-button-bg#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-bgNullnullnull
Description
The base background of the hovered Button.
$kendo-button-hover-textNullnullnull
Description
The base text color of the hovered Button.
$kendo-button-hover-borderNullnullnull
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-bgNullnullnull
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-borderNullnullnull
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-bgNull$kendo-button-active-bgnull
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-borderNull$kendo-button-active-bgnull
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-bgNullnullnull
Description
The base background of the focused Button.
$kendo-button-focus-textNullnullnull
Description
The base text color of the focused Button.
$kendo-button-focus-borderNullnullnull
Description
The base border color of the focused Button.
$kendo-button-focus-gradientNullnullnull
Description
The base background gradient of focused Button.
$kendo-button-focus-shadowNullnullnull
Description
The base shadow of the focused Button.
$kendo-button-disabled-bgColork-try-shade( $kendo-body-bg, 12% )#e0e0e0
Description
The base background color of the disabled Button.
$kendo-button-disabled-textColor$kendo-disabled-textrgba(0, 0, 0, 0.38)
Description
The base text color of the disabled Button.
$kendo-button-disabled-borderColor$kendo-button-disabled-bg#e0e0e0
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.

Charts

NameTypeDefault valueComputed value
$kendo-series-aColorget-base-hue( purple, 500 )#9c27b0
Description
The first base series color and its light and dark shades.
$kendo-series-bColorget-base-hue( blue, 500 )#2196f3
Description
The second base series color and its light and dark shades.
$kendo-series-cColorget-base-hue( teal, 500 )#009688
Description
The third base series color and its light and dark shades.
$kendo-series-dColorget-base-hue( yellow, 500 )#ffeb3b
Description
The fourth base series color and its light and dark shades.
$kendo-series-eColorget-base-hue( red, 500 )#f44336
Description
The fifth base series color and its light and dark shades.
$kendo-series-fColorget-base-hue( green, 500 )#4caf50
Description
The sixth base series color and its light and dark shades.
$kendo-series-1Color$kendo-series-a#9c27b0
Description
The series colors in order:
base, light, dark, lighter, darker
$kendo-chart-major-linesColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )rgba(0, 0, 0, 0.08)
Description
The color of the Chart grid lines (major).
$kendo-chart-minor-linesColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )rgba(0, 0, 0, 0.04)
Description
The color of the Chart grid lines (minor).

Checkbox

NameTypeDefault valueComputed value
$kendo-checkbox-border-widthNumber2px2px
Description
The border width of the CheckBox.
$kendo-checkbox-sm-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of a small CheckBox.
$kendo-checkbox-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of a medium CheckBox.
$kendo-checkbox-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px
Description
The size of a large CheckBox.
$kendo-checkbox-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px
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-borderColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )rgba(0, 0, 0, 0.54)
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-bgColor$kendo-color-primary#3f51b5
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textColork-contrast-color( $kendo-checkbox-checked-bg )white
Description
The text color of the checked CheckBox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#3f51b5
Description
The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#3f51b5
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#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-borderColork-try-shade( $kendo-component-bg, 4 )#adadad
Description
The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bgColor$kendo-checkbox-disabled-border#adadad
Description
The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-textColork-contrast-color( $kendo-checkbox-disabled-checked-bg )black
Description
The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-borderColor$kendo-checkbox-disabled-checked-bg#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-textColor$kendo-invalid-text#f31700
Description
The text color of an invalid CheckBox.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#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='white' 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='white' stroke-width='3' d='M4 10h12'/%3e%3c/svg%3e")
Description
The image for a indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-xNumber0px0px
Description
The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bgColor$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-spacingNumberk-map-get( $kendo-spacing, 1 )4px
Description
The spacing between the text and the icons of the Chip.
$kendo-chip-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the Chip.
$kendo-chip-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the small Chip.
$kendo-chip-md-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the large Chip.
$kendo-chip-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the Chip.
$kendo-chip-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small Chip.
$kendo-chip-md-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the medium Chip.
$kendo-chip-lg-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the large Chip.
$kendo-chip-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Chip.
$kendo-chip-sm-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the small Chip.
$kendo-chip-md-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium Chip.
$kendo-chip-lg-font-sizeNumber$kendo-font-size-md14px
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} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc( 1.2857142857em + 8px + 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: 4px, padding-y: 2px, font-size: 14px, line-height: 1.2857142857), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1.2857142857), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1.2857142857))
Description
The map with the sizes of the Chip.
$kendo-chip-base-bgColorif( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)#000000
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": #000000, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)
Description
The theme colors map for the Chip.
$kendo-chip-solid-bgColorif( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))#ebebeb
Description
The base background color of the solid Chip.
$kendo-chip-solid-textColor$kendo-button-textrgba(0, 0, 0, 0.87)
Description
The base text color of the solid Chip.
$kendo-chip-solid-borderColor$kendo-chip-solid-bg#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-bgColork-try-tint( $kendo-chip-base-bg, 80% )#cccccc
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-bgColork-try-tint( $kendo-chip-base-bg, 84% )#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-bgColork-try-tint( $kendo-chip-base-bg, 76% )#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-bgColor$kendo-component-bg#ffffff
Description
The base background color of the outline Chip.
$kendo-chip-outline-textColor$kendo-chip-solid-textrgba(0, 0, 0, 0.87)
Description
The base text color of the outline Chip.
$kendo-chip-outline-borderColor$kendo-chip-outline-textrgba(0, 0, 0, 0.87)
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-bgColork-try-tint( $kendo-chip-base-bg, 92% )#ebebeb
Description
The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-textColork-contrast-color( $kendo-chip-outline-hover-bg )black
Description
The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bgColork-try-tint( $kendo-chip-base-bg, 84% )#d6d6d6
Description
The base background color of the selected outline Chip.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textblack
Description
The base text color of the selected outline Chip.
$kendo-chip-list-sizesMap( sm: k-map-get( $kendo-spacing, 1 ), md: k-map-get( $kendo-spacing, 1 ), lg: k-map-get( $kendo-spacing, 1 ) )(sm: 4px, md: 4px, lg: 4px)
Description
The sizes of the Chip list.

Cologradient

NameTypeDefault valueComputed value
$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 3 )12px
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-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the ColorGradient.
$kendo-color-gradient-padding-yNumber$kendo-color-gradient-spacer12px
Description
The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-xNumber$kendo-color-gradient-padding-y12px
Description
The horizontal padding of the ColorGradient.
$kendo-color-gradient-gapNumber$kendo-color-gradient-spacer12px
Description
The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ColorGradient.
$kendo-color-gradient-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ColorGradient.
$kendo-color-gradient-line-heightNumber$kendo-line-height-md2
Description
The line height of the ColorGradient.
$kendo-color-gradient-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ColorGradient.
$kendo-color-gradient-bgColor$kendo-component-bg#ffffff
Description
The background color of the ColorGradient.
$kendo-color-gradient-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the ColorGradient.
$kendo-color-gradient-focus-borderColor$kendo-hover-borderrgba(0, 0, 0, 0.15)
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-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-gapNumber$kendo-color-gradient-spacer12px
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-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-medium500
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacerNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the items in the ColorGradient contrast tool.

Color System

NameTypeDefault valueComputed value
$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-primaryColormaterial-color( $primary-palette, main )#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 )white
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 )#e51a5f
Description
The secondary color of the theme.
$kendo-color-secondary-contrastColormaterial-color( $secondary-palette, main-contrast )white
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)#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#0058e9#0058e9
Description
The color for informational messages and states.
$kendo-color-successColor#37b400#37b400
Description
The color for success messages and states.
$kendo-color-warningColor#ffc000#ffc000
Description
The color for warning messages and states.
$kendo-color-errorColor#f31700#f31700
Description
The color for error messages and states.
$kendo-color-darkColorget-base-hue( gray, 800 )#424242
Description
The dark color of the theme.
$kendo-color-lightColorget-base-hue( gray, 100 )#f5f5f5
Description
The light color of the theme.
$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $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.

Coloreditor

NameTypeDefault valueComputed value
$kendo-color-editor-spacerNumberk-map-get( $kendo-spacing, 3 )12px
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-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the ColorEditor.
$kendo-color-editor-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ColorEditor.
$kendo-color-editor-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ColorEditor.
$kendo-color-editor-line-heightNumber$kendo-line-height-md2
Description
The line height of the ColorEditor.
$kendo-color-editor-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ColorEditor.
$kendo-color-editor-bgColor$kendo-component-bg#ffffff
Description
The background color of the ColorEditor.
$kendo-color-editor-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the ColorEditor.
$kendo-color-editor-focus-borderColor$kendo-hover-borderrgba(0, 0, 0, 0.15)
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-yNumber$kendo-color-editor-spacer12px
Description
The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-xNumber$kendo-color-editor-header-padding-y12px
Description
The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-gapNumberk-map-get( $kendo-spacing, 2 )8px
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-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-yNumber$kendo-color-editor-spacer12px
Description
The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-xNumber$kendo-color-editor-views-padding-y12px
Description
The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-gapNumber$kendo-color-editor-spacer12px
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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ColorPalette.
$kendo-color-palette-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ColorPalette.
$kendo-color-palette-line-heightNumber00
Description
The line height of the ColorPalette.
$kendo-color-palette-tile-widthNumberk-map-get( $kendo-spacing, 6 )24px
Description
The width of the ColorPalette tile.
$kendo-color-palette-tile-heightNumber$kendo-color-palette-tile-width24px
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-bgColork-map-get( $theme, component-bg )#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-textColork-map-get( $theme, component-text )rgba(0, 0, 0, 0.87)
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-borderColork-map-get( $theme, component-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-xNumber$kendo-actions-padding-x8px
Description
The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y8px
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-spacingNumber$kendo-actions-button-spacing8px
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": #3f51b5, "light": #f5f5f5, "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-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 6 )24px
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-bgColor$kendo-component-bg#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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-heightNumber$kendo-line-height-sm1.2
Description
The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weightNumber$kendo-font-weight-normal400
Description
The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-xNumber$kendo-dock-manager-pane-header-padding-x24px
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-yNumber$kendo-dock-manager-pane-header-padding-x24px
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-paddingNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bgColor$kendo-base-bg#ffffff
Description
The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-textColor$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-outlineColor$kendo-dock-indicator-text#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-bgColork-color-mix( $kendo-color-white, $kendo-color-primary, 8% )#4e5fbb
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-radiusNumber$kendo-border-radius-sm2px
Description
The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bgColorrgba( $kendo-color-primary, .16 )rgba(63, 81, 181, 0.16)
Description
The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-borderColor$kendo-color-primary#3f51b5
Description
The border color of the dropping area in the DockManager component.

Dropdowntree

NameTypeDefault valueComputed value
$kendo-dropdowntree-popup-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the DropdownTree popup

Editor

NameTypeDefault valueComputed value
$kendo-editor-border-widthNumber1px1px
Description
The width of the border around the Еditor.
$kendo-editor-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Еditor.
$kendo-editor-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Еditor.
$kendo-editor-line-heightNumber$kendo-line-height-md2
Description
The line height of the Еditor.
$kendo-editor-placeholder-textColor$kendo-input-placeholder-textrgba(0, 0, 0, 0.54)
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-textColor$kendo-color-primary-contrastwhite
Description
The selected text color of the Editor.
$kendo-editor-selected-bgColor$kendo-color-primary#3f51b5
Description
The selected background color of the Editor.
$kendo-editor-highlighted-bgColork-color-mix($kendo-color-primary, #ffffff, 20%)#d9dcf0
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
Global Elevation.

Expander

NameTypeDefault valueComputed value
$kendo-expander-spacing-yNumberk-map-get( $kendo-spacing, 3 )12px
Description
The vertical spacing of the ExpansionPanel.
$kendo-expander-border-widthNumber1px1px
Description
The width of the border around the ExpansionPanel.
$kendo-expander-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ExpansionPanel.
$kendo-expander-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ExpansionPanel.
$kendo-expander-line-heightNumber$kendo-line-height-md2
Description
The hine height of the ExpansionPanel.
$kendo-expander-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ExpansionPanel.
$kendo-expander-bgColor$kendo-component-bg#ffffff
Description
The background color of the ExpansionPanel.
$kendo-expander-borderColor$kendo-component-borderrgba(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-xNumberk-map-get( $kendo-spacing, 6 )24px
Description
The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-yNumberk-map-get( $kendo-spacing, 3 )12px
Description
The vertical padding of the ExpansionPanel header.
$kendo-expander-header-textColor$kendo-expander-textrgba(0, 0, 0, 0.87)
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-textColor$kendo-color-secondary#e51a5f
Description
The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 6 )24px
Description
The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 6 )24px
Description
The vertical padding of the ExpansionPanel content.

Filter

NameTypeDefault valueComputed value
$kendo-filter-padding-xNumber$kendo-padding-sm-x8px
Description
The horizontal padding of the Filter.
$kendo-filter-padding-yNumber$kendo-filter-padding-x8px
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-textColor$kendo-color-primary#3f51b5
Description
The text color of the Filter preview field.
$kendo-filter-preview-operator-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
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-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the FAB.
$kendo-fab-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the FAB.
$kendo-fab-font-sizeNumber$kendo-font-size-md14px
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-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the FAB.
$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )8px
Description
The horizontal padding of the small FAB.
$kendo-fab-md-padding-xNumber$kendo-fab-padding-x16px
Description
The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-xNumber( $kendo-fab-padding-x * 1.5 )24px
Description
The horizontal padding of the large FAB.
$kendo-fab-padding-yNumber$kendo-fab-padding-x16px
Description
The vertical padding of the FAB.
$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )8px
Description
The vertical padding of the small FAB.
$kendo-fab-md-padding-yNumber$kendo-fab-padding-y16px
Description
The vertical padding of the medium FAB.
$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )24px
Description
The vertical padding of the large FAB.
$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x2px
Description
The vertical padding of the FAB icon.
$kendo-fab-icon-spacingNumberk-map-get( $kendo-spacing, 1 ) * 1.56px
Description
The spacing FAB icon.
$kendo-fab-items-padding-xNumber0px0px
Description
The horizontal padding of the FAB items.
$kendo-fab-items-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the FAB items.
$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x4px
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-sizeNumber$kendo-font-size-xs10px
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-xNumberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x10px
Description
The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x10px
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": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #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: 8px, padding-y: 8px), md: (padding-x: 16px, padding-y: 16px), lg: (padding-x: 24px, padding-y: 24px))
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-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The base text color of the FAB item.
$kendo-fab-item-bgColor$kendo-component-bg#ffffff
Description
The base background color of the FAB item.
$kendo-fab-item-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The base border color of the FAB item.
$kendo-fab-item-icon-textColor$kendo-button-textrgba(0, 0, 0, 0.87)
Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bgColor$kendo-button-bg#ffffff
Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-borderColor$kendo-button-border#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-sizeNumber$kendo-input-font-size16px
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 * 16px )
Description
The height of the Floating Label.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc( 16px + 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 * 16px ) + 1px + 8px )
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-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
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-textColor$kendo-color-primary#3f51b5
Description
The text color of the focused Floating Label.

Form

NameTypeDefault valueComputed value
$kendo-form-spacerNumber$kendo-padding-md-x * 232px
Description
The padding of the inline Form.
$kendo-form-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Form.
$kendo-form-line-heightNumber$kendo-line-height-md2
Description
The line height of the Form.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc( 2 * 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-paddingNumber0px0px
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-paddingNumber0px0px
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-colorColor$kendo-component-borderrgba(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-sizeNumber$kendo-font-size-md14px
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-bottomNumber0px0px
Description
The bottom margin of the Form label.
$kendo-form-button-margin-xNumber8px8px
Description
The horizontal margin of the Form buttons.
$kendo-form-hint-font-sizeNumber$kendo-font-size-sm12px
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-topNumber4px4px
Description
The top margin of the Form hint.
$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The row spacing of the small Form.
$kendo-form-md-rows-spacingNumberk-map-get( $kendo-spacing, 6 )24px
Description
The row spacing of the medium Form.
$kendo-form-lg-rows-spacingNumberk-map-get( $kendo-spacing, 7 )28px
Description
The row spacing of the large Form.
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 024px 0 0
Description
The margin of the Form separator.
$kendo-form-separator-border-colorColor$kendo-form-legend-border-colorrgba(0, 0, 0, 0.12)
Description
The border color of the Form separator.
$kendo-horizontal-form-label-padding-topNumber5px5px
Description
The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-xNumber10px10px
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% ) - 10px )
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-xNumber6px6px
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-marginNumber30px30px
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: 16px), md: (form-rows-spacing: 24px), lg: (form-rows-spacing: 28px))
Description
The sizes map for the Form.

Grid

NameTypeDefault valueComputed value
$kendo-grid-padding-xNumber$kendo-table-md-cell-padding-x24px
Description
Horizontal padding of the grid.
$kendo-grid-padding-yNumber$kendo-table-md-cell-padding-y10px
Description
Vertical padding of the grid.
$kendo-grid-header-padding-xNumber$kendo-grid-padding-x24px
Description
Horizontal padding of the grid header.
$kendo-grid-header-padding-yNumber16px16px
Description
Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-xNumber8px8px
Description
Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-yNumber$kendo-grid-grouping-header-padding-x8px
Description
Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x24px
Description
Horizontal padding of the grid cell.
$kendo-grid-cell-padding-yNumber$kendo-grid-padding-y10px
Description
Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-x24px
Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-yNumber$kendo-grid-padding-y10px
Description
Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x24px
Description
Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-yNumber6px6px
Description
Vertical padding of the grid edit cell.
$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
Background color of the grid component
$kendo-grid-textColor$kendo-table-textrgba(0, 0, 0, 0.87)
Description
Text color of the grid component
$kendo-grid-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)
Description
Border color of the grid component
$kendo-grid-header-bgColor$kendo-table-header-bg#ffffff
Description
Background color of grid header
$kendo-grid-header-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)
Description
Background color of grid header
$kendo-grid-header-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)
Description
Border color of grid header
$kendo-grid-header-gradientNullnullnull
Description
Background gradient of grid header
$kendo-grid-footer-bgColor$kendo-table-footer-bg#ffffff
Description
Background color of grid footer
$kendo-grid-footer-textColor$kendo-table-footer-textrgba(0, 0, 0, 0.54)
Description
Text color of grid footer
$kendo-grid-footer-borderColor$kendo-table-footer-borderrgba(0, 0, 0, 0.12)
Description
Border color of grid footer
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgtransparent
Description
Background color of alternating rows in grid
$kendo-grid-alt-textNull$kendo-table-alt-row-textnull
Description
Text color of alternating rows in grid
$kendo-grid-alt-borderNull$kendo-table-alt-row-bordernull
Description
Text color of alternating rows in grid
$kendo-grid-hover-bgColor$kendo-table-hover-bgrgba(0, 0, 0, 0.07)
Description
Background color of hovered rows in grid
$kendo-grid-hover-textNull$kendo-table-hover-textnull
Description
Text color of hovered rows in grid
$kendo-grid-hover-borderColor$kendo-table-hover-borderrgba(0, 0, 0, 0.12)
Description
Border color of hovered rows in grid
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(0, 0, 0, 0.04)
Description
Background color of selected rows in grid
$kendo-grid-selected-textNull$kendo-table-selected-textnull
Description
Text color of selected rows in grid
$kendo-grid-selected-borderNull$kendo-table-selected-bordernull
Description
Border color of selected rows in grid
$kendo-grid-selection-aggregates-bgColor$kendo-grid-header-bg#ffffff
Description
Background color of the selection aggregates container
$kendo-grid-selection-aggregates-textColor$kendo-grid-textrgba(0, 0, 0, 0.87)
Description
Text color of the selection aggregates container
$kendo-grid-selection-aggregates-borderColor$kendo-grid-borderrgba(0, 0, 0, 0.12)
Description
Border color of the selection aggregates container
$kendo-grid-selection-aggregates-border-widthNumber$kendo-grid-border-width1px
Description
Border width of the selection aggregates container
$kendo-grid-selection-aggregates-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-heightNumber20px20px
Description
Line height of the selection aggregates container
$kendo-grid-selection-aggregates-font-weightNumber$kendo-font-weight-bold700
Description
Font weight of the selection aggregates container
$kendo-grid-row-resizer-hover-bgColorrgba( k-contrast-color( $kendo-grid-bg ), .24 )rgba(0, 0, 0, 0.24)
Description
Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#3f51b5
Description
Active background color of the grid row resize indicator
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )2px
Description
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-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Input components.
$kendo-input-sm-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the small Input components.
$kendo-input-md-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the medium Input components.
$kendo-input-lg-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the large Input components.
$kendo-input-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the Input components.
$kendo-input-sm-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the small Input components.
$kendo-input-md-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the medium Input components.
$kendo-input-lg-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the large Input components.
$kendo-input-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Input components.
$kendo-input-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the Input components.
$kendo-input-sm-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the small Input components.
$kendo-input-md-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the medium Input components.
$kendo-input-lg-font-sizeNumber$kendo-font-size-lg16px
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-map-get( $kendo-spacing, 1 ), button-padding-y: k-map-get( $kendo-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-map-get( $kendo-spacing, 1 ), button-padding-y: k-map-get( $kendo-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-map-get( $kendo-spacing, 1 ), button-padding-y: k-map-get( $kendo-spacing, 1 ) ) )(sm: (padding-x: 16px, padding-y: 6px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), md: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.25, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 16px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 4px, button-padding-y: 4px))
Description
The sizes map for the Input components.
$kendo-input-bgColork-try-shade( $kendo-component-bg, .5 )whitesmoke
Description
The background color of the Input components.
$kendo-input-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Input components.
$kendo-input-borderColorrgba( $kendo-component-border, .38 )rgba(0, 0, 0, 0.38)
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-borderColor$kendo-input-textrgba(0, 0, 0, 0.87)
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-borderColor$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-bgColork-try-shade( $kendo-component-bg, .25 )#fafafa
Description
The background color of the disabled Input components.
$kendo-input-disabled-textColor$kendo-disabled-textrgba(0, 0, 0, 0.38)
Description
The text color of the disabled Input components.
$kendo-input-disabled-borderColorrgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )rgba(0, 0, 0, 0.06)
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-textColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The text color of the outline Input components.
$kendo-input-outline-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)
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-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)
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-borderColor$kendo-input-focus-border#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-textColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The text color of the flat Input components.
$kendo-input-flat-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)
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-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)
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-borderColor$kendo-input-focus-border#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-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
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-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical margin of the clear value icon.
$kendo-input-values-margin-xNumber$kendo-input-values-margin-y2px
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-colorColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The color of the Input separator.
$kendo-input-separator-opacityNumber.50.5
Description
The opacity of the Input separator.
$kendo-input-invalid-borderColor$kendo-invalid-border#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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
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-weightNumber$kendo-font-weight-bold700
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-weightNumber$kendo-font-weight-bold700
Description
The font weight of a List group item.
$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The background color of the List component.
$kendo-list-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the List component.
$kendo-list-borderColor$kendo-component-borderrgba(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-bgColor$kendo-hover-bgrgba(0, 0, 0, 0.04)
Description
The background color of the hovered List items.
$kendo-list-item-hover-textColor$kendo-hover-textrgba(0, 0, 0, 0.87)
Description
The text color of the hovered List items.
$kendo-list-item-focus-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
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-bgColor$kendo-component-bg#ffffff
Description
The background color of the selected List items.
$kendo-list-item-selected-textColor$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-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The color of the 'No Data' text.
$kendo-list-option-label-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
The color of the 'Option Label' text.

Listbox

NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 3 )12px
Description
The spacing between the ListBox elements.
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 2 )8px
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-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ListBox.
$kendo-listbox-font-sizeNumber$kendo-list-md-font-size14px
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-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ListBox.
$kendo-listbox-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListBox.
$kendo-listbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the ListBox.
$kendo-listbox-item-padding-xNumber$kendo-list-md-item-padding-x16px
Description
The inline padding of the ListBox item.
$kendo-listbox-item-padding-yNumber$kendo-list-md-item-padding-y8px
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-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the ListView.
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the ListView.
$kendo-listview-border-widthNumber1px1px
Description
The width of the border around bordered ListView.
$kendo-listview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ListView.
$kendo-listview-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ListView.
$kendo-listview-line-heightNumber$kendo-line-height-md2
Description
The line height of the ListView.
$kendo-listview-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ListView.
$kendo-listview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ListView.
$kendo-listview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the ListView.
$kendo-listview-item-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the ListView items.
$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
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-bgColorrgba( k-contrast-color( $kendo-listview-bg ), .04 )rgba(0, 0, 0, 0.04)
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-bgColorrgba( k-contrast-color( $kendo-listview-bg ), .08 )rgba(0, 0, 0, 0.08)
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-sizeNumberk-map-get( $kendo-spacing, 1 )4px
Description
The size of the small Loader segment.
$kendo-loader-md-segment-sizeNumberk-map-get( $kendo-spacing, 2 )8px
Description
The size of the medium Loader segment.
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of the large Loader segment.
$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )2px
Description
The padding of the small Loader.
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )4px
Description
The padding of the medium Loader.
$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )8px
Description
The padding of the large Loader.
$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 )16px
Description
The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )32px
Description
The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )64px
Description
The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )13.8564064608px
Description
The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )27.7128129216px
Description
The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )55.4256258432px
Description
The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-widthNumber$kendo-loader-sm-segment-size * 416px
Description
The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-widthNumber$kendo-loader-md-segment-size * 432px
Description
The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 464px
Description
The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width16px
Description
The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width32px
Description
The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width64px
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-colorColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the container panel.
$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md4px
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-paddingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The padding of the small Loader container.
$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )20px
Description
The padding of the medium Loader container.
$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )24px
Description
The padding of the large Loader container.
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The gap of the small Loader container.
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The gap of the medium Loader container.
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )12px
Description
The gap of the large Loader container.
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the small Loader container.
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium Loader container.
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the large Loader container.

Loading

NameTypeDefault valueComputed value
$kendo-loading-bgColor$kendo-component-bg#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-sizeNumber$kendo-font-size-lg16px
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-bgColor$kendo-popup-bg#ffffff
Description
The background of the menu popup.
$kendo-menu-popup-textColor$kendo-popup-textrgba(0, 0, 0, 0.87)
Description
The text color of the menu popup.
$kendo-menu-popup-borderColor$kendo-popup-borderrgba(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-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
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( 32px + 16px )
Description
The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-startNumber$kendo-menu-popup-sm-item-padding-x16px
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( 32px + 16px ) - 8px))
Description
The end margin of the menu item expand icon.
$kendo-menu-popup-item-spacingNumber0px0px
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-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-textrgba(0, 0, 0, 0.87)
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-bgColor$kendo-list-item-selected-bg#ffffff
Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-text#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-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the button arrow in the Menu Button.

Notification

NameTypeDefault valueComputed value
$kendo-notification-padding-xNumber16px16px
Description
The horizontal padding of the Notification.
$kendo-notification-padding-yNumber14px14px
Description
The vertical padding of the Notification.
$kendo-notification-border-widthNumber0px0px
Description
The width of the border around the Notification.
$kendo-notification-border-radiusNumberk-map-get( $kendo-spacing, 1 )4px
Description
The border radius of the Notification.
$kendo-notification-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Notification.
$kendo-notification-font-sizeNumber$kendo-font-size-md14px
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-bgColor$kendo-component-bg#ffffff
Description
The background color of the Notification.
$kendo-notification-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Notification.
$kendo-notification-borderColor$kendo-component-borderrgba(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-spacingNumber$kendo-icon-spacing8px
Description
The horizontal spacing of the Notification icon.
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)
Description
The theme colors map for the Notification.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: white, background-color: #424242, border: #424242), "light": (color: black, background-color: #f5f5f5, border: #f5f5f5), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: black, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: black, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #00695c, border: #00695c), "secondary": (color: white, background-color: #e51a5f, border: #e51a5f), "primary": (color: white, background-color: #3f51b5, border: #3f51b5))
Description
The generated theme colors map for the Notification.

Pager

NameTypeDefault valueComputed value
$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the Pager.
$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the small Pager.
$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the medium Pager.
$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the large Pager.
$kendo-pager-padding-yNumber$kendo-pager-padding-x8px
Description
The vertical padding of the Pager.
$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x4px
Description
The vertical padding of the small Pager.
$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x8px
Description
The vertical padding of the medium Pager.
$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x10px
Description
The vertical padding of the large Pager.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc( 1.4285714286em + 12px + 2px )
Description
The minimum width of the items in the small Pager.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc( 1.4285714286em + 16px + 2px )
Description
The minimum width of the items in the medium Pagers.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc( 1.4285714286em + 20px + 2px )
Description
The minimum width of the items in the large Pagers.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The margin between the item groups in the small Pager.
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The margin between the item groups in the medium Pager.
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The margin between the item groups in the large Pager.
$kendo-pager-border-widthNumber1px1px
Description
The border width of the Pager.
$kendo-pager-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Pager.
$kendo-pager-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Pager.
$kendo-pager-line-heightNumber$kendo-line-height-md2
Description
The line height of the Pager.
$kendo-pager-bgColor$kendo-component-bg#ffffff
Description
The background color of the Pager.
$kendo-pager-textColorif( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )rgba(0, 0, 0, 0.54)
Description
The text color of the Pager.
$kendo-pager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Pager.
$kendo-pager-focus-bgColork-try-shade( $kendo-pager-bg, .5 )whitesmoke
Description
The background color of the focused Pager.
$kendo-pager-focus-shadowNullnullnull
Description
The box shadow of the focused Pager.
$kendo-pager-section-spacingNumber$kendo-pager-padding-x8px
Description
The spacing between the Pager sections.
$kendo-pager-item-border-widthNumber0px0px
Description
The border width of the Pager items.
$kendo-pager-item-border-radiusNumber5em5em
Description
The border radius of the Pager items.
$kendo-pager-item-spacingNumber0px0px
Description
The spacing around the Pager items.
$kendo-pager-item-bgNullnullnull
Description
The background color of the Pager items.
$kendo-pager-item-textNullnullnull
Description
The text color of the Pager items.
$kendo-pager-item-borderNullnullnull
Description
The border color of the Pager items.
$kendo-pager-item-hover-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
The background color of the hovered Pager items.
$kendo-pager-item-hover-textColor$kendo-pager-textrgba(0, 0, 0, 0.54)
Description
The text color of the hovered Pager items.
$kendo-pager-item-hover-borderNullnullnull
Description
The border color of the hovered Pager items.
$kendo-pager-item-selected-bgColor$kendo-color-primary#3f51b5
Description
The background color of the selected Pager items.
$kendo-pager-item-selected-textColor$kendo-color-primary-contrastwhite
Description
The text color of the selected Pager items.
$kendo-pager-item-selected-borderNullnullnull
Description
The border color of the selected Pager items.
$kendo-pager-number-border-radiusNumber$kendo-pager-item-border-radius5em
Description
The border radius of the Pager numbers.
$kendo-pager-item-focus-opacityNumber.120.12
Description
The opacity of the focused Pager items.
$kendo-pager-item-focus-bgColorrgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity)rgba(0, 0, 0, 0.12)
Description
The background color of the focused Pager items.
$kendo-pager-item-focus-shadowNullnullnull
Description
The box shadow of the focused Pager items.
$kendo-pager-input-widthNumber5em5em
Description
The width of the Inputs in the Pager.
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the small Pager.
$kendo-pager-md-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the medium Pager.
$kendo-pager-lg-dropdown-widthNumber5em5em
Description
The width of the DropDowns in the large Pager.
$kendo-pager-sizesMap( sm: ( padding-x: $kendo-pager-sm-padding-x, padding-y: $kendo-pager-sm-padding-y, item-group-spacing: $kendo-pager-sm-item-group-spacing, item-min-width: $kendo-pager-sm-item-min-width, pager-dropdown-width: $kendo-pager-sm-dropdown-width ), md: ( padding-x: $kendo-pager-md-padding-x, padding-y: $kendo-pager-md-padding-y, item-group-spacing: $kendo-pager-md-item-group-spacing, item-min-width: $kendo-pager-md-item-min-width, pager-dropdown-width: $kendo-pager-md-dropdown-width ), lg: ( padding-x: $kendo-pager-lg-padding-x, padding-y: $kendo-pager-lg-padding-y, item-group-spacing: $kendo-pager-lg-item-group-spacing, item-min-width: $kendo-pager-lg-item-min-width, pager-dropdown-width: $kendo-pager-lg-dropdown-width ) )(sm: (padding-x: 4px, padding-y: 4px, item-group-spacing: 6px, item-min-width: calc( 1.4285714286em + 12px + 2px ), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 8px, item-min-width: calc( 1.4285714286em + 16px + 2px ), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 10px, item-min-width: calc( 1.4285714286em + 20px + 2px ), pager-dropdown-width: 5em))
Description
The sizes map of the Pager.

Picker

NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-input-bgwhitesmoke
Description
The background color of the Picker components.
$kendo-picker-textColor$kendo-input-textrgba(0, 0, 0, 0.87)
Description
The text color of the Picker components.
$kendo-picker-borderColor$kendo-input-borderrgba(0, 0, 0, 0.38)
Description
The border color of the Picker components.
$kendo-picker-gradientNullnullnull
Description
The gradient of the Picker components.
$kendo-picker-shadowNull$kendo-input-shadownull
Description
The shadow of the Picker components.
$kendo-picker-hover-bgNull$kendo-input-hover-bgnull
Description
The background color of the hovered Picker components.
$kendo-picker-hover-textNull$kendo-input-hover-textnull
Description
The text color of the hovered Picker components.
$kendo-picker-hover-borderColor$kendo-input-hover-borderrgba(0, 0, 0, 0.87)
Description
The border color of the hovered Picker components.
$kendo-picker-hover-gradientNullnullnull
Description
The gradient of the hovered Picker components.
$kendo-picker-hover-shadowNull$kendo-input-hover-shadownull
Description
The shadow of the hovered Picker components.
$kendo-picker-focus-bgNull$kendo-input-focus-bgnull
Description
The background color of the focused Picker components.
$kendo-picker-focus-textNull$kendo-input-focus-textnull
Description
The text color of the focused Picker components.
$kendo-picker-focus-borderColor$kendo-input-focus-border#3f51b5
Description
The border color of the focused Picker components.
$kendo-picker-focus-gradientNullnullnull
Description
The gradient of the focused Picker components.
$kendo-picker-focus-shadowNull$kendo-input-focus-shadownull
Description
The shadow of the focused Picker components.
$kendo-picker-disabled-bgColor$kendo-input-disabled-bg#fafafa
Description
The background color of the disabled Picker components.
$kendo-picker-disabled-textColor$kendo-input-disabled-textrgba(0, 0, 0, 0.38)
Description
The text color of the disabled Picker components.
$kendo-picker-disabled-borderColor$kendo-input-disabled-borderrgba(0, 0, 0, 0.06)
Description
The border color of the disabled Picker components.
$kendo-picker-disabled-gradientNullnullnull
Description
The gradient of the disabled Picker components.
$kendo-picker-disabled-shadowNullnullnull
Description
The shadow of the disabled Picker components.
$kendo-picker-outline-bgNullnullnull
Description
The background color of the outline Picker components.
$kendo-picker-outline-textColor$kendo-picker-textrgba(0, 0, 0, 0.87)
Description
The text color of the outline Picker components.
$kendo-picker-outline-borderColor$kendo-picker-borderrgba(0, 0, 0, 0.38)
Description
The border color of the outline Picker components.
$kendo-picker-outline-hover-bgNullnullnull
Description
The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-textNullnullnull
Description
The text color of the outline hovered Picker components.
$kendo-picker-outline-hover-borderColor$kendo-picker-hover-borderrgba(0, 0, 0, 0.87)
Description
The border color of the outline hovered Picker components.
$kendo-picker-outline-focus-bgStringnulnul
Description
The background color of the outline focused Picker components.
$kendo-picker-outline-focus-textNullnullnull
Description
The text color of the outline focused Picker components.
$kendo-picker-outline-focus-borderColor$kendo-picker-focus-border#3f51b5
Description
The border color of the outline focused Picker components.
$kendo-picker-outline-focus-shadowNullnullnull
Description
The shadow of the outline focused Picker components.
$kendo-picker-outline-hover-focus-bgNullnullnull
Description
The background color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-textNullnullnull
Description
The text color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-borderNullnullnull
Description
The border color of the outline hovered and focused Picker components.
$kendo-picker-flat-bgNullnullnull
Description
The background color of the flat Picker components.
$kendo-picker-flat-textColor$kendo-picker-textrgba(0, 0, 0, 0.87)
Description
The text color of the flat Picker components.
$kendo-picker-flat-borderColor$kendo-picker-borderrgba(0, 0, 0, 0.38)
Description
The border color of the flat Picker components.
$kendo-picker-flat-hover-bgNullnullnull
Description
The background color of the flat hovered Picker components.
$kendo-picker-flat-hover-textNullnullnull
Description
The text color of the flat hovered Picker components.
$kendo-picker-flat-focus-bgNullnullnull
Description
The background color of the flat focused Picker components.
$kendo-picker-flat-focus-textNullnullnull
Description
The text color of the flat focused Picker components.
$kendo-picker-flat-focus-borderColor$kendo-picker-focus-border#3f51b5
Description
The border color of the flat focused Picker components.
$kendo-picker-flat-focus-shadowNullnullnull
Description
The shadow of the flat focused Picker components.
$kendo-picker-flat-hover-focus-bgNullnullnull
Description
The background color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-textNullnullnull
Description
The text color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The border color of the flat hovered and focused Picker components.

Pickers

NameTypeDefault valueComputed value
$kendo-picker-flat-hover-borderColor$kendo-picker-hover-borderrgba(0, 0, 0, 0.87)
Description
The border color of the flat hovered Picker components.

Popover

NameTypeDefault valueComputed value
$kendo-popover-border-widthNumber1px1px
Description
The width of the border around the Popover.
$kendo-popover-border-styleStringsolidsolid
Description
The style of the border around the Popover.
$kendo-popover-border-radiusNumber$kendo-card-border-radius4px
Description
The radius of the border around the Popover.
$kendo-popover-font-familyList$kendo-card-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Popover.
$kendo-popover-font-sizeNumber$kendo-card-font-size14px
Description
The font size of the Popover.
$kendo-popover-line-heightNumber$kendo-card-line-height1.4285714286
Description
The line height of the Popover.
$kendo-popover-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Popover.
$kendo-popover-bgColor$kendo-component-bg#ffffff
Description
The background color of the Popover.
$kendo-popover-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Popover.
$kendo-popover-shadowString$kendo-card-shadowvar(--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 Popover.
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x16px
Description
The horizontal padding of the Popover header.
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y12px
Description
The vertical padding of the Popover header.
$kendo-popover-header-border-widthNumber$kendo-card-header-border-width1px
Description
The border width of the Popover header.
$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid
Description
The border style of the Popover header.
$kendo-popover-header-textNull$kendo-card-header-textnull
Description
The text color of the Popover header.
$kendo-popover-header-bgNull$kendo-card-header-bgnull
Description
The background color of the Popover header.
$kendo-popover-header-borderColor$kendo-card-header-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Popover header.
$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x16px
Description
The horizontal padding of the Popover body.
$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y16px
Description
The vertical padding of the Popover body.
$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px
Description
The border width of the Popover actions.
$kendo-popover-callout-widthNumber$kendo-card-callout-width20px
Description
The width of the Popover callout.
$kendo-popover-callout-heightNumber$kendo-card-callout-height20px
Description
The height of the Popover callout.
$kendo-popover-callout-border-widthNumber$kendo-popover-border-width1px
Description
The border width of the Popover callout.
$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid
Description
The border style of the Popover callout.
$kendo-popover-callout-bgColor$kendo-popover-bg#ffffff
Description
The background color of the Popover callout.
$kendo-popover-callout-borderColor$kendo-popover-borderrgba(0, 0, 0, 0.12)
Description
The border color of the Popover callout.

Popup

NameTypeDefault valueComputed value
$kendo-popup-padding-xNullnullnull
Description
Horizontal padding of the popup.
$kendo-popup-padding-yNullnullnull
Description
Vertical padding of the popup.
$kendo-popup-border-widthNumber0px0px
Description
Width of the border around the popup.
$kendo-popup-border-radiusNullnullnull
Description
Border radius of the popup.
$kendo-popup-font-sizeNumber$kendo-font-size-md14px
Description
Font size of the popup.
$kendo-popup-line-heightNumber$kendo-line-height-md2
Description
Line height of the popup.
$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
Horizontal padding of the popup content.
$kendo-popup-content-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
Vertical padding of the popup content.
$kendo-popup-bgColor$kendo-component-bg#ffffff
Description
Background color of the popup.
$kendo-popup-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of the popup.
$kendo-popup-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of the popup.
$kendo-popup-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
Box shadow of the popup.

Progressbar

NameTypeDefault valueComputed value
$kendo-progressbar-heightNumber5px5px
Description
The height of the ProgressBar.
$kendo-progressbar-horizontal-widthNumber100%100%
Description
The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timingNullnullnull
Description
The animation timing of the ProgressBar.
$kendo-progressbar-border-widthNumber0px0px
Description
The width of the border around the ProgressBar.
$kendo-progressbar-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ProgressBar.
$kendo-progressbar-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the ProgressBar.
$kendo-progressbar-line-heightNumber11
Description
The line height of the ProgressBar.
$kendo-progressbar-bgColork-try-tint( $kendo-color-primary, 8 )#bac0e4
Description
The background color of the ProgressBar.
$kendo-progressbar-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ProgressBar.
$kendo-progressbar-borderNullnullnull
Description
The border color of the ProgressBar.
$kendo-progressbar-gradientNullnullnull
Description
The background gradient of the ProgressBar.
$kendo-progressbar-value-bgColor$kendo-color-primary#3f51b5
Description
The progress background color of the ProgressBar.
$kendo-progressbar-value-textColor$kendo-color-primary-contrastwhite
Description
The progress text color of the ProgressBar.
$kendo-progressbar-value-borderNullnullnull
Description
The progress border color of the ProgressBar.
$kendo-progressbar-value-gradientNullnullnull
Description
The progress background gradient of the ProgressBar.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#bac0e4
Description
The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-textrgba(0, 0, 0, 0.87)
Description
The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-borderNull$kendo-progressbar-bordernull
Description
The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradientNullnullnull
Description
The background gradient of the indeterminate ProgressBar.
$kendo-progressbar-chunk-borderColor$kendo-component-bg#ffffff
Description
The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#3f51b5
Description
The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#bac0e4
Description
The scale stroke background color of the circular ProgressBar.

Radio

NameTypeDefault valueComputed value
$kendo-radio-radiusNumber50%50%
Description
The border radius of the RadioButton.
$kendo-radio-border-widthNumber2px2px
Description
The border width of the RadioButton.
$kendo-radio-sm-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of a small RadioButton.
$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of a medium RadioButton.
$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px
Description
The size of a large RadioButton.
$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The glyph size of a small RadioButton.
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The glyph size of a medium RadioButton.
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
The glyph size of a large RadioButton.
$kendo-radio-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small RadioButton.
$kendo-radio-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium RadioButton.
$kendo-radio-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large RadioButton.
$kendo-radio-sizesMap( sm: ( size: $kendo-radio-sm-size, glyph-size: $kendo-radio-sm-glyph-size, ripple-size: $kendo-radio-sm-ripple-size ), md: ( size: $kendo-radio-md-size, glyph-size: $kendo-radio-md-glyph-size, ripple-size: $kendo-radio-md-ripple-size ), lg: ( size: $kendo-radio-lg-size, glyph-size: $kendo-radio-lg-glyph-size, ripple-size: $kendo-radio-lg-ripple-size ) )(sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%))
Description
The map with the different RadioButton sizes.
$kendo-radio-bgNull$kendo-checkbox-bgnull
Description
The background color of the RadioButton.
$kendo-radio-textNull$kendo-checkbox-textnull
Description
The color of the RadioButton.
$kendo-radio-borderColor$kendo-checkbox-borderrgba(0, 0, 0, 0.54)
Description
The border color of the RadioButton.
$kendo-radio-hover-bgNullnullnull
Description
The background color of the hovered RadioButton.
$kendo-radio-hover-textNullnullnull
Description
The color of the hovered RadioButton.
$kendo-radio-hover-borderNullnullnull
Description
The border color of the hovered RadioButton.
$kendo-radio-checked-bgNullnullnull
Description
The background color of the checked RadioButton.
$kendo-radio-checked-textColor$kendo-color-primary#3f51b5
Description
The color of the checked RadioButton.
$kendo-radio-checked-borderColor$kendo-radio-checked-text#3f51b5
Description
The border color of the checked RadioButton.
$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull
Description
The border color of the focused RadioButton.
$kendo-radio-focus-shadowNull$kendo-checkbox-focus-shadownull
Description
The box shadow of the focused RadioButton.
$kendo-radio-focus-checked-borderNull$kendo-checkbox-focus-checked-bordernull
Description
The border color of the focused and checked RadioButton.
$kendo-radio-focus-checked-shadowNull$kendo-checkbox-focus-checked-shadownull
Description
The box shadow of the focused and checked RadioButton.
$kendo-radio-disabled-bgNullnullnull
Description
The background color of the disabled RadioButton.
$kendo-radio-disabled-textNullnullnull
Description
The color of the disabled RadioButton.
$kendo-radio-disabled-borderColor$kendo-checkbox-disabled-border#adadad
Description
The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bgNullnullnull
Description
The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-textColor$kendo-radio-disabled-border#adadad
Description
The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-borderColor$kendo-radio-disabled-border#adadad
Description
The border color of disabled and checked RadioButton.
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull
Description
The background color of the invalid RadioButton.
$kendo-radio-invalid-textColor$kendo-checkbox-invalid-text#f31700
Description
The color of the invalid RadioButton.
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#f31700
Description
The border color of the invalid RadioButton.
$kendo-radio-indicator-typeStringimageimage
Description
The type of the RadioButton indicator.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The font family of the RadioButton indicator glyph.
$kendo-radio-checked-glyphString"\e308""\e308"
Description
The glyph of the RadioButton indicator.
$kendo-radio-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 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e")
Description
The image of the checked RadioButton indicator.
$kendo-radio-disabled-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 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23adadad'/%3e%3c/svg%3e")
Description
The image of the disabled and checked RadioButton indicator.
$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-xNumber0px0px
Description
The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bgColor$kendo-color-primary#3f51b5
Description
The background color of the RadioButton ripple..
$kendo-radio-ripple-opacityNumber.20.2
Description
The opacity of the RadioButton ripple.

Scrollview

NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
Description
The width of the border around the ScrollView.
$kendo-scrollview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the ScrollView.
$kendo-scrollview-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ScrollView.
$kendo-scrollview-line-heightNumber$kendo-line-height-md2
Description
The line height of the ScrollView.
$kendo-scrollview-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the ScrollView.
$kendo-scrollview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ScrollView.
$kendo-scrollview-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The border color of the ScrollView.
$kendo-scrollview-pagebutton-sizeNumber10px10px
Description
The size of the ScrollView page button.
$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#ffffff
Description
The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-borderColor$kendo-button-border#ffffff
Description
The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#3f51b5
Description
The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#3f51b5
Description
The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the ScrollView page button.
$kendo-scrollview-pager-offsetNumber00
Description
The offset of the ScrollView pager.
$kendo-scrollview-pager-item-spacingNumber20px20px
Description
The spacing between the ScrollView pager items.
$kendo-scrollview-pager-item-border-widthNumber0px0px
Description
The border width of the ScrollView pager items.
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc( 10px + 0px + 40px )
Description
The height of the ScrollView pager.
$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
$kendo-scrollview-navigation-colorColorwhitewhite
Description
The color of the ScrollView navigation arrows.
$kendo-scrollview-navigation-icon-shadowListrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px
Description
The box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-bgColorrgba( black, 0 )rgba(0, 0, 0, 0)
Description
The background color of the ScrollView navigation.
$kendo-scrollview-navigation-default-opacityNumber.70.7
Description
The opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-opacityNumber11
Description
The hover opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-span-bgNullnullnull
Description
The hover background color of the ScrollView navigation arrows.
$kendo-scrollview-light-bgColorrgba( white, .4 )rgba(255, 255, 255, 0.4)
Description
The background color of the ScrollView pager in light mode.
$kendo-scrollview-dark-bgColorrgba( black, .4 )rgba(0, 0, 0, 0.4)
Description
The background color of the ScrollView pager in dark mode.
$kendo-scrollview-transition-durationNumber.3s0.3s
Description
The duration of the ScrollView transition.
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out
Description
The timing function of the ScrollView transition.

Shadows

NameTypeDefault valueComputed value
$elevationColork-map-get( $theme, elevation )#000000
Description
Color of shadows
$box-shadow-depth-1Stringk-elevation(1)var(--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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for switch.
Equivalent to material elevation 1.
$box-shadow-depth-2Stringk-elevation(2)var(--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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$box-shadow-depth-3Stringk-elevation(3)var(--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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 3.
$box-shadow-depth-4Stringk-elevation(4)var(--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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for drawers and other overlaying elements.
Equivalent to material elevation 4.
$box-shadow-depth-5Stringk-elevation(5)var(--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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 6.
$box-shadow-depth-6Stringk-elevation(6)var(--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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 8.
$box-shadow-depth-7Stringk-elevation(7)var(--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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 12.
$box-shadow-depth-8Stringk-elevation(8)var(--kendo-elevation-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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 16.
$box-shadow-depth-9Stringk-elevation(9)var(--kendo-elevation-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))
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 24.

Split-button

NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowNull$kendo-button-focus-shadownull
Description
The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y8px
Description
The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y6px
Description
The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y8px
Description
The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y10px
Description
The vertical padding of the large arrow Button.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
$kendo-switch-track-border-widthNullnullnull
Description
The border width of the Switch track.
$kendo-switch-thumb-border-widthNullnullnull
Description
The border width of the Switch thumb.
$kendo-switch-label-text-transformNullnullnull
Description
The text transform of the Switch label.
$kendo-switch-label-displayStringnonenone
Description
The display of the Switch label.
$kendo-switch-sizesMap( sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ), md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ), lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px ) )(sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px))
Description
The map with the different Switch sizes.
$kendo-switch-off-track-bgColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 )rgba(0, 0, 0, 0.38)
Description
The background of the track when the Switch is not checked.
$kendo-switch-off-track-textNullnullnull
Description
The text color of the track when the Switch is not checked.
$kendo-switch-off-track-borderNullnullnull
Description
The border color of the track when the Switch is not checked
$kendo-switch-off-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-ringNullnullnull
Description
The ring around the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bgNullnullnull
Description
The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bgColorif( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )#ffffff
Description
The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-textNullnullnull
Description
The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-borderNullnullnull
Description
The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-gradientNullnullnull
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-switch-on-track-bgColorrgba( $kendo-color-primary, .54 )rgba(63, 81, 181, 0.54)
Description
The background of the track when the Switch is checked.
$kendo-switch-on-track-textNullnullnull
Description
The text color of the track when the Switch is checked.
$kendo-switch-on-track-borderNullnullnull
Description
The border color of the track when the Switch is checked.
$kendo-switch-on-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is checked.
$kendo-switch-on-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-ringNullnullnull
Description
The ring around the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bgNullnullnull
Description
The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bgColor$kendo-color-primary#3f51b5
Description
The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-textNullnullnull
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-borderNullnullnull
Description
The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-gradientNullnullnull
Description
The background gradient of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bgNullnullnull
Description
The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is checked.

Table

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
$kendo-table-cell-vertical-border-widthNumber1px1px
Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber1px1px
Description
The width of horizontal border of table cells.
$kendo-table-font-sizeNullnullnull
Description
The font size of the table if no size is specified.
$kendo-table-line-heightNullnullnull
Description
The line-height of the table if no size is specified.
$kendo-table-cell-padding-xNullnullnull
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-yNullnullnull
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizesMap( sm: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )(sm: (font-size: 14px, line-height: 2, cell-padding-x: 10px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px), lg: (font-size: 14px, line-height: 2, cell-padding-x: 24px, cell-padding-y: 10px))
Description
The sizes of the table.
$kendo-table-bgColor$kendo-component-bg#ffffff
Description
Background color of tables.
$kendo-table-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of tables.
$kendo-table-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of tables.
$kendo-table-header-bgColor$kendo-table-bg#ffffff
Description
Background color of table headers.
$kendo-table-header-textColorif( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )rgba(0, 0, 0, 0.54)
Description
Text color of table headers.
$kendo-table-header-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)
Description
Border color of table headers.
$kendo-table-header-gradientNullnullnull
Description
Gradient of table headers.
$kendo-table-footer-bgColor$kendo-table-header-bg#ffffff
Description
Background color of table footers.
$kendo-table-footer-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)
Description
Text color of table footers.
$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)
Description
Border color of table footers.
$kendo-table-group-row-bgColor$kendo-table-header-bg#ffffff
Description
Background color of group rows in table.
$kendo-table-group-row-textColor$kendo-table-header-textrgba(0, 0, 0, 0.54)
Description
Text color of group rows in table.
$kendo-table-group-row-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.12)
Description
Border color of group rows in table.
$kendo-table-alt-row-bgColortransparenttransparent
Description
Background color of alternating rows in table.
$kendo-table-alt-row-textNullnullnull
Description
Text color of alternating rows in table.
$kendo-table-alt-row-borderNullnullnull
Description
Border color of alternating rows in table.
$kendo-table-hover-bgColorrgba( k-contrast-color( $kendo-table-bg ), .07 )rgba(0, 0, 0, 0.07)
Description
Background color of hovered rows in table.
$kendo-table-hover-textNullnullnull
Description
Text color of hovered rows in table.
$kendo-table-hover-borderColor$kendo-table-borderrgba(0, 0, 0, 0.12)
Description
Border color of hovered rows in table.
$kendo-table-focus-bgNullnullnull
Description
Background color of focused rows in table.
$kendo-table-focus-textNullnullnull
Description
Text color of focused rows in table.
$kendo-table-focus-borderNullnullnull
Description
Border color of focused rows in table.
$kendo-table-focus-shadowNull$kendo-list-item-focus-shadownull
Description
Box shadow of focused rows in table.
$kendo-table-selected-bgColorrgba( k-contrast-color( $kendo-table-bg ), .04 )rgba(0, 0, 0, 0.04)
Description
Background color of selected rows in table.
$kendo-table-selected-textNullnullnull
Description
Text color of selected rows in table.
$kendo-table-selected-borderNullnullnull
Description
Border color of selected rows in table.

Tabstrip

NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
Description
Background color of tabstrip component
$kendo-tabstrip-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
Text color of tabstrip component
$kendo-tabstrip-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of tabstrip component
$kendo-tabstrip-item-padding-xNumber24px24px
Description
Horizontal padding of tabs
$kendo-tabstrip-item-padding-yNumber14px14px
Description
Vertical padding of tabs
$kendo-tabstrip-item-border-widthNumber0px0px
Description
Width of border around of tabs
$kendo-tabstrip-item-border-radiusNumber0px0px
Description
Border radius of tabs
$kendo-tabstrip-item-gapNumber0px0px
Description
Spacing between tabs
$kendo-tabstrip-item-bgNullnullnull
Description
Background color of tabs
$kendo-tabstrip-item-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
Text color of tabs
$kendo-tabstrip-item-borderNullnullnull
Description
Border color of tabs
$kendo-tabstrip-item-gradientNullnullnull
Description
Background gradient of tabs
$kendo-tabstrip-item-hover-bgColor$kendo-hover-bgrgba(0, 0, 0, 0.04)
Description
Background color of hovered tabs
$kendo-tabstrip-item-hover-textColor$kendo-body-textrgba(0, 0, 0, 0.87)
Description
Text color of hovered tabs
$kendo-tabstrip-item-hover-borderNullnullnull
Description
Border color of hovered tabs
$kendo-tabstrip-item-hover-gradientNullnullnull
Description
Background gradient of hovered tabs
$kendo-tabstrip-item-selected-bgNullnullnull
Description
Background color of selected tabs
$kendo-tabstrip-item-selected-textColor$kendo-body-textrgba(0, 0, 0, 0.87)
Description
Text color of selected tabs
$kendo-tabstrip-item-selected-borderNullnullnull
Description
Border color of selected tabs
$kendo-tabstrip-item-selected-gradientNullnullnull
Description
Background gradient of selected tabs
$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
Vertical padding of tabstrip content
$kendo-tabstrip-content-border-widthNumber0px0px
Description
Width of border around tabstrip content
$kendo-tabstrip-content-bgColortransparenttransparent
Description
Background color of tabstrip content
$kendo-tabstrip-content-textNullnullnull
Description
Text color of tabstrip content
$kendo-tabstrip-content-borderNullnullnull
Description
Border color of tabstrip content
$kendo-tabstrip-content-focus-borderColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Border color of tabstrip focused content

Tilelayout

NameTypeDefault valueComputed value
$kendo-tile-layout-border-widthNumber0px0px
Description
The width of the border around the TileLayout.
$kendo-tile-layout-bgColorif( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)#f5f5f5
Description
The background color of the TileLayout.
$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-yNumber$kendo-tile-layout-padding-x16px
Description
The vertical padding of the TileLayout
$kendo-tile-layout-card-border-widthNumber1px1px
Description
The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--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 focus box shadow of the TileLayout card.
$kendo-tile-layout-hint-border-widthNumber1px1px
Description
The width of the border around the TileLayout hint.
$kendo-tile-layout-hint-border-radiusNumber$kendo-border-radius-md4px
Description
The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The background color of the TileLayout hint.

Toolbar

NameTypeDefault valueComputed value
$kendo-toolbar-padding-xNullnullnull
Description
The horizontal padding of the Toolbar.
$kendo-toolbar-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The horizontal padding of the large Toolbar.
$kendo-toolbar-padding-yNullnullnull
Description
The vertical padding of the Toolbar.
$kendo-toolbar-sm-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-yNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The vertical padding of the large Toolbar.
$kendo-toolbar-spacingNullnullnull
Description
The spacing between the Toolbar tools.
$kendo-toolbar-sm-spacingNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacingNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The spacing between the tools of the large Toolbar.
$kendo-toolbar-border-widthNumber00
Description
The width of the border around the Toolbar.
$kendo-toolbar-border-radiusNullnullnull
Description
The border radius of the Toolbar.
$kendo-toolbar-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Toolbar.
$kendo-toolbar-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Toolbar.
$kendo-toolbar-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the Toolbar.
$kendo-toolbar-bgColor$kendo-component-bg#ffffff
Description
The background color of the Toolbar.
$kendo-toolbar-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the Toolbar.
$kendo-toolbar-borderNullnullnull
Description
The color of the border around the Toolbar.
$kendo-toolbar-gradientNullnullnull
Description
The gradient of the Toolbar.
$kendo-toolbar-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 Toolbar.
$kendo-toolbar-separator-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The color of the separator border of the Toolbar.
$kendo-toolbar-input-widthNumber10em10em
Description
The width of the input in the Toolbar.
$kendo-toolbar-item-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 Toolbar item.
$kendo-toolbar-flat-border-widthNumber1px1px
Description
Border width of the flat Toolbar.
$kendo-toolbar-sizesMap( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )(sm: (padding-x: 4px, padding-y: 4px, spacing: 6px), md: (padding-x: 8px, padding-y: 8px, spacing: 8px), lg: (padding-x: 10px, padding-y: 10px, spacing: 10px))
Description
The sizes map for the Toolbar.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the TreeView.
$kendo-treeview-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the TreeView.
$kendo-treeview-sm-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the small TreeView.
$kendo-treeview-md-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium TreeView.
$kendo-treeview-lg-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the large TreeView.
$kendo-treeview-line-heightNumber1.251.25
Description
The line height of the TreeView.
$kendo-treeview-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the small TreeView.
$kendo-treeview-md-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the medium TreeView.
$kendo-treeview-lg-line-heightNumber1.51.5
Description
The line height of the large TreeView.
$kendo-treeview-indentNumber24px24px
Description
The indentation of child groups in the TreeView.
$kendo-treeview-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the TreeView items.
$kendo-treeview-sm-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the large TreeView items.
$kendo-treeview-item-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the TreeView items.
$kendo-treeview-sm-item-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the large TreeView items.
$kendo-treeview-item-border-widthNumber0px0px
Description
The border width of the TreeView items.
$kendo-treeview-item-border-radiusNullnullnull
Description
The border radius of the TreeView items.
$kendo-treeview-sm-checkbox-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-xNumber$kendo-treeview-sm-checkbox-padding-x4px
Description
The horizontal padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-xNumber$kendo-treeview-sm-checkbox-padding-x4px
Description
The horizontal padding of the checkbox in the large TreeView.
$kendo-treeview-sm-checkbox-padding-yNumberk-map-get( $kendo-spacing, .5 )2px
Description
The vertical padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-yNumber$kendo-treeview-sm-checkbox-padding-y2px
Description
The vertical padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-yNullnullnull
Description
The vertical padding of the checkbox in the large TreeView.
$kendo-treeview-sizesMap( sm: ( font-size: $kendo-treeview-sm-font-size, line-height: $kendo-treeview-sm-line-height, item-padding-x: $kendo-treeview-sm-item-padding-x, item-padding-y: $kendo-treeview-sm-item-padding-y, checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y ), md: ( font-size: $kendo-treeview-md-font-size, line-height: $kendo-treeview-md-line-height, item-padding-x: $kendo-treeview-md-item-padding-x, item-padding-y: $kendo-treeview-md-item-padding-y, checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y ), lg: ( font-size: $kendo-treeview-lg-font-size, line-height: $kendo-treeview-lg-line-height, item-padding-x: $kendo-treeview-lg-item-padding-x, item-padding-y: $kendo-treeview-lg-item-padding-y, checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y ) )(sm: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 6px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 8px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 16px, item-padding-y: 8px, checkbox-padding-x: 4px, checkbox-padding-y: null))
Description
The sizes map of the TreeView.
$kendo-treeview-bgNullnullnull
Description
The background color of the TreeView.
$kendo-treeview-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
The text color of the TreeView.
$kendo-treeview-borderNullnullnull
Description
The border color of the TreeView.
$kendo-treeview-item-hover-bgColorrgba( $kendo-treeview-text, .07 )rgba(0, 0, 0, 0.07)
Description
The background color of hovered TreeView.
$kendo-treeview-item-hover-textNullnullnull
Description
The text color of hovered TreeView items.
$kendo-treeview-item-hover-borderNullnullnull
Description
The border color of hovered TreeView items.
$kendo-treeview-item-hover-gradientNullnullnull
Description
The background gradient of hovered TreeView items.
$kendo-treeview-item-selected-bgNullnullnull
Description
The background color of selected TreeView items.
$kendo-treeview-item-selected-textColor$kendo-selected-bg#e51a5f
Description
The text color of selected TreeView items.
$kendo-treeview-item-selected-borderNullnullnull
Description
The border color of selected TreeView items.
$kendo-treeview-item-selected-gradientNullnullnull
Description