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

Customization

Variables

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

Common

NameTypeDefault valueComputed value
$kendo-icon-sizeNumber16px16px
Description
Icon size.
$kendo-icon-size-xsCalculationcalc( #{$kendo-icon-size} * .75 )calc( 16px * .75 )
Description
xtra small icon size.
$kendo-icon-size-smCalculationcalc( #{$kendo-icon-size} * .875 )calc( 16px * .875 )
Description
Small icon size.
$kendo-icon-size-mdNumber$kendo-icon-size16px
Description
Medium icon size.
$kendo-icon-size-lgCalculationcalc( #{$kendo-icon-size} * 1.25 )calc( 16px * 1.25 )
Description
Large icon size.
$kendo-icon-size-xlCalculationcalc( #{$kendo-icon-size} * 1.5 )calc( 16px * 1.5 )
Description
Extra large icon size.
$kendo-icon-size-xxlCalculationcalc( #{$kendo-icon-size} * 2 )calc( 16px * 2 )
Description
Double extra large icon size.
$kendo-icon-size-xxxlCalculationcalc( #{$kendo-icon-size} * 3 )calc( 16px * 3 )
Description
Triple extra large icon size.
$kendo-padding-xNumber8px8px
Description
Horizontal padding.
$kendo-padding-yNumber4px4px
Description
Vertical padding.
$kendo-padding-sm-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
Small horizontal padding.
$kendo-padding-sm-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
Small vertical padding.
$kendo-padding-md-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
Medium horizontal padding.
$kendo-padding-md-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
Medium vertical padding.
$kendo-padding-lg-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
Large horizontal padding.
$kendo-padding-lg-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
Large vertical padding.
$kendo-border-radiusNumberk-map-get( $kendo-spacing, 1 )4px
Description
Border radius for all components.
$kendo-border-radius-smNumber$kendo-border-radius - k-map-get( $kendo-spacing, 0.5 )2px
Description
Small border radius.
$kendo-border-radius-mdNumber$kendo-border-radius4px
Description
Medium border radius.
$kendo-border-radius-lgNumber$kendo-border-radius + k-map-get( $kendo-spacing, 0.5 )6px
Description
Large border radius.
$kendo-body-bgColor$kendo-color-white#ffffff
Description
Background color of the body.
$kendo-body-textColor#424242#424242
Description
Text color of the body.
$kendo-subtle-textColor#666666#666666
Description
Subtle text color.
$kendo-link-textColor$kendo-color-primary#ff6358
Description
Text color of the links.
$kendo-link-hover-textColor$kendo-color-primary-darker#d6534a
Description
Text color of the links on hover.
$kendo-base-bgColor#fafafa#fafafa
Description
The background of the components' chrome area.
$kendo-base-textColor$kendo-body-text#424242
Description
The text color of the components' chrome area.
$kendo-base-borderColorrgba( black, .08 )rgba(0, 0, 0, 0.08)
Description
The border color of the components' chrome area.
$kendo-base-gradientListrgba( black, 0 ), rgba( black, .02 )rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient background of the components' chrome area.
$kendo-hover-bgColork-try-shade( $kendo-base-bg, .5 )#f0f0f0
Description
The background of hovered items.
$kendo-hover-textColor$kendo-base-text#424242
Description
The text color of hovered items.
$kendo-hover-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of hovered items.
$kendo-hover-gradientList$kendo-base-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient background of hovered items.
$kendo-selected-bgColor$kendo-color-primary#ff6358
Description
The background of selected items.
$kendo-selected-textColork-contrast-legacy( $kendo-selected-bg )white
Description
The text color of selected items.
$kendo-selected-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of selected items.
$kendo-selected-gradientList$kendo-base-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient background of selected items.
$kendo-selected-hover-bgColork-try-shade( $kendo-selected-bg, .5 )#f55f54
Description
The background of selected and hovered items.
$kendo-selected-hover-textColor$kendo-selected-textwhite
Description
The text color of selected and hovered items.
$kendo-selected-hover-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border of selected and hovered items.
$kendo-selected-hover-gradientList$kendo-base-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient of selected and hovered items.
$kendo-focus-shadowListinset 0 0 0 2px rgba(0, 0, 0, .13)inset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
Box shadow of focused items.
$kendo-transitionListcolor .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-outcolor 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out
Description
Transition used across all components.
$kendo-disabled-textColor#8f8f8f#8f8f8f
Description
Text color of disabled items.
$kendo-disabled-filterStringgrayscale(.1)grayscale(0.1)
Description
Filter used for disabled items.
$kendo-disabled-opacityNumber.60.6
Description
Opacity used for disabled items.

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-familyString$kendo-font-familyinherit
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-md1.4285714286
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#ebebeb
Description
The background color of the AppBar based on light theme color.
$kendo-appbar-light-textColork-contrast-legacy( $kendo-color-light )black
Description
The 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-legacy( $kendo-color-dark )white
Description
The text color of the AppBar based on dark theme color.
$kendo-appbar-box-shadowList0px 1px 1px rgba(0, 0, 0, .16)0px 1px 1px rgba(0, 0, 0, 0.16)
Description
The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadowList0px -1px 1px rgba(0, 0, 0, .16)0px -1px 1px rgba(0, 0, 0, 0.16)
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-familyString$kendo-font-familyinherit
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-md1.4285714286
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": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "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-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-yNumber$kendo-bottom-nav-padding-x4px
Description
The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gapNumber$kendo-bottom-nav-padding-x4px
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-familyString$kendo-font-familyinherit
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-md-x * 2} - #{$kendo-bottom-nav-padding-x * 2} )calc( 40px + 16px - 8px )
Description
The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radiusNumber$kendo-border-radius-md4px
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-shadowList0px 0px 5px rgba(0, 0, 0, .12)0px 0px 5px rgba(0, 0, 0, 0.12)
Description
The box shadow of the BottomNavigation.
$kendo-bottom-nav-flat-textColor$kendo-component-text#424242
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.08)
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-familyString$kendo-font-familyinherit
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-lg16px
Description
The font size of the large Breadcrumb.
$kendo-breadcrumb-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-heightNumber$kendo-breadcrumb-line-height1.4285714286
Description
The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-heightNumber$kendo-line-height-lg1.5
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-text#424242
Description
The base text color of the Breadcrumb.
$kendo-breadcrumb-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The base border color of the Breadcrumb.
$kendo-breadcrumb-focus-shadowList0 0 2px 1px rgba(0, 0, 0, .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 )8px
Description
The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-xNumber$kendo-breadcrumb-link-padding-x8px
Description
The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-yNumber$kendo-breadcrumb-link-padding-y6px
Description
The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
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 )8px
Description
The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-yNumber$kendo-breadcrumb-icon-link-padding-y8px
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-y8px
Description
The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-xNumber$kendo-breadcrumb-sm-icon-link-padding-y6px
Description
The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-xNumber$kendo-breadcrumb-icon-link-padding-x8px
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-initial-textStringinheritinherit
Description
The text color of the Breadcrumb link.
$kendo-breadcrumb-link-icon-spacingNumber$kendo-icon-spacing4px
Description
The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-bgNullnullnull
Description
The background color of the Breadcrumb link.
$kendo-breadcrumb-link-textColor$kendo-link-text#ff6358
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-base-bg#fafafa
Description
The background color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-textColor$kendo-link-hover-text#d6534a
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-bgNullnullnull
Description
The background color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-textColor$kendo-link-text#ff6358
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-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
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-base-bg#fafafa
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-bgNullnullnull
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-shadowList$kendo-breadcrumb-link-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
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: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5))
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, 2 )8px
Description
The horizontal padding of the Button.
$kendo-button-sm-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the small Button.
$kendo-button-md-padding-xNumber$kendo-button-padding-x8px
Description
The horizontal padding of the medium Button.
$kendo-button-lg-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the large Button.
$kendo-button-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the Button.
$kendo-button-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small Button.
$kendo-button-md-padding-yNumber$kendo-button-padding-y4px
Description
The vertical padding of the medium Button.
$kendo-button-lg-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the large Button.
$kendo-button-font-familyString$kendo-font-familyinherit
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-button-font-size14px
Description
The font size of the medium Button.
$kendo-button-lg-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the large Button.
$kendo-button-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height used along with the $kendo-font-size the.
$kendo-button-sm-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height used along with the $kendo-font-size the of the small Button.
$kendo-button-md-line-heightNumber$kendo-button-line-height1.4285714286
Description
The line height used along with the $kendo-font-size the of the medium Button.
$kendo-button-lg-line-heightNumber$kendo-line-height-lg1.5
Description
The line height used along with the $kendo-font-size the 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 + 8px + 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 + 8px )
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: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286), lg: (padding-x: 8px, padding-y: 8px, font-size: 16px, line-height: 1.5))
Description
The sizes map for the Button.
$kendo-button-theme-colorsMapk-map-merge( $kendo-theme-colors, ( "base": #f5f5f5 ) )("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242, "base": #f5f5f5)
Description
The theme colors map for the Button.
$kendo-button-bgColor#f5f5f5#f5f5f5
Description
The base background of the Button.
$kendo-button-textColor#424242#424242
Description
The base text color of the Button.
$kendo-button-borderColorrgba( black, .08 )rgba(0, 0, 0, 0.08)
Description
The base border color of the Button.
$kendo-button-gradientListrgba( black, 0 ), rgba( black, .02 )rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The base background gradient of the Button.
$kendo-button-shadowNullnullnull
Description
The base shadow of the Button.
$kendo-button-hover-bgColork-try-shade( $kendo-button-bg, .5 )#ebebeb
Description
The base background of the hovered Button.
$kendo-button-hover-textNullnullnull
Description
The base text color of the hovered Button.
$kendo-button-hover-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-bgColork-try-shade( $kendo-button-bg, 1.5 )#d8d8d8
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-shadowNullnullnull
Description
The base shadow of the active Button.
$kendo-button-selected-bgColor$kendo-color-primary#ff6358
Description
The base background color of the selected Button.
$kendo-button-selected-textColork-contrast-legacy( $kendo-button-selected-bg )white
Description
The text color of the selected Button.
$kendo-button-selected-borderColor$kendo-button-selected-bg#ff6358
Description
The border color of the selected Button.
$kendo-button-selected-gradientNull$kendo-button-active-gradientnull
Description
The background gradient of the selected Button.
$kendo-button-selected-shadowNull$kendo-button-active-shadownull
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 the focused Button.
$kendo-button-focus-shadowList0 0 0 2px rgba( $kendo-button-border, .08 )0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The base shadow of the focused Button.
$kendo-button-disabled-bgNullnullnull
Description
The base background of the disabled Button.
$kendo-button-disabled-textNullnullnull
Description
The base text color of the disabled Button.
$kendo-button-disabled-borderNullnullnull
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-shadowNullnullnull
Description
The base shadow of the disabled Button.
$kendo-flat-button-hover-opacityNumber.040.04
Description
The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-opacityNullnullnull
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 background for the flat Button.
$kendo-flat-button-selected-opacityNumber.20.2
Description
The overlay opacity of the selected flat Button. Used to create background for the flat Button.
$kendo-flat-button-focus-ring-opacityNumber.120.12
Description
The opacity of the flat Button focus ring. Used to create a border for the flat Button.
$kendo-button-transitionListcolor .2s ease-in-outcolor 0.2s ease-in-out
Description
The color transition of the flat Button.

Charts

NameTypeDefault valueComputed value
$kendo-series-aColor#ff6358#ff6358
Description
The first base series color and its light and dark shades.
$kendo-series-bColor#ffe162#ffe162
Description
The second base series color and its light and dark shades.
$kendo-series-cColor#4cd180#4cd180
Description
The third base series color and its light and dark shades.
$kendo-series-dColor#4b5ffa#4b5ffa
Description
The fourth base series color and its light and dark shades.
$kendo-series-eColor#ac58ff#ac58ff
Description
The fifth base series color and its light and dark shades.
$kendo-series-fColor#ff5892#ff5892
Description
The sixth base series color and its light and dark shades.
$kendo-series-1Color$kendo-series-a#ff6358
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-widthNumber1px1px
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-bgColor$kendo-component-bg#ffffff
Description
The background color of the CheckBox.
$kendo-checkbox-textNullnullnull
Description
The text color of the CheckBox.
$kendo-checkbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
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#ff6358
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textColork-contrast-legacy( $kendo-checkbox-checked-bg )white
Description
The text color of the checked CheckBox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#ff6358
Description
The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-bg#ffffff
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-bg#ff6358
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-borderrgba(0, 0, 0, 0.08)
Description
The border color of the indeterminate CheckBox.
$kendo-checkbox-focus-borderNullnullnull
Description
The border color of the focused CheckBox.
$kendo-checkbox-focus-shadowList0 0 0 2px rgba(0, 0, 0, .06)0 0 0 2px rgba(0, 0, 0, 0.06)
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-shadowList0 0 0 2px rgba( $kendo-color-primary, .3 )0 0 0 2px rgba(255, 99, 88, 0.3)
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-borderNullnullnull
Description
The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bgNullnullnull
Description
The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-textNullnullnull
Description
The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-borderNullnullnull
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 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%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 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%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-y4px
Description
The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bgColor$kendo-checkbox-checked-bg#ff6358
Description
The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacityNumber.250.25
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-xNumber$kendo-chip-padding-x4px
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-yNumber$kendo-chip-padding-y4px
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-chip-font-size14px
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-heightNumber11
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1
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( 1em + 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), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))
Description
The map with the sizes of the Chip.
$kendo-chip-base-bgColor$kendo-button-bg#f5f5f5
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": #f5f5f5, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)
Description
The theme colors map for the Chip.
$kendo-chip-solid-bgColor$kendo-chip-base-bg#f5f5f5
Description
The base background color of the solid Chip.
$kendo-chip-solid-textColor$kendo-button-text#424242
Description
The base text color of the solid Chip.
$kendo-chip-solid-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The base border color of the solid Chip.
$kendo-chip-solid-shadowList0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The base shadow of the solid Chip.
$kendo-chip-solid-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The base gradient of the solid Chip.
$kendo-chip-solid-focus-bgNullnullnull
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-bgColor$kendo-button-hover-bg#ebebeb
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-bgColor$kendo-button-active-bg#d8d8d8
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-text#424242
Description
The base text color of the outline Chip.
$kendo-chip-outline-borderColor$kendo-chip-outline-text#424242
Description
The base border color of the outline Chip.
$kendo-chip-outline-shadowList0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The base shadow of the outline Chip.
$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#424242
Description
The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-textColork-contrast-legacy( $kendo-chip-outline-hover-bg )white
Description
The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bgColor$kendo-chip-outline-hover-bg#424242
Description
The base background color of the selected outline Chip.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite
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-widthNumber272px272px
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-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the ColorGradient.
$kendo-color-gradient-textColor$kendo-component-text#424242
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.08)
Description
The border color of the ColorGradient.
$kendo-color-gradient-focus-borderNullnullnull
Description
The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadowList1px 1px 7px 1px rgba(0, 0, 0, .3)1px 1px 7px 1px rgba(0, 0, 0, 0.3)
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-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( $kendo-color-white, .8)rgba(255, 255, 255, 0.8)
Description
The color of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadowList0 1px 4px rgba(0, 0, 0, .5)0 1px 4px rgba(0, 0, 0, 0.5)
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-shadowList0 1px 4px black0 1px 4px black
Description
The box shadow of the focused ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-hover-shadowList$kendo-color-gradient-draghandle-focus-shadow0 1px 4px black
Description
The box shadow of the hovered 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-widthNumber46px46px
Description
The width of the ColorGradient input.
$kendo-color-gradient-input-gapNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px
Description
The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gapNumberk-math-div( $kendo-color-gradient-spacer, 3 )4px
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-textColor$kendo-subtle-text#666666
Description
The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weightNumber$kendo-font-weight-bold700
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacerNumberk-math-div( $kendo-color-gradient-spacer, 1.5 )8px
Description
The spacing between the items in the ColorGradient contrast tool.

Color System

NameTypeDefault valueComputed value
$kendo-color-primaryColor#ff6358#ff6358
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-color-primary-contrastColork-contrast-legacy( $kendo-color-primary )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-secondaryColor#666666#666666
Description
The secondary color of the theme.
$kendo-color-secondary-contrastColork-contrast-legacy( $kendo-color-secondary )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-tertiaryColor#03a9f4#03a9f4
Description
The tertiary color of the theme.
$kendo-color-tertiary-contrastColork-contrast-legacy( $kendo-color-tertiary )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-darkColor#424242#424242
Description
The dark color of the theme.
$kendo-color-lightColor#ebebeb#ebebeb
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

Coloreditor

NameTypeDefault valueComputed value
$kendo-color-editor-spacerNumberk-map-get( $kendo-spacing, 3 )12px
Description
The spacer of the ColorEditor.
$kendo-color-editor-min-widthNumber272px272px
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-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the ColorEditor.
$kendo-color-editor-textColor$kendo-component-text#424242
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.08)
Description
The border color of the ColorEditor.
$kendo-color-editor-focus-borderNullnullnull
Description
The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadowList1px 1px 7px 1px rgba(0, 0, 0, .3)1px 1px 7px 1px rgba(0, 0, 0, 0.3)
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-math-div( $kendo-color-editor-spacer, 1.5 )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-offsetNumber4px4px
Description
The outline offset of the focused ColorGradient.

Colorpalette

NameTypeDefault valueComputed value
$kendo-color-palette-font-familyString$kendo-font-familyinherit
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-bgColor$kendo-body-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-textColor$kendo-body-text#424242
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-borderColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )rgba(0, 0, 0, 0.08)
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;`.
$kendo-component-header-bgColor$kendo-base-bg#fafafa
Description
Background color of the component header.
$kendo-component-header-textColor$kendo-base-text#424242
Description
Text color of the component header.
$kendo-component-header-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
Border color of the component header.
$kendo-component-header-gradientNullnullnull
Description
Gradient of the component header.
$kendo-invalid-bgStringnullinitial
Description
Background color of the invalid items.
$kendo-invalid-textColor$kendo-color-error#f31700
Description
Text color of the invalid items.
$kendo-invalid-borderColor$kendo-color-error#f31700
Description
Border color of the invalid items.
$kendo-invalid-shadowNullnullnull
Description
Shadow of the invalid items.

Dialog

NameTypeDefault valueComputed value
$kendo-dialog-titlebar-bgColor$kendo-component-header-bg#fafafa
Description
The background color of the Dialog titlebar.
$kendo-dialog-titlebar-textColor$kendo-component-header-text#424242
Description
The text color of the Dialog titlebar.
$kendo-dialog-titlebar-borderStringinheritinherit
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": #ff6358, "light": #ebebeb, "dark": #424242)
Description
The theme colors map for the Dialog.

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-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the Еditor.
$kendo-editor-placeholder-textColor$kendo-input-placeholder-text#666666
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#ff6358
Description
The selected background color of the Editor.
$kendo-editor-highlighted-bgColork-color-mix($kendo-color-primary, #ffffff, 20%)#ffe0de
Description
The highlighted background color of the Editor.
$kendo-editor-export-tool-icon-margin-xNumber.25em0.25em
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.

Expander

NameTypeDefault valueComputed value
$kendo-expander-spacing-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical spacing of the ExpansionPanel.
$kendo-expander-border-widthNumber1px1px
Description
The width of the border around the ExpansionPanel.
$kendo-expander-font-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The hine height of the ExpansionPanel.
$kendo-expander-textColor$kendo-component-text#424242
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.08)
Description
The border color of the ExpansionPanel.
$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
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-text#424242
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(0, 0, 0, .04)rgba(0, 0, 0, 0.04)
Description
The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bgNullnullnull
Description
The background color of the focused ExpansionPanel header.
$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-textColor$kendo-color-primary#ff6358
Description
The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-textColor$kendo-subtle-text#666666
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, 4 )16px
Description
The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the ExpansionPanel content.

Filter

NameTypeDefault valueComputed value
$kendo-filter-padding-xNumber$kendo-padding-md-x8px
Description
The horizontal padding of the Filter.
$kendo-filter-padding-yNumber$kendo-padding-md-y4px
Description
The vertical padding of the Filter.
$kendo-filter-bottom-marginNumber30px30px
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#ff6358
Description
The text color of the Filter preview field.
$kendo-filter-preview-operator-textColor$kendo-subtle-text#666666
Description
The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadowList0 0 0 2px rgba(0, 0, 0, .08)0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The box shadow of the focused Filter toolbar.

Floating-action-button

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber1px1px
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-familyString$kendo-font-familyinherit
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-heightNumber$kendo-line-height-md1.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, 0.5 )2px
Description
The spacing of the 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 width of the FAB item icon border.
$kendo-fab-item-icon-border-radiusNumber50%50%
Description
The border radius of the FAB item icon.
$kendo-fab-theme-colorsMap$kendo-theme-colors("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "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-shadowList0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)
Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowList0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 )0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)
Description
The shadow of the disabled FAB.
$kendo-fab-active-shadowNullnullnull
Description
The shadow of the active FAB.
$kendo-fab-outline-styleStringsolidsolid
Description
The outline style of the FAB.
$kendo-fab-outline-widthNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The outline width of the FAB.
$kendo-fab-item-textColor$kendo-component-text#424242
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.08)
Description
The base border color of the FAB item.
$kendo-fab-item-icon-textColor$kendo-button-text#424242
Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bgColor$kendo-button-bg#f5f5f5
Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The base border color of the FAB item icon.
$kendo-fab-item-shadowList$kendo-fab-shadow0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)
Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowList$kendo-fab-disabled-shadow0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)
Description
The shadow of the disabled FAB item.
$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull
Description
The shadow of the active FAB item.
$kendo-fab-item-outline-styleStringsolidsolid
Description
The outline style of the FAB item.
$kendo-fab-item-outline-widthNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The outline width of the FAB item.
$kendo-fab-item-outline-colorColorrgba(0, 0, 0, .08)rgba(0, 0, 0, 0.08)
Description
The outline color of the 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-size14px
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.4285714286
Description
The line height of the Floating Label.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc( 1.4285714286 * 14px )
Description
The height of the Floating Label.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc( 8px + 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.4285714286 * 14px ) + 1px + 4px )
Description
The vertical offset of the Floating Label.
$kendo-floating-label-focus-scaleNumber11
Description
The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-xNumber00
Description
The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-yNumber00
Description
The vertical offset of the focused Floating Label.
$kendo-floating-label-transitionList.2s ease-out0.2s ease-out
Description
The transition of the Floating Label.
$kendo-floating-label-bgNullnullnull
Description
The background color of the Floating Label.
$kendo-floating-label-textNullnullnull
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-textNullnullnull
Description
The text color of the focused Floating Label.

Form

NameTypeDefault valueComputed value
$kendo-form-spacerNumber$kendo-padding-md-x * 216px
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-md1.4285714286
Description
The line height of the Form.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc( 1.4285714286 * 1em )
Description
The line height of the Form in em units.
$kendo-form-sm-line-heightNumber$kendo-line-height-sm1.25
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.08)
Description
The border color of the Form legend.
$kendo-form-legend-widthNumber100%100%
Description
The width of the Form legend.
$kendo-form-legend-font-sizeNumber14px14px
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-sizeNumber12px12px
Description
The font size of the Form hint.
$kendo-form-hint-font-styleStringitalicitalic
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, 2.5 )10px
Description
The row spacing of the small Form.
$kendo-form-md-rows-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The row spacing of the medium Form.
$kendo-form-lg-rows-spacingNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
The row spacing of the large Form.
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 014px 0 0
Description
The margin of the Form separator.
$kendo-form-separator-border-colorColor$kendo-form-legend-border-colorrgba(0, 0, 0, 0.08)
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-colorColor$kendo-color-error#f31700
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-size22px
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-textColork-try-shade( $kendo-body-text, 2 )#373737
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: 10px), md: (form-rows-spacing: 14px), lg: (form-rows-spacing: 18px))
Description
The sizes map for the Form.

Grid

NameTypeDefault valueComputed value
$kendo-grid-padding-xNumber$kendo-table-md-cell-padding-x12px
Description
Horizontal padding of the grid.
$kendo-grid-padding-yNumber$kendo-table-md-cell-padding-y8px
Description
Vertical padding of the grid.
$kendo-grid-header-padding-xNumber$kendo-grid-padding-x12px
Description
Horizontal padding of the grid header.
$kendo-grid-header-padding-yNumber$kendo-grid-padding-y8px
Description
Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-xNumber$kendo-grid-padding-y8px
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-x12px
Description
Horizontal padding of the grid cell.
$kendo-grid-cell-padding-yNumber$kendo-grid-padding-y8px
Description
Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-y8px
Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-yNumber$kendo-grid-filter-cell-padding-x8px
Description
Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x12px
Description
Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-yNumber3px3px
Description
Vertical padding of the grid filter cell.
$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
Background color of the grid component
$kendo-grid-textColor$kendo-table-text#424242
Description
Text color of the grid component
$kendo-grid-borderColor$kendo-table-borderrgba(0, 0, 0, 0.08)
Description
Border color of the grid component
$kendo-grid-header-bgColor$kendo-table-header-bg#fafafa
Description
Background color of grid header
$kendo-grid-header-textColor$kendo-table-header-text#424242
Description
Text color of grid header
$kendo-grid-header-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of grid header
$kendo-grid-header-gradientNull$kendo-table-header-gradientnull
Description
Background gradient of grid header
$kendo-grid-footer-bgColor$kendo-grid-header-bg#fafafa
Description
Background color of grid footer
$kendo-grid-footer-textColor$kendo-grid-header-text#424242
Description
Text color of grid footer
$kendo-grid-footer-borderColor$kendo-grid-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of grid footer
$kendo-grid-alt-bgColor$kendo-table-alt-row-bgrgba(0, 0, 0, 0.04)
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
Border color of alternating rows in grid
$kendo-grid-hover-bgColor$kendo-table-hover-bg#ededed
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-borderNull$kendo-table-hover-bordernull
Description
Border color of hovered rows in grid
$kendo-grid-selected-bgColor$kendo-table-selected-bgrgba(255, 99, 88, 0.25)
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#fafafa
Description
Background color of the selection aggregates container
$kendo-grid-selection-aggregates-textColor$kendo-grid-text#424242
Description
Text color of the selection aggregates container
$kendo-grid-selection-aggregates-borderColor$kendo-grid-borderrgba(0, 0, 0, 0.08)
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-heightNumber$kendo-grid-line-height1.4285714286
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 ), .12 )rgba(0, 0, 0, 0.12)
Description
Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bgColor$kendo-color-primary#ff6358
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, 2 )8px
Description
The horizontal padding of the Input components.
$kendo-input-sm-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the small Input components.
$kendo-input-md-padding-xNumber$kendo-input-padding-x8px
Description
The horizontal padding of the medium Input components.
$kendo-input-lg-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the large Input components.
$kendo-input-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the Input components.
$kendo-input-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small Input components.
$kendo-input-md-padding-yNumber$kendo-input-padding-y4px
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-familyString$kendo-font-familyinherit
Description
The font family of the Input components.
$kendo-input-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Input components.
$kendo-input-sm-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the small Input components.
$kendo-input-md-font-sizeNumber$kendo-input-font-size14px
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-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Input components.
$kendo-input-sm-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the small Input components.
$kendo-input-md-line-heightNumber$kendo-input-line-height1.4285714286
Description
The line height of the medium Input components.
$kendo-input-lg-line-heightNumber$kendo-line-height-lg1.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: $kendo-input-sm-padding-y, button-padding-y: $kendo-input-sm-padding-y ), 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: $kendo-input-md-padding-y, button-padding-y: $kendo-input-md-padding-y ), 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: $kendo-input-lg-padding-y, button-padding-y: $kendo-input-lg-padding-y ) )(sm: (padding-x: 8px, padding-y: 2px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 2px, button-padding-y: 2px), md: (padding-x: 8px, padding-y: 4px, font-size: 14px, line-height: 1.4285714286, button-padding-x: 4px, button-padding-y: 4px), lg: (padding-x: 8px, padding-y: 8px, font-size: 16px, line-height: 1.5, button-padding-x: 8px, button-padding-y: 8px))
Description
The sizes map for the Input components.
$kendo-input-bgColor$kendo-component-bg#ffffff
Description
The background color of the Input components.
$kendo-input-textColor$kendo-component-text#424242
Description
The text color of the Input components.
$kendo-input-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
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-borderColorrgba( $kendo-input-border, .16 )rgba(0, 0, 0, 0.16)
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-input-hover-borderrgba(0, 0, 0, 0.16)
Description
The border color of the focused Input components.
$kendo-input-focus-shadowList0 0 0 2px rgba( $kendo-input-focus-border, .08 )0 0 0 2px rgba(0, 0, 0, 0.08)
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-bgNullnullnull
Description
The background color of the disabled Input components.
$kendo-input-disabled-textNullnullnull
Description
The text color of the disabled Input components.
$kendo-input-disabled-borderNullnullnull
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-text#424242
Description
The text color of the outline Input components.
$kendo-input-outline-borderColorrgba( $kendo-button-text, .5)rgba(66, 66, 66, 0.5)
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-borderColorrgba( $kendo-button-text, .8)rgba(66, 66, 66, 0.8)
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-borderNullnullnull
Description
The border color of the outline focused Input components.
$kendo-input-outline-focus-shadowList$kendo-input-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
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-text#424242
Description
The text color of the flat Input components.
$kendo-input-flat-borderColor$kendo-input-borderrgba(0, 0, 0, 0.08)
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.16)
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-borderNullnullnull
Description
The border color of the flat focused Input components.
$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the flat focused Input components.
$kendo-input-placeholder-textColor$kendo-subtle-text#666666
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-widthCalculation$kendo-button-inner-calc-sizecalc( 1.4285714286em + 8px )
Description
The width of the Input button.
$kendo-input-button-border-widthNumber1px1px
Description
The border width of the Input button.
$kendo-input-spinner-widthCalculation$kendo-button-inner-calc-sizecalc( 1.4285714286em + 8px )
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-text#424242
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-familyString$kendo-font-familyinherit
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-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: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null))
Description
The map with the sizes of the List.
$kendo-list-bgColor$kendo-component-bg#ffffff
Description
The background color of the List component.
$kendo-list-textColor$kendo-component-text#424242
Description
The text color of the List component.
$kendo-list-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
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-shadowList0 5px 10px 0 rgba(0, 0, 0, .06)0 5px 10px 0 rgba(0, 0, 0, 0.06)
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-bg#f0f0f0
Description
The background color of the hovered List items.
$kendo-list-item-hover-textColor$kendo-hover-text#424242
Description
The text color of the hovered List items.
$kendo-list-item-focus-bgNullnullnull
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-shadowListinset 0 0 0 2px rgba(0, 0, 0, .12)inset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused List items.
$kendo-list-item-selected-bgColor$kendo-selected-bg#ff6358
Description
The background color of the selected List items.
$kendo-list-item-selected-textColor$kendo-selected-textwhite
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-text#666666
Description
The color of the 'No Data' text.
$kendo-list-option-label-textColor$kendo-subtle-text#666666
Description
The color of the 'Option Label' text.

Listbox

NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 2 )8px
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-familyString$kendo-font-familyinherit
Description
The font family of the ListBox.
$kendo-listbox-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the ListBox.
$kendo-listbox-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the ListBox.
$kendo-listbox-textColor$kendo-component-text#424242
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.08)
Description
The border color of the ListBox.
$kendo-listbox-item-padding-xNullnullnull
Description
The inline padding of the ListBox item.
$kendo-listbox-item-padding-yNullnullnull
Description
The block padding of the ListBox item.
$kendo-listbox-drop-hint-widthNumber1px1px
Description
The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-widthNullnullnull
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-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the ListView.
$kendo-listview-textColor$kendo-component-text#424242
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.08)
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( $kendo-selected-bg, .25 )rgba(255, 99, 88, 0.25)
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-bgNullnullnull
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-shadowListinset 0 0 0 2px rgba(0, 0, 0, .13)inset 0 0 0 2px rgba(0, 0, 0, 0.13)
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#656565#656565
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.08)
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-width1px
Description
Width of the border around the menu popup.
$kendo-menu-popup-font-sizeNumber$kendo-font-size-md14px
Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightNumber$kendo-line-height-md1.4285714286
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-text#424242
Description
The text color of the menu popup.
$kendo-menu-popup-borderColor$kendo-popup-borderrgba(0, 0, 0, 0.08)
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, 2 )8px
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
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( 16px + 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-x8px
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( 16px + 16px ) - 4px))
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-bg#f0f0f0
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#424242
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#ff6358
Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-expanded-textColor$kendo-list-item-selected-textwhite
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-shadowList$kendo-menu-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The base shadow of focused menu item in popup.

Menu-button

NameTypeDefault valueComputed value
$kendo-menu-button-arrow-padding-xNumber$kendo-button-padding-y4px
Description
The horizontal padding of the button arrow in the Menu Button..

Notification

NameTypeDefault valueComputed value
$kendo-notification-padding-xNumber8px8px
Description
The horizontal padding of the Notification.
$kendo-notification-padding-yNumber4px4px
Description
The vertical padding of the Notification.
$kendo-notification-border-widthNumber1px1px
Description
The width of the border around the Notification.
$kendo-notification-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Notification.
$kendo-notification-font-familyString$kendo-font-familyinherit
Description
The font family of the Notification.
$kendo-notification-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Notification.
$kendo-notification-line-heightNumber$kendo-line-height-md1.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-text#424242
Description
The text color of the Notification.
$kendo-notification-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Notification.
$kendo-notification-shadowList$kendo-popup-shadow0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)
Description
The box shadow of the Notification.
$kendo-notification-icon-spacingNumber$kendo-icon-spacing4px
Description
The horizontal spacing of the Notification icon.
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "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: #ebebeb, border: #ebebeb), "dark": (color: white, background-color: #424242, border: #424242), "error": (color: white, background-color: #f31700, border: #f31700), "warning": (color: black, background-color: #ffc000, border: #ffc000), "success": (color: white, background-color: #37b400, border: #37b400), "info": (color: white, background-color: #0058e9, border: #0058e9), "tertiary": (color: white, background-color: #03a9f4, border: #03a9f4), "secondary": (color: white, background-color: #666666, border: #666666), "primary": (color: white, background-color: #ff6358, border: #ff6358))
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 + 4px + 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 + 8px + 2px )
Description
The minimum width of the items in the medium Pagers.
$kendo-pager-lg-item-min-widthCalculation$kendo-button-lg-calc-sizecalc( 1.5em + 16px + 2px )
Description
The minimum width of the items in the large Pagers.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3 )12px
Description
The margin between the item groups in the small Pager.
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The margin between the item groups in the medium Pager.
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )16px
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-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the Pager.
$kendo-pager-bgColor$kendo-component-header-bg#fafafa
Description
The background color of the Pager.
$kendo-pager-textColor$kendo-component-header-text#424242
Description
The text color of the Pager.
$kendo-pager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Pager.
$kendo-pager-focus-bgNullnullnull
Description
The background color of the focused Pager.
$kendo-pager-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the focused Pager.
$kendo-pager-item-border-widthNumber0px0px
Description
The border width of the Pager items.
$kendo-pager-item-border-radiusNullnullnull
Description
The border radius of the Pager items.
$kendo-pager-item-spacingNullnullnull
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-bg#f0f0f0
Description
The background color of the hovered Pager items.
$kendo-pager-item-hover-textColor$kendo-list-item-hover-text#424242
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-list-item-selected-bg#ff6358
Description
The background color of the selected Pager items.
$kendo-pager-item-selected-textColor$kendo-list-item-selected-textwhite
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-item-focus-opacityNullnullnull
Description
The opacity of the focused Pager items.
$kendo-pager-item-focus-bgColortransparenttransparent
Description
The background color of the focused Pager items.
$kendo-pager-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
The box shadow of the focused Pager items.
$kendo-pager-number-border-radiusNullnullnull
Description
The border radius of the Pager numbers.
$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: 12px, item-min-width: calc( 1.4285714286em + 4px + 2px ), pager-dropdown-width: 5em), md: (padding-x: 8px, padding-y: 8px, item-group-spacing: 14px, item-min-width: calc( 1.4285714286em + 8px + 2px ), pager-dropdown-width: 5em), lg: (padding-x: 10px, padding-y: 10px, item-group-spacing: 16px, item-min-width: calc( 1.5em + 16px + 2px ), pager-dropdown-width: 5em))
Description
The sizes map of the Pager.

Picker

NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-button-bg#f5f5f5
Description
The background color of the Picker components.
$kendo-picker-textColor$kendo-button-text#424242
Description
The text color of the Picker components.
$kendo-picker-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Picker components.
$kendo-picker-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient of the Picker components.
$kendo-picker-shadowNull$kendo-button-shadownull
Description
The shadow of the Picker components.
$kendo-picker-hover-bgColor$kendo-button-hover-bg#ebebeb
Description
The background color of the hovered Picker components.
$kendo-picker-hover-textNull$kendo-button-hover-textnull
Description
The text color of the hovered Picker components.
$kendo-picker-hover-borderNull$kendo-button-hover-bordernull
Description
The border color of the hovered Picker components.
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The gradient of the hovered Picker components.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull
Description
The shadow of the hovered Picker components.
$kendo-picker-focus-bgNull$kendo-button-focus-bgnull
Description
The background color of the focused Picker components.
$kendo-picker-focus-textNull$kendo-button-focus-textnull
Description
The text color of the focused Picker components.
$kendo-picker-focus-borderNull$kendo-button-focus-bordernull
Description
The border color of the focused Picker components.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull
Description
The gradient of the focused Picker components.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the focused Picker components.
$kendo-picker-disabled-bgNullnullnull
Description
The background color of the disabled Picker components.
$kendo-picker-disabled-textNullnullnull
Description
The text color of the disabled Picker components.
$kendo-picker-disabled-borderNullnullnull
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-button-text#424242
Description
The text color of the outline Picker components.
$kendo-picker-outline-borderColorrgba( $kendo-picker-outline-text, .5)rgba(66, 66, 66, 0.5)
Description
The border color of the outline Picker components.
$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#424242
Description
The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-textColork-contrast-legacy( $kendo-picker-outline-hover-bg )white
Description
The text color of the outline hovered Picker components.
$kendo-picker-outline-hover-borderColor$kendo-picker-outline-hover-bg#424242
Description
The border color of the outline hovered Picker components.
$kendo-picker-outline-focus-bgNullnullnull
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-borderNullnullnull
Description
The border color of the outline focused Picker components.
$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
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-button-text#424242
Description
The text color of the flat Picker components.
$kendo-picker-flat-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border color of the flat Picker components.
$kendo-picker-flat-hover-bgColorrgba( $kendo-button-text, .04 )rgba(66, 66, 66, 0.04)
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-hover-borderColorrgba( $kendo-button-border, .16 )rgba(0, 0, 0, 0.16)
Description
The border 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-borderNullnullnull
Description
The border color of the flat focused Picker components.
$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
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.

Popover

NameTypeDefault valueComputed value
$kendo-popover-border-widthNumber$kendo-card-border-width1px
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-radius6px
Description
The radius of the border around the Popover.
$kendo-popover-font-familyString$kendo-card-font-familyinherit
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-text#424242
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.08)
Description
The border color of the Popover.
$kendo-popover-shadowList$kendo-popup-shadow0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)
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-textColor$kendo-card-header-text#424242
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.08)
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.08)
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-widthNumber1px1px
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-md1.4285714286
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-text#424242
Description
Text color of the popup.
$kendo-popup-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Border color of the popup.
$kendo-popup-shadowList0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04)0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)
Description
Box shadow of the popup.

Progressbar

NameTypeDefault valueComputed value
$kendo-progressbar-heightNumber22px22px
Description
The height of the ProgressBar.
$kendo-progressbar-horizontal-widthNumber100%100%
Description
The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timingList1s linear infinite1s linear infinite
Description
The animation timing of the ProgressBar.
$kendo-progressbar-border-widthNumber0px0px
Description
The width of the border around the ProgressBar.
$kendo-progressbar-font-familyString$kendo-font-familyinherit
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-shade( $kendo-component-bg, 1 )#ebebeb
Description
The background color of the ProgressBar.
$kendo-progressbar-textColor$kendo-component-text#424242
Description
The text color of the ProgressBar.
$kendo-progressbar-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the ProgressBar.
$kendo-progressbar-gradientNullnullnull
Description
The background gradient of the ProgressBar.
$kendo-progressbar-value-bgColor$kendo-color-primary#ff6358
Description
The progress background color of the ProgressBar.
$kendo-progressbar-value-textColork-contrast-legacy( $kendo-progressbar-value-bg )white
Description
The progress text color of the ProgressBar.
$kendo-progressbar-value-borderColork-try-shade( $kendo-progressbar-value-bg )#eb5b51
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#ebebeb
Description
The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-text#424242
Description
The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-borderColor$kendo-progressbar-borderrgba(0, 0, 0, 0.08)
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-body-bg#ffffff
Description
The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#ff6358
Description
The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#ebebeb
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-widthNumber1px1px
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-bgColor$kendo-checkbox-bg#ffffff
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.08)
Description
The border color of the RadioButton.
$kendo-radio-hover-bgNull$kendo-checkbox-hover-bgnull
Description
The background color of the hovered RadioButton.
$kendo-radio-hover-textNull$kendo-checkbox-hover-textnull
Description
The color of the hovered RadioButton.
$kendo-radio-hover-borderNull$kendo-checkbox-hover-bordernull
Description
The border color of the hovered RadioButton.
$kendo-radio-checked-bgColor$kendo-checkbox-checked-bg#ff6358
Description
The background color of the checked RadioButton.
$kendo-radio-checked-textColor$kendo-checkbox-checked-textwhite
Description
The color of the checked RadioButton.
$kendo-radio-checked-borderColor$kendo-checkbox-checked-border#ff6358
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-shadowList$kendo-checkbox-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.06)
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-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 2px rgba(255, 99, 88, 0.3)
Description
The box shadow of the focused and checked RadioButton.
$kendo-radio-disabled-bgNull$kendo-checkbox-disabled-bgnull
Description
The background color of the disabled RadioButton.
$kendo-radio-disabled-textNull$kendo-checkbox-disabled-textnull
Description
The color of the disabled RadioButton.
$kendo-radio-disabled-borderNull$kendo-checkbox-disabled-bordernull
Description
The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bgNull$kendo-checkbox-disabled-checked-bgnull
Description
The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-textNull$kendo-checkbox-disabled-checked-textnull
Description
The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-borderNull$kendo-checkbox-disabled-checked-bordernull
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 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e")
Description
The image of the checked RadioButton indicator.
$kendo-radio-disabled-checked-imageNullnullnull
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-y4px
Description
The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#ff6358
Description
The background color of the RadioButton ripple.
$kendo-radio-ripple-opacityNumber.250.25
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-familyString$kendo-font-familyinherit
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-md1.4285714286
Description
The line height of the ScrollView.
$kendo-scrollview-textColor$kendo-component-text#424242
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.08)
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#f5f5f5
Description
The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#ff6358
Description
The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#ff6358
Description
The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba(0, 0, 0, .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(0, 0, 0, .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(0, 0, 0, 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(255, 255, 255, .4)rgba(255, 255, 255, 0.4)
Description
The background color of the ScrollView pager in light mode.
$kendo-scrollview-dark-bgColorrgba(0, 0, 0, .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.

Split-button

NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y4px
Description
The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y2px
Description
The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y4px
Description
The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-xNumber$kendo-button-lg-padding-y8px
Description
The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y4px
Description
The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y2px
Description
The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y4px
Description
The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y8px
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-widthNumber1px1px
Description
The border width of the Switch track.
$kendo-switch-thumb-border-widthNumber1px1px
Description
The border width of the Switch thumb.
$kendo-switch-label-text-transformStringuppercaseuppercase
Description
The text transform of the Switch label.
$kendo-switch-label-displayStringinlineinline
Description
The display of the Switch label.
$kendo-switch-sizesMap( sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) )(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))
Description
The map with the different Switch sizes.
$kendo-switch-off-track-bgColor$kendo-component-bg#ffffff
Description
The background of the track when the Switch is not checked.
$kendo-switch-off-track-textColor$kendo-component-text#424242
Description
The text color of the track when the Switch is not checked.
$kendo-switch-off-track-borderColork-try-shade( $kendo-switch-off-track-bg, 8% )#ebebeb
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-ringList2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )2px solid rgba(0, 0, 0, 0.08)
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-bgColor$kendo-base-bg#fafafa
Description
The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-textColor$kendo-base-text#424242
Description
The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
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-bgColor$kendo-color-primary#ff6358
Description
The background of the track when the Switch is checked.
$kendo-switch-on-track-textColork-contrast-legacy( $kendo-switch-on-track-bg )white
Description
The text color of the track when the Switch is checked.
$kendo-switch-on-track-borderColor$kendo-switch-on-track-bg#ff6358
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-ringList2px solid rgba( $kendo-switch-on-track-border, .25 )2px solid rgba(255, 99, 88, 0.25)
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-base-bg#fafafa
Description
The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-textColor$kendo-base-text#424242
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
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-widthNumber0px0px
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: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, 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-text#424242
Description
Text color of tables.
$kendo-table-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Border color of tables.
$kendo-table-header-bgColor$kendo-component-header-bg#fafafa
Description
Background color of table headers.
$kendo-table-header-textColor$kendo-component-header-text#424242
Description
Text color of table headers.
$kendo-table-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of table headers.
$kendo-table-header-gradientNull$kendo-component-header-gradientnull
Description
Gradient of table headers.
$kendo-table-footer-bgColor$kendo-table-header-bg#fafafa
Description
Background color of table footers.
$kendo-table-footer-textColor$kendo-table-header-text#424242
Description
Text color of table footers.
$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of table footers.
$kendo-table-group-row-bgColor$kendo-table-header-bg#fafafa
Description
Background color of group rows in table.
$kendo-table-group-row-textColor$kendo-table-header-text#424242
Description
Text color of group rows in table.
$kendo-table-group-row-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of group rows in table.
$kendo-table-alt-row-bgColorrgba( k-contrast-legacy( $kendo-table-bg ), .04 )rgba(0, 0, 0, 0.04)
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-bgColork-color-darken($kendo-table-bg, 7%)#ededed
Description
Background color of hovered rows in table.
$kendo-table-hover-textNullnullnull
Description
Text color of hovered rows in table.
$kendo-table-hover-borderNullnullnull
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-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
Box shadow of focused rows in table.
$kendo-table-selected-bgColorrgba($kendo-selected-bg, .25)rgba(255, 99, 88, 0.25)
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-component-text#424242
Description
Text color of tabstrip component
$kendo-tabstrip-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Border color of tabstrip component
$kendo-tabstrip-item-padding-xNumberk-map-get( $kendo-spacing, 3 )12px
Description
Horizontal padding of tabs
$kendo-tabstrip-item-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
Vertical padding of tabs
$kendo-tabstrip-item-border-widthNumber1px1px
Description
Width of border around tabs
$kendo-tabstrip-item-border-radiusNumber$kendo-border-radius-md4px
Description
Border radius of tabs
$kendo-tabstrip-item-gapNumber00
Description
Spacing between tabs
$kendo-tabstrip-item-bgNullnullnull
Description
Background color of tabs
$kendo-tabstrip-item-textColor$kendo-link-text#ff6358
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-bgNullnullnull
Description
Background color of hovered tabs
$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#d6534a
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-bgColor$kendo-component-bg#ffffff
Description
Background color of selected tabs
$kendo-tabstrip-item-selected-textColor$kendo-component-text#424242
Description
Text color of selected tabs
$kendo-tabstrip-item-selected-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
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-widthNumber1px1px
Description
Width of border around tabstrip content
$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff
Description
Background color of tabstrip content
$kendo-tabstrip-content-textColor$kendo-component-text#424242
Description
Text color of tabstrip content
$kendo-tabstrip-content-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Border color of tabstrip content
$kendo-tabstrip-content-focus-borderColor$kendo-component-text#424242
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-bgColor$kendo-base-bg#fafafa
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-widthNumber$kendo-card-border-width1px
Description
The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadowList$kendo-card-focus-shadow0 3px 4px 0 rgba(0, 0, 0, 0.06)
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-lg6px
Description
The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bgColorrgba(255, 255, 255, .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-widthNumber1px1px
Description
The width of the border around the Toolbar.
$kendo-toolbar-border-radiusNullnullnull
Description
The border radius of the Toolbar.
$kendo-toolbar-font-familyString$kendo-font-familyinherit
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-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Toolbar.
$kendo-toolbar-bgColor$kendo-base-bg#fafafa
Description
The background color of the Toolbar.
$kendo-toolbar-textColor$kendo-base-text#424242
Description
The text color of the Toolbar.
$kendo-toolbar-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The color of the border around the Toolbar.
$kendo-toolbar-gradientNullnullnull
Description
The gradient of the Toolbar.
$kendo-toolbar-shadowNullnullnull
Description
The box shadow of the Toolbar.
$kendo-toolbar-separator-borderStringinheritinherit
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-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The 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
The sizes map for the Toolbar.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyString$kendo-font-familyinherit
Description
The font family of the TreeView.
$kendo-treeview-font-sizeNumber$kendo-font-size-md14px
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-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the TreeView.
$kendo-treeview-sm-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the small TreeView.
$kendo-treeview-md-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the medium TreeView.
$kendo-treeview-lg-line-heightNumber$kendo-line-height-lg1.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, 2 )8px
Description
The horizontal padding of the TreeView items.
$kendo-treeview-sm-item-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the large TreeView items.
$kendo-treeview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the TreeView items.
$kendo-treeview-sm-item-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
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-radiusNumber$kendo-border-radius-md4px
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: 8px, item-padding-y: 2px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), md: (font-size: 14px, line-height: 1.4285714286, item-padding-x: 8px, item-padding-y: 4px, checkbox-padding-x: 4px, checkbox-padding-y: 2px), lg: (font-size: 16px, line-height: 1.5, item-padding-x: 8px, 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-text#424242
Description
The text color of the TreeView.
$kendo-treeview-borderNullnullnull
Description
The border color of the TreeView.
$kendo-treeview-item-hover-bgColor$kendo-hover-bg#f0f0f0
Description
The background color of hovered TreeView items.
$kendo-treeview-item-hover-textColor$kendo-hover-text#424242
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-bgColor$kendo-selected-bg#ff6358
Description
The background color of selected TreeView items.
$kendo-treeview-item-selected-textColor$kendo-selected-textwhite
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
The background gradient of selected TreeView items.
$kendo-treeview-item-focus-shadowList$kendo-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of focused TreeView items.
$kendo-treeview-loadmore-bgColortransparenttransparent
Description
The background color of the Load More button in the TreeView
$kendo-treeview-loadmore-textColor$kendo-link-text#ff6358
Description
The text color of the Load More button in the TreeView
$kendo-treeview-loadmore-borderNullnullnull
Description
The border color of the Load More button in the TreeView
$kendo-treeview-loadmore-hover-bgColortransparenttransparent
Description
The background color of the hovered Load More button in the TreeView
$kendo-treeview-loadmore-hover-textColor$kendo-link-hover-text#d6534a
Description
The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-borderNullnullnull
Description
The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bgColortransparenttransparent
Description
The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-textColor$kendo-link-hover-text#d6534a
Description
The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-borderNullnullnull
Description
The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadowList$kendo-treeview-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the focused Load More button in the TreeView.

Typography

NameTypeDefault valueComputed value
$kendo-font-sizeNumber14px14px
Description
Base font size across all components.
$kendo-font-size-xsNumber10px10px
Description
Extra small font size across all components.
$kendo-font-size-smNumber12px12px
Description
Small font size across all components.
$kendo-font-size-mdNumber$kendo-font-size14px
Description
Medium font size across all components.
$kendo-font-size-lgNumber16px16px
Description
Large font size across all components.
$kendo-font-size-xlNumber20px20px
Description
Extra large font size across all components.
$kendo-font-family-sans-serifListsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
Font family for text.
$kendo-font-family-monospaceListSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description
Font family for monospaced text. Used for styling the code.
$kendo-font-familyStringinheritinherit
Description
Font family across all components.
$kendo-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
Line height used along with $kendo-font-size.
$kendo-line-height-xsNumber11
Description
Extra small line height used along with $kendo-font-size-xs.
$kendo-line-height-smNumber1.251.25
Description
Small line height used along with $kendo-font-size-sm.
$kendo-line-height-mdNumber$kendo-line-height1.4285714286
Description
Medium line height used along with $kendo-font-size-md.
$kendo-line-height-lgNumber1.51.5
Description
Large line height used along with $kendo-font-size-lg.
$kendo-font-weight-lightNumber300300
Description
Light font weight.
$kendo-font-weight-normalNumber400400
Description
Normal font weight.
$kendo-font-weight-mediumNumber500500
Description
Medium font weight.
$kendo-font-weight-semiboldNumber600600
Description
Semibold font weight.
$ke