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 * 0.75)
Description
xtra small icon size.
$kendo-icon-size-smCalculationcalc( #{$kendo-icon-size} * .875 )calc(16px * 0.875)
Description
Small icon size.
$kendo-icon-size-mdNumber$kendo-icon-size16px
Description
Medium icon size.
$kendo-icon-size-lgCalculationcalc( #{$kendo-icon-size} * 1.25 )calc(16px * 1.25)
Description
Large icon size.
$kendo-icon-size-xlCalculationcalc( #{$kendo-icon-size} * 1.5 )calc(16px * 1.5)
Description
Extra large icon size.
$kendo-icon-size-xxlCalculationcalc( #{$kendo-icon-size} * 2 )calc(16px * 2)
Description
Double extra large icon size.
$kendo-icon-size-xxxlCalculationcalc( #{$kendo-icon-size} * 3 )calc(16px * 3)
Description
Triple extra large icon size.
$kendo-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-focus-shadowListinset 0 0 0 2px rgba(0, 0, 0, .13)inset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description
Box shadow of focused items.
$kendo-transitionListcolor .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-outcolor 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out
Description
Transition used across all components.
$kendo-disabled-filterStringgrayscale(.1)grayscale(0.1)
Description
Filter used for disabled items.
$kendo-disabled-opacityNumber.60.6
Description
Opacity used for disabled items.
$kendo-base-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, 0.08)rgba(0, 0, 0, 0.08)
Description
The border color of the components' chrome area.
$kendo-base-gradientListrgba(black, 0), rgba(black, 0.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, 0.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, 0.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-disabled-textColor#8f8f8f#8f8f8f
Description
Text color of 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-textColorif($kendo-enable-color-system, k-color( on-light ), k-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-textColorif($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark ))white
Description
The text color of the AppBar based on dark theme color.
$kendo-appbar-box-shadowStringk-elevation(4)var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadowString$kendo-appbar-box-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
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-shadowStringk-elevation(4)var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px 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": if($kendo-enable-color-system, k-color( 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-bgColorif($kendo-enable-color-system, k-color( base ), #f5f5f5)#f5f5f5
Description
The base background of the Button.
$kendo-button-textColorif($kendo-enable-color-system, k-color( on-base ), #424242)#424242
Description
The base text color of the Button.
$kendo-button-borderColorif($kendo-enable-color-system, k-color( border ), rgba( black, .08 ))rgba(0, 0, 0, 0.08)
Description
The base border color of the Button.
$kendo-button-gradientListif($kendo-enable-color-system, null, (rgba( 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-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-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-bgColorif($kendo-enable-color-system, k-color( base-active ), k-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-textColorif($kendo-enable-color-system, k-color( on-primary ), k-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 if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), 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.

Captcha

NameTypeDefault valueComputed value
$kendo-captcha-spacerNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacer of the Captcha.
$kendo-captcha-widthNumber280px280px
Description
The width of the Captcha.
$kendo-captcha-font-familyString$kendo-font-familyinherit
Description
The font family of the Captcha.
$kendo-captcha-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Captcha.
$kendo-captcha-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Captcha.
$kendo-captcha-gapNumber$kendo-captcha-spacer8px
Description
The gap of the Captcha.
$kendo-captcha-bgColor$kendo-component-bg#ffffff
Description
The background color of the Captcha.
$kendo-captcha-textColor$kendo-component-bg#ffffff
Description
The text color of the Captcha.
$kendo-captcha-borderColor$kendo-component-bg#ffffff
Description
The border color of the Captcha.
$kendo-captcha-image-wrap-gapNumber$kendo-captcha-spacer8px
Description
The gap of the Captcha image wrapper.
$kendo-captcha-image-controls-gapNumber$kendo-captcha-spacer8px
Description
The gap of the Captcha image controls.
$kendo-captcha-validation-message-margin-topNumberk-math-div( $kendo-captcha-spacer, 2 )4px
Description
The top margin of the Captcha validation message.
$kendo-captcha-validation-message-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Captcha validation message.
$kendo-captcha-validation-message-font-styleStringitalicitalic
Description
The font style of the Captcha validation message.

Card

NameTypeDefault valueComputed value
$kendo-card-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Card.
$kendo-card-padding-yNumberk-map-get( $kendo-spacing, 3 )12px
Description
The vertical padding of the Card.
$kendo-card-border-widthNumber1px1px
Description
The width of the border around the Card.
$kendo-card-border-radiusNumber$kendo-border-radius-lg6px
Description
The border radius of the Card.
$kendo-card-inner-border-radiusCalculationcalc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )calc(6px - 1px)
Description
The inner border radius of the Card.
$kendo-card-font-familyString$kendo-font-familyinherit
Description
The font family of the Card.
$kendo-card-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Card.
$kendo-card-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the Card.
$kendo-card-deck-gapNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the Cards in the Card deck.
$kendo-card-bgColor$kendo-component-bg#ffffff
Description
The background color of the Card.
$kendo-card-textColor$kendo-component-text#424242
Description
The text color of the Card.
$kendo-card-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Card.
$kendo-card-shadowNullnullnull
Description
The shadow of the Card.
$kendo-card-focus-bgNullnullnull
Description
The background color of the focused Card.
$kendo-card-focus-textNullnullnull
Description
The text color of the focused Card.
$kendo-card-focus-borderColorrgba( black, .15 )rgba(0, 0, 0, 0.15)
Description
The border color of the focused Card.
$kendo-card-focus-shadowNullnullnull
Description
The shadow of the focused Card.
$kendo-card-header-padding-xNumber$kendo-card-padding-x16px
Description
The horizontal padding of the Card header.
$kendo-card-header-padding-yNumber$kendo-card-padding-y12px
Description
The vertical padding of the Card header.
$kendo-card-header-border-widthNumber1px1px
Description
The bottom border width of the Card header.
$kendo-card-header-bgNullnullnull
Description
The background color of the Card header.
$kendo-card-header-textColor$kendo-component-header-text#424242
Description
The text color of the Card header.
$kendo-card-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Card header.
$kendo-card-body-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Card body.
$kendo-card-body-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the Card body.
$kendo-card-footer-padding-xNumber$kendo-card-padding-x16px
Description
The horizontal padding of the Card footer.
$kendo-card-footer-padding-yNumber$kendo-card-padding-y12px
Description
The vertical padding of the Card footer.
$kendo-card-footer-border-widthNumber1px1px
Description
The top border width of the Card footer.
$kendo-card-footer-bgNullnullnull
Description
The background color of the Card footer.
$kendo-card-footer-textColor$kendo-component-header-text#424242
Description
The text color of the Card footer.
$kendo-card-footer-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Card footer.
$kendo-card-title-margin-bottomNumberk-map-get( $kendo-spacing, 2 )8px
Description
The bottom margin of the Card title.
$kendo-card-title-font-sizeNumber$kendo-h5-font-size16px
Description
The font size of the Card title.
$kendo-card-title-font-familyNullnullnull
Description
The font family of the Card title.
$kendo-card-title-line-heightNumber1.251.25
Description
The line height of the Card title.
$kendo-card-title-font-weightNumber$kendo-font-weight-normal400
Description
The font weight of the Card title.
$kendo-card-title-letter-spacingNullnullnull
Description
The letter spacing of the Card title.
$kendo-card-subtitle-margin-bottomNumberk-map-get( $kendo-spacing, 2 )8px
Description
The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the Card subtitle.
$kendo-card-subtitle-font-familyNullnullnull
Description
The font family of the Card subtitle.
$kendo-card-subtitle-line-heightStringnormalnormal
Description
The line height of the Card subtitle.
$kendo-card-subtitle-font-weightNumber$kendo-font-weight-normal400
Description
The font weight of the Card subtitle.
$kendo-card-subtitle-letter-spacingNullnullnull
Description
The letter spacing of the Card subtitle.
$kendo-card-subtitle-textColor$kendo-subtle-text#666666
Description
The text color of the Card subtitle.
$kendo-card-img-max-widthNumber100px100px
Description
The maximum width of the Card image.
$kendo-card-avatar-sizeNumber45px45px
Description
The size of the Avatar in the Card.
$kendo-card-avatar-spacingNumber$kendo-card-header-padding-x16px
Description
The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the Card actions.
$kendo-card-actions-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the Card actions.
$kendo-card-actions-border-widthNumber1px1px
Description
The top border width of the Card actions.
$kendo-card-actions-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the Card actions.
$kendo-card-deck-scroll-button-radiusNumber0px0px
Description
The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offsetNumber-$kendo-button-border-width-1px
Description
The border radius of the scroll button in the Card deck.
$kendo-card-callout-widthNumber20px20px
Description
The width of the Card callout.
$kendo-card-callout-heightNumber20px20px
Description
The height of the Card callout.

Charts

NameTypeDefault valueComputed value
$kendo-series-aColorif($kendo-enable-color-system, k-color( series-a ), #ff6358)#ff6358
Description
The first base series color and its light and dark shades.
$kendo-series-bColorif($kendo-enable-color-system, k-color( series-b ), #ffe162)#ffe162
Description
The second base series color and its light and dark shades.
$kendo-series-cColorif($kendo-enable-color-system, k-color( series-c ), #4cd180)#4cd180
Description
The third base series color and its light and dark shades.
$kendo-series-dColorif($kendo-enable-color-system, k-color( series-d ), #4b5ffa)#4b5ffa
Description
The fourth base series color and its light and dark shades.
$kendo-series-eColorif($kendo-enable-color-system, k-color( series-e ), #ac58ff)#ac58ff
Description
The fifth base series color and its light and dark shades.
$kendo-series-fColorif($kendo-enable-color-system, k-color( series-f ), #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-enable-color-system, k-color( on-app-surface, true ), 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-enable-color-system, k-color( on-app-surface, true ), 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-textColorif($kendo-enable-color-system, k-color( on-primary ), k-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 if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), 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-bgColorif($kendo-enable-color-system, k-color( base-subtle ), $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-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), 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-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), $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-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), 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-textColorif($kendo-enable-color-system, k-color( base ), k-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-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box shadow of the focused ColorGradient.
$kendo-color-gradient-canvas-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-gapNumber$kendo-color-gradient-spacer12px
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-gradient-canvas-rectangle-heightNumber180px180px
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-slider-track-sizeNumber10px10px
Description
The width of the ColorGradient slider.
$kendo-color-gradient-slider-border-radiusNumber10px10px
Description
The border radius of the ColorGradient slider.
$kendo-color-gradient-slider-draghandle-border-widthNumber3px3px
Description
The width of the border around the ColorGradient slider drag handle.
$kendo-color-gradient-slider-vertical-sizeNumber180px180px
Description
The height of the ColorGradient vertical slider.
$kendo-color-gradient-slider-horizontal-sizeNumber100%100%
Description
The width of the ColorGradient horizontal slider.
$kendo-color-gradient-draghandle-widthNumber14px14px
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-heightNumber14px14px
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-widthNumber1px1px
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-outline-widthNumber1px1px
Description
The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-radiusNumber50%50%
Description
The border radius of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-textNullnullnull
Description
The text color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-bgColortransparenttransparent
Description
The background color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-borderColorrgba( $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-shadowColorrgba( $kendo-color-black, .5 )rgba(0, 0, 0, 0.5)
Description
The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-shadowColor$kendo-color-black#000000
Description
The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-hover-shadowColor$kendo-color-black#000000
Description
The hover color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-yNumber- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px
Description
The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-xNumber- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px
Description
The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-input-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-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #3d3d3d, subtle: #666666, surface: #fafafa, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.08), border-alt: rgba(0, 0, 0, 0.16), base-subtle: #ebebeb, base-subtle-hover: #e0e0e0, base-subtle-active: #d6d6d6, base: #f5f5f5, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #c2c2c2, base-on-subtle: #3d3d3d, on-base: #3d3d3d, base-on-surface: #3d3d3d, primary-subtle: #ffeceb, primary-subtle-hover: #ffdedb, primary-subtle-active: #ffc8c4, primary: #ff6358, primary-hover: #ea5a51, primary-active: #d45349, primary-emphasis: #ff9d97, primary-on-subtle: #5c201c, on-primary: #ffffff, primary-on-surface: #ff6358, secondary-subtle: #fafafa, secondary-subtle-hover: #f5f5f5, secondary-subtle-active: #ebebeb, secondary: #666666, secondary-hover: #525252, secondary-active: #3d3d3d, secondary-emphasis: #e0e0e0, secondary-on-subtle: #141414, on-secondary: #ffffff, secondary-on-surface: #292929, tertiary-subtle: #d8f1fd, tertiary-subtle-hover: #c5eafc, tertiary-subtle-active: #a3dffb, tertiary: #03a9f4, tertiary-hover: #039ae0, tertiary-active: #028ccb, tertiary-emphasis: #61c9f9, tertiary-on-subtle: #023f5c, on-tertiary: #ffffff, tertiary-on-surface: #028ccb, info-subtle: #d2e2fb, info-subtle-hover: #bdd4f8, info-subtle-active: #80acf4, info: #0058e9, info-hover: #0052d6, info-active: #004ac2, info-emphasis: #6098f2, info-on-subtle: #002259, on-info: #ffffff, info-on-surface: #004ac2, success-subtle: #dcf0d3, success-subtle-hover: #cbe9bf, success-subtle-active: #b7e1a5, success: #37b400, success-hover: #32a500, success-active: #2d9600, success-emphasis: #81d15f, success-on-subtle: #1c5a00, on-success: #ffffff, success-on-surface: #2d9600, warning-subtle: #fff4d3, warning-subtle-hover: #ffeebd, warning-subtle-active: #ffe79e, warning: #ffc000, warning-hover: #eaaf00, warning-active: #d49f00, warning-emphasis: #ffd760, warning-on-subtle: #5e4700, on-warning: #3d3d3d, warning-on-surface: #ffc000, error-subtle: #fcddda, error-subtle-hover: #fbc8c3, error-subtle-active: #f98b80, error: #f31700, error-hover: #df1600, error-active: #ca1400, error-emphasis: #f76f60, error-on-subtle: #7a0c00, on-error: #ffffff, error-on-surface: #ca1400, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #ebebeb, light: #ebebeb, light-hover: #e0e0e0, light-active: #d6d6d6, light-emphasis: #d6d6d6, light-on-subtle: #141414, on-light: #000000, light-on-surface: #e0e0e0, dark-subtle: #c2c2c2, dark-subtle-hover: #adadad, dark-subtle-active: #999999, dark: #3d3d3d, dark-hover: #292929, dark-active: #1f1f1f, dark-emphasis: #666666, dark-on-subtle: #1f1f1f, on-dark: #ffffff, dark-on-surface: #141414, inverse-subtle: #c2c2c2, inverse-subtle-hover: #adadad, inverse-subtle-active: #999999, inverse: #3d3d3d, inverse-hover: #292929, inverse-active: #1f1f1f, inverse-emphasis: #666666, inverse-on-subtle: #1f1f1f, on-inverse: #ffffff, inverse-on-surface: #141414, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffe162, series-b-bold: #bfa94a, series-b-bolder: #807131, series-b-subtle: #fff0b1, series-b-subtler: #ffe989, series-c: #4cd180, series-c-bold: #399d60, series-c-bolder: #266940, series-c-subtle: #a6e8c0, series-c-subtler: #79dda0, series-d: #4b5ffa, series-d-bold: #3847bc, series-d-bolder: #26307d, series-d-subtle: #a5affd, series-d-subtler: #7887fb, series-e: #ac58ff, series-e-bold: #8142bf, series-e-bolder: #562c80, series-e-subtle: #d6acff, series-e-subtler: #c182ff, series-f: #ff5892, series-f-bold: #bf426e, series-f-bolder: #802c49, series-f-subtle: #ffacc9, series-f-subtler: #ff82ae)
Description
The global default Colors map.
$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-shadowNullnullnull
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), 0.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-bgNullnullnull
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.
$kendo-valid-bgNullnullnull
Description
Background color of the valid items.
$kendo-valid-textColor$kendo-color-success#37b400
Description
Text color of the valid items.
$kendo-valid-borderColor$kendo-color-success#37b400
Description
Border color of the valid items.
$kendo-valid-shadowNullnullnull
Description
Shadow of the valid 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.

Dock-manager

NameTypeDefault valueComputed value
$kendo-dock-manager-border-widthNumber1px1px
Description
The width of the border around the DockManager component.
$kendo-dock-manager-border-styleStringsolidsolid
Description
The style of the border around the DockManager component.
$kendo-dock-manager-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-widthNumber$kendo-dock-manager-border-width1px
Description
The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bgColor$kendo-component-header-bg#fafafa
Description
The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-yNullnullnull
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-xNullnullnull
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-familyString$kendo-font-familyinherit
Description
The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-sizeNumber$kendo-font-size-lg16px
Description
The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weightNumber$kendo-font-weight-normal400
Description
The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-xNumber$kendo-dock-manager-pane-header-padding-x16px
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-yNumber$kendo-dock-manager-pane-header-padding-x16px
Description
The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-yNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-widthNumber300px300px
Description
The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bgColor$kendo-color-white#ffffff
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadowList4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-dock-indicator-paddingNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bgColor#f5f5f5#f5f5f5
Description
The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-textColor$kendo-color-primary#ff6358
Description
The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-widthNumber1px1px
Description
The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-styleStringsolidsolid
Description
The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outlineColor$kendo-dock-indicator-text#ff6358
Description
The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadowListdrop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) )drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2))
Description
The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bgColor$kendo-color-primary#ff6358
Description
The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-textColor$kendo-color-white#ffffff
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-widthNumber1px1px
Description
The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-styleStringdasheddashed
Description
The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radiusNumber$kendo-border-radius-sm2px
Description
The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))rgba(255, 99, 88, 0.16)
Description
The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-borderColor$kendo-color-primary#ff6358
Description
The border color of the dropping area in the DockManager component.

Dropdowntree

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

Dropzone

NameTypeDefault valueComputed value
$kendo-dropzone-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the DropZone.
$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the DropZone.
$kendo-dropzone-border-widthNumber1px1px
Description
The border width of the DropZone.
$kendo-dropzone-min-heightNumber220px220px
Description
The minimum height of the DropZone.
$kendo-dropzone-font-familyString$kendo-font-familyinherit
Description
The font family of the DropZone.
$kendo-dropzone-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the DropZone.
$kendo-dropzone-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the DropZone.
$kendo-dropzone-bgColor$kendo-base-bg#fafafa
Description
The background color of the DropZone.
$kendo-dropzone-textColor$kendo-base-text#424242
Description
The text color of the DropZone.
$kendo-dropzone-borderColor$kendo-base-borderrgba(0, 0, 0, 0.08)
Description
The border color of the DropZone.
$kendo-dropzone-icon-spacingNumberk-map-get( $kendo-spacing, 6 )24px
Description
The spacing below the DropZone icon.
$kendo-dropzone-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))#7e7e7e
Description
The text color of the DropZone icon.
$kendo-dropzone-icon-hover-textColor$kendo-color-primary#ff6358
Description
The text color of the hovered DropZone icon.
$kendo-dropzone-hint-font-sizeNullnullnull
Description
The font size of the DropZone hint.
$kendo-dropzone-hint-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing below the DropZone hint.
$kendo-dropzone-hint-textNullnullnull
Description
The text color of the DropZone hint.
$kendo-dropzone-note-font-sizeNumber$kendo-font-size-sm12px
Description
The font size of the DropZone note.
$kendo-dropzone-note-spacingNullnullnull
Description
The spacing below the DropZone note.
$kendo-dropzone-note-textColor$kendo-subtle-text#666666
Description
The text color of the DropZone note.

Editor

NameTypeDefault valueComputed value
$kendo-editor-border-widthNumber1px1px
Description
The width of the border around the Еditor.
$kendo-editor-font-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-bgColorif($kendo-enable-color-system, k-color( primary-subtle ), k-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.

Filemanager

NameTypeDefault valueComputed value
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )16px
Description
The space between the FileManager items.
$kendo-file-manager-border-widthNumber1px1px
Description
The border width of the FileManager.
$kendo-file-manager-font-familyString$kendo-font-familyinherit
Description
The font family of the FileManager.
$kendo-file-manager-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the FileManager.
$kendo-file-manager-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the FileManager.
$kendo-file-manager-bgColor$kendo-component-bg#ffffff
Description
The background color of the FileManager.
$kendo-file-manager-textColor$kendo-component-text#424242
Description
The text color of the FileManager.
$kendo-file-manager-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the FileManager.
$kendo-file-manager-toolbar-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Toolbar.
$kendo-file-manager-toolbar-bgNullnullnull
Description
The background color of the FileManager Toolbar.
$kendo-file-manager-toolbar-textNullnullnull
Description
The text color of the FileManager Toolbar.
$kendo-file-manager-toolbar-borderNullnullnull
Description
The border color of the FileManager Toolbar.
$kendo-file-manager-toolbar-gradientNullnullnull
Description
The gradient of the FileManager Toolbar.
$kendo-file-manager-navigation-padding-xNumber$kendo-file-manager-spacer16px
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-yNumber$kendo-file-manager-spacer16px
Description
The vertical padding of the FileManager Navigation.
$kendo-file-manager-navigation-widthNumber20%20%
Description
The width of the FileManager Navigation.
$kendo-file-manager-navigation-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Navigation.
$kendo-file-manager-navigation-bgNullnullnull
Description
The background color of the FileManager Navigation.
$kendo-file-manager-navigation-textNullnullnull
Description
The text color of the FileManager Navigation.
$kendo-file-manager-navigation-borderNullnullnull
Description
The border color of the FileManager Navigation.
$kendo-file-manager-breadcrumb-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-bgColor$kendo-toolbar-bg#fafafa
Description
The background color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-textNullnullnull
Description
The text color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-borderNullnullnull
Description
The border color of the FileManager Breadcrumb.
$kendo-file-manager-listview-bgNullnullnull
Description
The background color of the FileManager ListView.
$kendo-file-manager-listview-textNullnullnull
Description
The text color of the FileManager ListView.
$kendo-file-manager-listview-borderNullnullnull
Description
The border color of the FileManager ListView.
$kendo-file-manager-listview-item-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the FileManager ListView item.
$kendo-file-manager-listview-item-widthNumber120px120px
Description
The width of the FileManager ListView item.
$kendo-file-manager-listview-item-heightNumber120px120px
Description
The height of the FileManager ListView item.
$kendo-file-manager-listview-item-bgNullnullnull
Description
The background color of the FileManager ListView item.
$kendo-file-manager-listview-item-textNullnullnull
Description
The text color of the FileManager ListView item.
$kendo-file-manager-listview-item-borderNullnullnull
Description
The border color of the FileManager ListView item.
$kendo-file-manager-listview-item-icon-bgNullnullnull
Description
The background color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#7e7e7e
Description
The text color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-borderNullnullnull
Description
The border color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-selected-bgNullnullnull
Description
Background color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-textStringinheritinherit
Description
Text color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-borderNullnullnull
Description
Border color of the FileManager selected ListView item icon.
$kendo-file-manager-grid-bgNullnullnull
Description
The background color of the FileManager Grid.
$kendo-file-manager-grid-textNullnullnull
Description
The text color of the FileManager Grid.
$kendo-file-manager-grid-borderNullnullnull
Description
The border color of the FileManager Grid.
$kendo-file-manager-preview-padding-xNumber$kendo-file-manager-spacer16px
Description
The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-yNumber$kendo-file-manager-spacer16px
Description
The vertical padding of the FileManager preview.
$kendo-file-manager-preview-widthNumber20%20%
Description
The width of the FileManager preview.
$kendo-file-manager-preview-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager preview.
$kendo-file-manager-preview-spacingNumber$kendo-file-manager-spacer16px
Description
The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gapNumberk-map-get( $kendo-spacing, 1 )4px
Description
The gap between the columns in the FileManager preview.
$kendo-file-manager-preview-bgNullnullnull
Description
The background color of the FileManager preview.
$kendo-file-manager-preview-textNullnullnull
Description
The text color of the FileManager preview.
$kendo-file-manager-preview-borderNullnullnull
Description
The border color of the FileManager preview.
$kendo-file-manager-preview-icon-bgNullnullnull
Description
The background color of the FileManager preview icon.
$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))#7e7e7e
Description
The text color of the FileManager preview icon.
$kendo-file-manager-preview-icon-borderNullnullnull
Description
The border color of the FileManager preview icon.

Filter

NameTypeDefault valueComputed value
$kendo-filter-padding-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-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
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-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))
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-textColorif($kendo-enable-color-system, k-color( on-app-surface ), k-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-bgColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( 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-borderColorif($kendo-enable-color-system, k-color( border-alt ), rgba( $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 if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), 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-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $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-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $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-textColor$kendo-input-borderrgba(0, 0, 0, 0.08)
Description
The color of the Input separator.
$kendo-input-separator-opacityNumber.50.5
Description
The opacity of the Input separator.
$kendo-input-prefix-textColor$kendo-subtle-text#666666
Description
The text color of the Input prefix.
$kendo-input-suffix-textColor$kendo-subtle-text#666666
Description
The text color of the Input suffix.
$kendo-input-prefix-textColor$kendo-subtle-text#666666
Description
The text color of the Input prefix.
$kendo-input-suffix-textColor$kendo-subtle-text#666666
Description
The text color of the Input suffix.
$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.
$kendo-input-valid-borderColor$kendo-valid-border#37b400
Description
The border color of the valid Input components.
$kendo-input-valid-shadowNull$kendo-valid-shadownull
Description
The shadow of the valid 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-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
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-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($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-group-gapNumberk-map-get( $kendo-spacing, 2 )8px
Description
The row-gap between the elements in the Notification group.
$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-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
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.

Pdf-viewer

NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-widthNumber1px1px
Description
The border width of the PDFViewer.
$kendo-pdf-viewer-font-familyString$kendo-font-familyinherit
Description
The font family of the PDFViewer.
$kendo-pdf-viewer-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the PDFViewer.
$kendo-pdf-viewer-line-heightNumber$kendo-line-height-md1.4285714286
Description
The line height of the PDFViewer.
$kendo-pdf-viewer-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer.
$kendo-pdf-viewer-textColor$kendo-component-text#424242
Description
The text color of the PDFViewer.
$kendo-pdf-viewer-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer.
$kendo-pdf-viewer-toolbar-bgNullnullnull
Description
The background color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The text color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The border color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-gradientNullnullnull
Description
The gradient of the PDFViewer Toolbar.
$kendo-pdf-viewer-canvas-bgColor$kendo-app-bg#fafafa
Description
The background color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-textNullnullnull
Description
The text color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-borderNullnullnull
Description
The border color of the PDFViewer canvas.
$kendo-pdf-viewer-page-spacingNumber30px30px
Description
The spacing of the PDFViewer page.
$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The background color of the PDFViewer page.
$kendo-pdf-viewer-page-textColor$kendo-component-text#424242
Description
The text color of the PDFViewer page.
$kendo-pdf-viewer-page-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer page.
$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer page.
$kendo-pdf-viewer-search-panel-padding-xNumber$kendo-toolbar-md-padding-x8px
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(8px * 2)
Description
The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing8px
Description
The spacing of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The border width of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-radiusNumber00
Description
The border radius of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-bgColor$kendo-component-bg#ffffff
Description
The background color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-textColor$kendo-component-text#424242
Description
The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-matches-spacingNumber$kendo-padding-sm-x4px
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-text#424242
Description
The background color of the PDFViewer highlight.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
$kendo-pdf-viewer-icon-textColor$kendo-dropzone-icon-text#7e7e7e
Description
The text color of the PDFViewer icon.

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-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $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-textColorif($kendo-enable-color-system, k-color( base ), k-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-bgColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $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-borderColorif($kendo-enable-color-system, k-color( border-alt ), rgba( $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-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
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-shadowStringk-elevation(4)var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
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-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-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-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))white
Description
The progress text color of the ProgressBar.
$kendo-progressbar-value-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-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.

Prompt

NameTypeDefault valueComputed value
$kendo-prompt-textColor$kendo-component-text#424242
Description
The text color of the Prompt.
$kendo-prompt-bgColor$kendo-component-bg#ffffff
Description
The background color of the Prompt.
$kendo-prompt-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Prompt.
$kendo-prompt-header-textColor$kendo-component-header-text#424242
Description
The text color of the Prompt header.
$kendo-prompt-header-bgColor$kendo-component-bg#ffffff
Description
The background color of the Prompt header.
$kendo-prompt-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Prompt header.
$kendo-prompt-content-padding-yNumberk-map-get( $kendo-spacing, 4 )16px
Description
The vertical padding of the Prompt content.
$kendo-prompt-content-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Prompt content.
$kendo-prompt-content-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items of the Prompt content.
$kendo-prompt-content-textColor$kendo-component-header-text#424242
Description
The text color of the Prompt content.
$kendo-prompt-content-bgColor$kendo-component-header-bg#fafafa
Description
The background color of the Prompt content.
$kendo-prompt-content-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
The text border of the Prompt content.
$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )8px
Description
The spacing between the items of the Prompt content expander.
$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the Prompt suggestion container.
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )8px
Description
The horizontal padding of the Prompt suggestion container.
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Prompt suggestion container.
$kendo-prompt-suggestion-textColor$kendo-component-text#424242
Description
The text color of the Prompt suggestion container.
$kendo-prompt-suggestion-bgColor$kendo-body-bg#ffffff
Description
The background color of the Prompt suggestion container.
$kendo-prompt-suggestion-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Prompt suggestion container.
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The elevation of the Prompt suggestion container.

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$ke