Customization

Variables

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

Common

NameTypeDefault valueComputed value
$kendo-border-radiusNumber$border-radius0.375rem
Description
Border radius for all components.
$kendo-chip-lg-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the large Chip.
$kendo-base-bgColor$gray-100#f8f9fa
Description
The background of the components' chrome area.
$kendo-base-textColor$kendo-body-text#212529
Description
The text color of the components' chrome area.
$kendo-base-borderColork-try-shade( $kendo-base-bg, 1 )#e4e5e6
Description
The border color of the components' chrome area.
$kendo-base-gradientNullnullnull
Description
The gradient background of the components' chrome area.
$kendo-hover-bgColor$gray-200#e9ecef
Description
The background of hovered items.
$kendo-hover-textColor$kendo-base-text#212529
Description
The text color of hovered items.
$kendo-hover-borderColork-try-shade( $kendo-hover-bg, 1 )#d6d9dc
Description
The border color of hovered items.
$kendo-hover-gradientNullnullnull
Description
The gradient background of hovered items.
$kendo-selected-bgColor$kendo-color-primary#0d6efd
Description
The background of selected items.
$kendo-selected-textColork-contrast-color( $kendo-selected-bg )white
Description
The text color of selected items.
$kendo-selected-borderColork-try-shade( $kendo-selected-bg, 1 )#0c65e9
Description
The border color of selected items.
$kendo-selected-gradientNullnullnull
Description
The gradient background of selected items.
$kendo-disabled-textColorif( $kendo-is-dark-theme, $gray-600, $gray-500)#adb5bd
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 )0.5rem
Description
The horizontal padding of the AppBar.
$kendo-appbar-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the AppBar.
$kendo-appbar-border-widthNumber0px0px
Description
The width of the border around the AppBar.
$kendo-appbar-zindexNumber10001000
Description
The z-index of the AppBar.
$kendo-appbar-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the AppBar.
$kendo-appbar-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the AppBar.
$kendo-appbar-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the AppBar.
$kendo-appbar-gapNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing between the AppBar sections.
$kendo-appbar-light-bgColor$kendo-color-light#f8f9fa
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-color( $kendo-color-light ))black
Description
The text color of the AppBar based on light theme color.
$kendo-appbar-dark-bgColor$kendo-color-dark#212529
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-color( $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, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The box shadow of the AppBar.
$kendo-appbar-bottom-box-shadowStringk-elevation(4)var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The box shadow of the AppBar with bottom position.

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-widthNumber1px1px
Description
The border width of the Avatar.
$kendo-avatar-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Avatar.
$kendo-avatar-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Avatar.
$kendo-avatar-line-heightNumber$kendo-line-height-md1.5
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: 1rem, md: 2rem, lg: 4rem)
Description
The sizes map of the Avatar.
$kendo-avatar-theme-colorsMap$kendo-theme-colors("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)
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$badge-border-radius0.375rem
Description
The border radius of the Badge.
$kendo-badge-padding-xNumber$badge-padding-x0.65em
Description
The horizontal padding of the Badge.
$kendo-badge-sm-padding-xNumberk-math-div( $badge-padding-x, 2 )0.325em
Description
The horizontal padding of the small Badge.
$kendo-badge-md-padding-xNumber$badge-padding-x0.65em
Description
The horizontal padding of the medium Badge.
$kendo-badge-lg-padding-xNumber( $badge-padding-x * 1.5 )0.975em
Description
The horizontal padding of the large Badge.
$kendo-badge-padding-yNumber$badge-padding-y0.35em
Description
The vertical padding of the Badge.
$kendo-badge-sm-padding-yNumberk-math-div( $badge-padding-y, 2 )0.175em
Description
The vertical padding of the small Badge.
$kendo-badge-md-padding-yNumber$badge-padding-y0.35em
Description
The vertical padding of the medium Badge.
$kendo-badge-lg-padding-yNumber( $badge-padding-y * 1.5 )0.525em
Description
The vertical padding of the large Badge.
$kendo-badge-font-sizeNumber$badge-font-size0.75em
Description
The font sizes of the Badge.
$kendo-badge-sm-font-sizeNumber$badge-font-size0.75em
Description
The font size of the small Badge.
$kendo-badge-md-font-sizeNumber$badge-font-size0.75em
Description
The font size of the medium Badge.
$kendo-badge-lg-font-sizeNumber$badge-font-size0.75em
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 + 0.7em + 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 + 0.35em + 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 + 0.7em + 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 + 1.05em + 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: 0.325em, padding-y: 0.175em, font-size: 0.75em, line-height: 1, min-width: calc(1em + 0.35em + 2px)), md: (padding-x: 0.65em, padding-y: 0.35em, font-size: 0.75em, line-height: 1, min-width: calc(1em + 0.7em + 2px)), lg: (padding-x: 0.975em, padding-y: 0.525em, font-size: 0.75em, line-height: 1, min-width: calc(1em + 1.05em + 2px)))
Description
The sizes map for the Badge.

Bottom-navigation

NameTypeDefault valueComputed value
$kendo-bottom-nav-padding-xNumber0px0px
Description
The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-yNumber$kendo-bottom-nav-padding-x0px
Description
The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gapNumber$kendo-bottom-nav-padding-x0px
Description
The spacing between the BottomNavigation items.
$kendo-bottom-nav-border-widthList1px 0px 0px 0px1px 0px 0px 0px
Description
The width of the border around the BottomNavigation.
$kendo-bottom-nav-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the BottomNavigation.
$kendo-bottom-nav-font-sizeNumber$kendo-font-size-md1rem
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 )0.5rem
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} + #{k-map-get( $kendo-spacing, 4 )} - #{$kendo-bottom-nav-padding-x * 2} )calc(40px + 1rem - 0px)
Description
The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radiusNullnullnull
Description
The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gapList0 k-map-get( $kendo-spacing, 1 )0 0.25rem
Description
The spacing of the BottomNavigation item.
$kendo-bottom-nav-shadowStringk-elevation(4)var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The box shadow of the BottomNavigation.
$kendo-bottom-nav-flat-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The border color of the flat BottomNavigation.

Breadcrumb

NameTypeDefault valueComputed value
$kendo-breadcrumb-border-widthNumber0px0px
Description
The width of the border around the Breadcrumb.
$kendo-breadcrumb-margin-xNullnullnull
Description
The horizontal margin of the Breadcrumb.
$kendo-breadcrumb-margin-yNullnullnull
Description
The vertical margin of the Breadcrumb.
$kendo-breadcrumb-padding-xNullnullnull
Description
The horizontal padding of the Breadcrumb.
$kendo-breadcrumb-padding-yNullnullnull
Description
The vertical padding of the Breadcrumb.
$kendo-breadcrumb-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Breadcrumb.
$kendo-breadcrumb-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-sizeNumber$kendo-breadcrumb-font-size1rem
Description
The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the large Breadcrumb.
$kendo-breadcrumb-line-heightNumber$kendo-line-height-md1.5
Description
The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-heightNumber$kendo-breadcrumb-line-height1.5
Description
The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-heightNumber$kendo-line-height-md1.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#212529
Description
The base text color of the Breadcrumb.
$kendo-breadcrumb-borderColor$kendo-component-border#dee2e6
Description
The base border color of the Breadcrumb.
$kendo-breadcrumb-focus-shadowList0 0 2px 1px rgba( black, .06 )0 0 2px 1px rgba(0, 0, 0, 0.06)
Description
The box shadow of the focused Breadcrumb.
$kendo-breadcrumb-link-padding-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-xNumber$kendo-breadcrumb-link-padding-x0.75rem
Description
The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-yNumberk-map-get( $kendo-spacing, 1.5 )0.375rem
Description
The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-yNumber$kendo-breadcrumb-link-padding-y0.5rem
Description
The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-yNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-yNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-yNumber$kendo-breadcrumb-icon-link-padding-y0.75rem
Description
The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-yNumberk-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-xNumber$kendo-breadcrumb-icon-link-padding-y0.75rem
Description
The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-xNumber$kendo-breadcrumb-sm-icon-link-padding-y0.5rem
Description
The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-xNumber$kendo-breadcrumb-icon-link-padding-x0.75rem
Description
The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-xNumber$kendo-breadcrumb-lg-icon-link-padding-y0.875rem
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-spacing0.5rem
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#0d6efd
Description
The text color of the Breadcrumb link.
$kendo-breadcrumb-link-borderNullnullnull
Description
The border color of the Breadcrumb link.
$kendo-breadcrumb-link-hover-bgNullnullnull
Description
The background color of the hovered Breadcrumb link.
$kendo-breadcrumb-link-hover-textColor$kendo-link-hover-text#0a58ca
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-textNullnullnull
Description
The text color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-borderNullnullnull
Description
The border color of the focused Breadcrumb link.
$kendo-breadcrumb-link-focus-shadowListinset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 ))inset 0 0 0 3px rgba(33, 37, 41, 0.25)
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-textColor$kendo-link-text#0d6efd
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-bgNullnullnull
Description
The background color of the hovered Breadcrumb root link.
$kendo-breadcrumb-root-link-hover-textColor$kendo-link-hover-text#0a58ca
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 3px rgba(33, 37, 41, 0.25)
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-textColor$kendo-color-secondary#6c757d
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: 0.75rem, link-padding-y: 0.375rem, icon-link-padding-x: 0.5rem, icon-link-padding-y: 0.5rem, font-size: 0.875rem, line-height: 1.4285714286), md: (link-padding-x: 0.75rem, link-padding-y: 0.5rem, icon-link-padding-x: 0.75rem, icon-link-padding-y: 0.75rem, font-size: 1rem, line-height: 1.5), lg: (link-padding-x: 0.75rem, link-padding-y: 0.625rem, icon-link-padding-x: 0.875rem, icon-link-padding-y: 0.875rem, font-size: 1rem, line-height: 1.5))
Description
The sizes map for the Breadcrumb.

Button

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber$btn-border-width1px
Description
The width of the border around the Button.
$kendo-button-border-radiusNullnullnull
Description
The border radius of the Button.
$kendo-button-padding-xNumber$btn-padding-x0.75rem
Description
The horizontal padding of the Button.
$kendo-button-sm-padding-xNumber$btn-padding-x-sm0.5rem
Description
The horizontal padding of the small Button.
$kendo-button-md-padding-xNumber$btn-padding-x0.75rem
Description
The horizontal padding of the medium Button.
$kendo-button-lg-padding-xNumber$btn-padding-x-lg1rem
Description
The horizontal padding of the large Button.
$kendo-button-padding-yNumber$btn-padding-y0.375rem
Description
The vertical padding of the Button.
$kendo-button-sm-padding-yNumber$btn-padding-y-sm0.25rem
Description
The vertical padding of the small Button.
$kendo-button-md-padding-yNumber$btn-padding-y0.375rem
Description
The vertical padding of the medium Button.
$kendo-button-lg-padding-yNumber$btn-padding-y-lg0.5rem
Description
The vertical padding of the large Button.
$kendo-button-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Button.
$kendo-button-font-sizeNumber$btn-font-size1rem
Description
The font size of the Button.
$kendo-button-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Button.
$kendo-button-md-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the medium Button.
$kendo-button-lg-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the large Button.
$kendo-button-line-heightNumber$btn-line-height1.5
Description
The line height used along with the $kendo-font-size variable.
$kendo-button-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-heightNumber$kendo-line-height-md1.5
Description
The line height used along with the $kendo-font-size variable of the medium Button.
$kendo-button-lg-line-heightNumber$kendo-line-height-md1.5
Description
The line height used along with the $kendo-font-size variable of the large Button.
$kendo-button-calc-sizeCalculationcalc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )calc(1.5em + 0.75rem + 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.5em + 0.75rem)
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: 0.5rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: 1.4285714286), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.5), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: 1rem, 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 ), #e4e7eb) ) )("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb)
Description
The theme colors map for the Button.
$kendo-button-bgColorif($kendo-enable-color-system, k-color( base ), #e4e7eb)#e4e7eb
Description
The base background of the Button.
$kendo-button-textColorif($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 ))#212529
Description
The base text color of the Button.
$kendo-button-borderColor$kendo-button-bg#e4e7eb
Description
The base border color of the Button.
$kendo-button-gradientNullnullnull
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-color-darken( $kendo-button-bg, 7.5% ))#ced3db
Description
The base background of the hovered Button.
$kendo-button-hover-textNullnullnull
Description
The base text color of the hovered Button.
$kendo-button-hover-borderColorif($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% ))#c7cdd5
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-color-darken( $kendo-button-bg, 10% ))#c7cdd5
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-borderColorif($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))#bfc6d0
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-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% ))#0257d5
Description
The base background color of the selected Button.
$kendo-button-selected-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg ))white
Description
The text color of the selected Button.
$kendo-button-selected-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% ))#0252c9
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-bgColorif($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))#c7cdd5
Description
The base background of the focused Button.
$kendo-button-focus-textNullnullnull
Description
The base text color of the focused Button.
$kendo-button-focus-borderColorif($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))#bfc6d0
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 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 ))0 0 0 0.25rem rgba(228, 231, 235, 0.5)
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.080.08
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 a background for the flat Button.
$kendo-flat-button-selected-opacityNumber.20.2
Description
The overlay opacity of the selected flat Button. Used to create a 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-transitionList$kendo-transitioncolor 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
The color transition of the Button.

Captcha

NameTypeDefault valueComputed value
$kendo-captcha-spacerNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacer of the Captcha.
$kendo-captcha-widthNumber335px335px
Description
The width of the Captcha.
$kendo-captcha-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Captcha.
$kendo-captcha-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Captcha.
$kendo-captcha-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Captcha.
$kendo-captcha-gapNumber$kendo-captcha-spacer0.5rem
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-spacer0.5rem
Description
The gap of the Captcha image wrapper.
$kendo-captcha-image-controls-gapNumber$kendo-captcha-spacer0.5rem
Description
The gap of the Captcha image controls.
$kendo-captcha-validation-message-margin-topNumberk-math-div( $kendo-captcha-spacer, 2 )0.25rem
Description
The top margin of the Captcha validation message.
$kendo-captcha-validation-message-font-sizeNumber$kendo-font-size-sm0.875rem
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-xNumber$card-spacer-x1rem
Description
The horizontal padding of the Card.
$kendo-card-padding-yNumber$card-spacer-y1rem
Description
The vertical padding of the Card.
$kendo-card-border-widthNumber1px1px
Description
The width of the border around the Card.
$kendo-card-border-radiusNumber$card-border-radius0.375rem
Description
The border radius of the Card.
$kendo-card-inner-border-radiusCalculationcalc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )calc(0.375rem - 1px)
Description
The inner border radius of the Card.
$kendo-card-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Card.
$kendo-card-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Card.
$kendo-card-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Card.
$kendo-card-deck-gapNumberk-map-get( $kendo-spacing, 4 )1rem
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#212529
Description
The text color of the Card.
$kendo-card-borderColor$kendo-component-border#dee2e6
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-borderNullnullnull
Description
The border color of the focused Card.
$kendo-card-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused Card.
$kendo-card-header-padding-xNumber$kendo-card-padding-x1rem
Description
The horizontal padding of the Card header.
$kendo-card-header-padding-yNumber$kendo-card-padding-y1rem
Description
The vertical padding of the Card header.
$kendo-card-header-border-widthNumber$kendo-card-border-width1px
Description
The bottom border width of the Card header.
$kendo-card-header-bgColor$kendo-component-header-bg#f8f9fa
Description
The background color of the Card header.
$kendo-card-header-textColor$kendo-component-header-text#212529
Description
The text color of the Card header.
$kendo-card-header-borderColor$kendo-card-border#dee2e6
Description
The border color of the Card header.
$kendo-card-body-padding-xNumber$kendo-card-padding-x1rem
Description
The horizontal padding of the Card body.
$kendo-card-body-padding-yNumber$kendo-card-padding-x1rem
Description
The vertical padding of the Card body.
$kendo-card-footer-padding-xNumber$kendo-card-padding-x1rem
Description
The horizontal padding of the Card footer.
$kendo-card-footer-padding-yNumber$kendo-card-padding-y1rem
Description
The vertical padding of the Card footer.
$kendo-card-footer-border-widthNumber$kendo-card-border-width1px
Description
The top border width of the Card footer.
$kendo-card-footer-bgColor$kendo-card-header-bg#f8f9fa
Description
The background color of the Card footer.
$kendo-card-footer-textColor$kendo-card-header-text#212529
Description
The text color of the Card footer.
$kendo-card-footer-borderColor$kendo-card-header-border#dee2e6
Description
The border color of the Card footer.
$kendo-card-title-margin-bottomNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The bottom margin of the Card title.
$kendo-card-title-font-sizeNumber$kendo-h5-font-size1.25rem
Description
The font size of the Card title.
$kendo-card-title-font-familyNull$headings-font-familynull
Description
The font family of the Card title.
$kendo-card-title-line-heightNumber$headings-line-height1.2
Description
The line height of the Card title.
$kendo-card-title-font-weightNumber$headings-font-weight500
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, 3 )0.75rem
Description
The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-sizeNumber$kendo-h6-font-size1rem
Description
The font size of the Card subtitle.
$kendo-card-subtitle-font-familyNull$headings-font-familynull
Description
The font family of the Card subtitle.
$kendo-card-subtitle-line-heightNumber$headings-line-height1.2
Description
The line height of the Card subtitle.
$kendo-card-subtitle-font-weightNumber$headings-font-weight500
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#6c757d
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-x1rem
Description
The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the Card actions.
$kendo-card-actions-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the Card actions.
$kendo-card-actions-border-widthNumber1px1px
Description
The top border width of the Card actions.
$kendo-card-actions-gapNumberk-map-get( $kendo-spacing, 2 )0.5rem
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-widthNumber1.3em1.3em
Description
The width of the Card callout.
$kendo-card-callout-heightNumber1.3em1.3em
Description
The height of the Card callout.

Charts

NameTypeDefault valueComputed value
$kendo-series-aColorif($kendo-enable-color-system, k-color( series-a ), $blue)#0d6efd
Description
The first base series color and its light and dark shades.
$kendo-series-bColorif($kendo-enable-color-system, k-color( series-b ), $purple)#6f42c1
Description
The second base series color and its light and dark shades.
$kendo-series-cColorif($kendo-enable-color-system, k-color( series-c ), $teal)#20c997
Description
The third base series color and its light and dark shades.
$kendo-series-dColorif($kendo-enable-color-system, k-color( series-d ), $green)#198754
Description
The fourth base series color and its light and dark shades.
$kendo-series-eColorif($kendo-enable-color-system, k-color( series-e ), $yellow)#ffc107
Description
The fifth base series color and its light and dark shades.
$kendo-series-fColorif($kendo-enable-color-system, k-color( series-f ), $red)#dc3545
Description
The sixth base series color and its light and dark shades.
$kendo-series-1Color$kendo-series-a#0d6efd
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 )0.75rem
Description
The size of a small CheckBox.
$kendo-checkbox-md-sizeNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The size of a medium CheckBox.
$kendo-checkbox-lg-sizeNumberk-map-get( $kendo-spacing, 5 )1.25rem
Description
The size of a large CheckBox.
$kendo-checkbox-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )1.125rem
Description
The glyph size of a large CheckBox.
$kendo-checkbox-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small CheckBox.
$kendo-checkbox-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium CheckBox.
$kendo-checkbox-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large CheckBox.
$kendo-checkbox-bgColor$kendo-component-bg#ffffff
Description
The background color of CheckBox.
$kendo-checkbox-textNullnullnull
Description
The text color of CheckBox.
$kendo-checkbox-borderColorif($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ))#ced4da
Description
The border color of 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#0d6efd
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))white
Description
The color of the checked CheckBox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#0d6efd
Description
The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-checked-bg#0d6efd
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-textwhite
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-checked-border#0d6efd
Description
The border color of the indeterminate CheckBox.
$kendo-checkbox-focus-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% ))#86b7fe
Description
The border color of the focused CheckBox.
$kendo-checkbox-focus-shadowList0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The box shadow of the focused CheckBox.
$kendo-checkbox-focus-checked-borderColor$kendo-checkbox-checked-border#0d6efd
Description
The border color of the focused and checked CheckBox.
$kendo-checkbox-focus-checked-shadowList$kendo-checkbox-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
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 the invalid CheckBox.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#dc3545
Description
The text color of the invalid CheckBox.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#dc3545
Description
The border color of the 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 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
Description
The image for a checked CheckBox indicator.
$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
Description
The image for a indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
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-y0.25rem
Description
The vertical padding of the CheckBox list items
$kendo-checkbox-ripple-bgColor$kendo-checkbox-checked-bg#0d6efd
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 )0.25rem
Description
The spacing between the text and the icons of the Chip.
$kendo-chip-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the Chip.
$kendo-chip-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the small Chip.
$kendo-chip-md-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the large Chip.
$kendo-chip-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the Chip.
$kendo-chip-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )0.125rem
Description
The vertical padding of the small Chip.
$kendo-chip-md-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the medium Chip.
$kendo-chip-lg-padding-yNumberk-map-get( $kendo-spacing, 1.5 )0.375rem
Description
The vertical padding of the large Chip.
$kendo-chip-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Chip.
$kendo-chip-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Chip.
$kendo-chip-md-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the medium Chip.
$kendo-chip-line-heightNumber1.251.25
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1.25
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1.25
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1.25
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1.25em + 0.5rem + 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: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))
Description
The map with the sizes of the Chip.
$kendo-chip-base-bgColor$kendo-button-bg#e4e7eb
Description
The base background color 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": #e4e7eb, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)
Description
The theme colors map for the Chip.
$kendo-chip-solid-bgColor$kendo-chip-base-bg#e4e7eb
Description
The base background color of the solid Chip.
$kendo-chip-solid-textColor$kendo-button-text#212529
Description
he base text color of the solid Chip.
$kendo-chip-solid-borderColor$kendo-button-border#e4e7eb
Description
The base border color of the solid Chip.
$kendo-chip-solid-shadowList0 0 0 2px rgba( $kendo-chip-base-bg, .16 )0 0 0 2px rgba(228, 231, 235, 0.16)
Description
The base shadow of the solid Chip.
$kendo-chip-solid-gradientNull$kendo-button-gradientnull
Description
The base gradient of the solid Chip.
$kendo-chip-solid-focus-bgNullnullnull
Description
The base background color of the focused solid Chip.
$kendo-chip-solid-focus-textNullnullnull
Description
The base text color of the focused solid Chip.
$kendo-chip-solid-hover-bgColor$kendo-button-hover-bg#ced3db
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#c7cdd5
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#212529
Description
The base text color of the outline Chip.
$kendo-chip-outline-borderColor$kendo-chip-outline-text#212529
Description
The base border color of the outline Chip.
$kendo-chip-outline-shadowList0 0 0 2px rgba( $kendo-chip-base-bg, .16 )0 0 0 2px rgba(228, 231, 235, 0.16)
Description
The base shadow of the outline Chip.
$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#212529
Description
The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $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#212529
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: 0.25rem, md: 0.25rem, lg: 0.25rem)
Description
The sizes of the Chip list.

Cologradient

NameTypeDefault valueComputed value
$kendo-color-gradient-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacer of the ColorGradient.
$kendo-color-gradient-widthNumber328px328px
Description
The width of the ColorGradient.
$kendo-color-gradient-border-widthNumber1px1px
$kendo-color-gradient-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the ColorGradient.
$kendo-color-gradient-padding-yNumber$kendo-color-gradient-spacer1rem
Description
The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-xNumber$kendo-color-gradient-padding-y1rem
Description
The horizontal padding of the ColorGradient.
$kendo-color-gradient-gapNumber$kendo-color-gradient-spacer1rem
Description
The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ColorGradient.
$kendo-color-gradient-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ColorGradient.
$kendo-color-gradient-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the ColorGradient.
$kendo-color-gradient-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The border color of the ColorGradient.
$kendo-color-gradient-focus-borderColor$kendo-hover-border#d6d9dc
Description
The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadowNullnullnull
Description
The box shadow of the focused ColorGradient.
$kendo-color-gradient-canvas-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-gradient-canvas-rectangle-heightNumber180px180px
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-slider-track-sizeNumber10px10px
Description
The width of the ColorGradient slider.
$kendo-color-gradient-slider-border-radiusNumber10px10px
Description
The border radius of the ColorGradient slider.
$kendo-color-gradient-slider-draghandle-border-widthNumber3px3px
Description
The width of the border around the ColorGradient slider drag handle.
$kendo-color-gradient-slider-vertical-sizeNumber180px180px
Description
The height of the ColorGradient vertical slider.
$kendo-color-gradient-slider-horizontal-sizeNumber100%100%
Description
The width of the ColorGradient horizontal slider.
$kendo-color-gradient-draghandle-widthNumber14px14px
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-heightNumber14px14px
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-widthNumber1px1px
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-outline-widthNumber1px1px
Description
The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-radiusNumber50%50%
Description
The border radius of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-textNullnullnull
Description
The text color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-bgColortransparenttransparent
Description
The background color of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-borderColorrgba( $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 outline color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadowColork-elevation(2)rgba(0, 0, 0, 0.5)
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-yNumber- k-math-div( $kendo-color-gradient-draghandle-height, 2 )-7px
Description
The vertical margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-margin-xNumber- k-math-div( $kendo-color-gradient-draghandle-width, 2 )-7px
Description
The horizontal margin of the ColorGradient canvas drag handle.
$kendo-color-gradient-input-widthNumber56px56px
Description
The width of the ColorGradient input.
$kendo-color-gradient-input-gapNumberk-math-div( $kendo-color-gradient-spacer, 2 )0.5rem
Description
The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-textColor$kendo-subtle-text#6c757d
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, 2 )0.5rem
Description
The spacing between the items in the ColorGradient contrast tool.

Color System

NameTypeDefault valueComputed value
$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39)
Description
The global default Colors map.
$kendo-color-primaryColor$primary#0d6efd
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-color( $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$secondary#6c757d
Description
The secondary color of the theme.
$kendo-color-secondary-contrastColork-contrast-color( $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$purple#6f42c1
Description
The tertiary color of the theme.
$kendo-color-tertiary-contrastColork-contrast-color( $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$info#0dcaf0
Description
The color for informational messages and states.
$kendo-color-successColor$success#198754
Description
The color for success messages and states.
$kendo-color-warningColor$warning#ffc107
Description
The color for warning messages and states.
$kendo-color-errorColor$danger#dc3545
Description
The color for error messages and states.
$kendo-color-darkColor$dark#212529
Description
The dark color of the theme.
$kendo-color-lightColor$light#f8f9fa
Description
The light color of the theme.
$kendo-color-inverseColorif( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )#212529
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, 4 )1rem
Description
The spacer of the ColorEditor.
$kendo-color-editor-min-widthNumber328px328px
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-md0.375rem
Description
The border radius of the ColorEditor.
$kendo-color-editor-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ColorEditor.
$kendo-color-editor-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ColorEditor.
$kendo-color-editor-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the ColorEditor.
$kendo-color-editor-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The border color of the ColorEditor.
$kendo-color-editor-focus-borderColor$kendo-hover-border#d6d9dc
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-spacer1rem
Description
The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-xNumber$kendo-color-editor-header-padding-y1rem
Description
The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-gapNumberk-math-div( $kendo-color-editor-spacer, 2 )0.5rem
Description
The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-widthNumber32px32px
Description
The width of the ColorEditor preview.
$kendo-color-editor-color-preview-heightNumber12px12px
Description
The height of the ColorEditor preview.
$kendo-color-editor-preview-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-yNumber$kendo-color-editor-spacer1rem
Description
The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-xNumber$kendo-color-editor-views-padding-y1rem
Description
The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-gapNumber$kendo-color-editor-spacer1rem
Description
The spacing of the ColorEditor views container.
$kendo-color-editor-color-gradient-focus-outline-colorColorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)
Description
The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outlineNumber2px2px
Description
The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offsetNumber2px2px
Description
The outline offset of the focused ColorGradient.

Colorpalette

NameTypeDefault valueComputed value
$kendo-color-palette-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ColorPalette.
$kendo-color-palette-font-sizeNumber$kendo-font-size-md1rem
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 )1.5rem
Description
The width of the ColorPalette tile.
$kendo-color-palette-tile-heightNumber$kendo-color-palette-tile-width1.5rem
Description
The height of the ColorPalette tile.
$kendo-color-palette-tile-focus-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
Description
The shadow of the ColorPalette focused tile.
$kendo-color-palette-tile-hover-shadowList0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8)
Description
The shadow of the ColorPalette hovered tile.
$kendo-color-palette-tile-selected-shadowList0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white
Description
The shadow of the ColorPalette selected tile.

Component

NameTypeDefault valueComputed value
$kendo-component-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#212529
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-borderColorif( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 )#dee2e6
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.

Dialog

NameTypeDefault valueComputed value
$kendo-dialog-titlebar-bgNullnullnull
Description
The background color of the Dialog titlebar.
$kendo-dialog-titlebar-textNullnullnull
Description
The text color of the Dialog titlebar.
$kendo-dialog-titlebar-borderNullnullnull
Description
The border color of the Dialog titlebar.
$kendo-dialog-buttongroup-padding-xNumber$kendo-actions-padding-x0.5rem
Description
The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-yNumber$kendo-actions-padding-y0.5rem
Description
The vertical padding of the Dialog action buttons.
$kendo-dialog-buttongroup-border-widthNumber1px1px
Description
The width of the top border of the Dialog action buttons.
$kendo-dialog-button-spacingNumber$kendo-actions-button-spacing0.5rem
Description
The spacing between the Dialog action buttons.
$kendo-dialog-theme-colorsMap( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )("primary": #0d6efd, "light": #f8f9fa, "dark": #212529)
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-border#e4e5e6
Description
The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-widthNumber$kendo-dock-manager-border-width1px
Description
The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-styleStringsolidsolid
Description
The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bgColor$kendo-component-bg#ffffff
Description
The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-yNullnullnull
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-xNullnullnull
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-sizeNumber$kendo-font-size-lg1.25rem
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-x1rem
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
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 )0.875rem
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-xNumber$kendo-dock-manager-pane-content-padding-y0.5rem
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-component-bg#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 )0.375rem
Description
The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-textColor$kendo-color-primary#0d6efd
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#0d6efd
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#0d6efd
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-sm0.25rem
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(13, 110, 253, 0.16)
Description
The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-borderColor$kendo-color-primary#0d6efd
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 )0.5rem
Description
The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the DropdownTree popup

Dropzone

NameTypeDefault valueComputed value
$kendo-dropzone-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the DropZone.
$kendo-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the DropZone.
$kendo-dropzone-border-widthNumber1px1px
Description
The border width of the DropZone.
$kendo-dropzone-min-heightNumber220px220px
Description
The minimum height of the DropZone.
$kendo-dropzone-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the DropZone.
$kendo-dropzone-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the DropZone.
$kendo-dropzone-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the DropZone.
$kendo-dropzone-bgColorif($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ))#f8f9fa
Description
The background color of the DropZone.
$kendo-dropzone-textColor$kendo-component-text#212529
Description
The text color of the DropZone.
$kendo-dropzone-borderColor$kendo-component-border#dee2e6
Description
The border color of the DropZone.
$kendo-dropzone-icon-spacingNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The spacing below the DropZone icon.
$kendo-dropzone-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 ))#afb1b2
Description
The text color of the DropZone icon.
$kendo-dropzone-icon-hover-textColor$kendo-color-primary#0d6efd
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 )0.5rem
Description
The spacing below the DropZone hint.
$kendo-dropzone-hint-textNullnullnull
Description
The text color of the DropZone hint.
$kendo-dropzone-note-font-sizeNumber$kendo-font-size-xs0.75rem
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#6c757d
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-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Еditor.
$kendo-editor-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Еditor.
$kendo-editor-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Еditor.
$kendo-editor-placeholder-textColor$kendo-input-placeholder-text#6c757d
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#0d6efd
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% ))#cfe2ff
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.

Elevation

NameTypeDefault valueComputed value
$kendo-elevationMap$_default-elevation(1: ((0px 1px 2px rgba(0, 0, 0, 0.038),)), 2: ((0px 2px 7px rgba(0, 0, 0, 0.075),)), 3: ((0px 4px 10px rgba(0, 0, 0, 0.1),)), 4: ((0px 6px 13px rgba(0, 0, 0, 0.125),)), 5: ((0px 8px 16px 0px rgba(0, 0, 0, 0.15),)), 6: ((0px 11px 24px 0px rgba(0, 0, 0, 0.159),)), 7: ((0px 14px 36px 0px rgba(0, 0, 0, 0.168),)), 8: ((0px 16px 48px 0px rgba(0, 0, 0, 0.176),)), 9: ((0px 18px 60px 0px rgba(0, 0, 0, 0.185),)))
Description
The global default Elevation map.

Expander

NameTypeDefault valueComputed value
$kendo-expander-spacing-yNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The vertical spacing of the ExpansionPanel.
$kendo-expander-border-widthNumber1px1px
Description
The width of the border around the ExpansionPanel.
$kendo-expander-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ExpansionPanel.
$kendo-expander-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ExpansionPanel.
$kendo-expander-line-heightNumber$kendo-line-height-md1.5
Description
The hine height of the ExpansionPanel.
$kendo-expander-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The border color of the ExpansionPanel.
$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-xNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the ExpansionPanel header.
$kendo-expander-header-textColor$kendo-expander-text#212529
Description
The text color of the ExpansionPanel header.
$kendo-expander-header-bgColortransparenttransparent
Description
The background color of the ExpansionPanel header.
$kendo-expander-header-borderNullnullnull
Description
The border color of the ExpansionPanel header.
$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bgNullnullnull
Description
The background color of the focused ExpansionPanel header.
$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-textColor$kendo-color-primary#0d6efd
Description
The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-textColor$kendo-subtle-text#6c757d
Description
The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-xNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-yNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The vertical padding of the ExpansionPanel content.

Filemanager

NameTypeDefault valueComputed value
$kendo-file-manager-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The space between the FileManager items.
$kendo-file-manager-border-widthNumber1px1px
Description
The border width of the FileManager.
$kendo-file-manager-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the FileManager.
$kendo-file-manager-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the FileManager.
$kendo-file-manager-line-heightNumber$kendo-line-height-md1.5
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#212529
Description
The text color of the FileManager.
$kendo-file-manager-borderColor$kendo-component-border#dee2e6
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-spacer1rem
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-yNumber$kendo-file-manager-spacer1rem
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 )0.5rem
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border-widthNumber$kendo-file-manager-border-width1px
Description
The border width of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-bgColor$kendo-toolbar-bg#f8f9fa
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 )1rem
Description
The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the FileManager ListView item.
$kendo-file-manager-listview-item-widthNumber120px120px
Description
The width of the FileManager ListView item.
$kendo-file-manager-listview-item-heightNumber120px120px
Description
The height of the FileManager ListView item.
$kendo-file-manager-listview-item-bgNullnullnull
Description
The background color of the FileManager ListView item.
$kendo-file-manager-listview-item-textNullnullnull
Description
The text color of the FileManager ListView item.
$kendo-file-manager-listview-item-borderNullnullnull
Description
The border color of the FileManager ListView item.
$kendo-file-manager-listview-item-icon-bgNullnullnull
Description
The background color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))#686b6d
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-spacer1rem
Description
The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-yNumber$kendo-file-manager-spacer1rem
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-spacer1rem
Description
The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The gap between the columns in the FileManager preview.
$kendo-file-manager-preview-bgNullnullnull
Description
The background color of the FileManager preview.
$kendo-file-manager-preview-textNullnullnull
Description
The text color of the FileManager preview.
$kendo-file-manager-preview-borderNullnullnull
Description
The border color of the FileManager preview.
$kendo-file-manager-preview-icon-bgNullnullnull
Description
The background color of the FileManager preview icon.
$kendo-file-manager-preview-icon-textColorif($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))#686b6d
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-x1rem
Description
The horizontal padding of the Filter.
$kendo-filter-padding-yNumber$kendo-padding-md-y0.5rem
Description
The vertical padding of the Filter.
$kendo-filter-bottom-marginNumber2.1em2.1em
Description
The bottom margin of the Filter.
$kendo-filter-line-sizeNumber1px1px
Description
The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-widthNumber15em15em
Description
The width of the dropdown elements in the Filter items.
$kendo-filter-preview-field-textColor$kendo-color-primary#0d6efd
Description
The text color of the Filter preview field.
$kendo-filter-preview-operator-textColor$kendo-subtle-text#6c757d
Description
The text color of the Filter preview operator.
$kendo-filter-toolbar-focus-shadowList0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)
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-radiusNumberk-math-div( $kendo-border-radius, 2 )0.1875rem
Description
The border radius of the FAB.
$kendo-fab-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the FAB.
$kendo-fab-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the FAB.
$kendo-fab-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the FAB.
$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the FAB.
$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )0.5rem
Description
The horizontal padding of the small FAB.
$kendo-fab-md-padding-xNumber$kendo-fab-padding-x1rem
Description
The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-xNumber( $kendo-fab-padding-x * 1.5 )1.5rem
Description
The horizontal padding of the large FAB.
$kendo-fab-padding-yNumber$kendo-fab-padding-x1rem
Description
The vertical padding of the FAB.
$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )0.5rem
Description
The vertical padding of the small FAB.
$kendo-fab-md-padding-yNumber$kendo-fab-padding-y1rem
Description
The vertical padding of the medium FAB.
$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )1.5rem
Description
The vertical padding of the large FAB.
$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x0.25rem
Description
The vertical padding of the FAB icon.
$kendo-fab-icon-spacingNumberk-map-get( $kendo-spacing, 0.5 )0.125rem
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 )1rem
Description
The vertical padding of the FAB items.
$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x0.25rem
Description
The vertical padding of the FAB item text.
$kendo-fab-item-text-border-widthNumber1px1px
Description
The width of the FAB item text border.
$kendo-fab-item-text-border-radiusNumber4px4px
Description
The border radius of the FAB item text.
$kendo-fab-item-text-font-sizeNumber$kendo-font-size-xs0.75rem
Description
The font size of the FAB item text.
$kendo-fab-item-text-line-heightNumber14px14px
Description
The line height of the FAB item text.
$kendo-fab-item-icon-padding-xNumberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x0.75rem
Description
The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x0.75rem
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": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)
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: 0.5rem, padding-y: 0.5rem), md: (padding-x: 1rem, padding-y: 1rem), lg: (padding-x: 1.5rem, padding-y: 1.5rem))
Description
The size map for the FAB.
$kendo-fab-shadowStringk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
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-widthNumber3px3px
Description
The outline width of the FAB.
$kendo-fab-item-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The base border color of the FAB item.
$kendo-fab-item-icon-textColor$kendo-button-text#212529
Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bgColor$kendo-button-bg#e4e7eb
Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-borderColor$kendo-button-border#e4e7eb
Description
The base border color of the FAB item icon.
$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
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-widthNumber3px3px
Description
The outline width of the FAB item.
$kendo-fab-item-outline-colorColor$kendo-button-bg#e4e7eb
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-size1rem
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.5
Description
The line height of the Floating Label.
$kendo-floating-label-heightCalculationcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.5 * 1rem)
Description
The height of the Floating Label.
$kendo-floating-label-offset-xCalculationcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(0.75rem + 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.5 * 1rem) + 1px + 0.375rem)
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 * 22rem
Description
The padding of the inline Form.
$kendo-form-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Form.
$kendo-form-line-heightNumber$input-btn-line-height1.5
Description
The line height of the Form.
$kendo-form-line-height-emCalculationcalc( #{$kendo-form-line-height} * 1em )calc(1.5 * 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-lg2
Description
The line height of the large Form.
$kendo-form-fieldset-marginList2rem 0 02rem 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 1rem0 0 1rem
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-border#dee2e6
Description
The border color of the Form legend.
$kendo-form-legend-widthNumber100%100%
Description
The width of the Form legend.
$kendo-form-legend-font-sizeNumber$kendo-font-size-sm0.875rem
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-bottomNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The bottom margin of the Form label.
$kendo-form-button-margin-xNumber8px8px
Description
The horizontal margin of the Form buttons.
$kendo-form-hint-font-sizeNumber$kendo-font-size-xs0.75rem
Description
The font size of the Form hint.
$kendo-form-hint-font-styleStringnormalnormal
Description
The font style of the Form hint.
$kendo-form-hint-margin-topNumber4px4px
Description
The top margin of the Form hint.
$kendo-form-sm-rows-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The row spacing of the small Form.
$kendo-form-md-rows-spacingNumber$kendo-form-sm-rows-spacing1rem
Description
The row spacing of the medium Form.
$kendo-form-lg-rows-spacingNumber$kendo-form-sm-rows-spacing1rem
Description
The row spacing of the large Form.
$kendo-form-separator-marginList$kendo-form-md-rows-spacing 0 01rem 0 0
Description
The margin of the Form separator.
$kendo-form-separator-border-colorColor$kendo-form-legend-border-color#dee2e6
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#dc3545
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-sizeNumber$kendo-font-size-xs0.75rem
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-size1.5rem
Description
The font size of the Form fieldset.
$kendo-fieldset-bgNullnullnull
Description
The background color of the Form fieldset.
$kendo-fieldset-textNullnullnull
Description
The text color of the Form fieldset.
$kendo-fieldset-borderNullnullnull
Description
The border color of the Form fieldset.
$kendo-fieldset-legend-bgNullnullnull
Description
The background color of the Form legend.
$kendo-fieldset-legend-textNullnullnull
Description
The text color of the Form legend.
$kendo-fieldset-legend-borderNullnullnull
Description
The border color of the Form legend.
$kendo-form-sizesMap( sm: ( form-rows-spacing: $kendo-form-sm-rows-spacing ), md: ( form-rows-spacing: $kendo-form-md-rows-spacing ), lg: ( form-rows-spacing: $kendo-form-lg-rows-spacing ) )(sm: (form-rows-spacing: 1rem), md: (form-rows-spacing: 1rem), lg: (form-rows-spacing: 1rem))
Description
The sizes map for the Form.

Grid

NameTypeDefault valueComputed value
$kendo-grid-padding-xNumber$kendo-table-md-cell-padding-x0.5rem
Description
Horizontal padding of the grid.
$kendo-grid-padding-yNumber$kendo-table-md-cell-padding-y0.5rem
Description
Vertical padding of the grid.
$kendo-grid-header-padding-xNumber$kendo-grid-padding-x0.5rem
Description
Horizontal padding of the grid header.
$kendo-grid-header-padding-yNumber$kendo-grid-padding-y0.5rem
Description
Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-xNumber$kendo-grid-padding-y0.5rem
Description
Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-yNumber$kendo-grid-grouping-header-padding-x0.5rem
Description
Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-xNumber$kendo-grid-padding-x0.5rem
Description
Horizontal padding of the grid cell.
$kendo-grid-cell-padding-yNumber$kendo-grid-padding-y0.5rem
Description
Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-xNumber$kendo-grid-padding-y0.5rem
Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-yNumber$kendo-grid-filter-cell-padding-x0.5rem
Description
Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-xNumber$kendo-grid-cell-padding-x0.5rem
Description
Horizontal padding of the grid edit cell.
$kendo-grid-edit-cell-padding-yNumber5px5px
Description
Vertical padding of the grid edit cell.
$kendo-grid-bgColor$kendo-table-bg#ffffff
Description
Background color of the grid component
$kendo-grid-textColor$kendo-table-text#212529
Description
Text color of the grid component
$kendo-grid-borderColor$kendo-table-border#dee2e6
Description
Border color of the grid component
$kendo-grid-header-bgColor$kendo-table-header-bg#f8f9fa
Description
Background color of grid header
$kendo-grid-header-textColor$kendo-table-header-text#212529
Description
Text color of grid header
$kendo-grid-header-borderColor$kendo-table-header-border#dee2e6
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-table-footer-bg#f8f9fa
Description
Background color of grid footer
$kendo-grid-footer-textColor$kendo-table-footer-text#212529
Description
Text color of grid footer
$kendo-grid-footer-borderColor$kendo-table-footer-border#dee2e6
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-bgrgba(0, 0, 0, 0.08)
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(13, 110, 253, 0.25)
Description
Background color of selected rows in grid
$kendo-grid-selected-textColor$kendo-table-selected-text#212529
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#f8f9fa
Description
Background color of the selection aggregates container
$kendo-grid-selection-aggregates-textColor$kendo-grid-text#212529
Description
Text color of the selection aggregates container
$kendo-grid-selection-aggregates-borderColor$kendo-grid-border#dee2e6
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 )0.5rem
Description
Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-heightNumber$kendo-grid-line-height1.5
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#0d6efd
Description
Active background color of the grid row resize indicator
$kendo-grid-row-resizer-heightNumberk-map-get( $kendo-spacing, .5 )0.125rem
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-widthNumber$input-border-width1px
Description
The border width of the Input components.
$kendo-input-border-radiusNullnullnull
Description
The border radius of the Input components.
$kendo-input-padding-xNumber$input-padding-x0.75rem
Description
The horizontal padding of the Input components.
$kendo-input-sm-padding-xNumber$input-padding-x-sm0.5rem
Description
The horizontal padding of the small Input components.
$kendo-input-md-padding-xNumber$input-padding-x0.75rem
Description
The horizontal padding of the medium Input components.
$kendo-input-lg-padding-xNumber$input-padding-x-lg1rem
Description
The horizontal padding of the large Input components.
$kendo-input-padding-yNumber$input-padding-y0.375rem
Description
The vertical padding of input components.
$kendo-input-sm-padding-yNumber$input-padding-y-sm0.25rem
Description
The vertical padding of the small Input components.
$kendo-input-md-padding-yNumber$input-padding-y0.375rem
Description
The vertical padding of the medium Input components.
$kendo-input-lg-padding-yNumber$input-padding-y-lg0.5rem
Description
The vertical padding of the large Input components.
$kendo-input-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of input components.
$kendo-input-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of input components.
$kendo-input-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Input components.
$kendo-input-md-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the medium Input components.
$kendo-input-lg-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the large Input components.
$kendo-input-line-heightNumber$input-line-height1.5
Description
The line height of input components.
$kendo-input-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the small Input components.
$kendo-input-md-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the medium Input components.
$kendo-input-lg-line-heightNumber$kendo-line-height-md1.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: 0.5rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: 1.4285714286, button-padding-x: 0.25rem, button-padding-y: 0.25rem), md: (padding-x: 0.75rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.375rem, button-padding-y: 0.375rem), lg: (padding-x: 1rem, padding-y: 0.5rem, font-size: 1rem, line-height: 1.5, button-padding-x: 0.5rem, button-padding-y: 0.5rem))
Description
The sizes map for the Input components.
$kendo-input-bgColor$input-bg#ffffff
Description
The background color of the Input components.
$kendo-input-textColor$input-color#212529
Description
The text color of the Input components.
$kendo-input-borderColor$input-border-color#ced4da
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-borderNullnullnull
Description
The border color of the hovered Input components.
$kendo-input-hover-shadowNullnullnull
Description
The shadow of the hovered Input components.
$kendo-input-focus-bgColor$input-focus-bg#ffffff
Description
The background color of the focused Input components.
$kendo-input-focus-textColor$input-focus-color#212529
Description
The text color of the focused Input components.
$kendo-input-focus-borderColor$input-focus-border-color#86b7fe
Description
The border color of the focused Input components.
$kendo-input-focus-shadowList$input-focus-box-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
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-base-text#212529
Description
The text color of the outline Input components.
$kendo-input-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 ))rgba(33, 37, 41, 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-borderNullnullnull
Description
The border color of the outline hovered Input components.
$kendo-input-outline-focus-bgNullnullnull
Description
The background color of the outline focused Input components.
$kendo-input-outline-focus-textNullnullnull
Description
The text color of the outline focused Input components.
$kendo-input-outline-focus-borderColor$kendo-input-focus-border#86b7fe
Description
The border color of the outline focused Input components.
$kendo-input-outline-focus-shadowList$kendo-input-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
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#212529
Description
The text color of the flat Input components.
$kendo-input-flat-borderColor$kendo-input-border#ced4da
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-borderNull$kendo-input-hover-bordernull
Description
The border color of the flat hovered Input components.
$kendo-input-flat-focus-bgNullnullnull
Description
The background color of the flat focused Input components.
$kendo-input-flat-focus-textNullnullnull
Description
The text color of the flat focused Input components.
$kendo-input-flat-focus-borderColor$kendo-input-focus-border#86b7fe
Description
The border color of the flat focused Input components.
$kendo-input-flat-focus-shadowList$kendo-input-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The shadow of the flat focused Input components.
$kendo-input-placeholder-textColor$input-placeholder-color#6c757d
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 )0.125rem
Description
The vertical margin of the clear value icon.
$kendo-input-values-margin-xNumber$kendo-input-values-margin-y0.125rem
Description
The horizontal margin of the clear value icon.
$kendo-input-button-widthNullnullnull
Description
The width of the Input button.
$kendo-input-button-border-widthNumber1px1px
Description
The border width of the Input button.
$kendo-input-spinner-widthNullnullnull
Description
The width of the Input spinner button.
$kendo-input-spinner-icon-offsetNullnullnull
Description
The icon offset of the Input spinner button.
$kendo-input-separator-textColor$kendo-component-border#dee2e6
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#6c757d
Description
The text color of the Input prefix.
$kendo-input-suffix-textColor$kendo-subtle-text#6c757d
Description
The text color of the Input suffix.
$kendo-input-invalid-borderColor$kendo-invalid-border#dc3545
Description
The border color of the invalid Input components.
$kendo-input-invalid-shadowList$kendo-invalid-shadow0 0 0 0.25rem rgba(220, 53, 69, 0.25)
Description
The shadow of the invalid Input components.
$kendo-input-valid-borderColor$kendo-valid-border#198754
Description
The border color of the valid Input components.
$kendo-input-valid-shadowList$kendo-valid-shadow0 0 0 0.25rem rgba(25, 135, 84, 0.25)
Description
The shadow of the valid Input components.

List

NameTypeDefault valueComputed value
$kendo-list-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
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 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: 0.875rem, line-height: 1.4285714286, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.125rem, group-item-font-size: null, group-item-line-height: null), md: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.25rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.25rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.25rem, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 1rem, line-height: 1.5, header-padding-x: 1rem, header-padding-y: 0.5rem, header-font-size: null, header-line-height: null, item-padding-x: 1rem, item-padding-y: 0.5rem, item-font-size: null, item-line-height: null, group-item-padding-x: 1rem, group-item-padding-y: 0.375rem, 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#212529
Description
The text color of the List component.
$kendo-list-borderColor$kendo-component-border#dee2e6
Description
The border color of the List component.
$kendo-list-header-bgNullnullnull
Description
The background color of the List header.
$kendo-list-header-textNullnullnull
Description
The text color of the List header
$kendo-list-header-borderStringinheritinherit
Description
The border color of the List header.
$kendo-list-header-shadowNullnullnull
Description
The box shadow of the List header.
$kendo-list-item-bgNullnullnull
Description
The background color of the List items.
$kendo-list-item-textNullnullnull
Description
The text color of the List items.
$kendo-list-item-hover-bgColor$kendo-hover-bg#e9ecef
Description
The background color of the hovered List items.
$kendo-list-item-hover-textColor$kendo-hover-text#212529
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 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 ))inset 0 0 0 3px rgba(33, 37, 41, 0.15)
Description
The box shadow of the focused List items.
$kendo-list-item-selected-bgColor$kendo-selected-bg#0d6efd
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#6c757d
Description
The color of the 'No Data' text.
$kendo-list-option-label-textColor$kendo-subtle-text#6c757d
Description
The color of the 'Option Label' text.

Listbox

NameTypeDefault valueComputed value
$kendo-listbox-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing between the ListBox elements.
$kendo-listbox-button-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacing between the ListBox buttons.
$kendo-listbox-widthNumber10em10em
Description
The width of the ListBox.
$kendo-listbox-default-heightNumber200px200px
Description
The height of the ListBox.
$kendo-listbox-border-widthNumber1px1px
Description
The width of the border around the ListBox.
$kendo-listbox-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ListBox.
$kendo-listbox-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ListBox.
$kendo-listbox-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the ListBoxx.
$kendo-listbox-textColor$kendo-component-text#212529
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-border#dee2e6
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 )0.25rem
Description
The horizontal padding of the ListView.
$kendo-listview-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the ListView.
$kendo-listview-border-widthNumber1px1px
Description
The width of the border around bordered ListView.
$kendo-listview-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ListView.
$kendo-listview-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ListView.
$kendo-listview-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the ListView.
$kendo-listview-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The border color of the ListView.
$kendo-listview-item-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the ListView items.
$kendo-listview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the ListView items.
$kendo-listview-item-selected-textNullnullnull
Description
The text color of the selected ListView items.
$kendo-listview-item-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 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 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 ))inset 0 0 0 3px rgba(33, 37, 41, 0.15)
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 )0.25rem
Description
The size of the small Loader segment.
$kendo-loader-md-segment-sizeNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The size of the medium Loader segment.
$kendo-loader-lg-segment-sizeNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The size of the large Loader segment.
$kendo-loader-sm-paddingNumberk-math-div( $kendo-loader-sm-segment-size, 2 )0.125rem
Description
The padding of the small Loader.
$kendo-loader-md-paddingNumberk-math-div( $kendo-loader-md-segment-size, 2 )0.25rem
Description
The padding of the medium Loader.
$kendo-loader-lg-paddingNumberk-math-div( $kendo-loader-lg-segment-size, 2 )0.5rem
Description
The padding of the large Loader.
$kendo-loader-sm-spinner-3-widthNumber( $kendo-loader-sm-segment-size * 4 )1rem
Description
The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-widthNumber( $kendo-loader-md-segment-size * 4 )2rem
Description
The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-widthNumber( $kendo-loader-lg-segment-size * 4 )4rem
Description
The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-heightNumber( $kendo-loader-sm-spinner-3-width * $equilateral-height )0.8660254038rem
Description
The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-heightNumber( $kendo-loader-md-spinner-3-width * $equilateral-height )1.7320508076rem
Description
The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-heightNumber( $kendo-loader-lg-spinner-3-width * $equilateral-height )3.4641016152rem
Description
The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-widthNumber$kendo-loader-sm-segment-size * 41rem
Description
The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-widthNumber$kendo-loader-md-segment-size * 42rem
Description
The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-widthNumber$kendo-loader-lg-segment-size * 44rem
Description
The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-heightNumber$kendo-loader-sm-spinner-4-width1rem
Description
The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-heightNumber$kendo-loader-md-spinner-4-width2rem
Description
The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-heightNumber$kendo-loader-lg-spinner-4-width4rem
Description
The height of the large spinner-4 Loader.
$kendo-loader-secondary-bgColor#212529#212529
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-border#dee2e6
Description
The border color of the container panel.
$kendo-loader-container-panel-border-radiusNumber$kendo-border-radius-md0.375rem
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 )1rem
Description
The padding of the small Loader container.
$kendo-loader-md-container-paddingNumberk-map-get( $kendo-spacing, 5 )1.25rem
Description
The padding of the medium Loader container.
$kendo-loader-lg-container-paddingNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The padding of the large Loader container.
$kendo-loader-sm-container-gapNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The gap of the small Loader container.
$kendo-loader-md-container-gapNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The gap of the medium Loader container.
$kendo-loader-lg-container-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The gap of the large Loader container.
$kendo-loader-sm-container-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Loader container.
$kendo-loader-md-container-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the medium Loader container.
$kendo-loader-lg-container-font-sizeNumber$kendo-font-size-lg1.25rem
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-md1rem
Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightNumber$kendo-line-height-md1.5
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#212529
Description
The text color of the menu popup.
$kendo-menu-popup-borderColor$kendo-popup-border#dee2e6
Description
The border color of the menu popup.
$kendo-menu-popup-gradientNullnullnull
Description
The background gradient of the menu popup.
$kendo-menu-popup-item-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
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(2rem + 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-x1rem
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(2rem + 16px) - 0.5rem))
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#e9ecef
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-hover-textColor$kendo-list-item-hover-text#212529
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#0d6efd
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 3px rgba(33, 37, 41, 0.15)
Description
The base shadow of focused menu item in popup.

Menu-button

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

Notification

NameTypeDefault valueComputed value
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The row-gap between the elements in the Notification group.
$kendo-notification-padding-xNumber$alert-padding-x1rem
Description
The horizontal padding of the Notification.
$kendo-notification-padding-yNumber$alert-padding-y1rem
Description
The vertical padding of the Notification.
$kendo-notification-border-widthNumber$alert-border-width1px
Description
The width of the border around the Notification.
$kendo-notification-border-radiusNumber$alert-border-radius0.375rem
Description
The border radius of the Notification.
$kendo-notification-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Notification.
$kendo-notification-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the Notification.
$kendo-notification-line-heightNumber$kendo-line-height-md1.5
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#212529
Description
The text color of the Notification.
$kendo-notification-borderColor$kendo-component-border#dee2e6
Description
The border color of the Notification.
$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The box shadow of the Notification.
$kendo-notification-icon-spacingNumber$kendo-icon-spacing0.5rem
Description
The horizontal spacing of the Notification icon.
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)
Description
The theme colors map for the Notification.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "light": (color: #818182, background-color: #fdfdfe, border: #fefefe), "dark": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "error": (color: #721c24, background-color: #f5c6cb, border: #f8d7da), "warning": (color: #856404, background-color: #ffeeba, border: #fff3cd), "success": (color: #0d462c, background-color: #bfddcf, border: #d1e7dd), "info": (color: #07697d, background-color: #bbf0fb, border: #cff4fc), "tertiary": (color: #3a2264, background-color: #d7caee, border: #e2d9f3), "secondary": (color: #383d41, background-color: #d6d8db, border: #e2e3e5), "primary": (color: #073984, background-color: #bbd6fe, border: #cfe2ff))
Description
The generated theme colors map for the Notification.

Pager

NameTypeDefault valueComputed value
$kendo-pager-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the Pager.
$kendo-pager-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the small Pager.
$kendo-pager-md-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the medium Pager.
$kendo-pager-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The horizontal padding of the large Pager.
$kendo-pager-padding-yNumber$kendo-pager-padding-x0.5rem
Description
The vertical padding of the Pager.
$kendo-pager-sm-padding-yNumber$kendo-pager-sm-padding-x0.25rem
Description
The vertical padding of the small Pager.
$kendo-pager-md-padding-yNumber$kendo-pager-md-padding-x0.5rem
Description
The vertical padding of the medium Pager.
$kendo-pager-lg-padding-yNumber$kendo-pager-lg-padding-x0.625rem
Description
The vertical padding of the large Pager.
$kendo-pager-sm-item-min-widthCalculation$kendo-button-sm-calc-sizecalc(1.4285714286em + 0.5rem + 2px)
Description
The minimum width of the items in the small Pager.
$kendo-pager-md-item-min-widthCalculation$kendo-button-md-calc-sizecalc(1.5em + 0.75rem + 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 + 1rem + 2px)
Description
The minimum width of the items in the large Pagers.
$kendo-pager-sm-item-group-spacingNumberk-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The margin between the item groups in the small Pager.
$kendo-pager-md-item-group-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The margin between the item groups in the medium Pager.
$kendo-pager-lg-item-group-spacingNumberk-map-get( $kendo-spacing, 4.5 )1.125rem
Description
The margin between the item groups in the large Pager.
$kendo-pager-border-widthNumber1px1px
Description
The border width of the Pager.
$kendo-pager-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Pager.
$kendo-pager-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Pager.
$kendo-pager-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Pager.
$kendo-pager-bgColor$kendo-component-header-bg#f8f9fa
Description
The background color of the Pager.
$kendo-pager-textColor$kendo-component-header-text#212529
Description
The text color of the Pager.
$kendo-pager-borderColor$kendo-component-header-border#dee2e6
Description
The border color of the Pager.
$kendo-pager-focus-bgNullnullnull
Description
The background color of the focused Pager.
$kendo-pager-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The box shadow of the focused Pager.
$kendo-pager-section-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacing between the Pager sections.
$kendo-pager-item-border-widthNumber1px1px
Description
The border width of the Pager items.
$kendo-pager-item-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The border radius of the Pager items.
$kendo-pager-item-spacingNumber(-1 * $kendo-pager-item-border-width)-1px
Description
The spacing around the Pager items.
$kendo-pager-item-bgColor$kendo-component-bg#ffffff
Description
The background color of the Pager items.
$kendo-pager-item-textColor$kendo-link-text#0d6efd
Description
The text color of the Pager items.
$kendo-pager-item-borderColor$kendo-component-border#dee2e6
Description
The border color of the Pager items.
$kendo-pager-item-hover-bgColor$kendo-hover-bg#e9ecef
Description
The background color of the hovered Pager items.
$kendo-pager-item-hover-textColor$kendo-link-hover-text#0a58ca
Description
The text color of the hovered Pager items.
$kendo-pager-item-hover-borderColor$kendo-hover-border#d6d9dc
Description
The border color of the hovered Pager items.
$kendo-pager-item-selected-bgColor$kendo-selected-bg#0d6efd
Description
The background color of the selected Pager items.
$kendo-pager-item-selected-textColor$kendo-selected-textwhite
Description
The text color of the selected Pager items.
$kendo-pager-item-selected-borderColor$kendo-pager-item-selected-bg#0d6efd
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-bgColor$kendo-pager-item-bg#ffffff
Description
The background color of the focused Pager items.
$kendo-pager-item-focus-shadowList0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25))0 0 0 3px rgba(13, 110, 253, 0.25)
Description
The box shadow of the focused Pager items.
$kendo-pager-number-border-radiusNumber0px0px
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-widthNumber6em6em
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: 0.25rem, padding-y: 0.25rem, item-group-spacing: 0.875rem, item-min-width: calc(1.4285714286em + 0.5rem + 2px), pager-dropdown-width: 5em), md: (padding-x: 0.5rem, padding-y: 0.5rem, item-group-spacing: 1rem, item-min-width: calc(1.5em + 0.75rem + 2px), pager-dropdown-width: 5em), lg: (padding-x: 0.625rem, padding-y: 0.625rem, item-group-spacing: 1.125rem, item-min-width: calc(1.5em + 1rem + 2px), pager-dropdown-width: 6em))
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-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the PDFViewer.
$kendo-pdf-viewer-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the PDFViewer.
$kendo-pdf-viewer-line-heightNumber$kendo-line-height-md1.5
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#212529
Description
The text color of the PDFViewer.
$kendo-pdf-viewer-borderColor$kendo-component-border#dee2e6
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#212529
Description
The text color of the PDFViewer page.
$kendo-pdf-viewer-page-borderColor$kendo-component-border#dee2e6
Description
The border color of the PDFViewer page.
$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the PDFViewer page.
$kendo-pdf-viewer-search-panel-padding-xNumber$kendo-toolbar-md-padding-x0.5rem
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(0.5rem * 2)
Description
The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacingNumber$kendo-toolbar-md-spacing0.5rem
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-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem
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#212529
Description
The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-borderColor$kendo-component-border#dee2e6
Description
The border color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-shadowNullnullnull
Description
The shadow of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-matches-spacingNumber$kendo-padding-sm-x0.5rem
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-heightNumber1.21.2
Description
The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bgColor$kendo-body-text#212529
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#afb1b2
Description
The text color of the PDFViewer icon.

Picker

NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-button-bg#e4e7eb
Description
The background color of the Picker components.
$kendo-picker-textColor$kendo-button-text#212529
Description
The text color of the Picker components.
$kendo-picker-borderColor$kendo-button-border#e4e7eb
Description
The border color of the Picker components.
$kendo-picker-gradientNull$kendo-button-gradientnull
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#ced3db
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-borderColor$kendo-button-hover-border#c7cdd5
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-bgColor$kendo-button-active-bg#c7cdd5
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-borderColor$kendo-button-focus-border#bfc6d0
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 0.25rem rgba(228, 231, 235, 0.5)
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#212529
Description
The text color of the outline Picker components.
$kendo-picker-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 ))rgba(33, 37, 41, 0.5)
Description
The border color of the outline Picker components.
$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#212529
Description
The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-textColorif($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $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#212529
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 0.25rem rgba(228, 231, 235, 0.5)
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#212529
Description
The text color of the flat Picker components.
$kendo-picker-flat-borderColor$kendo-button-border#e4e7eb
Description
The border color of the flat Picker components.
$kendo-picker-flat-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 ))rgba(33, 37, 41, 0.08)
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-borderNullnullnull
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 0.25rem rgba(228, 231, 235, 0.5)
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-radius0.375rem
Description
The radius of the border around the Popover.
$kendo-popover-font-familyList$kendo-card-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Popover.
$kendo-popover-font-sizeNumber$kendo-card-font-size1rem
Description
The font size of the Popover.
$kendo-popover-line-heightNumber$kendo-card-line-height1.5
Description
The line height of the Popover.
$kendo-popover-textColor$kendo-card-text#212529
Description
The text color of the Popover.
$kendo-popover-bgColor$kendo-card-bg#ffffff
Description
The background color of the Popover.
$kendo-popover-borderColor$kendo-card-border#dee2e6
Description
The border color of the Popover.
$kendo-popover-shadowNull$kendo-card-shadownull
Description
The box shadow of the Popover.
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x1rem
Description
The horizontal padding of the Popover header.
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y1rem
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-textNullnullnull
Description
The text color of the Popover header.
$kendo-popover-header-bgNullnullnull
Description
The background color of the Popover header.
$kendo-popover-header-borderNullnullnull
Description
The border color of the Popover header.
$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x1rem
Description
The horizontal padding of the Popover body.
$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y1rem
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-width1.3em
Description
The width of the Popover callout.
$kendo-popover-callout-heightNumber$kendo-card-callout-height1.3em
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-border#dee2e6
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-radiusNumber$kendo-border-radius-md0.375rem
Description
Border radius of the popup.
$kendo-popup-font-sizeNumber$kendo-font-size-md1rem
Description
Font size of the popup.
$kendo-popup-line-heightNumber$kendo-line-height-md1.5
Description
Line height of the popup.
$kendo-popup-content-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
Horizontal padding of the popup content.
$kendo-popup-content-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
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#212529
Description
Text color of the popup.
$kendo-popup-borderColor$kendo-component-border#dee2e6
Description
Border color of the popup.
$kendo-popup-shadowStringk-elevation(4)var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
Box shadow of the popup.

Progressbar

NameTypeDefault valueComputed value
$kendo-progressbar-heightNumber$progress-height1rem
Description
The height of the ProgressBar.
$kendo-progressbar-horizontal-widthNumber100%100%
Description
The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timingList$progress-bar-animation-timing1s 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-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ProgressBar.
$kendo-progressbar-font-sizeNumber$progress-font-size0.75rem
Description
The font size of the ProgressBar.
$kendo-progressbar-line-heightNumber11
Description
The line height of the ProgressBar.
$kendo-progressbar-bgColor$gray-200#e9ecef
Description
The background color of the ProgressBar.
$kendo-progressbar-textColork-contrast-color( $gray-200 )black
Description
The text color of the ProgressBar.
$kendo-progressbar-borderNullnullnull
Description
The border color of the ProgressBar.
$kendo-progressbar-gradientNullnullnull
Description
The background gradient of the ProgressBar.
$kendo-progressbar-value-bgColor$kendo-selected-bg#0d6efd
Description
The progress background color of the ProgressBar.
$kendo-progressbar-value-textColor$kendo-selected-textwhite
Description
The progress text color of the ProgressBar.
$kendo-progressbar-value-borderNullnullnull
Description
The progress border color of the ProgressBar.
$kendo-progressbar-value-gradientNullnullnull
Description
The progress background gradient of the ProgressBar.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#e9ecef
Description
The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-textblack
Description
The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-borderNull$kendo-progressbar-bordernull
Description
The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradientNullnullnull
Description
The background gradient of the indeterminate ProgressBar.
$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff
Description
The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#0d6efd
Description
The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#e9ecef
Description
The scale stroke background color of the circular ProgressBar.

Prompt

NameTypeDefault valueComputed value
$kendo-prompt-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The border color of the Prompt.
$kendo-prompt-header-textColor$kendo-component-header-text#212529
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-border#dee2e6
Description
The border color of the Prompt header.
$kendo-prompt-content-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the Prompt content.
$kendo-prompt-content-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the Prompt content.
$kendo-prompt-content-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacing between the items of the Prompt content.
$kendo-prompt-content-textColor$kendo-component-header-text#212529
Description
The text color of the Prompt content.
$kendo-prompt-content-bgColor$kendo-component-header-bg#f8f9fa
Description
The background color of the Prompt content.
$kendo-prompt-content-borderColor$kendo-component-header-border#dee2e6
Description
The text border of the Prompt content.
$kendo-prompt-expander-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing between the items of the Prompt content expander.
$kendo-prompt-suggestion-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the Prompt suggestion container.
$kendo-prompt-suggestion-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the Prompt suggestion container.
$kendo-prompt-suggestion-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the Prompt suggestion container.
$kendo-prompt-suggestion-textColor$kendo-component-text#212529
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-border#dee2e6
Description
The border color of the Prompt suggestion container.
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0px 1px 2px rgba(0, 0, 0, 0.038))
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 )0.75rem
Description
The size of a small RadioButton.
$kendo-radio-md-sizeNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The size of a medium RadioButton.
$kendo-radio-lg-sizeNumberk-map-get( $kendo-spacing, 5 )1.25rem
Description
The size of a large RadioButton.
$kendo-radio-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The glyph size of a small RadioButton.
$kendo-radio-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )0.875rem
Description
The glyph size of a medium RadioButton.
$kendo-radio-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )1.125rem
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: 0.75rem, glyph-size: 0.625rem, ripple-size: 300%), md: (size: 1rem, glyph-size: 0.875rem, ripple-size: 300%), lg: (size: 1.25rem, glyph-size: 1.125rem, 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 text color of radio button.
$kendo-radio-borderColor$kendo-checkbox-border#ced4da
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 text 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#0d6efd
Description
The background color of the checked RadioButton.
$kendo-radio-checked-textColor$kendo-checkbox-checked-textwhite
Description
The text color of the checked RadioButton.
$kendo-radio-checked-borderColor$kendo-checkbox-checked-border#0d6efd
Description
The border color of the checked RadioButton.
$kendo-radio-focus-borderColor$kendo-checkbox-focus-border#86b7fe
Description
The border color of the focused RadioButton.
$kendo-radio-focus-shadowList$kendo-checkbox-focus-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The box shadow of the focused RadioButton.
$kendo-radio-focus-checked-borderColor$kendo-checkbox-focus-checked-border#0d6efd
Description
The border color of the focused and checked RadioButton.
$kendo-radio-focus-checked-shadowList$kendo-checkbox-focus-checked-shadow0 0 0 0.25rem rgba(13, 110, 253, 0.25)
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#dc3545
Description
The text color of the invalid RadioButton.
$kendo-radio-invalid-borderColor$kendo-checkbox-invalid-border#dc3545
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='-4 -4 8 8'%3e%3ccircle r='2' 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 )0.25rem
Description
The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacingNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-xNumber0px0px
Description
The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-yNumber$kendo-list-md-item-padding-y0.25rem
Description
The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bgColor$kendo-radio-checked-bg#0d6efd
Description
The background color of the RadioButton ripple.
$kendo-radio-ripple-opacityNumber.250.25
Description
The opacity of the RadioButton ripple.

Rating

NameTypeDefault valueComputed value
$kendo-rating-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Rating.
$kendo-rating-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Rating.
$kendo-rating-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Rating.
$kendo-rating-container-margin-xNumber$kendo-padding-sm-x0.5rem
Description
The horizontal margin of the Rating container.
$kendo-rating-item-padding-xNumber$kendo-padding-sm-x0.5rem
Description
The horizontal padding of the Rating item.
$kendo-rating-item-padding-yNumber$kendo-padding-md-y0.5rem
Description
The vertical padding of the Rating item.
$kendo-rating-label-margin-xNumber$kendo-padding-md-x1rem
Description
The horizontal margin of the Rating label.
$kendo-rating-label-margin-yNumber$kendo-padding-md-y0.5rem
Description
The vertical margin of the Rating label.
$kendo-rating-label-line-heightNumber$kendo-line-height-lg2
Description
The line height of the Rating label.
$kendo-rating-icon-textColor$kendo-subtle-text#6c757d
Description
The text color of the Rating icon.
$kendo-rating-icon-selected-textColor$kendo-selected-bg#0d6efd
Description
The text color of the selected Rating icon.
$kendo-rating-icon-hover-textColor$kendo-selected-bg#0d6efd
Description
The text color of the hovered Rating icon.
$kendo-rating-icon-focus-textColor$kendo-selected-bg#0d6efd
Description
The text color of the focused Rating icon.
$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused Rating icon.
$kendo-rating-icon-focus-selected-shadowList0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused and selected Rating icon.

Scrollview

NameTypeDefault valueComputed value
$kendo-scrollview-border-widthNumber1px1px
Description
The width of the border around the ScrollView.
$kendo-scrollview-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ScrollView.
$kendo-scrollview-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the ScrollView.
$kendo-scrollview-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the ScrollView.
$kendo-scrollview-textColor$kendo-component-text#212529
Description
The text color of the ScrollView.
$kendo-scrollview-bgColor$kendo-component-bg#ffffff
Description
The background color of the ScrollView.
$kendo-scrollview-borderColor$kendo-component-border#dee2e6
Description
The border color of the ScrollView.
$kendo-scrollview-pagebutton-sizeNumber10px10px
Description
The size of the ScrollView page button.
$kendo-scrollview-pagebutton-bgColor$kendo-button-bg#e4e7eb
Description
The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-borderColor$kendo-button-border#e4e7eb
Description
The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bgColor$kendo-color-primary#0d6efd
Description
The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-borderColor$kendo-color-primary#0d6efd
Description
The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-shadowList0 0 0 2px rgba( black, .13 )0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The box shadow of the ScrollView page button.</