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

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, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), 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, color-mix(in srgb, k-color( border ) 50%, transparent), 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-linesColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( 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-linesColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( 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).

Chat

NameTypeDefault valueComputed value
$kendo-chat-padding-xNumber16px16px
Description
The horizontal padding of the Chat.
$kendo-chat-padding-yNumber16px16px
Description
The vertical padding of the Chat.
$kendo-chat-widthNumber500px500px
Description
The width of the Chat.
$kendo-chat-heightNumber600px600px
Description
The height of the Chat.
$kendo-chat-border-widthNumber1px1px
Description
The border width of the Chat.
$kendo-chat-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 Chat.
$kendo-chat-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Chat.
$kendo-chat-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Chat.
$kendo-chat-item-spacing-xNumber8px8px
Description
The horizontal spacing between the items of the Chat.
$kendo-chat-item-spacing-yNumber16px16px
Description
The vertical spacing between the items of the Chat.
$kendo-chat-message-list-padding-xNumber$kendo-chat-padding-x16px
Description
The horizontal padding of the Chat message list.
$kendo-chat-message-list-padding-yNumber$kendo-chat-padding-y16px
Description
The vertical padding of the Chat message list.
$kendo-chat-message-list-spacingNumber$kendo-chat-item-spacing-y16px
Description
The spacing of the Chat message list.
$kendo-chat-timestamp-font-sizeStringsmallersmaller
Description
The font size of the Chat timestamp.
$kendo-chat-timestamp-line-heightNullnullnull
Description
The line height of the Chat timestamp.
$kendo-chat-timestamp-transformStringuppercaseuppercase
Description
The text transform of the Chat timestamp.
$kendo-chat-timestamp-textColor$kendo-subtle-text#6c757d
Description
The text color of the Chat timestamp.
$kendo-chat-timestamp-bgNullnullnull
Description
The background color of the Chat timestamp.
$kendo-chat-bubble-padding-xNumber16px16px
Description
The horizontal padding of the Chat bubble message.
$kendo-chat-bubble-padding-yNumber8px8px
Description
The vertical padding of the Chat bubble message.
$kendo-chat-bubble-spacingNumber2px2px
Description
The spacing of the Chat bubble message.
$kendo-chat-bubble-line-heightNumber1.251.25
Description
The line height of the Chat bubble message.
$kendo-chat-bubble-border-radiusNumber12px12px
Description
The border radius of the Chat bubble message.
$kendo-chat-bubble-border-radius-smNumber2px2px
Description
The border radius of the Chat small bubble message
$kendo-chat-avatar-sizeNumber32px32px
Description
The size of the Chat Avatar.
$kendo-chat-avatar-spacingNumber$kendo-chat-item-spacing-x8px
Description
The spacing of the Chat Avatar.
$kendo-chat-toolbar-padding-xNumber$kendo-toolbar-md-padding-x0.5rem
Description
The horizontal padding of the Chat Toolbar.
$kendo-chat-toolbar-padding-yNumber$kendo-toolbar-md-padding-y0.5rem
Description
The vertical padding of the Chat Toolbar.
$kendo-chat-toolbar-spacingNumber$kendo-toolbar-md-spacing0.5rem
Description
The spacing of the Chat Toolbar.
$kendo-chat-toolbar-bgColor$kendo-toolbar-bg#f8f9fa
Description
The background color of the Chat Toolbar.
$kendo-chat-toolbar-textColor$kendo-toolbar-text#212529
Description
The text color of the Chat Toolbar.
$kendo-chat-toolbar-borderStringinheritinherit
Description
The border color of the Chat Toolbar.
$kendo-chat-quick-reply-padding-xNumber12px12px
Description
The horizontal padding of the Chat quick reply.
$kendo-chat-quick-reply-padding-yNumber8px8px
Description
The vertical padding of the Chat quick reply.
$kendo-chat-quick-reply-spacingNumber8px8px
Description
The spacing of the Chat quick reply.
$kendo-chat-quick-reply-line-heightNumber$kendo-chat-bubble-line-height1.25
Description
The line height of the Chat quick reply.
$kendo-chat-bgColor$kendo-app-bg#fafafa
Description
The background color of the Chat.
$kendo-chat-textColor$kendo-app-text#212529
Description
The text color of the Chat.
$kendo-chat-borderColor$kendo-app-border#dee2e6
Description
The border color of the Chat.
$kendo-chat-bubble-bgColor$kendo-button-bg#e4e7eb
Description
The background color of the Chat bubble.
$kendo-chat-bubble-textColor$kendo-button-text#212529
Description
The text color of the Chat bubble.
$kendo-chat-bubble-borderColor$kendo-chat-bubble-bg#e4e7eb
Description
The border color of the Chat bubble.
$kendo-chat-bubble-shadowStringnonenone
Description
The box shadow of the Chat bubble.
$kendo-chat-bubble-hover-shadowStringnonenone
Description
The shadow of the hovered Chat bubble.
$kendo-chat-bubble-selected-shadowStringnonenone
Description
The shadow of the selected Chat bubble.
$kendo-chat-alt-bubble-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Chat alt bubble.
$kendo-chat-alt-bubble-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg ))white
Description
The text color of the Chat alt bubble.
$kendo-chat-alt-bubble-borderColor$kendo-chat-alt-bubble-bg#0d6efd
Description
The border color of the Chat alt bubble.
$kendo-chat-alt-bubble-shadowStringnonenone
Description
The shadow of the Chat alt bubble.
$kendo-chat-alt-bubble-hover-shadowStringnonenone
Description
The shadow of the hovered Chat alt bubble.
$kendo-chat-alt-bubble-selected-shadowStringnonenone
Description
The shadow of the selected Chat alt bubble.
$kendo-chat-quick-reply-bgColortransparenttransparent
Description
The background color of the Chat quick reply.
$kendo-chat-quick-reply-textColor$kendo-color-primary#0d6efd
Description
The text color of the Chat quick reply.
$kendo-chat-quick-reply-borderColor$kendo-color-primary#0d6efd
Description
The border color of the Chat quick reply.
$kendo-chat-quick-reply-hover-bgColor$kendo-color-primary#0d6efd
Description
The background color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-textColor$kendo-color-primary-contrastwhite
Description
The text color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-borderColor$kendo-color-primary#0d6efd
Description
The border color of the hovered Chat quick reply.

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, color-mix(in srgb, k-color( primary ) 25%, transparent), 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, color-mix(in srgb, k-color( primary ) 16%, transparent), 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, color-mix(in srgb, k-color( primary ) 25%, transparent), 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, color-mix(in srgb, k-color( on-base ) 20%, transparent), 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, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), 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.

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, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), 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, color-mix(in srgb, k-color( primary ) 25%, transparent), 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, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), 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.

Orgchart

NameTypeDefault valueComputed value
$kendo-orgchart-spacerNumberk-map-get( $kendo-spacing, 6 )1.5rem
Description
The spacing index of the OrgChart.
$kendo-orgchart-padding-yNumber$kendo-orgchart-spacer1.5rem
Description
The vertical padding of the OrgChart.
$kendo-orgchart-padding-xNumber$kendo-orgchart-padding-y1.5rem
Description
The horizontal padding of the OrgChart.
$kendo-orgchart-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 OrgChart.
$kendo-orgchart-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the OrgChart.
$kendo-orgchart-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the OrgChart.
$kendo-orgchart-bgColor$kendo-component-bg#ffffff
Description
The background color of the OrgChart.
$kendo-orgchart-textColor$kendo-component-text#212529
Description
The text color of the OrgChart.
$kendo-orgchart-borderColor$kendo-component-border#dee2e6
Description
The border color of the OrgChart.
$kendo-orgchart-node-gapNumber$kendo-orgchart-spacer1.5rem
Description
The spacing of the OrgChart node.
$kendo-orgchart-group-gapNumber$kendo-orgchart-spacer1.5rem
Description
The spacing of the OrgChart group.
$kendo-orgchart-node-container-gapNumber$kendo-orgchart-spacer1.5rem
Description
The spacing of the OrgChart node container.
$kendo-orgchart-node-group-padding-yNumber$kendo-orgchart-spacer1.5rem
Description
The vertical padding of the OrgChart node group.
$kendo-orgchart-node-group-padding-xNumber$kendo-orgchart-node-group-padding-y1.5rem
Description
The horizontal padding of the OrgChart node group.
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
$kendo-orgchart-node-group-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the OrgChart node group.
$kendo-orgchart-node-group-bgColor$kendo-base-bg#f8f9fa
Description
The background color of the OrgChart node group.
$kendo-orgchart-node-group-textColor$kendo-base-text#212529
Description
The text color of the OrgChart node group.
$kendo-orgchart-node-group-borderColor$kendo-base-border#e4e5e6
Description
The border color of the OrgChart node group.
$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull
Description
The border color of the focused OrgChart node group.
$kendo-orgchart-node-group-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused OrgChart node group.
$kendo-orgchart-node-group-title-font-sizeNumber$kendo-font-size-lg1.25rem
Description
The font size of the OrgChart node group title.
$kendo-orgchart-node-group-title-margin-bottomNumberk-math-div( $kendo-orgchart-spacer, 4 )0.375rem
Description
The bottom margin of the OrgChart node group title.
$kendo-orgchart-node-group-title-line-heightNumber$kendo-line-height-sm1.25
Description
The line height of the OrgChart node group title.
$kendo-orgchart-node-group-subtitle-margin-bottomNumber$kendo-orgchart-spacer1.5rem
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-textColor$kendo-subtle-text#6c757d
Description
The line height of the OrgChart node group subtitle.
$kendo-orgchart-card-widthNumber300px300px
Description
The width of the OrgChart Card.
$kendo-orgchart-card-padding-yNumber$kendo-card-padding-y1rem
Description
The vertical padding of the OrgChart Card.
$kendo-orgchart-card-padding-xNumber$kendo-orgchart-card-padding-y1rem
Description
The horizontal padding of the OrgChart Card.
$kendo-orgchart-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the OrgChart Card.
$kendo-orgchart-card-shadowNull$kendo-card-shadownull
Description
The shadow of the OrgChart Card.
$kendo-orgchart-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused OrgChart Card.
$kendo-orgchart-card-title-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card title.
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The font size of the OrgChart Card title.
$kendo-orgchart-card-subtitle-margin-bottomNumber0px0px
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
$kendo-orgchart-card-body-vbox-margin-rightNumberk-math-div( $kendo-orgchart-spacer, 2 )0.75rem
Description
The right margin of the OrgChart Card body title wrap.
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The min height of the OrgChart Card body title wrap.
$kendo-orgchart-line-sizeNumber1px1px
Description
The size of the OrgChart connecting line.
$kendo-orgchart-line-fillColor$kendo-base-border#e4e5e6
Description
The fill color of the OrgChart connecting line.
$kendo-orgchart-line-v-heightNumber25px25px
Description
The height of the OrgChart connecting line.

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, color-mix(in srgb, k-color( primary ) 25%, transparent), 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, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), 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, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), 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.
$kendo-scrollview-pager-offsetNumber00
Description
The offset of the ScrollView pager.
$kendo-scrollview-pager-item-spacingNumber20px20px
Description
The spacing between the ScrollView pager items.
$kendo-scrollview-pager-item-border-widthNumber0px0px
Description
The border width of the ScrollView pager items.
$kendo-scrollview-pager-heightCalculationcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )calc(10px + 0px + 40px)
Description
The height of the ScrollView pager.
$kendo-scrollview-arrow-tap-highlight-colorColor$kendo-color-rgba-transparentrgba(0, 0, 0, 0)
Description
The text color of the highlight over the tapped ScrollView navigation arrows.
$kendo-scrollview-navigation-colorColorwhitewhite
Description
The color of the ScrollView navigation arrows.
$kendo-scrollview-navigation-icon-shadowListrgba( black, .3 ) 0 0 15pxrgba(0, 0, 0, 0.3) 0 0 15px
Description
The box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-bgColorrgba( black, 0 )rgba(0, 0, 0, 0)
Description
The background color of the ScrollView navigation.
$kendo-scrollview-navigation-default-opacityNumber.70.7
Description
The opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-opacityNumber11
Description
The hover opacity of the ScrollView navigation.
$kendo-scrollview-navigation-hover-span-bgNullnullnull
Description
The hover background color of the ScrollView navigation arrows.
$kendo-scrollview-light-bgColorrgba( white, .4 )rgba(255, 255, 255, 0.4)
Description
The background color of the ScrollView pager in light mode.
$kendo-scrollview-dark-bgColorrgba( black, .4 )rgba(0, 0, 0, 0.4)
Description
The background color of the ScrollView pager in dark mode.
$kendo-scrollview-transition-durationNumber.3s0.3s
Description
The duration of the ScrollView transition.
$kendo-scrollview-transition-timing-functionStringease-in-outease-in-out
Description
The timing function of the ScrollView transition.

Skeleton

NameTypeDefault valueComputed value
$kendo-skeleton-text-transformStringscale( 1, .6 )scale(1, 0.6)
Description
The transform scale of the Skeleton text.
$kendo-skeleton-text-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the Skeleton text.
$kendo-skeleton-rect-border-radiusNumber00
Description
The border radius of the rectangular Skeleton.
$kendo-skeleton-circle-border-radiusNumber9999px9999px
Description
The border radius of the circular Skeleton.
$kendo-skeleton-item-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 ))rgba(33, 37, 41, 0.2)
Description
The background color of the Skeleton item.
$kendo-skeleton-wave-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The background color of the Skeleton wave animation.

Slider

NameTypeDefault valueComputed value
$kendo-slider-sizeNumber200px200px
Description
The default size of the Slider.
$kendo-slider-tick-sizeNullnullnull
Description
The default size of the Slider tick.
$kendo-slider-alt-sizeNumber30px30px
Description
The default size of the Slider's track wrap.
$kendo-slider-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 Slider.
$kendo-slider-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Slider.
$kendo-slider-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Slider.
$kendo-slider-button-offsetNumber10px10px
Description
The offset of the Slider Buttons.
$kendo-slider-button-sizeNumber($kendo-slider-alt-size - 2)28px
Description
The size of the Slider Buttons.
$kendo-slider-button-spacingNumber($kendo-slider-button-size + $kendo-slider-button-offset)38px
Description
The spacing of the Slider Buttons.
$kendo-slider-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The shadow of the focused Slider Buttons.
$kendo-slider-track-thicknessNumber4px4px
Description
The thickness of the Slider track.
$kendo-slider-draghandle-sizeNumber14px14px
Description
The size of the Slider drag handle.
$kendo-slider-draghandle-border-widthNumber1px1px
Description
The border width of the Slider drag handle.
$kendo-slider-draghandle-active-scaleNumber11
Description
The transition scale of the active Slider drag handle.
$kendo-slider-draghandle-active-sizeNullnullnull
Description
The size of the active Slider drag handle.
$kendo-slider-draghandle-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Slider drag handle.
$kendo-slider-draghandle-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The text color of the Slider drag handle.
$kendo-slider-draghandle-borderColor$kendo-color-primary#0d6efd
Description
The border color of the Slider drag handle.
$kendo-slider-draghandle-gradientNullnullnull
Description
The gradient of the Slider drag handle.
$kendo-slider-draghandle-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% ))#025ce2
Description
The background color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The text color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-borderColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% ))#0257d5
Description
The border color of the hovered Slider drag handle.
$kendo-slider-draghandle-hover-gradientNullnullnull
Description
The gradient of the hovered Slider drag handle.
$kendo-slider-draghandle-pressed-bgColorif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% ))#0257d5
Description
The background color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))white
Description
The text color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-borderColorif($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% ))#0252c9
Description
The border color of the active Slider drag handle.
$kendo-slider-draghandle-pressed-gradientNullnullnull
Description
The gradient of the active Slider drag handle.
$kendo-slider-draghandle-focus-shadowList0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), rgba( $kendo-color-primary, .5 ))0 0 0 3px rgba(13, 110, 253, 0.5)
Description
The shadow of the focused Slider drag handle.
$kendo-slider-transition-speedNumber.3s0.3s
Description
The transition speed of the Slider.
$kendo-slider-transition-functionStringease-outease-out
Description
The transition function of the Slider.
$kendo-slider-draghandle-transition-speedNumber.4s0.4s
Description
The transition speed of the Slider drag handle.
$kendo-slider-draghandle-transition-functionStringcubic-bezier(.25, .8, .25, 1)cubic-bezier(0.25, 0.8, 0.25, 1)
Description
The transition function of the Slider drag handle.
$kendo-slider-track-bgColor$gray-200#e9ecef
Description
The background color of the Slider track.
$kendo-slider-selection-bgColor$kendo-selected-bg#0d6efd
Description
The background color of the Slider's track selection.
$kendo-slider-disabled-opacityNullnullnull

Split-button

NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 0.25rem rgba(228, 231, 235, 0.5)
Description
The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-xNumber$kendo-button-padding-y0.375rem
Description
The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-xNumber$kendo-button-sm-padding-y0.25rem
Description
The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-xNumber$kendo-button-md-padding-y0.375rem
Description
The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-xNumber$kendo-button-lg-padding-y0.5rem
Description
The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-yNumber$kendo-button-padding-y0.375rem
Description
The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-yNumber$kendo-button-sm-padding-y0.25rem
Description
The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-yNumber$kendo-button-md-padding-y0.375rem
Description
The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-yNumber$kendo-button-lg-padding-y0.5rem
Description
The vertical padding of the large arrow Button.

Splitter

NameTypeDefault valueComputed value
$kendo-splitter-border-widthNumber1px1px
Description
The width of the border around the Splitter.
$kendo-splitter-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 Splitter.
$kendo-splitter-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Splitter.
$kendo-splitter-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Splitter.
$kendo-splitter-bgColor$kendo-component-bg#ffffff
Description
The background color of the Splitter.
$kendo-splitter-textColor$kendo-component-text#212529
Description
The text color of the Splitter.
$kendo-splitter-borderColor$kendo-component-border#dee2e6
Description
The border color of the Splitter.
$kendo-splitter-splitbar-sizeNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The size of the Splitter splitbar.
$kendo-splitter-drag-handle-lengthNumber20px20px
Description
The length of the Splitter drag handle.
$kendo-splitter-drag-handle-thicknessNumber2px2px
Description
The thickness of the Splitter drag handle.
$kendo-splitter-drag-icon-marginNumber7px7px
Description
The margin of the Splitter drag handle icon.
$kendo-splitter-collapse-icon-padding-xNullnullnull
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-splitter-collapse-icon-padding-yNumberk-map-get( $kendo-spacing, .5 )0.125rem
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-splitbar-bgColor$kendo-base-bg#f8f9fa
Description
The background color of the Splitter split bar.
$kendo-splitbar-textColor$kendo-base-text#212529
Description
The text color of the Splitter split bar.
$kendo-splitbar-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 ))#eeeff0
Description
The hover background color of the Splitter split bar.
$kendo-splitbar-hover-textColor$kendo-splitbar-text#212529
Description
The hover text color of the Splitter split bar.
$kendo-splitbar-selected-bgColor$kendo-selected-bg#0d6efd
Description
The selected background color of the Splitter split bar.
$kendo-splitbar-selected-textColor$kendo-selected-textwhite
Description
The selected text color of the Splitter split bar.

Spreadsheet

NameTypeDefault valueComputed value
$kendo-spreadsheet-border-widthNumber1px1px
Description
The width of the border around the Spreadsheet.
$kendo-spreadsheet-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 Spreadsheet.
$kendo-spreadsheet-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Spreadsheet.
$kendo-spreadsheet-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Spreadsheet.
$kendo-spreadsheet-bgColor$kendo-component-bg#ffffff
Description
The background color of the Spreadsheet.
$kendo-spreadsheet-textColor$kendo-component-text#212529
Description
The text color of the Spreadsheet.
$kendo-spreadsheet-borderColor$kendo-component-border#dee2e6
Description
The border color of the Spreadsheet.
$kendo-spreadsheet-header-bgColor$kendo-component-header-bg#f8f9fa
Description
The background color of the Spreadsheet header.
$kendo-spreadsheet-header-textColor$kendo-component-header-text#212529
Description
The text color of the Spreadsheet header.
$kendo-spreadsheet-header-borderColor$kendo-component-header-border#dee2e6
Description
The border color of the Spreadsheet header.
$kendo-spreadsheet-header-gradientNull$kendo-component-header-gradientnull
Description
The gradient of the Spreadsheet header.
$kendo-spreadsheet-table-header-bgColor$kendo-spreadsheet-header-bg#f8f9fa
Description
The background color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-textColor$kendo-spreadsheet-header-text#212529
Description
The text color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-borderColor$kendo-spreadsheet-header-border#dee2e6
Description
The border color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-gradientNull$kendo-spreadsheet-header-gradientnull
Description
The gradient of the Spreadsheet table headers.
$kendo-spreadsheet-action-bar-border-widthNumber1px1px
Description
The border width of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-sizeNumber$kendo-spreadsheet-font-size1rem
Description
The font size of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-familyListArial, Verdana, sans-serifArial, Verdana, sans-serif
Description
The font family of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacings of the Spreadsheet action bar.
$kendo-spreadsheet-formula-bar-gapNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The gap of the Spreadsheet formula bar.
$kendo-spreadsheet-formula-input-padding-xNumber$kendo-input-padding-x0.75rem
Description
The horizontal padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-padding-yNumber$kendo-input-padding-y0.375rem
Description
The vertical padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-line-heightNumber$kendo-input-line-height1.5
Description
The line height of the Spreadsheet formula input.
$kendo-spreadsheet-view-font-familyListArial, Verdana, sans-serifArial, Verdana, sans-serif
Description
The font family of the Spreadsheet view.
$kendo-spreadsheet-view-font-sizeNumber$kendo-spreadsheet-font-size1rem
Description
The font size of the Spreadsheet view.
$kendo-spreadsheet-selection-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
The background color of the Spreadsheet selection.
$kendo-spreadsheet-selection-textNullnullnull
Description
The text color of the Spreadsheet selection.
$kendo-spreadsheet-selection-borderColor$kendo-selected-bg#0d6efd
Description
The border color of the Spreadsheet selection.
$kendo-spreadsheet-selection-shadowListinset 0 0 0 1px $kendo-selected-bginset 0 0 0 1px #0d6efd
Description
The shadow of the Spreadsheet selection.
$kendo-spreadsheet-single-selection-bgColor$kendo-selected-bg#0d6efd
Description
The background color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-textNullnullnull
Description
The text color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-borderColor$kendo-spreadsheet-bg#ffffff
Description
The border color of the Spreadsheet single selection.
$kendo-spreadsheet-partial-selection-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
The background color of the Spreadsheet partial selection.
$kendo-spreadsheet-active-cell-bgColor$kendo-spreadsheet-bg#ffffff
Description
The background color of the Spreadsheet active cell.
$kendo-spreadsheet-active-cell-shadowListinset 0 0 0 1px $kendo-selected-bginset 0 0 0 1px #0d6efd
Description
The shadow of the Spreadsheet active cell.
$kendo-spreadsheet-auto-fill-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
The background color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-textNullnullnull
Description
The text color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-borderColor$kendo-selected-bg#0d6efd
Description
The border color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-shadowListinset 0 0 0 1px $kendo-selected-bginset 0 0 0 1px #0d6efd
Description
The shadow of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-punch-bgColorrgba( $kendo-spreadsheet-bg, .5 )rgba(255, 255, 255, 0.5)
Description
The background color of the Spreadsheet auto fill punch.
$kendo-spreadsheet-cell-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-padding-xNumber$kendo-spreadsheet-cell-padding-y0.25rem
Description
The horizontal padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-editor-line-heightNumber20px20px
Description
The line height of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-yNumber0px0px
Description
The vertical padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-bgColor$kendo-spreadsheet-bg#ffffff
Description
The background color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-textColor$kendo-spreadsheet-text#212529
Description
The text color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-borderNullnullnull
Description
The border color of the Spreadsheet cell editor.
$kendo-spreadsheet-resize-handle-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Spreadsheet resize handle.
$kendo-spreadsheet-cell-comment-borderColor$kendo-color-primary#0d6efd
Description
The border color of the Spreadsheet cell comment indicator.
$kendo-spreadsheet-cell-dirty-borderColor$kendo-color-error#dc3545
Description
The border color of the Spreadsheet cell dirty indicator.
$kendo-spreadsheet-sheets-bar-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-border-widthNumber1px1px
Description
The border width of the Spreadsheet sheets bar.
$kendo-spreadsheet-insert-image-dialog-border-styleStringdasheddashed
Description
The border style of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-border-widthNumber2px2px
Description
The border width of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-text-margin-bottomNumber30px30px
Description
The bottom margin of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-preview-widthNumber355px355px
Description
The width of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-heightNumber230px230px
Description
The height of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-imgString"image-default.png""image-default.png"
Description
The image of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-borderColor$kendo-component-border#dee2e6
Description
The border of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadowListinset 0 0 0 2000px rgba( black, .5 )inset 0 0 0 2000px rgba(0, 0, 0, 0.5)
Description
The shadow of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the Spreadsheet image Dialog preview overlay.
$kendo-spreadsheet-insert-image-dialog-overlay-hover-textColor$kendo-component-bg#ffffff
Description
The text color of the hovered Spreadsheet image Dialog preview.
$kendo-spreadsheet-drawing-handle-widthNumber6px6px
Description
The width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-heightNumber6px6px
Description
The height of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-styleStringsolidsolid
Description
The border style of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-widthNumber1px1px
Description
The border width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-outline-colorColor$kendo-color-primary#0d6efd
Description
The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-colorColor$kendo-selected-bg#0d6efd
Description
The outline color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-bgColor$kendo-color-primary#0d6efd
Description
The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-radiusNumber$kendo-border-radius-lg0.5rem
Description
The border radius of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-outline-styleStringsolidsolid
Description
The outline style of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-outline-widthNumber2px2px
Description
The outline width of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-anchor-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
The background color of the Spreadsheet drawing anchor.
$kendo-spreadsheet-dropzone-spacing-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical spacing of the Spreadsheet DropZone.

Stepper

NameTypeDefault valueComputed value
$kendo-stepper-margin-xNullnullnull
Description
The horizontal margin the Stepper.
$kendo-stepper-margin-yNullnullnull
Description
The vertical margin the Stepper.
$kendo-stepper-padding-xNullnullnull
Description
The horizontal padding the Stepper.
$kendo-stepper-padding-yNullnullnull
Description
The vertical padding the Stepper.
$kendo-stepper-label-margin-xNumber12px12px
Description
The horizontal margin the Stepper label.
$kendo-stepper-label-padding-xNumber12px12px
Description
The horizontal padding the Stepper label.
$kendo-stepper-label-padding-yNumber5px5px
Description
The vertical padding the Stepper label.
$kendo-stepper-border-widthNumber0px0px
Description
The width of the border around the Stepper.
$kendo-stepper-inline-content-padding-xNumber20px20px
Description
The horizontal padding of the Stepper content.
$kendo-stepper-inline-content-padding-yNumber10px10px
Description
The vertical padding of the Stepper content.
$kendo-stepper-font-sizeNumber$kendo-font-size-md1rem
$kendo-stepper-line-heightNumber$kendo-line-height-md1.5
$kendo-stepper-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"
$kendo-stepper-bgNullnullnull
Description
The background color of the Stepper.
$kendo-stepper-textColor$kendo-component-text#212529
Description
The text color of the Stepper.
$kendo-stepper-borderNullnullnull
Description
The border color of the Stepper.
$kendo-stepper-indicator-widthNumber28px28px
Description
The width of the Stepper indicator.
$kendo-stepper-indicator-heightNumber$kendo-stepper-indicator-width28px
Description
The height of the Stepper indicator.
$kendo-stepper-indicator-border-radiusNumber50%50%
Description
The border radius of the Stepper indicator.
$kendo-stepper-indicator-border-widthNumber1px1px
Description
The border width of the Stepper indicator.
$kendo-stepper-indicator-focus-border-widthNumber1px1px
Description
The border width of the focused Stepper indicator.
$kendo-stepper-indicator-focus-sizeNumber2px2px
Description
The size of the focused Stepper indicator.
$kendo-stepper-indicator-focus-offsetNumber3px3px
Description
The offset of the Stepper's focused indicator.
$kendo-stepper-indicator-focus-calc-offsetCalculationcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )calc(1px + 3px)
Description
The calculated offset of the Stepper's focused indicator.
$kendo-stepper-indicator-bgColor$kendo-component-bg#ffffff
Description
The background color of the Stepper indicator.
$kendo-stepper-indicator-textColor$kendo-component-text#212529
Description
The text color of the Stepper indicator.
$kendo-stepper-indicator-borderColor$kendo-component-border#dee2e6
Description
The border color of the Stepper indicator.
$kendo-stepper-indicator-hover-bgColorif($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg ))#ebebeb
Description
The background color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-textNullnullnull
Description
The text color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-borderNullnullnull
Description
The border color of the hovered Stepper indicator.
$kendo-stepper-indicator-disabled-bgNullnullnull
Description
The background color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-textColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 65%, transparent), $kendo-disabled-text)#adb5bd
Description
The text color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-borderNullnullnull
Description
The border color of the disabled Stepper indicator.
$kendo-stepper-indicator-done-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Stepper's done indicator.
$kendo-stepper-indicator-done-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper's done indicator.
$kendo-stepper-indicator-done-borderColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The border color of the Stepper's done indicator.
$kendo-stepper-indicator-done-hover-bgColorif($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg ))#0c65e9
Description
The background color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-textNullnullnull
Description
The text color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-borderNullnullnull
Description
The border color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-disabled-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))#6ea8fe
Description
The background color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg ))white
Description
The text color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-borderColor$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The border color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-current-bgColor$kendo-stepper-indicator-done-bg#0d6efd
Description
The background color of the Stepper current indicator.
$kendo-stepper-indicator-current-textColor$kendo-stepper-indicator-done-textwhite
Description
The text color of the Stepper current indicator.
$kendo-stepper-indicator-current-borderColor$kendo-stepper-indicator-done-border#0d6efd
Description
The border color of the Stepper current indicator.
$kendo-stepper-indicator-current-hover-bgColor$kendo-stepper-indicator-done-hover-bg#0c65e9
Description
The background color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-textNull$kendo-stepper-indicator-done-hover-textnull
Description
The text color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-borderNull$kendo-stepper-indicator-done-hover-bordernull
Description
The border color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-disabled-bgColor$kendo-stepper-indicator-done-disabled-bg#6ea8fe
Description
The background color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-textColor$kendo-stepper-indicator-done-disabled-textwhite
Description
The text color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-borderColor$kendo-stepper-indicator-done-disabled-border#6ea8fe
Description
The border color of the Stepper's disabled current indicator.
$kendo-stepper-label-textNullnullnull
Description
The text color of the Stepper label.
$kendo-stepper-label-success-textColor$kendo-color-success#198754
Description
The success text color of the Stepper label.
$kendo-stepper-label-error-textColor$kendo-color-error#dc3545
Description
The error text color of the Stepper label.
$kendo-stepper-label-hover-textNullnullnull
Description
The text color of the hovered Stepper label.
$kendo-stepper-label-disabled-textColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 65%, transparent), $kendo-disabled-text)#adb5bd
Description
The text color of the disabled Stepper label.
$kendo-stepper-optional-label-textColor$kendo-subtle-text#6c757d
Description
The text color of the optional Stepper label.
$kendo-stepper-optional-label-opacityNullnullnull
Description
The opacity of the optional Stepper label.
$kendo-stepper-optional-label-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the optional Stepper label.
$kendo-stepper-optional-label-font-styleNullnullnull
Description
The font style of the optional Stepper label.
$kendo-stepper-progressbar-sizeNumber2px2px
Description
The size of the Stepper ProgressBar.
$kendo-stepper-progressbar-bgNullnullnull
Description
The background color of the Stepper ProgressBar.
$kendo-stepper-progressbar-textNullnullnull
Description
The text color of the Stepper ProgressBar.
$kendo-stepper-progressbar-fill-bgNullnullnull
Description
The background color of the selected Stepper ProgressBar.
$kendo-stepper-progressbar-fill-textNullnullnull
Description
The text color of the selected Stepper ProgressBar.
$kendo-stepper-content-transition-propertyStringheightheight
Description
The property name of the Stepper transition.
$kendo-stepper-content-transition-durationNumber300ms300ms
Description
The duration of the Stepper transition.
$kendo-stepper-content-transition-timing-functionListcubic-bezier(.4, 0, .2, 1) 0mscubic-bezier(0.4, 0, 0.2, 1) 0ms
Description
The timing function of the Stepper transition.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-familyNullnullnull
Description
The font family of the Switch.
$kendo-switch-track-border-widthNumber1px1px
Description
The border width of the Switch track.
$kendo-switch-thumb-border-widthNullnullnull
Description
The border width of the Switch thumb.
$kendo-switch-label-text-transformNullnullnull
Description
The text transform of the Switch label.
$kendo-switch-label-displayStringnonenone
Description
The display of the Switch label.
$kendo-switch-sizesMap( sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ), md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ), lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null ) )(sm: (font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null), md: (font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null), lg: (font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null))
Description
The map with the different Switch sizes.
$kendo-switch-off-track-bgColor$kendo-component-bg#ffffff
Description
The background of the track when the Switch is not checked.
$kendo-switch-off-track-textNullnullnull
Description
The text color of the track when the Switch is not checked.
$kendo-switch-off-track-borderColor$gray-500#adb5bd
Description
The border color of the track when the Switch is not checked.
$kendo-switch-off-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))#86b7fe
Description
The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-ringList.25rem solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)
Description
The ring around the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bgColorif($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))#e9ecef
Description
The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bgColor$gray-500#adb5bd
Description
The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-textNullnullnull
Description
The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-borderNullnullnull
Description
The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-gradientNullnullnull
Description
The background gradient of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bgNullnullnull
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is not checked.
$kendo-switch-on-track-bgColor$kendo-color-primary#0d6efd
Description
The background of the track when the Switch is checked.
$kendo-switch-on-track-textNullnullnull
Description
The text color of the track when the Switch is checked.
$kendo-switch-on-track-borderColor$kendo-switch-on-track-bg#0d6efd
Description
The border color of the track when the Switch is checked.
$kendo-switch-on-track-gradientNullnullnull
Description
The background gradient of the track when the Switch is checked.
$kendo-switch-on-track-hover-bgNullnullnull
Description
The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-textNullnullnull
Description
The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-borderNullnullnull
Description
The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-gradientNullnullnull
Description
The background gradient of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bgNullnullnull
Description
The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-textNullnullnull
Description
The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-borderNullnullnull
Description
The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-gradientNullnullnull
Description
The background gradient of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-ringList.25rem solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 ))0.25rem solid rgba(13, 110, 253, 0.25)
Description
The ring around the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))#86b7fe
Description
The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-textNullnullnull
Description
The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-borderNullnullnull
Description
The border color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-gradientNullnullnull
Description
The background gradient of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bgColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))white
Description
The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-textNullnullnull
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-borderNullnullnull
Description
The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-gradientNullnullnull
Description
The background gradient of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bgNullnullnull
Description
The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-textNullnullnull
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-borderNullnullnull
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-gradientNullnullnull
Description
The background gradient of the thumb when the hovered Switch is checked.

Table

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
$kendo-table-cell-vertical-border-widthNumber1px1px
Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber0px0px
Description
The width of horizontal border of table cells.
$kendo-table-font-sizeNullnullnull
Description
The font size of the table if no size is specified.
$kendo-table-line-heightNullnullnull
Description
The line-height of the table if no size is specified.
$kendo-table-cell-padding-xNullnullnull
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-yNullnullnull
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizesMap( sm: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y ), lg: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )(sm: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))
Description
The sizes of the table.
$kendo-table-bgColor$kendo-component-bg#ffffff
Description
Background color of tables.
$kendo-table-textColor$kendo-component-text#212529
Description
Text color of tables.
$kendo-table-borderColor$kendo-component-border#dee2e6
Description
Border color of tables.
$kendo-table-header-bgColor$kendo-component-header-bg#f8f9fa
Description
Background color of table headers.
$kendo-table-header-textColor$kendo-component-header-text#212529
Description
Text color of table headers.
$kendo-table-header-borderColor$kendo-component-header-border#dee2e6
Description
Border color of table headers.
$kendo-table-header-gradientNull$kendo-component-header-gradientnull
Description
Gradient of table headers.
$kendo-table-footer-bgColor$kendo-table-header-bg#f8f9fa
Description
Background color of table footers.
$kendo-table-footer-textColor$kendo-table-header-text#212529
Description
Text color of table footers.
$kendo-table-footer-borderColor$kendo-table-header-border#dee2e6
Description
Border color of table footers.
$kendo-table-group-row-bgColor$kendo-table-header-bg#f8f9fa
Description
Background color of group rows in table.
$kendo-table-group-row-textColor$kendo-table-header-text#212529
Description
Text color of group rows in table.
$kendo-table-group-row-borderColor$kendo-table-header-border#dee2e6
Description
Border color of group rows in table.
$kendo-table-alt-row-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
Background color of alternating rows in table.
$kendo-table-alt-row-textNullnullnull
Description
Text color of alternating rows in table.
$kendo-table-alt-row-borderNullnullnull
Description
Border color of alternating rows in table.
$kendo-table-hover-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .08 ))rgba(0, 0, 0, 0.08)
Description
Background color of hovered rows in table.
$kendo-table-hover-textNullnullnull
Description
Text color of hovered rows in table.
$kendo-table-hover-borderNullnullnull
Description
Border color of hovered rows in table.
$kendo-table-focus-bgNullnullnull
Description
Background color of focused rows in table.
$kendo-table-focus-textNullnullnull
Description
Text color of focused rows in table.
$kendo-table-focus-borderNullnullnull
Description
Border color of focused rows in table.
$kendo-table-focus-shadowListinset 0 0 0 2px rgba( $kendo-color-black, .08)inset 0 0 0 2px rgba(0, 0, 0, 0.08)
Description
Box shadow of focused rows in table.
$kendo-table-selected-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 ))rgba(13, 110, 253, 0.25)
Description
Background color of selected rows in table.
$kendo-table-selected-textColor$kendo-table-text#212529
Description
Text color of selected rows in table.
$kendo-table-selected-borderNullnullnull
Description
Border color of selected rows in table.

Tabstrip

NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
Description
Background color of tabstrip component
$kendo-tabstrip-textColor$kendo-component-text#212529
Description
Text color of tabstrip component
$kendo-tabstrip-borderColor$kendo-component-border#dee2e6
Description
Border color of tabstrip component
$kendo-tabstrip-item-padding-xNumber$nav-link-padding-x1rem
Description
Horizontal padding of tabs
$kendo-tabstrip-item-padding-yNumber$nav-link-padding-y0.5rem
Description
Vertical padding of tabs
$kendo-tabstrip-item-border-widthNumber1px1px
Description
Width of border around tabs
$kendo-tabstrip-item-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
Border radius of tabs
$kendo-tabstrip-item-gapNumber00
Description
Spacing between tabs
$kendo-tabstrip-item-bgNullnullnull
Description
Background color of tabs
$kendo-tabstrip-item-textColor$kendo-link-text#0d6efd
Description
Text color of tabs
$kendo-tabstrip-item-borderNullnullnull
Description
Border color of tabs
$kendo-tabstrip-item-gradientNullnullnull
Description
Background gradient of tabs
$kendo-tabstrip-item-hover-bgNullnullnull
Description
Background color of hovered tabs
$kendo-tabstrip-item-hover-textColor$kendo-link-hover-text#0a58ca
Description
Text color of hovered tabs
$kendo-tabstrip-item-hover-borderColor$gray-200#e9ecef
Description
Border color of hovered tabs
$kendo-tabstrip-item-hover-gradientNullnullnull
Description
Background gradient of hovered tabs
$kendo-tabstrip-item-selected-bgColor$kendo-component-bg#ffffff
Description
Background color of selected tabs
$kendo-tabstrip-item-selected-textColor$kendo-component-text#212529
Description
Text color of selected tabs
$kendo-tabstrip-item-selected-borderColor$kendo-component-border#dee2e6
Description
Border color of selected tabs
$kendo-tabstrip-item-selected-gradientNullnullnull
Description
Background gradient of selected tabs
$kendo-tabstrip-content-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
Vertical padding of tabstrip content
$kendo-tabstrip-content-border-widthNumber$kendo-tabstrip-border-width1px
Description
Width of border around tabstrip content
$kendo-tabstrip-content-bgColor$kendo-component-bg#ffffff
Description
Background color of tabstrip content
$kendo-tabstrip-content-textColor$kendo-component-text#212529
Description
Text color of tabstrip content
$kendo-tabstrip-content-borderColor$kendo-component-border#dee2e6
Description
Border color of tabstrip content
$kendo-tabstrip-content-focus-borderColor$kendo-component-text#212529
Description
Border color of tabstrip focused content

Taskboard

NameTypeDefault valueComputed value
$kendo-taskboard-spacerNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The spacing index of the TaskBoard.
$kendo-taskboard-padding-yNullnullnull
Description
The vertical padding of the TaskBoard.
$kendo-taskboard-padding-xNullnullnull
Description
The horizontal of the TaskBoard.
$kendo-taskboard-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 TaskBoard.
$kendo-taskboard-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the TaskBoard.
$kendo-taskboard-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the TaskBoard.
$kendo-taskboard-bgNullnullnull
Description
The background color of the TaskBoard.
$kendo-taskboard-textNullnullnull
Description
The text color of the TaskBoard.
$kendo-taskboard-borderNullnullnull
Description
The border color of the TaskBoard.
$kendo-taskboard-toolbar-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-padding-xNumber$kendo-taskboard-toolbar-padding-y1rem
Description
The horizontal padding of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-bgNullnullnull
Description
The background color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-textNullnullnull
Description
The text color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-borderNullnullnull
Description
The border color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-gradientNullnullnull
Description
The gradient of the TaskBoard Toolbar.
$kendo-taskboard-content-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard content.
$kendo-taskboard-content-padding-xNumber$kendo-taskboard-content-padding-y1rem
Description
The horizontal padding of the TaskBoard content.
$kendo-taskboard-column-container-spacing-yNumber$kendo-taskboard-spacer * .750.75rem
Description
The vertical spacing of the TaskBoard column container.
$kendo-taskboard-column-container-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard column container.
$kendo-taskboard-column-container-padding-xNumber$kendo-taskboard-spacer * .750.75rem
Description
The horizontal padding of the TaskBoard column container.
$kendo-taskboard-columns-container-gapNumber$kendo-taskboard-spacer1rem
Description
The spacing of the TaskBoard columns container.
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
$kendo-taskboard-column-border-radiusNumber$kendo-border-radius-sm0.25rem
Description
The border radius of the TaskBoard column.
$kendo-taskboard-column-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 ))#f8f9fa
Description
The background color of the TaskBoard column.
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
$kendo-taskboard-column-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))#b6b7b8
Description
The border color of the focused TaskBoard column.
$kendo-taskboard-column-header-padding-yNumber$kendo-taskboard-spacer * .750.75rem
Description
The vertical padding of the TaskBoard column header.
$kendo-taskboard-column-header-padding-xNumber$kendo-taskboard-column-header-padding-y0.75rem
Description
The horizontal padding of the TaskBoard column header.
$kendo-taskboard-column-header-gapNumberk-math-div( $kendo-taskboard-spacer, 4 )0.25rem
Description
The spacing of the TaskBoard column header.
$kendo-taskboard-column-header-actions-gapNumberk-math-div( $kendo-taskboard-spacer, 2 )0.5rem
Description
The spacing of the TaskBoard column header actions.
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
$kendo-taskboard-column-header-textColor$kendo-component-header-text#212529
Description
The text color of the TaskBoard column header.
$kendo-taskboard-column-cards-padding-yNumber$kendo-taskboard-spacer * .250.25rem
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-padding-xNumber0px0px
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-gapNumber$kendo-taskboard-spacer * .750.75rem
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
$kendo-taskboard-pane-bgColor$kendo-component-bg#ffffff
Description
The background color of the TaskBoard pane.
$kendo-taskboard-pane-textColor$kendo-component-text#212529
Description
The text color of the TaskBoard pane.
$kendo-taskboard-pane-borderColor$kendo-component-border#dee2e6
Description
The border color of the TaskBoard pane.
$kendo-taskboard-pane-header-padding-yNumber( $kendo-taskboard-spacer * .75 )0.75rem
Description
The vertical padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-padding-xNumber$kendo-taskboard-spacer1rem
Description
The horizontal padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
$kendo-taskboard-pane-header-textColor$kendo-component-header-text#212529
Description
The text color of the TaskBoard pane header.
$kendo-taskboard-pane-content-padding-yNumber0px0px
Description
The vertical padding of the TaskBoard pane content.
$kendo-taskboard-pane-content-padding-xNumber$kendo-taskboard-spacer1rem
Description
The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-pane-actions-padding-yNumber( $kendo-taskboard-spacer * .75 )0.75rem
Description
The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-pane-actions-padding-xNumber$kendo-taskboard-spacer1rem
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-card-padding-yNumber$kendo-taskboard-spacer1rem
Description
The vertical padding of the TaskBoard Card.
$kendo-taskboard-card-padding-xNumber$kendo-taskboard-card-padding-y1rem
Description
The horizontal padding of the TaskBoard Card.
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the TaskBoard Card.
$kendo-taskboard-card-border-radiusNumber$kendo-card-border-radius0.375rem
Description
The border radius of the TaskBoard Card.
$kendo-taskboard-card-bgColor$kendo-card-bg#ffffff
Description
The background color of the TaskBoard Card.
$kendo-taskboard-card-textColor$kendo-card-text#212529
Description
The text color of the TaskBoard Card.
$kendo-taskboard-card-borderColor$kendo-card-border#dee2e6
Description
The border color of the TaskBoard Card.
$kendo-taskboard-card-shadowNull$kendo-card-shadownull
Description
The shadow of the TaskBoard Card.
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
$kendo-taskboard-card-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))#c8cbcf
Description
The border color of the hovered TaskBoard Card.
$kendo-taskboard-card-focus-borderColorif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))#b6b9bd
Description
The border color of the focused TaskBoard Card.
$kendo-taskboard-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused TaskBoard Card.
$kendo-taskboard-card-selected-borderColorif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 8 ))#b6d3fe
Description
The border of the selected TaskBoard Card.
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
$kendo-taskboard-card-header-textColor$kendo-color-primary#0d6efd
Description
The text color of the TaskBoard Card header text.
$kendo-taskboard-card-header-focus-textColor$kendo-color-primary-darker#0b5cd5
Description
The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-card-header-hover-textColor$kendo-color-primary-darker#0b5cd5
Description
The text color of the focused TaskBoard Card header text.
$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
The border width of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-border-radiusNumber$kendo-taskboard-card-border-radius0.375rem
Description
The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 10%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .1 ))rgba(0, 0, 0, 0.1)
Description
The background color of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-borderColor$kendo-component-border#dee2e6
Description
The border color of the TaskBoard Card placeholder.

Tilelayout

NameTypeDefault valueComputed value
$kendo-tile-layout-border-widthNumber0px0px
Description
The width of the border around the TileLayout.
$kendo-tile-layout-bgColor$gray-100#f8f9fa
Description
The background color of the TileLayout.
$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-yNumber$kendo-tile-layout-padding-x1rem
Description
The vertical padding of the TileLayout
$kendo-tile-layout-card-border-widthNumber$kendo-card-border-width1px
Description
The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The focus box shadow of the TileLayout card.
$kendo-tile-layout-hint-border-widthNumber1px1px
Description
The width of the border around the TileLayout hint.
$kendo-tile-layout-hint-border-radiusNumber$kendo-card-border-radius0.375rem
Description
The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-borderColor$kendo-component-border#dee2e6
Description
The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The background color of the TileLayout hint.

Timeline

NameTypeDefault valueComputed value
$kendo-timeline-spacing-xNumber40px40px
Description
The horizontal spacing of the Timeline.
$kendo-timeline-spacing-yNumber40px40px
Description
The vertical spacing of the Timeline.
$kendo-timeline-items-paddingNumber$kendo-padding-md-x1rem
Description
The padding between the Timeline's track items.
$kendo-timeline-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 Timeline.
$kendo-timeline-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Timeline.
$kendo-timeline-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Timeline.
$kendo-timeline-mobile-spacing-xNumber$kendo-padding-md-x1rem
Description
The horizontal spacing of the mobile Timeline.
$kendo-timeline-mobile-spacing-yNumber$kendo-padding-md-x1rem
Description
The vertical spacing of the mobile Timeline.
$kendo-timeline-track-arrow-widthNumber38px38px
Description
The width of the Timeline track arrow.
$kendo-timeline-track-arrow-heightNumber38px38px
Description
The height of the Timeline track arrow.
$kendo-timeline-track-arrow-disabled-bgColorif($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 65%, transparent), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))#edeff2
Description
The background color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-textColorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 65%, transparent), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ))#6f7174
Description
The text color of the disabled Timeline track arrow.
$kendo-timeline-track-arrow-disabled-borderColorif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 15%, transparent), k-true-mix( $kendo-button-border, $kendo-body-bg, 65% ))#edeff2
Description
The border color of the disabled Timeline track arrow.
$kendo-timeline-track-sizeNumber6px6px
Description
The size of the Timeline track.
$kendo-timeline-track-wrap-padding-bottomNumberk-math-div( $kendo-timeline-track-size, 2 )3px
Description
The bottom padding of the Timeline's track wrapper.
$kendo-timeline-track-border-widthNumber1px1px
Description
The border width of the Timeline track.
$kendo-timeline-track-margin-bottomNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The bottom margin of the Timeline track.
$kendo-timeline-track-bottom-calcCalculationcalc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom})calc(19px + 3px)
Description
The bottom offset of the Timeline track.
$kendo-timeline-track-start-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(38px - 2 * 1px)
Description
The left offset of the Timeline track.
$kendo-timeline-track-end-calcCalculationcalc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width})calc(38px - 2 * 1px)
Description
The right offset of the Timeline track.
$kendo-timeline-track-bgColor$kendo-button-bg#e4e7eb
Description
The background color of the Timeline track.
$kendo-timeline-track-border-colorColor$kendo-timeline-track-bg#e4e7eb
Description
The border color of the Timeline track.
$kendo-timeline-track-item-focus-shadowStringk-elevation(2)var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075))
Description
The shadow of the Timeline's focused track items.
$kendo-timeline-track-event-offsetNumber36px36px
Description
The offset of the Timeline track event.
$kendo-timeline-flag-padding-xNumber$kendo-button-padding-x0.75rem
Description
The horizontal padding of the Timeline flag.
$kendo-timeline-flag-padding-yNumber$kendo-button-padding-y0.375rem
Description
The vertical padding of the Timeline flag.
$kendo-timeline-flag-line-heightNumber$kendo-button-line-height1.5
Description
The line height of the Timeline flag.
$kendo-timeline-flag-min-widthNumber80px80px
Description
The minimum width of the Timeline flag.
$kendo-timeline-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-spacing-x})calc(80px + 2 * 40px)
Description
The maximum width of the Timeline flag.
$kendo-timeline-mobile-flag-max-widthCalculationcalc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x})calc(80px + 2 * 1rem)
Description
The maximum width of the mobile Timeline flag.
$kendo-timeline-horizontal-flag-min-widthNumber80px80px
Description
The minimum width of the horizontal Timeline flag.
$kendo-timeline-flag-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Timeline flag.
$kendo-timeline-flag-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-timeline-flag-bg ))white
Description
The text color of the Timeline flag.
$kendo-timeline-flag-callout-widthNumber10px10px
Description
The width of the Timeline's flag callout.
$kendo-timeline-flag-callout-heightNumber10px10px
Description
The height of the Timeline's flag callout.
$kendo-timeline-flag-offset-bottomNumber4px4px
Description
The bottom offset of the Timeline flag.
$kendo-timeline-flag-margin-bottom-calcCalculationcalc(#{$kendo-timeline-track-size} + 2 * #{$kendo-timeline-track-border-width} + #{$kendo-timeline-flag-offset-bottom} + #{$kendo-timeline-flag-callout-height})calc(6px + 2 * 1px + 4px + 10px)
Description
The bottom margin of the Timeline flag.
$kendo-timeline-date-widthNumber50px50px
Description
The width of the Timeline date.
$kendo-timeline-date-margin-bottomNumber10px10px
Description
The bottom margin of the Timeline date.
$kendo-timeline-vertical-padding-calcCalculationcalc(#{$kendo-timeline-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)calc(40px + (80px - 6px) / 2)
Description
The padding of the vertical Timeline.
$kendo-timeline-vertical-padding-with-dates-calcCalculationcalc(#{$kendo-timeline-vertical-padding-calc} + #{$kendo-timeline-date-width})calc(calc(40px + (80px - 6px) / 2) + 50px)
Description
The padding of the vertical Timeline date.
$kendo-timeline-mobile-vertical-padding-calcCalculationcalc(#{$kendo-timeline-mobile-spacing-x} + (#{$kendo-timeline-flag-min-width} - #{$kendo-timeline-track-size}) / 2)calc(1rem + (80px - 6px) / 2)
Description
The padding of the vertical mobile Timeline.
$kendo-timeline-mobile-vertical-padding-with-dates-calcCalculationcalc(#{$kendo-timeline-mobile-vertical-padding-calc} + #{$kendo-timeline-date-width})calc(calc(1rem + (80px - 6px) / 2) + 50px)
Description
The padding of the vertical mobile Timeline date.
$kendo-timeline-circle-widthNumber16px16px
Description
The width of the Timeline circle.
$kendo-timeline-circle-heightNumber16px16px
Description
The height of the Timeline circle.
$kendo-timeline-circle-bgColor$kendo-color-primary#0d6efd
Description
The background color of the Timeline circle.
$kendo-timeline-collapse-arrow-padding-xNumber$kendo-padding-sm-x0.5rem
Description
The horizontal padding of the Timeline collapse arrow.
$kendo-timeline-event-widthNumber400px400px
Description
The width of the Timeline event.
$kendo-timeline-event-heightNumber600px600px
Description
The height of the Timeline event.
$kendo-timeline-event-min-height-calcCalculationcalc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width}))calc(2 * (36px - 1px))
Description
The minimum height of the Timeline event.

Toolbar

NameTypeDefault valueComputed value
$kendo-toolbar-padding-xNullnullnull
Description
The horizontal padding of the Toolbar.
$kendo-toolbar-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The horizontal padding of the large Toolbar.
$kendo-toolbar-padding-yNullnullnull
Description
The vertical padding of the Toolbar.
$kendo-toolbar-sm-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-yNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The vertical padding of the large Toolbar.
$kendo-toolbar-spacingNullnullnull
Description
The spacing between the Toolbar tools.
$kendo-toolbar-sm-spacingNumberk-map-get( $kendo-spacing, 1.5 )0.375rem
Description
The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacingNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The spacing between the tools of the large Toolbar.
$kendo-toolbar-border-widthNumber1px1px
Description
The width of the border around the Toolbar.
$kendo-toolbar-border-radiusNullnullnull
Description
The border radius of the Toolbar.
$kendo-toolbar-font-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 Toolbar.
$kendo-toolbar-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Toolbar.
$kendo-toolbar-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Toolbar.
$kendo-toolbar-bgColor$kendo-component-header-bg#f8f9fa
Description
The background color of the Toolbar.
$kendo-toolbar-textColor$kendo-component-header-text#212529
Description
The text color of the Toolbar.
$kendo-toolbar-borderColor$kendo-component-header-border#dee2e6
Description
The color of the border around the Toolbar.
$kendo-toolbar-gradientNullnullnull
Description
The gradient of the Toolbar.
$kendo-toolbar-shadowNullnullnull
Description
The box shadow of the Toolbar.
$kendo-toolbar-separator-borderStringinheritinherit
Description
The color of the separator border of the Toolbar.
$kendo-toolbar-input-widthNumber10em10em
Description
The width of the input in the Toolbar.
$kendo-toolbar-item-shadowList0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The box shadow of the focused Toolbar item.
$kendo-toolbar-flat-border-widthNumber1px1px
Description
Border width of the flat Toolbar.
$kendo-toolbar-sizesMap( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )(sm: (padding-x: 0.25rem, padding-y: 0.25rem, spacing: 0.375rem), md: (padding-x: 0.5rem, padding-y: 0.5rem, spacing: 0.5rem), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: 0.625rem))
Description
The sizes map for the Toolbar.

Tooltip

NameTypeDefault valueComputed value
$kendo-tooltip-padding-yNumber$tooltip-padding-y0.25rem
Description
The vertical padding of the Tooltip.
$kendo-tooltip-padding-xNumber$tooltip-padding-x0.5rem
Description
The horizontal padding of the Tooltip.
$kendo-tooltip-border-widthNumber0px0px
Description
The width of the border around the Tooltip.
$kendo-tooltip-border-radiusNumber$tooltip-border-radius0.375rem
Description
The border radius of the Tooltip.
$kendo-tooltip-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 Tooltip.
$kendo-tooltip-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the Tooltip.
$kendo-tooltip-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Tooltip.
$kendo-tooltip-title-font-sizeNumber($kendo-tooltip-font-size * 1.25)1.09375rem
Description
The font size of the Tooltip title.
$kendo-tooltip-title-line-heightNumber11
Description
The line height of the Tooltip title.
$kendo-tooltip-callout-sizeNumber$tooltip-arrow-height0.4rem
Description
The size of the Tooltip callout.
$kendo-tooltip-bgColorif($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ))#000000
Description
The default background of the Tooltip.
$kendo-tooltip-textColorif($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg ))white
Description
The default text color of the Tooltip.
$kendo-tooltip-borderColor$kendo-tooltip-bg#000000
Description
The default border color of the Tooltip.
$kendo-tooltip-shadowStringk-elevation(2)var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075))
Description
The box-shadow of the Tooltip.
$kendo-tooltip-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 Tooltip.
$kendo-tooltip-themeMaptooltip-theme( $kendo-tooltip-theme-colors )("inverse": (color: white, background-color: #212529, border: #212529), "light": (color: black, background-color: #f8f9fa, border: #f8f9fa), "dark": (color: white, background-color: #212529, border: #212529), "error": (color: white, background-color: #dc3545, border: #dc3545), "warning": (color: black, background-color: #ffc107, border: #ffc107), "success": (color: white, background-color: #198754, border: #198754), "info": (color: white, background-color: #0dcaf0, border: #0dcaf0), "tertiary": (color: white, background-color: #6f42c1, border: #6f42c1), "secondary": (color: white, background-color: #6c757d, border: #6c757d), "primary": (color: white, background-color: #0d6efd, border: #0d6efd))
Description
The generated theme colors map for the Tooltip.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-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 TreeView.
$kendo-treeview-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the TreeView.
$kendo-treeview-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small TreeView.
$kendo-treeview-md-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the medium TreeView.
$kendo-treeview-lg-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the large TreeView.
$kendo-treeview-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the TreeView.
$kendo-treeview-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the small TreeView.
$kendo-treeview-md-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the medium TreeView.
$kendo-treeview-lg-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the large TreeView.
$kendo-treeview-indentNumber24px24px
Description
The indentation of child groups in the TreeView.
$kendo-treeview-item-padding-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal padding of the TreeView items.
$kendo-treeview-sm-item-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-xNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The horizontal padding of the large TreeView items.
$kendo-treeview-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the TreeView items.
$kendo-treeview-sm-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the large TreeView items.
$kendo-treeview-item-border-widthNumber0px0px
Description
The border width of the TreeView items.
$kendo-treeview-item-border-radiusNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The border radius of the TreeView items.
$kendo-treeview-sm-checkbox-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-xNumber$kendo-treeview-sm-checkbox-padding-x0.25rem
Description
The horizontal padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-xNumber$kendo-treeview-sm-checkbox-padding-x0.25rem
Description
The horizontal padding of the checkbox in the large TreeView.
$kendo-treeview-sm-checkbox-padding-yNumberk-map-get( $kendo-spacing, .5 )0.125rem
Description
The vertical padding of the checkbox in the small TreeView.
$kendo-treeview-md-checkbox-padding-yNullnullnull
Description
The vertical padding of the checkbox in the medium TreeView.
$kendo-treeview-lg-checkbox-padding-yNullnullnull
Description
The vertical padding of the checkbox in the large TreeView.
$kendo-treeview-sizesMap( sm: ( font-size: $kendo-treeview-sm-font-size, line-height: $kendo-treeview-sm-line-height, item-padding-x: $kendo-treeview-sm-item-padding-x, item-padding-y: $kendo-treeview-sm-item-padding-y, checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y ), md: ( font-size: $kendo-treeview-md-font-size, line-height: $kendo-treeview-md-line-height, item-padding-x: $kendo-treeview-md-item-padding-x, item-padding-y: $kendo-treeview-md-item-padding-y, checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y ), lg: ( font-size: $kendo-treeview-lg-font-size, line-height: $kendo-treeview-lg-line-height, item-padding-x: $kendo-treeview-lg-item-padding-x, item-padding-y: $kendo-treeview-lg-item-padding-y, checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x, checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y ) )(sm: (font-size: 0.875rem, line-height: 1.4285714286, item-padding-x: 0.5rem, item-padding-y: 0.25rem, checkbox-padding-x: 0.25rem, checkbox-padding-y: 0.125rem), md: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.25rem, checkbox-padding-x: 0.25rem, checkbox-padding-y: null), lg: (font-size: 1rem, line-height: 1.5, item-padding-x: 0.75rem, item-padding-y: 0.5rem, checkbox-padding-x: 0.25rem, checkbox-padding-y: null))
Description
The sizes map of the TreeView.
$kendo-treeview-bgNullnullnull
Description
The background color of the TreeView.
$kendo-treeview-textColor$kendo-component-text#212529
Description
The text color of the TreeView.
$kendo-treeview-borderNullnullnull
Description
The border color of the TreeView.
$kendo-treeview-item-hover-bgColor$kendo-hover-bg#e9ecef
Description
The background color of hovered TreeView items.
$kendo-treeview-item-hover-textColor$kendo-hover-text#212529
Description
The text color of hovered TreeView items.
$kendo-treeview-item-hover-borderColor$kendo-treeview-item-hover-bg#e9ecef
Description
The border color of hovered TreeView items.
$kendo-treeview-item-hover-gradientNullnullnull
Description
The background gradient of hovered TreeView items.
$kendo-treeview-item-selected-bgColor$kendo-selected-bg#0d6efd
Description
The background color of selected TreeView items.
$kendo-treeview-item-selected-textColor$kendo-selected-textwhite
Description
The text color of selected TreeView items.
$kendo-treeview-item-selected-borderColor$kendo-treeview-item-selected-bg#0d6efd
Description
The border color of selected TreeView items.
$kendo-treeview-item-selected-gradientNullnullnull
Description
The background gradient of selected TreeView items.
$kendo-treeview-item-focus-shadowListinset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-treeview-text, .15 ))inset 0 0 0 2px rgba(33, 37, 41, 0.15)
Description
The box shadow of focused TreeView items.
$kendo-treeview-loadmore-bgColortransparenttransparent
Description
The background color of the Load More button in the TreeView.
$kendo-treeview-loadmore-textColor$kendo-link-text#0d6efd
Description
The text color of the Load More button in the TreeView.
$kendo-treeview-loadmore-borderNullnullnull
Description
The border color of the Load More button in the TreeView.
$kendo-treeview-loadmore-hover-bgColortransparenttransparent
Description
The background color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-textColor$kendo-link-hover-text#0a58ca
Description
The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-borderNullnullnull
Description
The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bgColortransparenttransparent
Description
The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-textColor$kendo-link-hover-text#0a58ca
Description
The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-borderNullnullnull
Description
The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadowList$kendo-treeview-item-focus-shadowinset 0 0 0 2px rgba(33, 37, 41, 0.15)
Description
The box shadow of the focused Load More button in the TreeView.

Typography

NameTypeDefault valueComputed value
$kendo-font-sizeNumber$font-size-base1rem
Description
Base font size across all components.
$kendo-font-family-sans-serifList$font-family-sans-serifsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
Font family for text.
$kendo-font-family-monospaceList$font-family-monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
Description
Font family for monospaced text. Used for styling the code.
$kendo-font-familyList$kendo-font-family-sans-serifsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
Font family across all components.
$kendo-line-heightNumber$line-height-base1.5
Description
Line height used along with $kendo-font-size.

Upload

NameTypeDefault valueComputed value
$kendo-upload-border-widthNumber1px1px
Description
The width of the border around the Upload.
$kendo-upload-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 Upload.
$kendo-upload-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Upload.
$kendo-upload-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Upload.
$kendo-upload-max-heightNumber300px300px
Description
The maximum height of the list with uploaded items.
$kendo-upload-textColor$kendo-component-text#212529
Description
The text color of the Upload.
$kendo-upload-bgColor$kendo-component-bg#ffffff
Description
The background color of the Upload.
$kendo-upload-borderColor$kendo-component-border#dee2e6
Description
The border color of the Upload.
$kendo-upload-dropzone-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the Upload dropzone.
$kendo-upload-dropzone-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the Upload dropzone.
$kendo-upload-dropzone-textColor$kendo-component-header-text#212529
Description
The text color of the Upload dropzone.
$kendo-upload-dropzone-bgColor$kendo-component-header-bg#f8f9fa
Description
The background color of the Upload dropzone.
$kendo-upload-dropzone-borderColor$kendo-upload-border#dee2e6
Description
The border color of the Upload dropzone.
$kendo-upload-dropzone-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 ))#f4f5f6
Description
The background color of the hovered Upload dropzone.
$kendo-upload-status-textColor$kendo-subtle-text#6c757d
Description
The text color of the Upload status message.
$kendo-upload-status-text-opacityNullnullnull
Description
The opacity of the Upload status message.
$kendo-upload-item-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of an uploaded item.
$kendo-upload-item-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of an uploaded item.
$kendo-upload-multiple-items-spacingNumber12px12px
Description
The vertical spacing between uploaded batch items.
$kendo-upload-validation-font-sizeNumber11px11px
Description
The font size of the Upload validation message.
$kendo-upload-icon-spacingNumber$kendo-icon-spacing0.5rem
Description
The horizontal spacing of the Upload status icon.
$kendo-upload-icon-colorColor$kendo-subtle-text#6c757d
Description
The color of the uploaded items icon.
$kendo-upload-progress-thicknessNumber2px2px
Description
The thickness of the Upload progress bar.
$kendo-upload-progress-bgColor$kendo-color-info#0dcaf0
Description
The background color of the Upload progress bar.
$kendo-upload-success-textColor$kendo-color-success#198754
Description
The success text color of the Upload.
$kendo-upload-success-bgColor$kendo-color-success#198754
Description
The success background color of the Upload progress bar.
$kendo-upload-error-textColor$kendo-color-error#dc3545
Description
The error text color of the Upload.
$kendo-upload-error-bgColor$kendo-color-error#dc3545
Description
The error background color of the Upload progress bar.
$kendo-upload-focus-shadowList0 0 0 2px rgba(0, 0, 0, .13)0 0 0 2px rgba(0, 0, 0, 0.13)
Description
The shadow of the focused Upload button, actions and uploaded items.

Window

NameTypeDefault valueComputed value
$kendo-window-border-widthNumber1px1px
Description
The width of the border around the Window.
$kendo-window-border-radiusNumber$kendo-border-radius-md0.375rem
Description
The border radius of the Window.
$kendo-window-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 Window.
$kendo-window-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Window.
$kendo-window-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Window.
$kendo-window-titlebar-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the Window titlebar.
$kendo-window-titlebar-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the Window titlebar.
$kendo-window-titlebar-border-widthList0 0 1px0 0 1px
Description
The width of the border of the Window titlebar.
$kendo-window-titlebar-border-styleStringsolidsolid
Description
The style of the border of the Window titlebar.
$kendo-window-title-font-sizeNumber$kendo-font-size-lg1.25rem
Description
The font size of the title of the Window.
$kendo-window-title-line-heightNumber1.51.5
Description
The line height of the title of the Window.
$kendo-window-actions-gapNumber.5rem0.5rem
Description
The spacing between the buttons in the Window titlebar.
$kendo-window-action-opacityNumber.50.5
Description
The opacity of the buttons in the Window titlebar.
$kendo-window-action-hover-opacityNumber.750.75
Description
The opacity of the hovered buttons in the Window titlebar.
$kendo-window-inner-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the content of the Window.
$kendo-window-inner-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the content of the Window.
$kendo-window-buttongroup-padding-xNumber$kendo-actions-padding-x0.5rem
Description
The horizontal padding of the Window action buttons.
$kendo-window-buttongroup-padding-yNumber$kendo-actions-padding-y0.5rem
Description
The vertical padding of the Window action buttons.
$kendo-window-buttongroup-border-widthNumber1px1px
Description
The width of the top border of the Window action buttons.
$kendo-window-bgColor$kendo-component-bg#ffffff
Description
The background color of the Window.
$kendo-window-textColor$kendo-component-text#212529
Description
The text color of the Window.
$kendo-window-borderColor$kendo-component-border#dee2e6
Description
The border color of the Window.
$kendo-window-shadowNullnullnull
Description
The box shadow of the Window.
$kendo-window-focus-shadowNullnullnull
Description
The box shadow of the focused Window.
$kendo-window-titlebar-bgNullnullnull
Description
The background color of the Window titlebar.
$kendo-window-titlebar-textNullnullnull
Description
The text color of the Window titlebar.
$kendo-window-titlebar-borderColor$kendo-component-border#dee2e6
Description
The border color of the Window titlebar.
$kendo-window-titlebar-gradientNullnullnull
Description
The background gradient of the Window titlebar.
$kendo-window-sizesMap( sm: 300px, md: 800px, lg: 1200px )(sm: 300px, md: 800px, lg: 1200px)
Description
The map of the width for the different Window sizes.
$kendo-window-theme-colorsMap( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )("primary": #0d6efd, "light": #f8f9fa, "dark": #212529)
Description
The theme colors map for the Window.

Wizard

NameTypeDefault valueComputed value
$kendo-wizard-padding-xNumber$kendo-padding-md-x * 1.251.25rem
Description
The horizontal padding of the Wizard.
$kendo-wizard-padding-yNumber$kendo-wizard-padding-x1.25rem
Description
The vertical padding of the Wizard.
$kendo-wizard-content-padding-xNumber$kendo-padding-md-x * 22rem
Description
The horizontal padding of the Wizard content.
$kendo-wizard-content-padding-yNumber$kendo-padding-md-y * 42rem
Description
The vertical padding of the Wizard content.
$kendo-wizard-buttons-margin-xNumber10px10px
Description
The horizontal margin of the Wizard's Button container.
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
$kendo-wizard-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Wizard.
$kendo-wizard-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Wizard.
$kendo-wizard-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 Wizard.
$kendo-wizard-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.