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-input-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of input components.
@group input

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber1px1px
Description
Border width of the avatar.
$kendo-avatar-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the avatar.
$kendo-avatar-font-sizeNumber$kendo-font-size-md14px
Description
Font size of the avatar.
$kendo-avatar-line-heightNumber$kendo-line-height-md2
Description
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 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
Theme colors map of the avatar.

Badge

NameTypeDefault valueComputed value
$kendo-badge-border-widthNumber1px1px
Description
Width of the border around the badge.
$kendo-badge-border-radiusNumber$kendo-border-radius-md4px
Description
Border radius of the badge.
$kendo-badge-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
Horizontal padding of the badge.
$kendo-badge-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
Vertical padding of the badge.
$kendo-badge-font-sizeNumber$kendo-font-size-xs10px
Description
Font sizes of the badge.
$kendo-badge-line-heightNumber11
Description
Line heights used along with $kendo-font-size.
$kendo-badge-min-widthCalculationcalc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2})calc( 1em + 8px + 2px)
Description
Badge min width used for circle 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
Sizes map for the badge.

Button

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber1px1px
Description
Width of the border around the button.
$kendo-button-border-radiusNullnullnull
Description
Border radius of the button.
$kendo-button-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of the button.
$kendo-button-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
Vertical padding of the button.
$kendo-button-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the button.
$kendo-button-font-sizeNumber$kendo-font-size-md14px
Description
Font sizes of the button.
$kendo-button-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
Line heights used along with $kendo-font-size.
$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
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
Calculated inner height of the button. Without the border width.
$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
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-shadowList$box-shadow-depth-20 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
Description
The base shadow of the button.
$kendo-button-hover-bgNullnullnull
Description
The base background of hovered button.
$kendo-button-hover-textNullnullnull
Description
The base text color of hovered button.
$kendo-button-hover-borderNullnullnull
Description
The base border color of hovered button.
$kendo-button-hover-gradientNullnullnull
Description
The base background gradient of hovered button.
$kendo-button-hover-shadowNullnullnull
Description
The base shadow of hovered button.
$kendo-button-active-bgNullnullnull
Description
The base background color of active button.
$kendo-button-active-textNullnullnull
Description
The base text color of active button.
$kendo-button-active-borderNullnullnull
Description
The base border color of active button.
$kendo-button-active-gradientNullnullnull
Description
The base background gradient of active button.
$kendo-button-active-shadowList$box-shadow-depth-30 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)
Description
The base shadow of active button.
$kendo-button-selected-bgNull$kendo-button-active-bgnull
Description
The base background color of selected button.
$kendo-button-selected-textNull$kendo-button-active-textnull
Description
The base text color of selected button.
$kendo-button-selected-borderNull$kendo-button-active-bgnull
Description
The base border color of selected button.
$kendo-button-selected-gradientNullnullnull
Description
The base background gradient of selected button.
$kendo-button-selected-shadowNullnullnull
Description
The base shadow of selected button.
$kendo-button-focus-bgNullnullnull
Description
The base background of focused button.
$kendo-button-focus-textNullnullnull
Description
The base text color of focused button.
$kendo-button-focus-borderNullnullnull
Description
The base border color of focused button.
$kendo-button-focus-gradientNullnullnull
Description
The base background gradient of focused button.
$kendo-button-focus-shadowNullnullnull
Description
The base shadow of focused buttons.
$kendo-button-disabled-bgColork-try-shade( $kendo-body-bg, 12% )#e0e0e0
Description
The base background color of disabled button.
$kendo-button-disabled-textColor$kendo-disabled-textrgba(0, 0, 0, 0.38)
Description
The base text color of disabled button.
$kendo-button-disabled-borderColor$kendo-button-disabled-bg#e0e0e0
Description
The base border color of disabled button.
$kendo-button-disabled-gradientNullnullnull
Description
The base background gradient of disabled button.
$kendo-button-disabled-shadowStringnonenone
Description
The base shadow of disabled button.
$kendo-flat-button-hover-opacityNumber.080.08
Description
The overlay opacity of hovered flat button. Used to create background for the flat button.
$kendo-flat-button-focus-opacityNumber.120.12
Description
The overlay opacity of focused flat button. Used to create background for the flat button.
$kendo-flat-button-active-opacityNumber.160.16
Description
The overlay opacity of active flat button. Used to create background for the flat button.
$kendo-flat-button-selected-opacityNumber.220.22
Description
The overlay opacity of selected flat button. Used to create background for the flat button.
$kendo-flat-button-focus-ring-opacityNullnullnull
Description
The opacity of the flat button focus ring. Used to create 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 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
Border width of checkbox.
$kendo-checkbox-bgNullnullnull
Description
Background color of checkbox.
$kendo-checkbox-textNullnullnull
Description
Color of checkbox.
$kendo-checkbox-borderColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )rgba(0, 0, 0, 0.54)
Description
Border color of checkbox.
$kendo-checkbox-hover-bgNullnullnull
Description
Background color of hovered checkbox.
$kendo-checkbox-hover-textNullnullnull
Description
Color of hovered checkbox.
$kendo-checkbox-hover-borderNullnullnull
Description
Border color of hovered checkbox.
$kendo-checkbox-checked-bgColor$kendo-color-primary#3f51b5
Description
Background color of checked checkbox.
$kendo-checkbox-checked-textColork-contrast-color( $kendo-checkbox-checked-bg )white
Description
Color of checked checkbox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#3f51b5
Description
Border color of checked checkbox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#3f51b5
Description
Background color of indeterminate checkbox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite
Description
Color of indeterminate checkbox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#3f51b5
Description
Border color of indeterminate checkbox.
$kendo-checkbox-focus-borderNullnullnull
Description
Border color of focused checkbox.
$kendo-checkbox-focus-shadowNullnullnull
Description
Box shadow of focused checkbox.
$kendo-checkbox-focus-checked-borderNullnullnull
Description
Border color of focused and checked checkbox.
$kendo-checkbox-focus-checked-shadowNullnullnull
Description
Box shadow of focused and checked checkbox.
$kendo-checkbox-disabled-bgNullnullnull
Description
Background color of disabled checkbox.
$kendo-checkbox-disabled-textNullnullnull
Description
Color of disabled checkbox.
$kendo-checkbox-disabled-borderColork-try-shade( $kendo-component-bg, 4 )#adadad
Description
Border color of disabled checkbox.
$kendo-checkbox-disabled-checked-bgColor$kendo-checkbox-disabled-border#adadad
Description
Background color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-textColork-contrast-color( $kendo-checkbox-disabled-checked-bg )black
Description
Color of disabled and checked checkbox.
$kendo-checkbox-disabled-checked-borderColor$kendo-checkbox-disabled-checked-bg#adadad
Description
Border color of disabled and checked checkbox.
$kendo-checkbox-invalid-bgNullnullnull
Description
Background color of invalid checkbox.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#f31700
Description
Color of invalid checkbox.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#f31700
Description
Border color of invalid checkbox.
$kendo-checkbox-indicator-typeStringimageimage
Description
Type of checkbox indicator.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
Glyph font family of checkbox indicator.
$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
Glyph of checkbox indicator.
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
Glyph of 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
Image of 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
Image of checked 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
Spacing between items of horizontal checkbox list.
$kendo-checkbox-list-item-padding-xNumber0px0px
Description
Horizontal padding of checkbox list items.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
Vertical padding of checkbox list items.
$kendo-checkbox-ripple-bgColor$kendo-color-primary#3f51b5
Description
Background color of checkbox ripple.
$kendo-checkbox-ripple-opacityNumber.20.2
Description
Opacity of checkbox ripple.

Chip

NameTypeDefault valueComputed value
$kendo-chip-border-widthNumber1px1px
Description
Width of the border around the button.
$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
Horizontal padding of the chip.
$kendo-chip-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
Vertical padding of the chip.
$kendo-chip-font-sizeNumber$kendo-font-size-md14px
Description
Font sizes of the chip.
$kendo-chip-line-heightNumberk-math-div( 18, 14 )1.2857142857
Description
Line heights of the chip that are connected 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
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
Sizes map for 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
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 solid chip.
$kendo-chip-solid-textColor$kendo-button-textrgba(0, 0, 0, 0.87)
Description
The base text color of solid chip.
$kendo-chip-solid-borderColor$kendo-chip-solid-bg#ebebeb
Description
The base border color of solid chip.
$kendo-chip-solid-shadowNullnullnull
Description
The base shadow of solid chip.
$kendo-chip-solid-gradientNull$kendo-button-gradientnull
Description
The base gradient of solid chip.
$kendo-chip-solid-focus-bgColork-try-tint( $kendo-chip-base-bg, 80% )#cccccc
Description
The base background color of focused solid chip.
$kendo-chip-solid-focus-textNullnullnull
Description
The base text color of focused solid chip.
$kendo-chip-solid-hover-bgColork-try-tint( $kendo-chip-base-bg, 84% )#d6d6d6
Description
The base background color of hovered solid chip.
$kendo-chip-solid-hover-textNullnullnull
Description
The base text color of hovered solid chip.
$kendo-chip-solid-selected-bgColork-try-tint( $kendo-chip-base-bg, 76% )#c2c2c2
Description
The base background color of selected solid chip.
$kendo-chip-solid-selected-textNullnullnull
Description
The base text color of selected solid chip.
$kendo-chip-outline-bgColor$kendo-component-bg#ffffff
Description
The base background color of outline chip.
$kendo-chip-outline-textColor$kendo-chip-solid-textrgba(0, 0, 0, 0.87)
Description
The base text color of outline chip.
$kendo-chip-outline-borderColor$kendo-chip-outline-textrgba(0, 0, 0, 0.87)
Description
The base border color of outline chip.
$kendo-chip-outline-shadowNullnullnull
Description
The base shadow of outline chip.
$kendo-chip-outline-hover-bgColork-try-tint( $kendo-chip-base-bg, 92% )#ebebeb
Description
The base background color of hovered outline chip.
$kendo-chip-outline-hover-textColork-contrast-color( $kendo-chip-outline-hover-bg )black
Description
The base text color of hovered outline chip.
$kendo-chip-outline-selected-bgColork-try-tint( $kendo-chip-base-bg, 84% )#d6d6d6
Description
The base background color of selected outline chip.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textblack
Description
The base text color of 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.

Color System

NameTypeDefault valueComputed 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

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-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
Theme colors map for the dialog.

Floating-action-button

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber0px0px
Description
Width of the border around the FAB.
$kendo-fab-border-radiusNumber$kendo-border-radius-md4px
Description
Border radius of the FAB.
$kendo-fab-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the FAB.
$kendo-fab-font-sizeNumber$kendo-font-size-md14px
Description
Font size of the FAB.
$kendo-fab-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
Line height of the FAB.
$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of the FAB.
$kendo-fab-padding-yNumber$kendo-fab-padding-x16px
Description
Vertical padding of the FAB.
$kendo-fab-icon-widthNumber20px20px
Description
FAB icon width.
$kendo-fab-icon-heightNumber$kendo-fab-icon-width20px
Description
FAB icon height.
$kendo-fab-icon-spacingNumberk-map-get( $kendo-spacing, 1 ) * 1.56px
Description
FAB icon spacing.
$kendo-fab-items-padding-xNumber0px0px
Description
FAB items horizontal padding.
$kendo-fab-items-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
FAB items vertical padding.
$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
FAB item text horizontal padding.
$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x4px
Description
FAB item text vertical padding.
$kendo-fab-item-text-border-widthNumber1px1px
Description
Width of the FAB item text border.
$kendo-fab-item-text-border-radiusNumber2px2px
Description
Border radius of the FAB item text.
$kendo-fab-item-text-font-sizeNumber$kendo-font-size-xs10px
Description
Font size of the FAB item text.
$kendo-fab-item-text-line-heightNumber1.21.2
Description
Line height of the FAB item text.
$kendo-fab-item-icon-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
FAB item icon horizontal padding.
$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x8px
Description
FAB item icon vertical padding.
$kendo-fab-item-icon-border-widthNumber00
Description
Width of the FAB item icon border.
$kendo-fab-item-icon-border-radiusNumber50%50%
Description
Border radius of the FAB item icon.
$kendo-fab-item-icon-widthNumber20px20px
Description
Width of the FAB item icon.
$kendo-fab-item-icon-heightNumber$kendo-fab-item-icon-width20px
Description
Height 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
Theme colors map for the FAB.
$kendo-fab-shadowList0px 3px 5px -1px rgba( black, .2 ), 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 )0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)
Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowList0px 3px 5px -1px k-try-tint( rgba( black, .2 ), .5 ), 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 )0px 3px 5px -1px rgba(70, 70, 70, 0.232), 0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552)
Description
The disabled shadow of the FAB.
$kendo-fab-active-shadowList0px 5px 5px -3px rgba( black, .2 ), 0px 8px 10px 1px rgba( black, .14 ), 0px 3px 14px 2px rgba( black, .12 )0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
Description
The active shadow of the 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-shadowList$kendo-fab-shadow0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)
Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowList$kendo-fab-disabled-shadow0px 3px 5px -1px rgba(70, 70, 70, 0.232), 0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552)
Description
The disabled shadow of the FAB item.
$kendo-fab-item-active-shadowList$kendo-fab-active-shadow0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
Description
The active shadow of the FAB item.

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

Input

NameTypeDefault valueComputed value
$kendo-input-default-widthNumber100%100%
Description
Default width of input components.
$kendo-input-border-widthNumber1px1px
Description
Border width of input components.
$kendo-input-border-radiusNullnullnull
Description
Border radius of input components.
$kendo-input-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of input components.
$kendo-input-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
Vertical padding of input components.
$kendo-input-font-sizeNumber$kendo-font-size-lg16px
Description
Font size of input components.
$kendo-input-line-heightNumber1.251.25
Description
Line height of input components.

List

NameTypeDefault valueComputed value
$kendo-list-font-sizeNullnullnull
Description
Font size of the list component, if no size is set.
$kendo-list-line-heightNullnullnull
Description
Line height of the list component, if no size is set.
$kendo-list-header-padding-xNullnullnull
Description
Horizontal padding of list header, if no size is set.
$kendo-list-header-padding-yNullnullnull
Description
Vertical padding of list header, if no size is set.
$kendo-list-header-border-widthList0 0 1px0 0 1px
Description
Border width of list header.
$kendo-list-header-font-sizeNullnullnull
Description
Font size of list header, if no size is set.
$kendo-list-header-line-heightNullnullnull
Description
Line height of list header, if no size is set.
$kendo-list-header-font-weightNullnullnull
Description
Font weight of list header.
$kendo-list-item-padding-xNullnullnull
Description
Horizontal padding of list items, when no size is set.
$kendo-list-item-padding-yNullnullnull
Description
Vertical padding of list items, when no size is set.
$kendo-list-item-font-sizeNullnullnull
Description
Font size of list items, if no size is set.
$kendo-list-item-line-heightNullnullnull
Description
Line height of list items, if no size is set.
$kendo-list-group-item-padding-xNullnullnull
Description
Horizontal padding of list group items, when no size is set.
$kendo-list-group-item-padding-yNullnullnull
Description
Vertical padding of list group items, when no size is set.
$kendo-list-group-item-border-widthList1px 0 01px 0 0
Description
Border width of list group items.
$kendo-list-group-item-font-sizeNullnullnull
Description
Font size of list group items, if no size is set.
$kendo-list-group-item-line-heightNullnullnull
Description
Line height of list group items, if no size is set.
$kendo-list-group-item-font-weightNullnullnull
Description
Font weight of list group item.
$kendo-list-bgColor$kendo-component-bg#ffffff
Description
Background color of the list component.
$kendo-list-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of the list component.
$kendo-list-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of the list component.
$kendo-list-header-bgNullnullnull
Description
Background color of list header.
$kendo-list-header-textNullnullnull
Description
Text color of list header.
$kendo-list-header-borderStringinheritinherit
Description
Border color of list header.
$kendo-list-header-shadowNullnullnull
Description
Box shadow of list header.
$kendo-list-item-bgNullnullnull
Description
Background color of list items.
$kendo-list-item-textNullnullnull
Description
Text color of list items.
$kendo-list-item-hover-bgColor$kendo-hover-bgrgba(0, 0, 0, 0.04)
Description
Background color of hovered list items.
$kendo-list-item-hover-textColor$kendo-hover-textrgba(0, 0, 0, 0.87)
Description
Text color of hovered list items.
$kendo-list-item-focus-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
Background color of focused list items.
$kendo-list-item-focus-textNullnullnull
Description
Text color of focused list items.
$kendo-list-item-focus-shadowNullnullnull
Description
Box shadow of focused list items.
$kendo-list-item-selected-bgColor$kendo-component-bg#ffffff
Description
Background color of selected list items.
$kendo-list-item-selected-textColor$kendo-color-secondary#e51a5f
Description
Text color of selected list items.
$kendo-list-group-item-bgNullnullnull
Description
Background color of list group items.
$kendo-list-group-item-textNullnullnull
Description
Text color of list group items.
$kendo-list-group-item-borderStringinheritinherit
Description
The border color of list group items.
$kendo-list-group-item-shadowNullnullnull
Description
The base shadow of list group items.
$kendo-list-no-data-textColor$kendo-subtle-textrgba(0, 0, 0, 0.54)
Description
Text color of the 'No Data' text.

Listbox

NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 3 )12px
Description
Margin between the listbox elements.
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
Margin between the listbox buttons.
$kendo-listbox-widthNumber10em10em
Description
Width of the listbox.
$kendo-listbox-default-heightNumber200px200px
Description
Height of the listbox.
$kendo-listbox-border-widthNumber1px1px
Description
Width of the border around the listbox.
$kendo-listbox-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the listbox.
$kendo-listbox-font-sizeNumber$kendo-list-md-font-size14px
Description
Font size of the listbox.
$kendo-listbox-line-heightNumber$kendo-list-md-line-height1.4285714286
Description
Line height of the listbox.
$kendo-listbox-bgColor$kendo-component-bg#ffffff
Description
Background color of the listbox.
$kendo-listbox-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of the listbox.
$kendo-listbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of the listbox.
$kendo-listbox-item-padding-xNumber$kendo-list-md-item-padding-x16px
Description
Inline item padding of the listbox.
$kendo-listbox-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
Block item padding of the listbox.
$kendo-listbox-drop-hint-border-widthNumber2px2px
Description
Width of the border around the drop hint.
$kendo-listbox-drop-hint-widthNumber2px2px
Description
Width of the drop hint.

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
Horizontal padding of the arrow button.

Notification

NameTypeDefault valueComputed value
$kendo-notification-padding-xNumber16px16px
Description
Vertical padding of the notification container.
$kendo-notification-padding-yNumber14px14px
Description
Horizontal padding of the notification.
$kendo-notification-border-widthNumber0px0px
Description
Width of the border around the notification.
$kendo-notification-border-radiusNumberk-map-get( $kendo-spacing, 1 )4px
Description
Border radius of the notification.
$kendo-notification-shadowList$kendo-popup-shadow0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)
Description
Box shadow of the notification.
$kendo-notification-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the notification.
$kendo-notification-font-sizeNumber$kendo-font-size-md14px
Description
Font size of the notification.
$kendo-notification-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
Line height of the notification.
$kendo-notification-icon-spacingNumber$kendo-icon-spacing8px
Description
Horizontal spacing of the notification icon.
$kendo-notification-bgColor$kendo-component-bg#ffffff
Description
Background color of the notification.
$kendo-notification-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of the notification.
$kendo-notification-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of the notification.
$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
Theme colors of the notification.

Pager

NameTypeDefault valueComputed value
$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
Horizontal padding of the pager according to the pager size.
$kendo-pager-padding-yNumber$kendo-pager-padding-x8px
Description
Vertical padding of the pager according to the pager size.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc( 1.4285714286em + 12px + 2px )
Description
Minimum width of the pager items according to the pager size.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
Margin between pager item groups according to the pager size.
$kendo-pager-border-widthNumber1px1px
Description
Border width of the pager.
$kendo-pager-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the pager.
$kendo-pager-font-sizeNumber$kendo-font-size-md14px
Description
Font size of the pager.
$kendo-pager-line-heightNumber$kendo-line-height-md2
Description
Line height of the pager.
$kendo-pager-bgColor$kendo-component-bg#ffffff
Description
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
Text color of the pager.
$kendo-pager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
Border color of the pager.
$kendo-pager-focus-bgColork-try-shade( $kendo-pager-bg, .5 )whitesmoke
Description
Background color of the focused pager.
$kendo-pager-focus-shadowNullnullnull
Description
Box shadow of the focused pager.
$kendo-pager-section-spacingNumber$kendo-pager-padding-x8px
Description
Spacing between the pager sections.
$kendo-pager-item-border-widthNumber0px0px
Description
Border width of the pager items.
$kendo-pager-item-border-radiusNumber5em5em
Description
Border radius of the pager items.
$kendo-pager-item-spacingNumber0px0px
Description
Spacing around the pager items.
$kendo-pager-item-bgNullnullnull
Description
Background color of the pager items.
$kendo-pager-item-textNullnullnull
Description
Text color of the pager items.
$kendo-pager-item-borderNullnullnull
Description
Border color of the pager items.
$kendo-pager-item-hover-bgColor$kendo-list-item-hover-bgrgba(0, 0, 0, 0.04)
Description
Background color of the hovered pager items.
$kendo-pager-item-hover-textColor$kendo-pager-textrgba(0, 0, 0, 0.54)
Description
Text color of the hovered pager items.
$kendo-pager-item-hover-borderNullnullnull
Description
Border color of the hovered pager items.
$kendo-pager-item-selected-bgColor$kendo-color-primary#3f51b5
Description
Background color of the selected pager items.
$kendo-pager-item-selected-textColor$kendo-color-primary-contrastwhite
Description
Text color of the selected pager items.
$kendo-pager-item-selected-borderNullnullnull
Description
Border color of the selected pager items.
$kendo-pager-number-border-radiusNumber$kendo-pager-item-border-radius5em
Description
Border radius of the pager numbers.
$kendo-pager-item-focus-opacityNumber.120.12
Description
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
Background color of the focused pager items.
$kendo-pager-item-focus-shadowNullnullnull
Description
Box shadow of the focused pager items.
$kendo-pager-input-widthNumber5em5em
Description
Width of the pager inputs.
$kendo-pager-sm-dropdown-widthNumber5em5em
Description
Width of the pager dropdowns according to the pager size.
$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
Sizes map of the pager.

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-shadowList0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevation, .14 ), 0 1px 10px 0 rgba( $elevation, .12 )0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)
Description
Box shadow of the popup.

Progressbar

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

Radio

NameTypeDefault valueComputed value
$kendo-radio-radiusNumber50%50%
Description
Border radius of radio button.
$kendo-radio-border-widthNumber2px2px
Description
Border width of radio button.
$kendo-radio-bgNull$kendo-checkbox-bgnull
Description
Background color of radio button.
$kendo-radio-textNull$kendo-checkbox-textnull
Description
Color of radio button.
$kendo-radio-borderColor$kendo-checkbox-borderrgba(0, 0, 0, 0.54)
Description
Border color of radio button.
$kendo-radio-hover-bgNullnullnull
Description
Background color of hovered radio button.
$kendo-radio-hover-textNullnullnull
Description
Color of hovered radio button.
$kendo-radio-hover-borderNullnullnull
Description
Border color of hovered radio button.
$kendo-radio-checked-bgNullnullnull
Description
Background color of checked radio button.
$kendo-radio-checked-textColor$kendo-color-primary#3f51b5
Description
Color of checked radio button.
$kendo-radio-checked-borderColor$kendo-radio-checked-text#3f51b5
Description
Border color of checked radio button.
$kendo-radio-focus-borderNull$kendo-checkbox-focus-bordernull
Description
Border color of focused radio button.
$kendo-radio-focus-shadowNull$kendo-checkbox-focus-shadownull
Description
Box shadow of focused radio button.
$kendo-radio-focus-checked-borderNull$kendo-checkbox-focus-checked-bordernull
Description
Border color of focused and checked radio button.
$kendo-radio-focus-checked-shadowNull$kendo-checkbox-focus-checked-shadownull
Description
Box shadow of focused and checked radio button.
$kendo-radio-disabled-bgNullnullnull
Description
Background color of disabled radio button.
$kendo-radio-disabled-textNullnullnull
Description
Color of disabled radio button.
$kendo-radio-disabled-borderColor$kendo-checkbox-disabled-border#adadad
Description
Border color of disabled radio button.
$kendo-radio-disabled-checked-bgNullnullnull
Description
Background color of disabled and checked radio button.
$kendo-radio-disabled-checked-textColor$kendo-radio-disabled-border#adadad
Description
Color of disabled and checked radio button.
$kendo-radio-disabled-checked-borderColor$kendo-radio-disabled-border#adadad
Description
Border color of disabled and checked radio button.
$kendo-radio-invalid-bgNull$kendo-checkbox-invalid-bgnull
Description
Background color of invalid radio button.
$kendo-radio-invalid-textColor$kendo-checkbox-invalid-text#f31700
Description
Color of invalid radio button.
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#f31700
Description
Border color of invalid radio button.
$kendo-radio-indicator-typeStringimageimage
Description
Type of radio button indicator.
$kendo-radio-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
Glyph font family of radio button indicator.
$kendo-radio-checked-glyphString"\e308""\e308"
Description
Glyph of radio button 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
Image of checked radio button 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
Image of disabled and checked radio button indicator.
$kendo-radio-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin of the radio button inside of a label.
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
Spacing between items of horizontal radio button list.
$kendo-radio-list-item-padding-xNumber0px0px
Description
Horizontal padding of radio button list items.
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y8px
Description
Vertical padding of radio button list items.
$kendo-radio-ripple-bgColor$kendo-color-primary#3f51b5
Description
Background color of radio button ripple.
$kendo-radio-ripple-opacityNumber.20.2
Description
Opacity of radio button ripple.

Shadows

NameTypeDefault valueComputed value
$elevationColork-map-get( $theme, elevation )#000000
Description
Color of shadows
$box-shadow-depth-1List0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 )0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)
Description
Shadow for switch.
Equivalent to material elevation 1.
$box-shadow-depth-2List0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 )0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
Description
Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$box-shadow-depth-3List0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 )0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)
Description
Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 8.
$box-shadow-depth-4List0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 )0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)
Description
Shadow for drawers and other overlaying elements.
Equivalent to material elevation 16.
$box-shadow-depth-5List0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 )0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)
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
Focus shadow of the split button.
$kendo-split-button-arrow-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
Horizontal padding of the arrow button.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y8px
Description
Vertical padding of the arrow button.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
Font family of the switch.
$kendo-switch-track-border-widthNullnullnull
Description
Border width of the switch track.
$kendo-switch-thumb-border-widthNullnullnull
Description
Border width of the switch thumb.
$kendo-switch-label-text-transformNullnullnull
Description
Text transform of the switch label.
$kendo-switch-label-displayStringnonenone
Description
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
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 hovered switch is not checked.
$kendo-switch-off-track-hover-textNullnullnull
Description
The text color of the track when hovered switch is not checked.
$kendo-switch-off-track-hover-borderNullnullnull
Description
The border color of the track when hovered switch is not checked.
$kendo-switch-off-track-hover-gradientNullnullnull
Description
The background gradient of the track when hovered switch is not checked.
$kendo-switch-off-track-focus-bgNullnullnull
Description
The background of the track when focused switch is not checked.
$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the track when focused switch is not checked.
$kendo-switch-off-track-focus-borderNullnullnull
Description
The border color of the track when focused switch is not checked.
$kendo-switch-off-track-focus-gradientNullnullnull
Description
The background gradient of the track when focused switch is not checked.
$kendo-switch-off-track-focus-ringNullnullnull
Description
The ring around the track when focused switch is not checked.
$kendo-switch-off-track-disabled-bgNullnullnull
Description
The background of the track when disabled switch is not checked.
$kendo-switch-off-track-disabled-textNullnullnull
Description
The text color of the track when disabled switch is not checked.
$kendo-switch-off-track-disabled-borderNullnullnull
Description
The border color of the track when disabled switch is not checked.
$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The background gradient of the track when 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

Toolbar

NameTypeDefault valueComputed value
$kendo-toolbar-padding-xNullnullnull
Description
The horizontal padding of the toolbar.
$kendo-toolbar-padding-yNullnullnull
Description
The vertical padding of the toolbar.
$kendo-toolbar-spacingNullnullnull
Description
The spacing between the toolbar tools.
$kendo-toolbar-border-widthNumber00
Description
Width of the border around the toolbar.
$kendo-toolbar-border-radiusNullnullnull
Description
Border radius of the toolbar.
$kendo-toolbar-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the toolbar.
$kendo-toolbar-font-sizeNumber$kendo-font-size-md14px
Description
Font size of the toolbar.
$kendo-toolbar-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
Line height of the toolbar.
$kendo-toolbar-bgColor$kendo-component-bg#ffffff
Description
Background color of the toolbar.
$kendo-toolbar-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of the toolbar.
$kendo-toolbar-borderNullnullnull
Description
Color of the border around the toolbar.
$kendo-toolbar-gradientNullnullnull
Description
Gradient of the toolbar.
$kendo-toolbar-shadowList$box-shadow-depth-20 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
Description
Box shadow of the toolbar.
$kendo-toolbar-separator-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
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
Box shadow of the focused toolbar item.
$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
Sizes map for the toolbar.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
Font family of the treeview component.
$kendo-treeview-font-sizeNumber$kendo-font-size-lg16px
Description
Font size of the treeview component.
$kendo-treeview-line-heightNumber1.251.25
Description
Line height of the treeview component.
$kendo-treeview-indentNumber16px16px
Description
Indentation of child groups in treeview component.
$kendo-treeview-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
Horizontal padding of treeview items.
$kendo-treeview-item-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
Vertical padding of treeview items.
$kendo-treeview-item-border-widthNumber0px0px
Description
Border width of treeview items.
$kendo-treeview-item-border-radiusNullnullnull
Description
Border radius of treeview items.
$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 ), 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 ), 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 ) )(sm: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 6px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 16px, item-padding-y: 8px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 16px, item-padding-y: 8px))
Description
The sizes of the treeview.
$kendo-treeview-bgNullnullnull
Description
Background color of the treeview component.
$kendo-treeview-textColor$kendo-component-textrgba(0, 0, 0, 0.87)
Description
Text color of the treeview component.
$kendo-treeview-borderNullnullnull
Description
Border color of the treeview component.
$kendo-treeview-item-hover-bgColorrgba( $kendo-treeview-text, .07 )rgba(0, 0, 0, 0.07)
Description
Background color of hovered treeview items.
$kendo-treeview-item-hover-textNullnullnull
Description
Text color of hovered treeview items.
$kendo-treeview-item-hover-borderNullnullnull
Description
Border color of hovered treeview items.
$kendo-treeview-item-hover-gradientNullnullnull
Description
Background gradient of hovered treeview items.
$kendo-treeview-item-selected-bgNullnullnull
Description
Background color of selected treeview items.
$kendo-treeview-item-selected-textColor$kendo-selected-bg#e51a5f
Description
Text color of selected treeview items.
$kendo-treeview-item-selected-borderNullnullnull
Description
Border color of selected treeview items.
$kendo-treeview-item-selected-gradientNullnullnull
Description
Background gradient of selected treeview items.
$kendo-treeview-item-focus-shadowNullnullnull
Description
Box shadow of focused treeview items.
$kendo-treeview-loadmore-bgColortransparenttransparent
Description
Background color of load more.
$kendo-treeview-loadmore-textStringinheritinherit
Description
Text color of load more.
$kendo-treeview-loadmore-borderNullnullnull
Description
Border color of load more.
$kendo-treeview-loadmore-hover-bgColortransparenttransparent
Description
Background color of a hovered load more.
$kendo-treeview-loadmore-hover-textStringinheritinherit
Description
Text color of a hovered load more.
$kendo-treeview-loadmore-hover-borderNullnullnull
Description
Border color of a hovered load more.
$kendo-treeview-loadmore-focus-bgColortransparenttransparent
Description
Background color of a focused load more.
$kendo-treeview-loadmore-focus-textStringinheritinherit
Description
Text color of a focused load more.
$kendo-treeview-loadmore-focus-borderNullnullnull
Description
Border color of a focused load more.
$kendo-treeview-loadmore-focus-shadowNull$kendo-treeview-item-focus-shadownull
Description
Box shadow of a focused load more.

Typography

NameTypeDefault valueComputed value
$kendo-font-sizeNumber14px14px
Description
Base font size across all components.
$kendo-font-family-sans-serifListRoboto, "Helvetica Neue", sans-serifRoboto, "Helvetica Neue", sans-serif
Description
Font family for text.
$kendo-font-familyListRoboto, "Helvetica Neue", sans-serifRoboto, "Helvetica Neue", sans-serif
Description
Font family across all components.
$kendo-font-family-monospaceListConsolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospaceConsolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description
Font family for monospaced text. Used for styling the code.
$kendo-font-familyListRoboto, "Helvetica Neue", sans-serifRoboto, "Helvetica Neue", sans-serif
Description
Font family across all components.
$kendo-line-heightNumberk-math-div( 28, 14 )2
Description
Line height used along with $kendo-font-size.

Window

NameTypeDefault valueComputed value
$kendo-window-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
Theme colors map for the window.