Customization

Variables

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

Common

NameTypeDefault valueComputed value
$kendo-adaptive-actionsheet-font-size$kendo-font-size-lg
Description
Font size of the adaptive action sheet.
$kendo-card-brand-colors( primary, error, warning, success, info )
Description
Theme variations for the card.
$kendo-card-theme-colors()
Description
Theme colors map for the card variations.
$kendo-chip-theme-colors()
Description
The theme colors map for the Chip.
$kendo-font-size14px
Description
Base font size across all components.
$kendo-font-family"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif
Description
Font family across all components.
$kendo-line-heightmath.div( 20, 14 )
Description
Line height used along with $kendo-font-size.
$kendo-font-weight400
Description
Font weight.
$kendo-box-shadow-depth-1var( --kendo-elevation-1, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for cards and grid item thumbnails.
Equivalent to fluent depth 4.
$kendo-box-shadow-depth-2var( --kendo-elevation-2, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for color gradient drag handle.
Equivalent to fluent depth 8.
$kendo-box-shadow-depth-3var( --kendo-elevation-3, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for focus card.
$kendo-box-shadow-depth-4var( --kendo-elevation-4, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for panels.
Equivalent to fluent depth 16.
$kendo-box-shadow-depth-5var( --kendo-elevation-5, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for floating action button.
$kendo-box-shadow-depth-6var( --kendo-elevation-6, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for pop up.
$kendo-box-shadow-depth-7var( --kendo-elevation-7, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for action sheet.
$kendo-box-shadow-depth-8var( --kendo-elevation-8, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for dialogs and window.
Equivalent to fluent depth 64.
$kendo-box-shadow-depth-9var( --kendo-elevation-8, none )
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for focus window.
$kendo-dialog-brand-colors( primary: primary )
Description
The theme variations for the Dialog.
$kendo-dialog-theme-colors()
Description
The theme colors map for the Dialog.
$kendo-tooltip-brand-colors( secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, success: success, warning: warning, error: error, info: info )
Description
Theme variations for the tooltip.
$kendo-tooltip-theme-colors()
Description
Theme colors map for the tooltip variations.

Action-buttons

NameTypeDefault valueComputed value
$kendo-actions-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the action buttons container.
$kendo-actions-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the action buttons container.
$kendo-actions-border-width0px
Description
Width of the border around the action buttons container.
$kendo-actions-bginherit
Description
The background color of the action buttons container.
$kendo-actions-textinherit
Description
The text color of the action buttons container.
$kendo-actions-borderinherit
Description
The border color of the action buttons container.

Action-sheet

NameTypeDefault valueComputed value
$kendo-actionsheet-padding-x0px
Description
Horizontal padding of the action sheet.
$kendo-actionsheet-padding-y0px
Description
Vertical padding of the action sheet.
$kendo-actionsheet-width360px
Description
Width of the action sheet.
$kendo-actionsheet-max-width100%
Description
Maximum width of the action sheet.
$kendo-actionsheet-height60vh
Description
Height of the action sheet.
$kendo-actionsheet-max-height60vh
Description
Maximum height of the action sheet.
$kendo-actionsheet-border-width0px
Description
Border width around the action sheet.
$kendo-actionsheet-border-radius0px
Description
Border radius of the action sheet.
$kendo-actionsheet-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the action sheet.
$kendo-actionsheet-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the action sheet.
$kendo-actionsheet-line-heightvar( --kendo-line-height, inherit )
Description
Line height of the action sheet.
$kendo-actionsheet-bgvar( --kendo-component-bg, initial )
Description
Background color of the action sheet.
$kendo-actionsheet-textvar( --kendo-component-text, initial )
Description
Text color of the action sheet.
$kendo-actionsheet-bordervar( --kendo-component-border, initial )
Description
Border color of the action sheet.
$kendo-actionsheet-shadowvar( --kendo-box-shadow-depth-7, none )
Description
Box shadow of the action sheet.
$kendo-actionsheet-header-padding-xmap.get( $kendo-spacing, 4 )
Description
Horizontal padding of the action sheet header.
$kendo-actionsheet-header-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the action sheet header.
$kendo-actionsheet-header-border-width1px
Description
Border width of the action sheet header.
$kendo-actionsheet-header-font-sizeinherit
Description
Font size of the action sheet header.
$kendo-actionsheet-header-font-familyinherit
Description
Font family of the action sheet header.
$kendo-actionsheet-header-line-heightinherit
Description
Line height of the action sheet header.
$kendo-actionsheet-header-gapmap.get( $kendo-spacing, 4 )
Description
Spacing between the action sheet header groups.
$kendo-actionsheet-header-bginherit
Description
Background color of the action sheet header.
$kendo-actionsheet-header-textinherit
Description
Text color of the action sheet header.
$kendo-actionsheet-header-borderinherit
Description
Border color of the action sheet header.
$kendo-actionsheet-header-shadownone
Description
Box shadow of the action sheet header.
$kendo-actionsheet-subtitle-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the action sheet subtitle.
$kendo-actionsheet-subtitle-line-heightvar( --kendo-line-height-sm, inherit )
Description
Line height of the action sheet subtitle.
$kendo-actionsheet-subtitle-textvar( --kendo-subtle-text, inherit )
Description
Text color of the action sheet subtitle.
$kendo-actionsheet-item-min-height40px
Description
Minimum height of the action sheet item.
$kendo-actionsheet-item-padding-xmap.get( $kendo-spacing, 4 )
Description
Horiozontal padding of the action sheet item.
$kendo-actionsheet-item-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the action sheet item.
$kendo-actionsheet-item-border-width1px
Description
Border around the action sheet item.
$kendo-actionsheet-item-spacingmap.get( $kendo-spacing, 2 )
Description
Spacing between the icon and the text in the action sheet item.
$kendo-actionsheet-item-icon-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 ))
Description
Color of the action sheet item icon.
$kendo-actionsheet-item-title-font-weightinherit
Description
Font weight of the action sheet item text.
$kendo-actionsheet-item-title-text-transformnone
Description
Transform of the action sheet item text.
$kendo-actionsheet-item-description-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the action sheet item description.
$kendo-actionsheet-item-description-textvar( --kendo-subtle-text, inherit )
Description
Color of the action sheet item description.
$kendo-actionsheet-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
Hover background color of the action sheet item.
$kendo-actionsheet-item-hover-textvar( --kendo-hover-text, inherit )
Description
Hover text color of the action sheet item.
$kendo-actionsheet-item-hover-borderinherit
Description
Hover border color of the action sheet item.
$kendo-actionsheet-item-focus-bginherit
Description
Focus background color of the action sheet item.
$kendo-actionsheet-item-focus-textinherit
Description
Focus text color of the action sheet item.
$kendo-actionsheet-item-focus-borderinherit
Description
Focus border color of the action sheet item.
$kendo-actionsheet-item-focus-outlinevar( --kendo-outline-color, inherit )
Description
Focus outline color of the action sheet item.
$kendo-actionsheet-item-focus-outline-width1px
Description
Focus outline width of the action sheet item.
$kendo-actionsheet-item-focus-hover-bg$kendo-actionsheet-item-hover-bg
Description
Focus and hover background color of the action sheet item.
$kendo-actionsheet-item-focus-hover-text$kendo-actionsheet-item-hover-text
Description
Focus and hover text color of the action sheet item.
$kendo-actionsheet-item-focus-hover-border$kendo-actionsheet-item-hover-border
Description
Focus and hover border color of the action sheet item.
$kendo-actionsheet-item-disabled-bg$kendo-actionsheet-bg
Description
Disabled background color of the action sheet item.
$kendo-actionsheet-item-disabled-textvar( --kendo-disabled-text, inherit )
Description
Disabled text color of the action sheet item.
$kendo-actionsheet-item-disabled-bordervar( --kendo-disabled-border, inherit )
Description
Disabled border color of the action sheet item.
$kendo-adaptive-actionsheet-header-border-width1px
Description
Border width of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-header-padding-ymap.get( $kendo-spacing, 4 )
Description
Vertical padding of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-header-padding-x$kendo-adaptive-actionsheet-header-padding-y
Description
Horizontal padding of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-header-bordervar( --kendo-component-border, initial )
Description
Text color of the adaptive action sheet titlebar.
$kendo-adaptive-actionsheet-content-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the adaptive action sheet content.
$kendo-adaptive-actionsheet-content-padding-xmap.get( $kendo-spacing, 4 )
Description
Horizontal padding of the adaptive action sheet content.
$kendo-adaptive-actionsheet-footer-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the adaptive action sheet footer.
$kendo-adaptive-actionsheet-footer-padding-xmap.get( $kendo-spacing, 4 )
Description
Horizontal padding of the adaptive action sheet footer.

Appbar

NameTypeDefault valueComputed value
$kendo-appbar-margin-x0
Description
The horizontal margin of the AppBar.
$kendo-appbar-margin-y0
Description
The vertical margin of the AppBar.
$kendo-appbar-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the AppBar.
$kendo-appbar-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the AppBar.
$kendo-appbar-border-width0px
Description
The width of the border around the AppBar.
$kendo-appbar-zindex1000
Description
The z-index of the AppBar.
$kendo-appbar-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the AppBar.
$kendo-appbar-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the AppBar.
$kendo-appbar-line-heightvar( --kendo-line-height, normal )
Description
The line height of the AppBar.
$kendo-appbar-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the AppBar sections.
$kendo-appbar-textvar( --kendo-component-text, initial )
Description
The text color of the AppBar.
$kendo-appbar-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the AppBar.
$kendo-appbar-bordervar( --kendo-component-border, initial )
Description
The border color of the AppBar.
$kendo-appbar-brand-colors( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )
Description
The theme variations for the AppBar.
$kendo-appbar-theme-colors()
Description
The theme colors map for the AppBar variations.

Avatar

NameTypeDefault valueComputed value
$kendo-avatar-border-width1px
Description
The border width of the Avatar.
$kendo-avatar-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Avatar.
$kendo-avatar-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Avatar.
$kendo-avatar-line-heightvar( --kendo-line-height, inherit )
Description
The line height of the Avatar.
$kendo-avatar-sizes( sm: map.get( $kendo-spacing, 4 ), md: map.get( $kendo-spacing, 8 ), lg: map.get( $kendo-spacing, 16 ) )
Description
The sizes map of the Avatar.
$kendo-avatar-brand-colors( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )
Description
The theme variations for the Avatar.
$kendo-avatar-theme-colors()
Description
The theme colors map for the Avatar variations.

Badge

NameTypeDefault valueComputed value
$kendo-badge-bgvar( --kendo-component-bg, initial )
Description
The background color of the Badge.
$kendo-badge-textvar( --kendo-component-text, initial )
Description
The text color of the Badge.
$kendo-badge-bordervar( --kendo-component-border, initial )
Description
The border color of the Badge.
$kendo-badge-border-width1px
Description
The border width of the Badge.
$kendo-badge-font-weightvar( --kendo-font-weight, normal )
Description
The font weight of the Badge.
$kendo-badge-sm-padding-xmap.get( $kendo-spacing, 0.5 )
Description
Horizontal padding of the small Badge.
$kendo-badge-md-padding-xmap.get( $kendo-spacing, 1 )
Description
Horizontal padding of the medium Badge.
$kendo-badge-lg-padding-xmap.get( $kendo-spacing, 1.5 )
Description
Horizontal padding of the large Badge.
$kendo-badge-sm-padding-ymap.get( $kendo-spacing, 0.5 )
Description
Vertical padding of the small Badge.
$kendo-badge-md-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the medium Badge.
$kendo-badge-lg-padding-ymap.get( $kendo-spacing, 1.5 )
Description
Vertical padding of the large Badge.
$kendo-badge-sm-font-sizevar( --kendo-font-size-xs, inherit )
Description
The font size of the small Badge.
$kendo-badge-md-font-sizevar( --kendo-font-size-xs, inherit )
Description
The font size of the medium Badge.
$kendo-badge-lg-font-sizevar( --kendo-font-size-xs, inherit )
Description
The font size of the large Badge.
$kendo-badge-sm-line-heightvar( --kendo-line-height-xs, normal )
Description
The line height used along with the $kendo-font-size variable of the small Badge.
$kendo-badge-md-line-heightvar( --kendo-line-height-xs, normal )
Description
The line height used along with the $kendo-font-size variable of the medium Badge.
$kendo-badge-lg-line-heightvar( --kendo-line-height-xs, normal )
Description
The line height used along with the $kendo-font-size variable of the large Badge.
$kendo-badge-sm-min-widthcalc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )
Description
The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-widthcalc( #{$kendo-badge-md-line-height} * 1em + #{$kendo-badge-md-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )
Description
The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-widthcalc( #{$kendo-badge-lg-line-height} * 1em + #{$kendo-badge-lg-padding-y} * 2 + #{$kendo-badge-border-width} * 2 )
Description
The calculated minimum width of the large circular Badge.
$kendo-badge-sizes( 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 ) )
Description
The sizes map for the Badge.
$kendo-badge-brand-colors( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )
Description
The theme variations for the Badge.
$kendo-badge-theme-colors()
Description
The theme colors map for the Badge variations.

Bottom-navigation

NameTypeDefault valueComputed value
$kendo-bottom-nav-padding-xmap.get( $kendo-spacing, 1.5 )
Description
The horizontal padding of the BottomNavigation.
$kendo-bottom-nav-padding-y$kendo-bottom-nav-padding-x
Description
The vertical padding of the BottomNavigation.
$kendo-bottom-nav-gap$kendo-bottom-nav-padding-x
Description
The spacing between the BottomNavigation items.
$kendo-bottom-nav-border-width1px 0px 0px 0px
Description
The width of the border around the BottomNavigation.
$kendo-bottom-nav-font-familyvar( --kendo-font-family, inherit)
Description
The font family of the BottomNavigation.
$kendo-bottom-nav-font-sizevar( --kendo-font-size-md, 1rem )
Description
The font size of the BottomNavigation.
$kendo-bottom-nav-line-heightvar( --kendo-line-height-md, normal )
Description
The line height of the BottomNavigation.
$kendo-bottom-nav-letter-spacing.2px
Description
The letter spacing of the BottomNavigation.
$kendo-bottom-nav-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the BottomNavigation item.
$kendo-bottom-nav-item-padding-ymap.get( $kendo-spacing, 0.5 )
Description
The vertical padding of the BottomNavigation item.
$kendo-bottom-nav-item-min-width72px
Description
The minimum width of the BottomNavigation item.
$kendo-bottom-nav-item-max-widthnone
Description
The maximum width of the BottomNavigation item.
$kendo-bottom-nav-item-min-heightcalc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) )
Description
The minimum height of the BottomNavigation item.
$kendo-bottom-nav-item-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the BottomNavigation item.
$kendo-bottom-nav-item-gapmap.get( $kendo-spacing, 1 )
Description
The spacing of the BottomNavigation item.
$kendo-bottom-nav-item-focus-offsetmap.get( $kendo-spacing, 0.5 )
Description
The offset of the focused BottomNavigation item.
$kendo-bottom-nav-item-focus-outline-width1px
Description
The outline width of the focused BottomNavigation item.
$kendo-bottom-nav-item-focus-outline-stylesolid
Description
The outline style of the focused BottomNavigation item.
$kendo-bottom-nav-shadowvar( --kendo-box-shadow-depth-4, none )
Description
The box shadow of the BottomNavigation.
$kendo-bottom-nav-brand-colors( primary: primary, error: error, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )
Description
The theme variations for the BottomNavigation.
$kendo-bottom-nav-theme-colors()
Description
The theme colors map for the BottomNavigation variations.

Breadcrumb

NameTypeDefault valueComputed value
$kendo-breadcrumb-margin-x0px
Description
The horizontal margin of the Breadcrumb
$kendo-breadcrumb-margin-y0px
Description
The vertical margin of the Breadcrumb
$kendo-breadcrumb-padding-x0px
Description
The horizontal padding of the Breadcrumb
$kendo-breadcrumb-padding-y0px
Description
The vertical padding of the Breadcrumb
$kendo-breadcrumb-border-width0px
Description
The width of the border around the Breadcrumb
$kendo-breadcrumb-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Breadcrumb
$kendo-breadcrumb-font-sizevar( --kendo-font-size, inherit )
$kendo-breadcrumb-sm-font-sizevar( --kendo-font-size-md, inherit )
Description
The font size of the small breadcrumb.
$kendo-breadcrumb-md-font-sizevar( --kendo-font-size-md, inherit )
Description
The font size of the medium breadcrumb.
$kendo-breadcrumb-lg-font-sizevar( --kendo-font-size-md, inherit )
Description
The font size of the large breadcrumb.
$kendo-breadcrumb-line-heightvar( --kendo-line-height, normal )
Description
The line height used along with the $kendo-font-size variable of the Breadcrumb.
$kendo-breadcrumb-sm-line-heightvar( --kendo-line-height, normal )
Description
The line height used along with the $kendo-font-size variable of the small breadcrumb.
$kendo-breadcrumb-md-line-heightvar( --kendo-line-height, normal )
Description
The line height used along with the $kendo-font-size variable of the medium breadcrumb.
$kendo-breadcrumb-lg-line-heightvar( --kendo-line-height, normal )
Description
The line height used along with the $kendo-font-size variable of the large breadcrumb.
$kendo-breadcrumb-bgvar( --kendo-component-bg, initial )
Description
The background color of the Breadcrumb
$kendo-breadcrumb-textget-theme-color-var( neutral-130 )
Description
The text color of the Breadcrumb
$kendo-breadcrumb-bordertransparent
Description
The border color of the Breadcrumb
$kendo-breadcrumb-focus-shadow0 0 0 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The box shadow of the focused breadcrumb
$kendo-breadcrumb-link-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the Breadcrumb link
$kendo-breadcrumb-sm-link-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-x$kendo-breadcrumb-link-padding-x
Description
The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Breadcrumb link
$kendo-breadcrumb-sm-link-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-y$kendo-breadcrumb-link-padding-y
Description
The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-ymap.get( $kendo-spacing, 2.5 )
Description
The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radius0px
Description
The radius of the border around the Breadcrumb link
$kendo-breadcrumb-link-initial-textinherit
Description
The initial text color of the Breadcrumb link
$kendo-breadcrumb-link-bgtransparent
Description
The background color of the Breadcrumb link
$kendo-breadcrumb-link-textget-theme-color-var( neutral-130 )
Description
The text color of the Breadcrumb link
$kendo-breadcrumb-link-bordertransparent
Description
The borer color of the Breadcrumb link
$kendo-breadcrumb-link-hover-bgvar( --kendo-hover-bg, initial )
Description
The background color of the hovered breadcrumb link
$kendo-breadcrumb-link-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the hovered breadcrumb link
$kendo-breadcrumb-link-hover-bordervar( --kendo-hover-border, initial )
Description
The border color of the hovered breadcrumb link
$kendo-breadcrumb-link-active-bgvar( --kendo-selected-bg, initial )
Description
The background color of the active breadcrumb link
$kendo-breadcrumb-link-active-textvar( --kendo-selected-text, initial )
Description
The text color of the active breadcrumb link
$kendo-breadcrumb-link-active-borderif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))
Description
The border color of the active breadcrumb link
$kendo-breadcrumb-link-focus-bgtransparent
Description
The background color of the focused breadcrumb link
$kendo-breadcrumb-link-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the focused breadcrumb link
$kendo-breadcrumb-link-focus-shadowinset 0 0 0 1px get-theme-color-var( neutral-130 )
Description
The box shadow of the focused breadcrumb link
$kendo-breadcrumb-link-focus-hover-bgvar( --kendo-hover-bg, initial )
Description
The focus and hover background color of the Breadcrumb link
$kendo-breadcrumb-link-disabled-bgnone
Description
The background color of the disabled breadcrumb link
$kendo-breadcrumb-link-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of the disabled breadcrumb link
$kendo-breadcrumb-link-disabled-bordernone
Description
The border color of the disabled breadcrumb link
$kendo-breadcrumb-link-selected-bgvar( --kendo-component-bg, initial )
Description
The background color of selected the Breadcrumb link
$kendo-breadcrumb-link-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the selected breadcrumb link
$kendo-breadcrumb-link-selected-bordertransparent
Description
The border color of the selected breadcrumb link
$kendo-breadcrumb-link-selected-font-weightvar( --kendo-font-weight-bold, bold )
Description
The font weight of the selected breadcrumb link
$kendo-breadcrumb-root-link-bg$kendo-breadcrumb-link-bg
Description
The background color of the Breadcrumb root link
$kendo-breadcrumb-root-link-text$kendo-breadcrumb-link-text
Description
The text color of the Breadcrumb root link
$kendo-breadcrumb-root-link-border$kendo-breadcrumb-link-border
Description
The border color of the Breadcrumb root link
$kendo-breadcrumb-root-link-hover-bg$kendo-breadcrumb-link-hover-bg
Description
The background color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-hover-text$kendo-breadcrumb-link-hover-text
Description
The text color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-hover-border$kendo-breadcrumb-link-hover-border
Description
The border color of the hovered breadcrumb root link
$kendo-breadcrumb-root-link-active-bg$kendo-breadcrumb-link-active-bg
Description
The background color of the active breadcrumb root link
$kendo-breadcrumb-root-link-active-text$kendo-breadcrumb-link-active-text
Description
The text color of the active breadcrumb root link
$kendo-breadcrumb-root-link-active-border$kendo-breadcrumb-link-active-border
Description
The border color of the active breadcrumb root link
$kendo-breadcrumb-root-link-focus-bg$kendo-breadcrumb-link-focus-bg
Description
The background color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-text$kendo-breadcrumb-link-focus-text
Description
The text color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-shadow$kendo-breadcrumb-link-focus-shadow
Description
The border color of the focused breadcrumb root link
$kendo-breadcrumb-root-link-focus-hover-bg$kendo-breadcrumb-link-focus-hover-bg
Description
The focus and hover background color of the Breadcrumb root link
$kendo-breadcrumb-root-link-disabled-text$kendo-breadcrumb-link-disabled-text
Description
The text color of the disabled breadcrumb root link
$kendo-breadcrumb-icon-link-padding-ymap.get( $kendo-spacing, 2.5 )
Description
The vertical padding of the Breadcrumb link icon
$kendo-breadcrumb-sm-icon-link-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-y$kendo-breadcrumb-icon-link-padding-y
Description
The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-x$kendo-breadcrumb-icon-link-padding-y
Description
The horizontal padding of the Breadcrumb link icon
$kendo-breadcrumb-sm-icon-link-padding-x$kendo-breadcrumb-sm-icon-link-padding-y
Description
The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-x$kendo-breadcrumb-icon-link-padding-x
Description
The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-x$kendo-breadcrumb-lg-icon-link-padding-y
Description
The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-sizes( 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 ) )
Description
The sizes map for the Breadcrumb.

Button

NameTypeDefault valueComputed value
$kendo-actions-button-spacingmap.get( $kendo-spacing, 2 )
Description
Spacing between the action buttons.
$kendo-button-border-width1px
Description
The width of the border around the Button.
$kendo-button-sm-padding-xmap.get( $kendo-spacing, 5 )
Description
The horizontal padding of the small Button.
$kendo-button-md-padding-xmap.get( $kendo-spacing, 5 )
Description
The horizontal padding of the medium Button.
$kendo-button-lg-padding-xmap.get( $kendo-spacing, 5 )
Description
The horizontal padding of the large Button.
$kendo-button-sm-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the small Button.
$kendo-button-md-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the medium Button.
$kendo-button-lg-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the large Button.
$kendo-button-sm-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the small Button.
$kendo-button-md-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the medium Button.
$kendo-button-lg-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the large Button.
$kendo-button-sm-line-heightvar( --kendo-line-height, normal )
Description
The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-heightvar( --kendo-line-height, normal )
Description
The line height used along with the $kendo-font-size variable of the medium Button.
$kendo-button-lg-line-heightvar( --kendo-line-height, normal )
Description
The line height used along with the $kendo-font-size variable of the large Button.
$kendo-button-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Button.
$kendo-button-font-weightvar( --kendo-font-weight-bold, normal )
Description
The font weight of the Button.
$kendo-button-calc-sizecalc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) )
Description
The calculated height of the Button.
$kendo-button-inner-calc-sizecalc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) )
Description
The calculated inner height of the Button excluding the border width.
$kendo-button-sizes( 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 ) )
Description
The sizes map for the Button.
$kendo-button-spacingmap.get( $kendo-spacing, 2 )
Description
The content spacing of the Button.
$kendo-button-focus-offsetmap.get( $kendo-spacing, 0.5 )
Description
The offset of the focused Button.
$kendo-button-focus-outline-width1px
Description
The Outline width of the focused Button.
$kendo-button-focus-outline-stylesolid
Description
The outline style of the focused Button.
$kendo-button-flat-focus-offset1px
Description
The offset of the flat focused Button.
$kendo-button-flat-focus-outline-widthmap.get( $kendo-spacing, 0.5 )
Description
The outline width of the flat focused Button.
$kendo-button-link-focus-offset0
Description
The offset of the link focused Button.
$kendo-button-link-focus-outline-width1px
Description
The outline width of the flat focused Button.
$kendo-button-theme-colors()
Description
The theme colors map for the Button.

Calendar

NameTypeDefault valueComputed value
$kendo-calendar-border-width1px
Description
Width of the border around the calendar.
$kendo-calendar-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the calendar.
$kendo-calendar-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the calendar.
$kendo-calendar-line-heightvar( --kendo-line-height, normal )
Description
Line height of the calendar.
$kendo-calendar-cell-size28px
Description
Size of the calendar cell.
$kendo-calendar-bgvar( --kendo-component-bg, initial)
Description
Background color of the calendar.
$kendo-calendar-textvar( --kendo-component-text, initial)
Description
Text color of the calendar.
$kendo-calendar-bordervar( --kendo-component-border, initial)
Description
Border color of the calendar.
$kendo-calendar-header-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the calendar header.
$kendo-calendar-header-padding-ymap.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 )
Description
Vertical padding of the calendar header.
$kendo-calendar-header-border-width1px
Description
Width of the bottom border of the calendar header.
$kendo-calendar-header-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
Background color of the calendar header.
$kendo-calendar-header-text$kendo-calendar-text
Description
Text color of the calendar header.
$kendo-calendar-header-border$kendo-calendar-border
Description
Border color of the calendar header.
$kendo-calendar-nav-gap0
Description
Spacing between the navigation buttons of the calendar.
$kendo-calendar-footer-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the calendar footer.
$kendo-calendar-footer-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the calendar footer.
$kendo-calendar-cell-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the calendar cell.
$kendo-calendar-cell-padding-xmap.get( $kendo-spacing, 1.5 )
Description
Horizontal padding of the calendar cell.
$kendo-calendar-cell-padding-y$kendo-calendar-cell-padding-x
Description
Vertical padding of the calendar cell.
$kendo-calendar-cell-line-height$kendo-calendar-line-height
Description
Line height of the calendar cell.
$kendo-calendar-cell-border-radiusvar( --kendo-border-radius-md, 0)
Description
Border radius of the calendar cell.
$kendo-calendar-header-cell-padding-x0
Description
Horizontal padding of the calendar header cell.
$kendo-calendar-header-cell-padding-y0
Description
Vertical padding of the calendar header cell.
$kendo-calendar-header-cell-width$kendo-calendar-cell-size
Description
Width of the calendar header cell.
$kendo-calendar-header-cell-height$kendo-calendar-cell-size
Description
Height of the calendar header cell.
$kendo-calendar-header-cell-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the calendar header cell.
$kendo-calendar-header-cell-line-height2
Description
Line height of the calendar header cell.
$kendo-calendar-header-cell-bginherit
Description
Background color of the calendar header cell.
$kendo-calendar-header-cell-textinherit
Description
Text color of the calendar header cell.
$kendo-calendar-caption-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the calendar captions.
$kendo-calendar-caption-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the calendar captions.
$kendo-calendar-caption-height$kendo-calendar-cell-size
Description
Height of the calendar captions.
$kendo-calendar-caption-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the calendar captions.
$kendo-calendar-caption-line-heightnormal
Description
Line height of the calendar captions.
$kendo-calendar-caption-font-weightbold
Description
Font weight of the calendar captions.
$kendo-calendar-caption-color$kendo-subtle-text
Description
Text color of the calendar captions.
$kendo-calendar-view-padding-block-endmap.get( $kendo-spacing, 3 )
Description
Bottom padding of calendar views.
$kendo-calendar-view-gapmap.get( $kendo-spacing, 4 )
Description
Spacing between the views in the multiview calendar.
$kendo-calendar-weekend-bginherit
Description
Background color of the calendar weekend cell.
$kendo-calendar-weekend-textinherit
Description
Text color of the calendar weekend cell.
$kendo-calendar-today-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the calendar today cell.
$kendo-calendar-today-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Background color of the calendar today cell.
$kendo-calendar-today-hover-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the calendar today cell when hovered.
$kendo-calendar-today-hover-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))
Description
Background color of the calendar today cell when hovered.
$kendo-calendar-today-border-radius9999px
Description
Border radius of the calendar today cell.
$kendo-calendar-week-number-bginherit
Description
Background color of the calendar week number cell.
$kendo-calendar-week-number-textvar( --kendo-subtle-text, inherit )
Description
Text color of the calendar week number cell.
$kendo-calendar-other-month-bginherit
Description
Background color of the other months calendar cells.
$kendo-calendar-other-month-textvar( --kendo-disabled-text, inherit )
Description
Text color of the other months calendar cells.
$kendo-calendar-cell-bginherit
Description
Background color of the calendar cells.
$kendo-calendar-cell-textinherit
Description
Text color of the calendar cells.
$kendo-calendar-cell-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of the calendar cells when hovered.
$kendo-calendar-cell-hover-textvar( --kendo-hover-text, inherit )
Description
Text color of the calendar cells when hovered.
$kendo-calendar-cell-selected-bgvar( --kendo-selected-bg, inherit )
Description
Background color of the selected calendar cell.
$kendo-calendar-cell-selected-textvar( --kendo-selected-text, inherit )
Description
Text color of the selected calendar cell.
$kendo-calendar-cell-selected-bordervar( --kendo-selected-border, inherit )
Description
Border color of the selected calendar cell.
$kendo-calendar-cell-selected-shadowinset 0 0 0 1px $kendo-calendar-cell-selected-border
Description
Shadow of the selected calendar cell.
$kendo-calendar-cell-selected-hover-bgvar( --kendo-selected-hover-bg, inherit )
Description
Background color of the selected calendar cell when hovered.
$kendo-calendar-cell-selected-hover-textvar( --kendo-selected-hover-text, inherit )
Description
Text color of the selected calendar cell when hovered.
$kendo-calendar-cell-focus-shadowinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
Description
Shadow of the selected calendar cell when focused.
$kendo-calendar-cell-selected-focus-shadow$kendo-calendar-cell-focus-shadow
Description
Shadow of the selected calendar cell when selected and focused.
$kendo-calendar-navigation-width5em
Description
Width of the navigation in the infinite calendar.
$kendo-calendar-navigation-item-height2em
Description
Height of the navigation items in the infinite calendar.
$kendo-calendar-navigation-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
Background color of the navigation in the infinite calendar.
$kendo-calendar-navigation-text$kendo-calendar-header-text
Description
Text color of the navigation in the infinite calendar.
$kendo-calendar-navigation-border$kendo-calendar-header-border
Description
Border color of the navigation in the infinite calendar.
$kendo-infinite-calendar-header-padding-xmap.get( $kendo-spacing, 3 )
Description
Background color of the navigation in the infinite calendar.
$kendo-infinite-calendar-header-padding-ymap.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 )
Description
Background color of the navigation in the infinite calendar.
$kendo-infinite-calendar-view-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the infinite calendar.
$kendo-infinite-calendar-view-padding-y0px
Description
Vertical padding of the infinite calendar.
$kendo-calendar-range-bgif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))
Description
Background color of the range selection in the calendar.
$kendo-calendar-range-textinherit
Description
Text color of the range selection in the calendar.
$kendo-calendar-range-borderif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Border color of the range selection in the calendar.
$kendo-calendar-start-range-hover-shadowinset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Hover shadow of the start range selection in the calendar.
$kendo-calendar-mid-range-hover-shadowinset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Hover shadow of the mid range selection in the calendar.
$kendo-calendar-end-range-hover-shadowinset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Hover shadow of the end range selection in the calendar.

Captcha

NameTypeDefault valueComputed value
$kendo-captcha-spacermap.get( $kendo-spacing, 2 )
Description
The spacer of the Captcha.
$kendo-captcha-width280px
Description
The width of the Captcha.
$kendo-captcha-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Captcha.
$kendo-captcha-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Captcha.
$kendo-captcha-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Captcha.
$kendo-captcha-spacing$kendo-captcha-spacer
Description
The spacing of the Captcha.
$kendo-captcha-bgvar( --kendo-component-bg, initial )
Description
The background color of the Captcha.
$kendo-captcha-textvar( --kendo-component-text, initial )
Description
The text color of the Captcha.
$kendo-captcha-bordervar( --kendo-component-border, initial )
Description
The border color of the Captcha.
$kendo-captcha-image-wrap-spacing$kendo-captcha-spacer
Description
The spacing of the Captcha image wrapper.
$kendo-captcha-image-controls-spacingmath.div( $kendo-captcha-spacer, 2 )
Description
The spacing of the Captcha image controls.
$kendo-captcha-validation-offset-ymath.div( $kendo-captcha-spacer, 2 )
Description
The offset of the Captcha validation message.
$kendo-captcha-validation-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Captcha validation message.

Card

NameTypeDefault valueComputed value
$kendo-card-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Card.
$kendo-card-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the Card.
$kendo-card-border-width0px
Description
The width of the border around the Card.
$kendo-card-border-radius$kendo-border-radius-md
Description
The border radius of the Card.
$kendo-card-inner-border-radiuscalc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )
Description
The inner border radius of the Card.
$kendo-card-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Card.
$kendo-card-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Card.
$kendo-card-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Card.
$kendo-card-deck-gapmap.get( $kendo-spacing, 4 )
Description
The spacing between the Cards in the Card deck.
$kendo-card-bgvar( --kendo-component-bg, initial )
Description
The background color of the Card.
$kendo-card-textvar( --kendo-component-text, initial )
Description
The text color of the Card.
$kendo-card-bordervar( --kendo-component-border, initial )
Description
The border color of the Card.
$kendo-card-shadowvar( --kendo-box-shadow-depth-1, none )
Description
The shadow of the Card.
$kendo-card-focus-bg$kendo-card-bg
Description
The background color of the focused Card.
$kendo-card-focus-textnull
Description
The text color of the focused Card.
$kendo-card-focus-bordervar( --kendo-component-border, initial )
Description
The border color of the focused Card.
$kendo-card-focus-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The shadow of the focused Card.
$kendo-card-header-font-sizevar( --kendo-font-size-lg, inherit )
Description
The font size of the Card header.
$kendo-card-header-font-familyvar( --kendo-font-family, inherit )
Description
Тhe font family of the Card header.
$kendo-card-header-font-weightvar( --kendo-font-weight, initial )
Description
The font weight of the Card header.
$kendo-card-header-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Card header.
$kendo-card-header-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Card header.
$kendo-card-header-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the Card header.
$kendo-card-header-border-width0
Description
The bottom border width of the Card header.
$kendo-card-header-bginherit
Description
The background color of the Card header.
$kendo-card-header-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the Card header.
$kendo-card-header-borderinherit
Description
The border color of the Card header.
$kendo-card-body-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Card body.
$kendo-card-body-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the Card body.
$kendo-card-footer-padding-x$kendo-card-padding-x
Description
The horizontal padding of the Card footer.
$kendo-card-footer-padding-y$kendo-card-padding-y
Description
The vertical padding of the Card footer.
$kendo-card-footer-border-width0
Description
The top border width of the Card footer.
$kendo-card-footer-bginherit
Description
The background color of the Card footer.
$kendo-card-footer-textinherit
Description
The text color of the Card footer.
$kendo-card-footer-borderinherit
Description
The border color of the Card footer.
$kendo-card-title-font-sizevar( --kendo-font-size-lg, inherit )
Description
The font size of the Card title.
$kendo-card-title-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Card title.
$kendo-card-title-font-weight$kendo-card-header-font-weight
Description
The font weight of the Card title.
$kendo-card-title-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Card title.
$kendo-card-title-margin-bottommap.get( $kendo-spacing, 3 )
Description
The bottom margin of the Card title.
$kendo-card-subtitle-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Card subtitle.
$kendo-card-subtitle-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Card subtitle.
$kendo-card-subtitle-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Card subtitle.
$kendo-card-subtitle-margin-bottommap.get( $kendo-spacing, 3 )
Description
The bottom margin of the Card subtitle.
$kendo-card-subtitle-text$kendo-subtle-text
Description
The text color of the Card subtitle.
$kendo-card-img-max-width100px
Description
The maximum width of the Card image.
$kendo-card-avatar-size3rem
Description
The size of the Avatar in the Card.
$kendo-card-avatar-spacing$kendo-card-header-padding-x
Description
The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Card actions.
$kendo-card-actions-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the Card actions.
$kendo-card-actions-border-width0
Description
The top border width of the Card actions.
$kendo-card-actions-gapmap.get( $kendo-spacing, 2 )
Description
The spacing between the Card actions.
$kendo-card-deck-scroll-button-radius0
Description
The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offset( -1 * $kendo-button-border-width )
Description
The border radius of the scroll button in the Card deck.
$kendo-card-callout-size20px
Description
The size of the Card callout.

Chart

NameTypeDefault valueComputed value
$kendo-chart-label-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font-size of the label of the chart component.
$kendo-chart-inactive-bgvar( --kendo-disabled-bg, initial )
Description
The inactive background color of the chart component.

Charts

NameTypeDefault valueComputed value
$kendo-series-aif($kendo-enable-color-system, k-color( series-a ), k-get-theme-color-var( series-a-100 ))
Description
The first base series color and its light and dark shades.
$kendo-series-bif($kendo-enable-color-system, k-color( series-b ), k-get-theme-color-var( series-b-100 ))
Description
The second base series color and its light and dark shades.
$kendo-series-cif($kendo-enable-color-system, k-color( series-c ), k-get-theme-color-var( series-c-100 ))
Description
The third base series color and its light and dark shades.
$kendo-series-dif($kendo-enable-color-system, k-color( series-d ), k-get-theme-color-var( series-d-100 ))
Description
The fourth base series color and its light and dark shades.
$kendo-series-eif($kendo-enable-color-system, k-color( series-e ), k-get-theme-color-var( series-e-100 ))
Description
The fifth base series color and its light and dark shades.
$kendo-series-fif($kendo-enable-color-system, k-color( series-f ), k-get-theme-color-var( series-f-100 ))
Description
The sixth base series color and its light and dark shades.
$kendo-series-1$kendo-series-a
Description
The series colors in order:
base, light, dark, lighter, darker
$kendo-chart-border-width0px default
Description
The border width of the chart component.
$kendo-chart-font-familyvar( --kendo-font-family, inherit )
Description
The font-family of the chart component.
$kendo-chart-font-sizevar( --kendo-font-size, inherit )
Description
The font-size of the chart component.
$kendo-chart-line-heightvar( --kendo-line-height, normal )
Description
The line-height of the chart component.
$kendo-chart-tooltip-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font-size of the tooltip of the chart component.
$kendo-chart-tooltip-line-heightvar( --kendo-line-height-sm, normal )
Description
The line-height of the tooltip of the chart component.
$kendo-chart-title-font-sizevar( --kendo-font-size-lg, inherit )
Description
The font-size of the title of the chart component.
$kendo-chart-pane-title-font-sizevar( --kendo-font-size-lg, inherit )
Description
The font-size of the pane title of the chart component.
$kendo-chart-pane-title-font-weightvar( --kendo-font-weight, inherit )
Description
The font-weight of the pane title of the chart component.
$kendo-chart-major-linesif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The color of the chart component major grid lines.
$kendo-chart-minor-linesif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The color of the chart component minor grid lines.
$kendo-chart-area-opacity.6
Description
The opacity of the chart area.
$kendo-chart-area-inactive-opacity.1
Description
The inactive opacity of the chart area.
$kendo-chart-line-inactive-opacity.3
Description
The inactive opacity of the chart line.
$kendo-chart-bgvar( --kendo-component-bg, initial )
Description
The background color of the chart component.
$kendo-chart-textvar( --kendo-component-text, initial )
Description
The text color of the chart component.
$kendo-chart-bordervar( --kendo-component-border, initial )
Description
The border color of the chart component.
$kendo-chart-tooltip-colorif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the chart tooltip.
$kendo-chart-tooltip-color-inverseif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
The inverse text color of the chart tooltip.
$kendo-chart-crosshair-backgroundif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
The background color of the chart crosshairs.
$kendo-chart-crosshair-shared-tooltip-colorif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the chart shared crosshair tooltip.
$kendo-chart-crosshair-shared-tooltip-backgroundvar( --kendo-component-bg, initial )
Description
The background color of the chart shared crosshair tooltip.
$kendo-chart-crosshair-shared-tooltip-bordertransparent
Description
The border color of the chart shared crosshair tooltip.
$kendo-chart-notes-backgroundif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The background color of the chart notes.
$kendo-chart-notes-border$kendo-chart-notes-background
Description
The border color of the chart notes.
$kendo-chart-notes-lines$kendo-chart-notes-background
Description
The background color of the chart note lines.
$kendo-chart-handle-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the chart handle.
$kendo-chart-handle-text$kendo-chart-text
Description
The text color of the chart handle.
$kendo-chart-handle-border$kendo-chart-handle-bg
Description
The border color of the chart handle.
$kendo-chart-handle-hover-bgvar( --kendo-hover-bg, initial )
Description
The hover background color of the chart handle.
$kendo-chart-handle-hover-textvar( --kendo-hover-text, initial )
Description
The hover text color of the chart handle.
$kendo-chart-handle-hover-bordervar( --kendo-hover-border, initial )
Description
The hover border color of the chart handle.
$kendo-color-error-bars-backgroundif($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 ))
Description
The color of the chart error bars.
$kendo-selection-handle-size24px
Description
The size of the selection handle of the chart component.
$kendo-selection-border-colorvar( --kendo-component-border, initial )
Description
The color of the selection handle of the chart component.
$kendo-treemap-font-familyvar( --kendo-font-family, inherit )
Description
The font-family of the treemap.
$kendo-treemap-font-sizevar( --kendo-font-size, inherit )
Description
The font-size of the treemap.
$kendo-treemap-line-heightvar( --kendo-line-height, normal )
Description
The line-height of the treemap.
$kendo-treemap-bgvar( --kendo-component-bg, initial )
Description
The background color of the treemap.
$kendo-treemap-textvar( --kendo-component-text, initial )
Description
The text color of the treemap.
$kendo-treemap-bordervar( --kendo-component-border, initial )
Description
The border color of the treemap.
$kendo-treemap-title-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the treemap title.
$kendo-treemap-title-textif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
The text color of the treemap title.
$kendo-treemap-title-bordervar( --kendo-component-border, initial )
Description
The border color of the treemap title.

Chat

NameTypeDefault valueComputed value
$kendo-chat-transitionvar( --kendo-transition, inherit )
Description
The box shadow transition of the Chat.
$kendo-chat-link-hover-textvar( --kendo-link-hover-text, inherit )
Description
The hover text color of the Chat bubble links.
$kendo-chat-link-textvar( --kendo-link-text, inherit )
Description
The text color of the Chat bubble links.
$kendo-chat-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the Chat.
$kendo-chat-padding-ymap.get( $kendo-spacing, 4 )
Description
The vertical padding of the Chat.
$kendo-chat-width500px
Description
The width of the Chat.
$kendo-chat-height600px
Description
The height of the Chat.
$kendo-chat-border-width1px
Description
The border width of the Chat.
$kendo-chat-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Chat.
$kendo-chat-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Chat.
$kendo-chat-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Chat.
$kendo-chat-typing-indicator-dot-size8px
Description
The size of the Chat typing indicator dot.
$kendo-chat-typing-indicator-dot-spacing5px
Description
The spacing of the Chat typing indicator dot.
$kendo-chat-item-spacing-xmap.get( $kendo-spacing, 2 )
Description
The horizontal spacing between the items of the Chat.
$kendo-chat-item-spacing-ymap.get( $kendo-spacing, 4 )
Description
The vertical spacing between the items of the Chat.
$kendo-chat-message-list-padding-x$kendo-chat-padding-x
Description
The horizontal padding of the Chat message list.
$kendo-chat-message-list-padding-y$kendo-chat-padding-y
Description
The vertical padding of the Chat message list.
$kendo-chat-message-list-spacing$kendo-chat-item-spacing-y
Description
The spacing of the Chat message list.
$kendo-chat-timestamp-font-sizesmaller
Description
The font size of the Chat timestamp.
$kendo-chat-timestamp-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Chat timestamp.
$kendo-chat-timestamp-transformuppercase
Description
The text transform of the Chat timestamp.
$kendo-chat-timestamp-textvar( --kendo-subtle-text, inherit )
Description
The text color of the Chat timestamp.
$kendo-chat-timestamp-bgnormal
Description
The background color of the Chat timestamp.
$kendo-chat-bubble-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Chat bubble message.
$kendo-chat-bubble-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Chat bubble message.
$kendo-chat-bubble-spacingmap.get( $kendo-spacing, 0.5 )
Description
The spacing of the Chat bubble message.
$kendo-chat-bubble-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Chat bubble message.
$kendo-chat-scroll-buttonmap.get( $kendo-spacing, 2 )
Description
The spacing of the Chat scroll button.
$kendo-card-deck-scrollbar-size20px
Description
The size of the Chat Card deck scrollbar.
$kendo-chat-bubble-border-radiusmap.get( $kendo-spacing, 3 )
Description
The border radius of the Chat bubble message.
$kendo-chat-bubble-border-radius-smvar( --kendo-border-radius, 0 )
Description
The border radius of the Chat small bubble message
$kendo-chat-avatar-size32px
Description
The size of the Chat Avatar.
$kendo-chat-avatar-spacing$kendo-chat-item-spacing-x
Description
The spacing of the Chat Avatar.
$kendo-chat-toolbar-padding-x$kendo-toolbar-md-padding-x
Description
The horizontal padding of the Chat Toolbar.
$kendo-chat-toolbar-padding-y$kendo-toolbar-md-padding-y
Description
The vertical padding of the Chat Toolbar.
$kendo-chat-toolbar-spacing$kendo-toolbar-md-spacing
Description
The spacing of the Chat Toolbar.
$kendo-chat-toolbar-bg$kendo-toolbar-bg
Description
The background color of the Chat Toolbar.
$kendo-chat-toolbar-text$kendo-toolbar-text
Description
The text color of the Chat Toolbar.
$kendo-chat-toolbar-borderinherit
Description
The border color of the Chat Toolbar.
$kendo-chat-quick-reply-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Chat quick reply.
$kendo-chat-quick-reply-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Chat quick reply.
$kendo-chat-quick-reply-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing of the Chat quick reply.
$kendo-chat-quick-reply-line-height$kendo-chat-bubble-line-height
Description
The line height of the Chat quick reply.
$kendo-chat-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Chat.
$kendo-chat-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the Chat.
$kendo-chat-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The border color of the Chat.
$kendo-chat-bubble-bgvar( --kendo-component-bg, inherit )
Description
The background color of the Chat bubble.
$kendo-chat-bubble-textvar( --kendo-component-text, inherit )
Description
The text color of the Chat bubble.
$kendo-chat-bubble-border$kendo-chat-bubble-bg
Description
The border color of the Chat bubble.
$kendo-chat-bubble-shadowvar( --kendo-box-shadow-depth-1, none )
Description
The box shadow of the Chat bubble.
$kendo-chat-bubble-hover-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The shadow of the hovered Chat bubble.
$kendo-chat-bubble-selected-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The shadow of the selected Chat bubble.
$kendo-chat-alt-bubble-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the Chat alt bubble.
$kendo-chat-alt-bubble-textvar( --kendo-component-bg, inherit )
Description
The text color of the Chat alt bubble.
$kendo-chat-alt-bubble-border$kendo-chat-alt-bubble-bg
Description
The border color of the Chat alt bubble.
$kendo-chat-alt-bubble-shadowvar( --kendo-box-shadow-depth-1, none )
Description
The shadow of the Chat alt bubble.
$kendo-chat-alt-bubble-hover-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The shadow of the hovered Chat alt bubble.
$kendo-chat-alt-bubble-selected-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The shadow of the selected Chat alt bubble.
$kendo-chat-quick-reply-bgtransparent
Description
The background color of the Chat quick reply.
$kendo-chat-quick-reply-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the Chat quick reply.
$kendo-chat-quick-reply-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the Chat quick reply.
$kendo-chat-quick-reply-hover-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-textvar( --kendo-component-bg, inherit )
Description
The text color of the hovered Chat quick reply.
$kendo-chat-quick-reply-hover-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the hovered Chat quick reply.

Checkbox

NameTypeDefault valueComputed value
$kendo-checkbox-border-radiusnull
Description
The border radius of the CheckBox.
$kendo-checkbox-border-width1px
Description
The border width of the CheckBox.
$kendo-checkbox-bg$kendo-component-bg
Description
The background color of the CheckBox.
$kendo-checkbox-texttransparent
Description
The text color of the CheckBox.
$kendo-checkbox-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the CheckBox.
$kendo-checkbox-hover-bg$kendo-checkbox-bg
Description
The background color of the hovered CheckBox.
$kendo-checkbox-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 ))
Description
The text color of the hovered CheckBox.
$kendo-checkbox-hover-border$kendo-checkbox-border
Description
The border color of the hovered CheckBox.
$kendo-checkbox-checked-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the checked CheckBox.
$kendo-checkbox-checked-border$kendo-checkbox-checked-bg
Description
The border color of the checked CheckBox.
$kendo-checkbox-hover-checked-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The background of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the hovered and checked CheckBox.
$kendo-checkbox-hover-checked-border$kendo-checkbox-hover-checked-bg
Description
The border color of the hovered and checked CheckBox.
$kendo-checkbox-focus-bordernull
Description
The border color of the focused CheckBox.
$kendo-checkbox-focus-shadownull
Description
The box shadow of the focused CheckBox.
$kendo-checkbox-focus-outline1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The outline of the focused CheckBox.
$kendo-checkbox-indeterminate-bg$kendo-checkbox-bg
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 ))
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-bg$kendo-checkbox-bg
Description
The background color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 ))
Description
The text color of the hovered and indeterminate CheckBox.
$kendo-checkbox-hover-indeterminate-borderif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The border color of the hovered and indeterminate CheckBox.
$kendo-checkbox-disabled-bg$kendo-checkbox-bg
Description
The background color of the disabled CheckBox.
$kendo-checkbox-disabled-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The text color of the disabled CheckBox.
$kendo-checkbox-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-borderif($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 ))
Description
The border color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-indeterminate-bg$kendo-checkbox-bg
Description
The background color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 ))
Description
The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-disabled-indeterminate-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The border color of the disabled and indeterminate CheckBox.
$kendo-checkbox-invalid-bg$kendo-checkbox-bg
Description
The background color of an invalid CheckBox.
$kendo-checkbox-invalid-text$kendo-invalid-text
Description
The text color of an invalid CheckBox.
$kendo-checkbox-invalid-border$kendo-invalid-border
Description
The border color of an invalid CheckBox.
$kendo-checkbox-indicator-typeimage
Description
The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-family"WebComponentsIcons", monospace
Description
The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyph"\e118"
Description
The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyph"\e121"
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the hovered CheckBox indicator.
$kendo-checkbox-checked-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the checked CheckBox indicator.
$kendo-checkbox-indeterminate-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the indeterminate CheckBox indicator.
$kendo-checkbox-hover-checked-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the hovered and checked CheckBox indicator.
$kendo-checkbox-hover-indeterminate-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the hovered and indeterminate CheckBox indicator.
$kendo-checkbox-disabled-checked-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the checked CheckBox indicator.
$kendo-checkbox-disabled-indeterminate-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-xmap.get( $kendo-spacing, 2 )
Description
The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacingmap.get( $kendo-spacing, 4 )
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-x0px
Description
The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-y$kendo-list-md-item-padding-y
Description
The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacity.25
Description
The opacity of the CheckBox' ripple.

Chip

NameTypeDefault valueComputed value
$kendo-chip-border-width1px
Description
The width of the border around the Chip.
$kendo-chip-spacingmap.get( $kendo-spacing, 1 )
Description
The spacing between the text and the icons of the Chip.
$kendo-chip-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Chip.
$kendo-chip-avatar-width1em
Description
The width of the Chip' avatar.
$kendo-chip-avatar-height1em
Description
The height of the Chip' avatar.
$kendo-chip-avatar-flex-basis1em
Description
The flex basis of the Chip' avatar.
$kendo-chip-disabled-textvar( --kendo-disabled-text, inherit )
Description
The text color of the disabled Chip.
$kendo-chip-solid-disabled-bgvar( --kendo-disabled-bg, transparent )
Description
The background color of the solid disabled Chip.
$kendo-chip-solid-disabled-bordervar( --kendo-disabled-border, inherit )
Description
The border color of the solid disabled Chip.
$kendo-chip-outline-disabled-bgvar( $kendo-component-bg, transparent )
Description
The background color of the outline disabled Chip.
$kendo-chip-outline-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))
Description
The border color of the outline disabled Chip.
$kendo-chip-focus-offsetmap.get( $kendo-spacing, 0.5 )
Description
The offset of the outline focused Chip.
$kendo-chip-focus-outline-width1px
Description
The outline width of the outline focused Chip.
$kendo-chip-focus-outline-stylesolid
Description
The outline style of the outline focused Chip.
$kendo-chip-sm-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the small Chip.
$kendo-chip-md-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the large Chip.
$kendo-chip-sm-padding-ymap.get( $kendo-spacing, 0.5 )
Description
The vertical padding of the small Chip.
$kendo-chip-md-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the medium Chip.
$kendo-chip-lg-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the large Chip.
$kendo-chip-sm-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the small Chip.
$kendo-chip-md-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the medium Chip.
$kendo-chip-lg-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the large Chip.
$kendo-chip-sm-line-heightvar( --kendo-line-height, normal )
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-heightvar( --kendo-line-height, normal )
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-heightvar( --kendo-line-height, normal )
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-sizecalc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 )
Description
The calculated height of the Chip.
$kendo-chip-sizes( 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 ) )
Description
The map with the sizes of the Chip.
$kendo-chip-list-sizes( sm: map.get( $kendo-spacing, 1 ), md: map.get( $kendo-spacing, 1 ), lg: map.get( $kendo-spacing, 1 ) )
Description
The sizes of the Chip list.

Cologradient

NameTypeDefault valueComputed value
$kendo-color-gradient-spacermap.get( $kendo-spacing, 4 )
Description
The spacer of the ColorGradient.
$kendo-color-gradient-width260px
Description
The width of the ColorGradient.
$kendo-color-gradient-border-width2px
Description
The width of the border around the ColorGradient.
$kendo-color-gradient-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the ColorGradient.
$kendo-color-gradient-padding-y$kendo-color-gradient-spacer
Description
The vertical padding of the ColorGradient.
$kendo-color-gradient-padding-xmath.div( $kendo-color-gradient-spacer, 2 )
Description
The horizontal padding of the ColorGradient.
$kendo-color-gradient-spacing$kendo-color-gradient-spacer
Description
The spacing between the sections of the ColorGradient.
$kendo-color-gradient-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the ColorGradient.
$kendo-color-gradient-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the ColorGradient.
$kendo-color-gradient-line-heightvar( --kendo-line-height, normal )
Description
The line height of the ColorGradient.
$kendo-color-gradient-textvar( --kendo-component-text, initial )
Description
The text color of the ColorGradient.
$kendo-color-gradient-bgvar( --kendo-component-bg, initial )
Description
The background color of the ColorGradient.
$kendo-color-gradient-bordervar( --kendo-component-border, initial )
Description
The border color of the ColorGradient.
$kendo-color-gradient-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The box shadow of the ColorGradient.
$kendo-color-gradient-focus-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))
Description
The border color of the focused ColorGradient.
$kendo-color-gradient-focus-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The box shadow of the focused ColorGradient.
$kendo-color-gradient-canvas-border-width0
Description
The width of the border around the ColorGradient canvas.
$kendo-color-gradient-canvas-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the ColorGradient canvas.
$kendo-color-gradient-canvas-spacingmath.div( $kendo-color-gradient-spacer, 2 )
Description
The spacing between the items of the ColorGradient canvas.
$kendo-color-gradient-canvas-rectangle-height180px
Description
The height the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-canvas-rectangle-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The border color of the ColorGradient canvas hsv rectangle.
$kendo-color-gradient-canvas-draghandle-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-slider-track-size20px
Description
The width of the ColorGradient slider.
$kendo-color-gradient-slider-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the ColorGradient slider.
$kendo-color-gradient-slider-border-widthif($kendo-enable-color-system, 0, 1px)
Description
The width of the border around the ColorGradient slider.
$kendo-color-gradient-slider-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The color of the border around the ColorGradient slider.
$kendo-color-gradient-slider-vertical-size180px
Description
The height of the ColorGradient vertical slider.
$kendo-color-gradient-slider-horizontal-size100%
Description
The width of the ColorGradient horizontal slider.
$kendo-color-gradient-slider-alpha-bgr"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC"
Description
The background image of the ColorGradient alpha slider.
$kendo-color-gradient-draghandle-width20px
Description
The width of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-height20px
Description
The height of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-border-width2px
Description
The width of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-outline-width1px
Description
The width of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-borderif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The color of the border around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadowif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The box shadow of the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-borderif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The color of the border around the focused ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-focus-shadowif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The focus color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-draghandle-hover-shadowif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The hover color of the outline around the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-offset-y( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) )
Description
The vertical offset of the ColorGradient canvas drag handle.
$kendo-color-gradient-canvas-draghandle-offset-x( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) )
Description
The horizontal offset of the ColorGradient canvas drag handle.
$kendo-color-gradient-input-width48px
Description
The width of the ColorGradient input.
$kendo-color-gradient-input-spacingmath.div( $kendo-color-gradient-spacer, 4 )
Description
The spacing between the ColorGradient inputs.
$kendo-color-gradient-input-label-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the ColorGradient input labels.
$kendo-color-gradient-input-label-spacingmath.div( $kendo-color-gradient-spacer, 4 )
Description
The spacing between the ColorGradient inputs and their labels.
$kendo-color-gradient-input-label-textvar( --kendo-subtle-text, inherit )
Description
The text color of the ColorGradient input labels.
$kendo-color-gradient-contrast-ratio-font-weightvar( --kendo-font-weight-bold, normal )
Description
The font weight of the ColorGradient contrast ratio text.
$kendo-color-gradient-contrast-spacingmath.div( $kendo-color-gradient-spacer, 1.5 )
Description
The spacing between the items in the ColorGradient contrast tool.

Color System

NameTypeDefault valueComputed value
$kendo-colors$_default-colors
Description
The global default Colors map.

Color-preview

NameTypeDefault valueComputed value
$kendo-color-preview-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
Border radius of the color preview.
$kendo-color-preview-border-width1px
Description
Border width of the color preview.
$kendo-color-preview-bgtransparent
Description
Default background color of the color preview.
$kendo-color-preview-textinherit
Description
Text color of the color preview.
$kendo-color-preview-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
Border color of the color preview.
$kendo-color-preview-hover-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
Hover Border color of the color preview.
$kendo-color-preview-no-color-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Background color of the color preview when no color is selected.
$kendo-color-preview-no-color-textif($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 ))
Description
Text color of the color preview when no color is selected.
$kendo-color-preview-no-color-bordercurrentColor
Description
Border color of the color preview when no color is selected.

Coloreditor

NameTypeDefault valueComputed value
$kendo-color-editor-spacermap.get( $kendo-spacing, 2 )
Description
The spacer of the ColorEditor.
$kendo-color-editor-min-width260px
Description
The minimum width of the ColorEditor.
$kendo-color-editor-border-width1px
Description
The width of the border around the ColorEditor.
$kendo-color-editor-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the ColorEditor.
$kendo-color-editor-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the ColorEditor.
$kendo-color-editor-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the ColorEditor.
$kendo-color-editor-line-heightvar( --kendo-line-height, normal )
Description
The line height of the ColorEditor.
$kendo-color-editor-textvar( --kendo-component-text, initial )
Description
The text color of the ColorEditor.
$kendo-color-editor-bgvar( --kendo-component-bg, initial )
Description
The background color of the ColorEditor.
$kendo-color-editor-bordervar( --kendo-component-border, initial )
Description
The border color of the ColorEditor.
$kendo-color-editor-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The box shadow of the ColorEditor.
$kendo-color-editor-focus-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))
Description
The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The box shadow of the focused ColorEditor.
$kendo-color-editor-header-padding-y$kendo-color-editor-spacer
Description
The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-x$kendo-color-editor-header-padding-y
Description
The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-spacingmath.div( $kendo-color-editor-spacer, 2 )
Description
The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-width34px
Description
The width of the ColorEditor preview.
$kendo-color-editor-color-preview-height14px
Description
The height of the ColorEditor preview.
$kendo-color-editor-preview-spacingmap.get( $kendo-spacing, 1 )
Description
The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-y$kendo-color-editor-spacer
Description
The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-x$kendo-color-editor-views-padding-y
Description
The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-spacing$kendo-color-editor-spacer
Description
The spacing of the ColorEditor views container.
$kendo-color-editor-footer-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the ColorEditor footer.
$kendo-color-editor-footer-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the ColorEditor footer.
$kendo-color-editor-color-gradient-focus-outline-colorrgba(0, 0, 0, 0.3)
Description
The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline2px
Description
The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offset2px
Description
The outline offset of the focused ColorGradient.

Colorpalette

NameTypeDefault valueComputed value
$kendo-color-palette-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the ColorPalette.
$kendo-color-palette-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the ColorPalette.
$kendo-color-palette-line-height0
Description
The line height of the ColorPalette.
$kendo-color-palette-tile-outline-width1px
Description
The outline width of the ColorPalette tile.
$kendo-color-palette-tile-outline-stylesolid
Description
The outline style of the ColorPalette tile.
$kendo-color-palette-tile-outlinetransparent
Description
The outline color of the ColorPalette tile.
$kendo-color-palette-tile-widthmap.get( $kendo-spacing, 6 )
Description
The width of the ColorPalette tile.
$kendo-color-palette-tile-height$kendo-color-palette-tile-width
Description
The height of the ColorPalette tile.
$kendo-color-palette-tile-focus-outlineif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The outline color of the ColorPalette focused tile.
$kendo-color-palette-tile-focus-shadowinset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The shadow of the ColorPalette focused tile.
$kendo-color-palette-tile-hover-outlineif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))
Description
The outline color of the ColorPalette hovered tile.
$kendo-color-palette-tile-hover-shadowinset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The shadow of the ColorPalette hovered tile.
$kendo-color-palette-tile-selected-outline$kendo-color-palette-tile-hover-outline
Description
The outline color of the ColorPalette selected tile.
$kendo-color-palette-tile-selected-shadow$kendo-color-palette-tile-hover-shadow
Description
The shadow of the ColorPalette selected tile.
$kendo-color-palette-tile-selected-hover-outline$kendo-color-palette-tile-focus-outline
Description
The outline color of the ColorPalette selected hover tile.

Dialog

NameTypeDefault valueComputed value
$kendo-dialog-border-width0
Description
The width of the border around the Dialog.
$kendo-dialog-titlebar-bgvar( --kendo-component-bg, initial )
Description
The background color of the Dialog titlebar.
$kendo-dialog-titlebar-textvar( --kendo-component-text, initial )
Description
The text color of the Dialog titlebar.
$kendo-dialog-titlebar-bordervar( --kendo-component-border, initial )
Description
The border color of the Dialog titlebar.
$kendo-dialog-titlebar-border-width0
Description
The width of the border around the Dialog titlebar.
$kendo-dialog-titlebar-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the Dialog titlebar.
$kendo-dialog-titlebar-padding-ymap.get( $kendo-spacing, 4 )
Description
The vertical padding of the Dialog titlebar.
$kendo-dialog-inner-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the content of the Dialog.
$kendo-dialog-inner-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the content of the Dialog.
$kendo-dialog-buttongroup-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-ymap.get( $kendo-spacing, 6 )
Description
The vertical padding of the Dialog action buttons.
$kendo-dialog-buttongroup-border-width0
Description
The width of the top border of the Dialog action buttons.
$kendo-dialog-buttongroup-spacingmap.get( $kendo-spacing, 3 )
Description
The spacing between the Dialog action buttons.
$kendo-dialog-button-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the Dialog action buttons.
$kendo-dialog-shadowvar( --kendo-box-shadow-depth-8, none )
Description
The box shadow around the Dialog.

Dock-manager

NameTypeDefault valueComputed value
$kendo-dock-manager-border-width1px
Description
The width of the border around the DockManager component.
$kendo-dock-manager-border-stylesolid
Description
The style of the border around the DockManager component.
$kendo-dock-manager-bordervar( --kendo-component-border, inherit )
Description
The color of the border around the DockManager component.
$kendo-dock-manager-pane-header-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-width$kendo-dock-manager-border-width
Description
The width of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-border-stylesolid
Description
The style of the border around the pane header in the DockManager component.
$kendo-dock-manager-pane-header-bgvar( --kendo-component-bg, inherit )
Description
The background color of the pane header in the DockManager component.
$kendo-dock-manager-pane-header-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the pane header in the DockManager component.
$kendo-dock-manager-pane-title-padding-ynull
Description
The vertical padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-padding-xnull
Description
The horizontal padding of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-sizevar( --kendo-font-size-lg, inherit )
Description
The font size of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-line-heightvar( --kendo-line-height, normal )
Description
The line height of the pane title in the DockManager component.
$kendo-dock-manager-pane-title-font-weightvar( --kendo-font-weight, normal )
Description
The font weight of the pane title in the DockManager component.
$kendo-dock-manager-pane-content-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the pane content in the DockManager component.
$kendo-dock-manager-pane-content-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the pane content in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-ynull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-tabbed-pane-padding-xnull
Description
The horizontal padding of the tabbed pane in the DockManager component.
$kendo-dock-manager-unpinned-container-width300px
Description
The width of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background-color of the unpinned pane container in the DockManager component.
$kendo-dock-manager-unpinned-container-shadow25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18)
Description
The box shadow of the unpinned pane container in the DockManager component.
$kendo-dock-indicator-paddingmap.get( $kendo-spacing, 1.5 )
Description
The padding of the dock indicator in the DockManager component.
$kendo-dock-indicator-bg$kendo-component-bg
Description
The background color of the dock indicator in the DockManager component.
$kendo-dock-indicator-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-width1px
Description
The outline width of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline-stylesolid
Description
The outline style of the dock indicator in the DockManager component.
$kendo-dock-indicator-outline$kendo-dock-indicator-text
Description
The outline color of the dock indicator in the DockManager component.
$kendo-dock-indicator-shadow0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20)
Description
The box shadow of the dock indicator in the DockManager component.
$kendo-dock-indicator-hover-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The background color of the hovered dock indicator in the DockManager component.
$kendo-dock-indicator-hover-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the hovered dock indicator in the DockManager component.
$kendo-dock-manager-dock-preview-border-width1px
Description
The width of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-styledashed
Description
The style of the border around the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-border-radiusvar( --kendo-border-radius-md, 0)
Description
The border radius of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 20%, transparent), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))
Description
The background color of the dropping area in the DockManager component.
$kendo-dock-manager-dock-preview-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the dropping area in the DockManager component.

Draggable

NameTypeDefault valueComputed value
$kendo-drag-clue-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
Borer radius of the drag clue.
$kendo-drag-clue-border-width0px
Description
Borer width of the drag clue.
$kendo-drag-clue-border-stylesolid
Description
Borer style of the drag clue.
$kendo-drag-clue-padding-x$kendo-padding-lg-x
Description
Horizontal padding of the drag clue.
$kendo-drag-clue-padding-y$kendo-padding-lg-y
Description
Vertical padding of the drag clue.
$kendo-drag-clue-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the drag clue.
$kendo-drag-clue-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the drag clue.
$kendo-drag-clue-line-heightvar( --kendo-line-height, inherit )
Description
Line height of the drag clue.
$kendo-drag-clue-spacing.4ex
Description
Spacing of the drag clue.
$kendo-drag-clue-opacity.8
Description
Opacity of the drag clue.
$kendo-drag-clue-textvar( --kendo-selected-text, inherit )
Description
Text color of the drag clue.
$kendo-drag-clue-bgvar( --kendo-selected-bg, inherit )
Description
Background color of the drag clue.
$kendo-drag-clue-bordervar( --kendo-selected-border, inherit )
Description
Border color of the drag clue.
$kendo-drag-clue-gradientnull
Description
Gradient of the drag clue.
$kendo-drag-clue-shadowvar( --kendo-box-shadow-depth-2, none )
Description
Box shadow of the drag clue.
$kendo-drop-hint-arrow-size6px
Description
Arrow size of the drop hint.
$kendo-drop-hint-arrow-spacingmath.div( $kendo-drop-hint-arrow-size, 2 )
Description
Arrow spacing of the drop hint.
$kendo-drop-hint-line-h-width20px
Description
Width of the horizontal drop hint line.
$kendo-drop-hint-line-h-height1px
Description
Height of the horizontal drop hint line.
$kendo-drop-hint-line-v-width$kendo-drop-hint-line-h-height
Description
Width of the vertical drop hint line.
$kendo-drop-hint-line-v-height$kendo-drop-hint-line-h-width
Description
Height of the vertical drop hint line.
$kendo-drop-hint-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Background-color of the drop hint.

Drawer

NameTypeDefault valueComputed value
$kendo-drawer-bgvar( --kendo-component-bg, initial )
Description
Background color of the drawer.
$kendo-drawer-textvar( --kendo-component-text, initial )
Description
Text color of the drawer.
$kendo-drawer-bordervar( --kendo-component-border, initial )
Description
Border color of the drawer.
$kendo-drawer-border-width1px
Description
Border width of the drawer.
$kendo-drawer-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the drawer.
$kendo-drawer-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the drawer.
$kendo-drawer-line-heightvar( --kendo-line-height, inherit )
Description
Line height of the drawer.
$kendo-drawer-content-padding-xvar( --kendo-padding-x, #{$kendo-padding-md-x} )
Description
Horizontal padding of the drawer content.
$kendo-drawer-content-padding-yvar( --kendo-padding-y, #{$kendo-padding-md-y} )
Description
Vertical padding of the drawer content.
$kendo-drawer-scrollbar-width7px
Description
Scrollbar width of the drawer.
$kendo-drawer-scrollbar-colorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))
Description
Scrollbar color of the drawer.
$kendo-drawer-scrollbar-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 ))
Description
Scrollbar background of the drawer.
$kendo-drawer-scrollbar-radius20px
Description
Scrollbar border radius of the drawer.
$kendo-drawer-scrollbar-hover-colorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 ))
Description
Scrollbar hover color of the drawer.
$kendo-drawer-item-padding-xmap.get( $kendo-spacing, 4 )
Description
Horizontal padding of the drawer item.
$kendo-drawer-item-padding-yvar( --kendo-padding-x, #{$kendo-padding-md-x} )
Description
Vertical padding of the drawer item.
$kendo-drawer-item-font-size$kendo-drawer-font-size
Description
Font size of the drawer item.
$kendo-drawer-item-line-heightvar( --kendo-line-height-lg, normal )
Description
Line height of the drawer item.
$kendo-drawer-item-level-padding-x$kendo-drawer-item-padding-x
Description
Horizontal padding of the drawer item in each level.
$kendo-drawer-item-level-count5
Description
Count of the drawer item levels.
$kendo-drawer-icon-padding-x0
Description
Horizontal padding of the drawer icon.
$kendo-drawer-icon-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the drawer icon.
$kendo-drawer-mini-initial-widthcalc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) )
Description
Initial width of the mini drawer.
$kendo-drawer-item-ripple-border-widthmap.get( $kendo-spacing, 0.5 )
Description
The border width of the drawer item ripple
$kendo-drawer-item-ripple-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the drawer item ripple
$kendo-drawer-item-bg$kendo-drawer-bg
Description
Background color of the drawer item.
$kendo-drawer-item-text$kendo-drawer-text
Description
Text color of the drawer item.
$kendo-drawer-item-icon-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Text color of the drawer item icon.
$kendo-drawer-item-hover-bg$kendo-drawer-item-bg
Description
Background color of the hovered drawer item.
$kendo-drawer-item-hover-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
Text color of the hovered drawer item.
$kendo-drawer-item-hover-icon-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
Text color of the hovered drawer item icon.
$kendo-drawer-item-focus-bg$kendo-drawer-item-bg
Description
Background color of the focused drawer item.
$kendo-drawer-item-focus-text$kendo-drawer-item-text
Description
Text color of the focused drawer item.
$kendo-drawer-item-focus-shadowinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
Description
Box shadow of the focused drawer item.
$kendo-drawer-item-focus-icon-text$kendo-drawer-item-icon-text
Description
Text color of the focused drawer item icon.
$kendo-drawer-item-selected-font-weightvar( --kendo-font-weight-bold, normal )
Description
Font weight of the selected drawer item.
$kendo-drawer-item-selected-bgvar( --kendo-selected-bg, initial )
Description
Background color of the selected drawer item.
$kendo-drawer-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Text color of the selected drawer item.
$kendo-drawer-item-selected-icon-textif($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
Description
Text color of the selected drawer item icon.
$kendo-drawer-item-selected-hover-bgvar( --kendo-selected-hover-bg, inherit )
Description
Background color of the selected and hovered drawer item.
$kendo-drawer-item-selected-hover-textvar( --kendo-selected-hover-text, inherit )
Description
Text color of the selected and hovered drawer item.

Dropdowntree

NameTypeDefault valueComputed value
$kendo-dropdowntree-popup-padding-x$kendo-popup-content-padding-x
Description
The horizontal padding of the DropdownTree popup
$kendo-dropdowntree-popup-padding-y$kendo-popup-content-padding-y
Description
The vertical padding of the DropdownTree popup
$kendo-dropdowntree-check-all-paddingmap.get( $kendo-spacing, 1 )
Description
The padding of the check-all CheckBox inside the DropDownTree popup

Dropzone

NameTypeDefault valueComputed value
$kendo-dropzone-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the DropZone.
$kendo-dropzone-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the DropZone.
$kendo-dropzone-border-width1px
Description
The border width of the DropZone.
$kendo-dropzone-min-height220px
Description
The minimum height of the DropZone.
$kendo-dropzone-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the DropZone.
$kendo-dropzone-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the DropZone.
$kendo-dropzone-line-heightvar( --kendo-line-height, normal )
Description
The line height of the DropZone.
$kendo-dropzone-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the DropZone.
$kendo-dropzone-textvar( --kendo-component-text, inherit )
Description
Text color of the dropzone.
$kendo-dropzone-bordervar( --kendo-component-border, initial )
Description
The border color of the DropZone.
$kendo-dropzone-icon-spacingmap.get( $kendo-spacing, 6 )
Description
The spacing below the DropZone icon.
$kendo-dropzone-icon-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 ))
Description
The text color of the DropZone icon.
$kendo-dropzone-icon-hover-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Text color of the icon when the dropzone is hovered.
$kendo-dropzone-hint-font-sizeinherit
Description
The font size of the DropZone hint.
$kendo-dropzone-hint-font-weightvar( --kendo-font-weight-bold, bold )
Description
The font weight of the DropZone hint.
$kendo-dropzone-hint-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing below the DropZone hint.
$kendo-dropzone-hint-text$kendo-dropzone-text
Description
The text color of the DropZone hint.
$kendo-dropzone-note-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the DropZone note.
$kendo-dropzone-note-font-weightinherit
Description
The font weight of the DropZone note.
$kendo-dropzone-note-spacing0
Description
The spacing below the DropZone note.
$kendo-dropzone-note-textvar( --kendo-subtle-text, inherit )
Description
The text color of the DropZone note.

Editor

NameTypeDefault valueComputed value
$kendo-editor-border-width1px
Description
The width of the border around the Еditor.
$kendo-editor-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Еditor.
$kendo-editor-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Еditor.
$kendo-editor-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Еditor.
$kendo-editor-textvar( --kendo-component-text, initial )
Description
The text color of the Editor.
$kendo-editor-bgvar( --kendo-component-bg, initial )
Description
The background color of the Editor.
$kendo-editor-bordervar( --kendo-component-border, initial )
Description
The color of the border around Editor.
$kendo-editor-placeholder-textvar( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} )
Description
The text color of the Еditor's placeholder.
$kendo-editor-placeholder-opacityvar( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} )
Description
The opacity of the Editor's placeholder.
$kendo-editor-content-outline-colorvar( --kendo-body-text, initial )
Description
The outline color of the Editor's content.
$kendo-editor-export-tool-icon-margin-xmap.get( $kendo-spacing, 1 )
Description
The horizontal margin of the Editor's export tool icon.
$kendo-editor-selectednode-outline-widthmap.get( $kendo-spacing, 0.5 )
Description
The outline width of the Editor's selected node.
$kendo-editor-selected-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The selected text color of the Editor.
$kendo-editor-selected-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The selected background color of the Editor.
$kendo-editor-highlighted-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 55%, transparent), k-get-theme-color-var( primary-60 ))
Description
The highlighted background color of the Editor.
$kendo-editor-resize-handle-sizemap.get( $kendo-spacing, 2 )
Description
The size of the Editor's resize handle.
$kendo-editor-resize-handle-border-width1px
Description
The border width of the Editor's resize handle.
$kendo-editor-resize-handle-borderif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
The border color of the Editor's resize handle.
$kendo-editor-resize-handle-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the Editor's resize handle.
$kendo-editor-selectednode-outline-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The outline color of the Editor's selected node.
$kendo-editor-inline-td-bordervar( --kendo-component-border, initial )
Description
The border color of the Inline Editor data cell.
$kendo-editor-inline-hover-bordervar( --kendo-component-border, initial )
Description
The hover border color of the Inline Editor.
$ct-cell-size20px
Description
The size of the cell in the Insert table popup.
$kendo-editor-ct-popup-textvar( --kendo-selected-text, initial )
Description
The text color of the selected cells in the Insert table popup.
$kendo-editor-ct-popup-bgvar( --kendo-selected-bg, initial )
Description
The background color of the selected cells in the Insert table popup.
$kendo-editor-ct-popup-bordervar( --kendo-selected-border, initial )
Description
The border color of the selected cells in the Insert table popup.

Elevation

NameTypeDefault valueComputed value
$kendo-elevation$_default-elevation
Description
The global default Elevation map.

Expander

NameTypeDefault valueComputed value
$kendo-expander-margin-ymap.get( $kendo-spacing, 2 )
Description
The vertical spacing of the ExpansionPanel.
$kendo-expander-border-width1px
Description
The width of the border around the ExpansionPanel.
$kendo-expander-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the ExpansionPanel.
$kendo-expander-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the ExpansionPanel.
$kendo-expander-line-heightvar( --kendo-line-height, normal )
Description
The hine height of the ExpansionPanel.
$kendo-expander-textvar( --kendo-component-text, initial )
Description
The text color of the ExpansionPanel.
$kendo-expander-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the ExpansionPanel.
$kendo-expander-bordervar( --kendo-component-border, initial )
Description
The border color of the ExpansionPanel.
$kendo-expander-shadowinset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The box shadow of the ExpansionPanel.
$kendo-expander-expanded-bgvar( --kendo-component-bg, initial )
Description
The background color of the expanded ExpansionPanel.
$kendo-expander-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of the disabled ExpansionPanel.
$kendo-expander-disabled-bgvar( --kendo-disabled-bg, initial )
Description
The background color of the disabled ExpansionPanel.
$kendo-expander-focus-offset1px
Description
The offset of the focused ExpansionPanel.
$kendo-expander-focus-outline-width1px
Description
The outline width of the focused ExpansionPanel.
$kendo-expander-focus-outline-stylesolid
Description
The outline style of the focused ExpansionPanel.
$kendo-expander-focus-outlineif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
Description
The outline color of the focused ExpansionPanel.
$kendo-expander-focus-bgvar( --kendo-component-bg, initial )
Description
The background color of the focused ExpansionPanel.
$kendo-expander-focus-shadowinset 0px 0px 0px 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
Description
The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the ExpansionPanel header.
$kendo-expander-header-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the ExpansionPanel header.
$kendo-expander-header-bginherit
Description
The background color of the ExpansionPanel header.
$kendo-expander-header-hover-bgif($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the hovered ExpansionPanel header.
$kendo-expander-title-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-textvar( --kendo-subtle-text, initial )
Description
The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-xmap.get( $kendo-spacing, 2.5 )
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-indicator-textvar( --kendo-expander-text, #{$kendo-expander-text} )
Description
The text color of the ExpansionPanel indicator.
$kendo-expander-content-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-ymap.get( $kendo-spacing, 4 )
Description
The vertical padding of the ExpansionPanel content.

Filemanager

NameTypeDefault valueComputed value
$kendo-file-manager-spacermap.get( $kendo-spacing, 4 )
Description
The space between the FileManager items.
$kendo-file-manager-border-width1px
Description
The border width of the FileManager.
$kendo-file-manager-font-familyvar( --kendo-font-family, normal )
Description
The font family of the FileManager.
$kendo-file-manager-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the FileManager.
$kendo-file-manager-line-heightvar( --kendo-line-height, normal )
Description
The line height of the FileManager.
$kendo-file-manager-bgvar( --kendo-component-bg, transparent )
Description
The background color of the FileManager.
$kendo-file-manager-textvar( --kendo-component-text, inherit )
Description
The text color of the FileManager.
$kendo-file-manager-bordervar( --kendo-component-border, inherit )
Description
The border color of the FileManager.
$kendo-file-manager-toolbar-border-width$kendo-file-manager-border-width
Description
The border width of the FileManager Toolbar.
$kendo-file-manager-toolbar-bg$kendo-toolbar-bg
Description
The background color of the FileManager Toolbar.
$kendo-file-manager-toolbar-text$kendo-toolbar-text
Description
The text color of the FileManager Toolbar.
$kendo-file-manager-toolbar-border$kendo-toolbar-border
Description
The border color of the FileManager Toolbar.
$kendo-file-manager-navigation-padding-x$kendo-file-manager-spacer
Description
The horizontal padding of the FileManager Navigation.
$kendo-file-manager-navigation-padding-y$kendo-file-manager-spacer
Description
The vertical padding of the FileManager Navigation.
$kendo-file-manager-navigation-width20%
Description
The width of the FileManager Navigation.
$kendo-file-manager-navigation-border-width$kendo-file-manager-border-width
Description
The border width of the FileManager Navigation.
$kendo-file-manager-navigation-bgtransparent
Description
The background color of the FileManager Navigation.
$kendo-file-manager-navigation-textinherit
Description
The text color of the FileManager Navigation.
$kendo-file-manager-navigation-borderinherit
Description
The border color of the FileManager Navigation.
$kendo-file-manager-breadcrumb-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-border-width$kendo-file-manager-border-width
Description
The border width of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-bg$kendo-toolbar-bg
Description
The background color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-textinherit
Description
The text color of the FileManager Breadcrumb.
$kendo-file-manager-breadcrumb-borderinherit
Description
The border color of the FileManager Breadcrumb.
$kendo-file-manager-listview-bgtransparent
Description
The background color of the FileManager ListView.
$kendo-file-manager-listview-textinherit
Description
The text color of the FileManager ListView.
$kendo-file-manager-listview-borderinherit
Description
The border color of the FileManager ListView.
$kendo-file-manager-listview-item-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the FileManager ListView item.
$kendo-file-manager-listview-item-padding-ymap.get( $kendo-spacing, 4 )
Description
The vertical padding of the FileManager ListView item.
$kendo-file-manager-listview-item-width120px
Description
The width of the FileManager ListView item.
$kendo-file-manager-listview-item-height120px
Description
The height of the FileManager ListView item.
$kendo-file-manager-listview-item-icon-bgtransparent
Description
The background color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-textvar( --kendo-subtle-text, inherit )
Description
The text color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-borderinherit
Description
The border color of the FileManager ListView item icon.
$kendo-file-manager-listview-item-icon-focus-bgtransparent
Description
The background color of the FileManager focused ListView item icon.
$kendo-file-manager-listview-item-icon-focus-textinherit
Description
The text color of the FileManager focused ListView item icon.
$kendo-file-manager-listview-item-icon-focus-borderinherit
Description
The border color of the FileManager focused ListView item icon.
$kendo-file-manager-listview-item-icon-selected-bgtransparent
Description
Background color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-textinherit
Description
Text color of the FileManager selected ListView item icon.
$kendo-file-manager-listview-item-icon-selected-borderinherit
Description
Border color of the FileManager selected ListView item icon.
$kendo-file-manager-grid-bgtransparent
Description
The background color of the FileManager Grid.
$kendo-file-manager-grid-textinherit
Description
The text color of the FileManager Grid.
$kendo-file-manager-grid-borderinherit
Description
The border color of the FileManager Grid.
$kendo-file-manager-preview-padding-x$kendo-file-manager-spacer
Description
The horizontal padding of the FileManager preview.
$kendo-file-manager-preview-padding-y$kendo-file-manager-spacer
Description
The vertical padding of the FileManager preview.
$kendo-file-manager-preview-width20%
Description
The width of the FileManager preview.
$kendo-file-manager-preview-border-width$kendo-file-manager-border-width
Description
The border width of the FileManager preview.
$kendo-file-manager-preview-spacing$kendo-file-manager-spacer
Description
The spacing of the FileManager preview.
$kendo-file-manager-preview-column-gapmap.get( $kendo-spacing, 1 )
Description
The gap between the columns in the FileManager preview.
$kendo-file-manager-preview-bgtransparent
Description
The background color of the FileManager preview.
$kendo-file-manager-preview-textinherit
Description
The text color of the FileManager preview.
$kendo-file-manager-preview-borderinherit
Description
The border color of the FileManager preview.
$kendo-file-manager-preview-icon-bgtransparent
Description
The background color of the FileManager preview icon.
$kendo-file-manager-preview-icon-textvar( --kendo-subtle-text, inherit )
Description
The text color of the FileManager preview icon.
$kendo-file-manager-preview-icon-borderinherit
Description
The border color of the FileManager preview icon.

Filter

NameTypeDefault valueComputed value
$kendo-filter-padding-x$kendo-padding-md-x
Description
The horizontal padding of the Filter.
$kendo-filter-padding-y$kendo-padding-md-y
Description
The vertical padding of the Filter.
$kendo-filter-bottom-margin30px
Description
The bottom margin of the Filter.
$kendo-filter-line-size1px
Description
The width of the line that connects the Filter items.
$kendo-filter-operator-dropdown-width15em
Description
The width of the dropdown elements in the Filter items.
$kendo-filter-textvar( --kendo-component-text, initial )
Description
The text color of the Filter.
$kendo-filter-preview-field-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the Filter preview field.
$kendo-filter-preview-operator-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Filter preview operator.
$kendo-filter-line-bgvar( --kendo-component-border, initial )
Description
The background color of the line that connects the Filter items.
$kendo-filter-toolbar-focus-borderif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the focused Filter.

Floating-action-button

NameTypeDefault valueComputed value
$kendo-fab-border-width1px
Description
The width of the border around the FAB.
$kendo-fab-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the FAB.
$kendo-fab-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the FAB.
$kendo-fab-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the FAB.
$kendo-fab-line-heightvar( --kendo-line-height, normal )
Description
The line height of the FAB.
$kendo-fab-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the FAB.
$kendo-fab-sm-padding-xmath.div( $kendo-fab-padding-x, 2 )
Description
The horizontal padding of the small FAB.
$kendo-fab-md-padding-x$kendo-fab-padding-x
Description
The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-x( $kendo-fab-padding-x * 1.5 )
Description
The horizontal padding of the large FAB.
$kendo-fab-padding-y$kendo-fab-padding-x
Description
The vertical padding of the FAB.
$kendo-fab-sm-padding-ymath.div( $kendo-fab-padding-y, 2 )
Description
The vertical padding of the small FAB.
$kendo-fab-md-padding-y$kendo-fab-padding-y
Description
The vertical padding of the medium FAB.
$kendo-fab-lg-padding-y( $kendo-fab-padding-y * 1.5 )
Description
The vertical padding of the large FAB.
$kendo-fab-focus-offset$kendo-button-focus-offset
Description
The offset of the focused FAB.
$kendo-fab-focus-outline-width$kendo-button-focus-outline-width
Description
The outline width of the focused FAB.
$kendo-fab-focus-outline-style$kendo-button-focus-outline-style
Description
The outline style of the focused FAB.
$kendo-fab-icon-padding-xmap.get( $kendo-spacing, 0.5 )
Description
The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-y$kendo-fab-icon-padding-x
Description
The vertical padding of the FAB icon.
$kendo-fab-icon-spacingmap.get( $kendo-spacing, 0.5 )
Description
The spacing of the FAB icon.
$kendo-fab-items-padding-x0px
Description
The horizontal padding of the FAB items.
$kendo-fab-items-padding-ymap.get( $kendo-spacing, 4 )
Description
The vertical padding of the FAB items.
$kendo-fab-item-text-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the FAB item text.
$kendo-fab-item-text-border-width1px
Description
The width of the FAB item text border.
$kendo-fab-item-text-border-stylesolid
Description
The border style of the FAB item text.
$kendo-fab-item-text-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the FAB item text.
$kendo-fab-item-text-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the FAB item text.
$kendo-fab-item-text-line-heightvar( --kendo-line-height-sm, inherit )
Description
The line height of the FAB item text.
$kendo-fab-item-text-offset-xmap.get( $kendo-spacing, 2 )
Description
The bottom margin of the FAB item text.
$kendo-fab-item-focus-offset$kendo-button-focus-offset
Description
The offset of the focused FAB item.
$kendo-fab-item-focus-outline-width$kendo-button-focus-outline-width
Description
The outline width of the focused FAB item.
$kendo-fab-item-focus-outline-style$kendo-button-focus-outline-style
Description
The outline style of the focused FAB item.
$kendo-fab-item-icon-padding-xmap.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x
Description
The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-y$kendo-fab-item-icon-padding-x
Description
The vertical padding of the FAB item icon.
$kendo-fab-item-icon-border-width1px
Description
The border width of the FAB item icon.
$kendo-fab-item-icon-border-stylesolid
Description
The border style of the FAB item icon.
$kendo-fab-item-icon-border-radius50%
Description
The border radius of the FAB item icon.
$kendo-fab-theme-colors( solid: map.get( $kendo-button-theme-colors, "solid") )
Description
The theme colors map for the FAB.
$kendo-fab-sizes( 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 ) )
Description
The size map for the FAB.
$kendo-fab-item-offset-ymap.get( $kendo-spacing, 2 )
Description
The bottom margin of the FAB item.
$kendo-fab-item-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The base text color of the FAB item.
$kendo-fab-item-bgvar( --kendo-component-bg, inherit )
Description
The base background color of the FAB item.
$kendo-fab-item-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The base border color of the FAB item.
$kendo-fab-item-hover-textvar( --kendo-hover-text, inherit )
Description
The text color of the hovered FAB item.
$kendo-fab-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
The background color of the hovered FAB item.
$kendo-fab-item-hover-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the hovered FAB item.
$kendo-fab-item-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the focused FAB item.
$kendo-fab-item-focus-bgvar( --kendo-component-bg, inherit )
Description
The background color of the focused FAB item.
$kendo-fab-item-focus-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the focused FAB item.
$kendo-fab-item-active-textvar( --kendo-selected-text, inherit )
Description
The text color of the active FAB item.
$kendo-fab-item-active-bgvar( --kendo-selected-bg, inherit )
Description
The background color of the active FAB item.
$kendo-fab-item-active-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the active FAB item.

Floating-label

NameTypeDefault valueComputed value
$kendo-floating-label-scale1
Description
The transformation scale of the Floating Label.
$kendo-floating-label-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Floating Label.
$kendo-floating-label-max-width90%
Description
The maximum width of the Floating Label.
$kendo-floating-label-font-weightvar( --kendo-font-weight-bold, inherit )
Description
The font weight of the Floating Label.
$kendo-floating-label-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Floating Label.
$kendo-floating-label-heightcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )
Description
The height of the Floating Label.
$kendo-floating-label-offset-xcalc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} )
Description
The horizontal offset of the Floating Label.
$kendo-floating-label-offset-ycalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} )
Description
The vertical offset of the Floating Label.
$kendo-floating-label-focus-scale1
Description
The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-x0
Description
The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-y0
Description
The vertical offset of the focused Floating Label.
$kendo-floating-label-transition.2s ease-out
Description
The transition of the Floating Label.
$kendo-floating-label-bginherit
Description
The background color of the Floating Label.
$kendo-floating-label-textinherit
Description
The text color of the Floating Label.
$kendo-floating-label-focus-bginherit
Description
The background color of the focused Floating Label.
$kendo-floating-label-focus-textinherit
Description
The text color of the focused Floating Label.
$kendo-floating-label-invalid-textvar( --kendo-invalid-text, #{$kendo-invalid-text} )
Description
The invalid text color of the Floating Label.

Form

NameTypeDefault valueComputed value
$kendo-form-spacer( $kendo-padding-md-x * 2 )
Description
The padding of the inline Form.
$kendo-form-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Form.
$kendo-form-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Form.
$kendo-form-line-height-em$kendo-line-height-em
Description
The line height of the Form in em units.
$kendo-form-sm-line-heightvar( --kendo-line-height-sm, normal )
Description
The line height of the small Form.
$kendo-form-lg-line-heightvar( --kendo-line-height-lg, normal )
Description
The line height of the large Form.
$kendo-form-fieldset-margin2em 0 0
Description
The margin of the Form fieldset.
$kendo-form-fieldset-padding0px
Description
The padding of the Form fieldset.
$kendo-form-legend-margin0 0 map.get( $kendo-spacing, 3 )
Description
The margin of the Form legend.
$kendo-form-legend-padding0px
Description
The padding of the Form legend.
$kendo-form-legend-border-width0 0 map.get( $kendo-spacing, 0.5 )
Description
The border width of the Form legend.
$kendo-form-legend-border-stylesolid
Description
The border style of the Form legend.
$kendo-form-legend-border-colorvar( --kendo-component-border, initial )
Description
The border color of the Form legend.
$kendo-form-legend-width100%
Description
The width of the Form legend.
$kendo-form-legend-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Form legend.
$kendo-form-legend-text-transformuppercase
Description
The text capitalization of the Form legend.
$kendo-form-label-margin-bottommap.get( $kendo-spacing, 2 )
Description
The bottom margin of the Form label.
$kendo-form-label-font-weightvar( --kendo-font-weight-bold, inherit )
Description
The font weight of the form label
$kendo-form-button-margin-xmap.get( $kendo-spacing, 2 )
Description
The horizontal margin of the Form buttons.
$kendo-form-hint-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Form hint.
$kendo-form-hint-font-stylenormal
Description
The font style of the Form hint.
$kendo-form-hint-margin-topmap.get( $kendo-spacing, 1 )
Description
The top margin of the Form hint.
$kendo-form-hint-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Form hint.
$kendo-form-sm-rows-spacingmap.get( $kendo-spacing, 3 )
Description
The row spacing of the small Form.
$kendo-form-md-rows-spacing$kendo-form-sm-rows-spacing
Description
The row spacing of the medium Form.
$kendo-form-lg-rows-spacing$kendo-form-sm-rows-spacing
Description
The row spacing of the large Form.
$kendo-form-separator-marginmap.get( $kendo-spacing, 3 ) 0 0
Description
The margin of the Form separator.
$kendo-form-separator-border-color$kendo-form-legend-border-color
Description
The border color of the Form separator.
$kendo-horizontal-form-label-padding-topmap.get( $kendo-spacing, 1.5 )
Description
The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-xmap.get( $kendo-spacing, 2 )
Description
The horizontal margin of the label in the horizontal Form.
$kendo-horizontal-form-label-width25%
Description
The width of the label in the horizontal Form.
$kendo-horizontal-form-label-alignflex-end
Description
The horizontal alignment of the label in the horizontal Form.
$kendo-horizontal-form-field-wrap-max-widthcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )
Description
The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-width25%
Description
The width of the inline Form element.
$kendo-forms-invalid-colorvar( --kendo-invalid-text, initial )
Description
The invalid text color of the Form.
$kendo-label-optional-margin-xmap.get( $kendo-spacing, 1.5 )
Description
The horizontal margin of the optional label in the Form.
$kendo-label-optional-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the optional label in the Form.
$kendo-label-optional-font-stylenormal
Description
The font style of the optional label in the Form.
$kendo-fieldset-marginmap.get( $kendo-spacing, 7.5 )
Description
The margin of the Form fieldset.
$kendo-fieldset-font-sizevar( --kendo-font-size-xl, inherit )
Description
The font size of the Form fieldset.
$kendo-fieldset-bgtransparent
Description
The background color of the Form fieldset.
$kendo-fieldset-textinherit
Description
The text color of the Form fieldset.
$kendo-fieldset-borderinitial
Description
The border color of the Form fieldset.
$kendo-fieldset-legend-bgtransparent
Description
The background color of the Form legend.
$kendo-fieldset-legend-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Form legend.
$kendo-fieldset-legend-borderinitial
Description
The border color of the Form legend.
$kendo-form-sizes( 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 ) )
Description
The sizes map for the Form.

Gantt

NameTypeDefault valueComputed value
$kendo-gantt-border-width1px
Description
Border width of the gantt.
$kendo-gantt-font-familyvar( --kendo-font-family, initial )
Description
Font family of the gantt.
$kendo-gantt-font-sizevar( --kendo-font-size, initial )
Description
Font size of the gantt.
$kendo-gantt-line-heightvar( --kendo-line-height, initial )
Description
Line height of the gantt.
$kendo-gantt-bgvar( --kendo-component-bg, inherit )
Description
Background color of the gantt.
$kendo-gantt-textvar( --kendo-component-text, inherit )
Description
Text color of the gantt.
$kendo-gantt-bordervar( --kendo-component-border, inherit )
Description
Border color of the gantt.
$kendo-gantt-nonwork-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 ))
Description
Background color of the gantt non-working days.
$kendo-gantt-nonwork-textinherit
Description
Text color of the gantt non-working days.
$kendo-gantt-nonwork-borderinherit
Description
Border color of the gantt non-working days.
$kendo-gantt-line-size2px
Description
Size of the gantt connecting lines.
$kendo-gantt-line-fillblack
Description
Background fill color of the gantt connecting lines.
$kendo-gantt-line-selected-fillif($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
Description
Selected background fill of the gantt connecting lines.
$kendo-gantt-dot-size8px
Description
Size of the gantt task dot.
$kendo-gantt-dot-spacingmap.get( $kendo-spacing, 0.5 )
Description
Spacing of the gantt task dot.
$kendo-gantt-dot-bgif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Background color of the gantt task dot.
$kendo-gantt-dot-borderif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Border color of the gantt task dot.
$kendo-gantt-dot-hover-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Hover background color of the gantt task dot.
$kendo-gantt-dot-hover-borderif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Hover border color of the gantt task dot.
$kendo-gantt-milestone-bg$kendo-gantt-text
Description
Background color of the gantt milestone.
$kendo-gantt-milestone-border$kendo-gantt-text
Description
Border color of the gantt milestone.
$kendo-gantt-milestone-selected-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Selected background color of the gantt milestone.
$kendo-gantt-milestone-selected-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Selected border color of the gantt milestone.
$kendo-gantt-summary-bgif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))
Description
Background color of the gantt summary.
$kendo-gantt-summary-progress-bgif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
Background color of the gantt summary progress.
$kendo-gantt-summary-selected-bgif($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))
Description
Selected background color of the gantt summary.
$kendo-gantt-summary-progress-selected-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Selected background color of the gantt summary progress.
$kendo-gantt-task-border-width0px
Description
Border width of the gantt task.
$kendo-gantt-task-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the gantt task.
$kendo-gantt-task-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the gantt task.
$kendo-gantt-task-bgif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))
Description
Background color of the gantt task.
$kendo-gantt-task-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the gantt task.
$kendo-gantt-task-borderinherit
Description
Border color of the gantt task.
$kendo-gantt-task-progress-bgif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
Background color of the gantt task progress.
$kendo-gantt-task-progress-hover-bgif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
Background hover color of the gantt task progress.
$kendo-gantt-task-selected-bgif($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))
Description
Selected background color of the gantt task.
$kendo-gantt-task-selected-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Selected text color of the gantt task.
$kendo-gantt-task-selected-bordertransparent
Description
Selected border color of the gantt task.
$kendo-gantt-task-progress-selected-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Selected background color of the gantt task progress.
$kendo-gantt-task-actions-padding-y$kendo-padding-md-y
Description
Vertical padding of the gantt task actions.
$kendo-gantt-task-actions-padding-x$kendo-padding-md-x
Description
Horizontal padding of the gantt task actions.
$kendo-gantt-planned-margin-y.45em
Description
Vertical margin of the gantt task planned line.
$kendo-gantt-planned-border-width2px
Description
Border width of the gantt task planned line.
$kendo-gantt-planned-line-height.85em
Description
Line height of the gantt task planned line.
$kendo-gantt-planned-dependency-margin-y.65em
Description
Vertical margin of the gantt planned dependencies.
$kendo-gantt-planned-moment-width6px
Description
Default width of the gantt planned line dot.
$kendo-gantt-planned-moment-height$kendo-gantt-planned-moment-width
Description
Default height of the gantt planned line dot.
$kendo-gantt-planned-moment-border-radiuscalc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 )
Description
Border radius of the gantt planned line dot.
$kendo-gantt-planned-moment-left-margin-xcalc( #{$kendo-gantt-planned-border-width} / 2 - #{$kendo-gantt-planned-moment-border-radius} )
Description
Horizontal margin of the gantt planned line dot.
$kendo-gantt-planned-milestone-moment-margin-xmath.div( $kendo-gantt-planned-moment-width, 2 )
Description
Horizontal margin of the gantt milestone planned line dot.
$kendo-gantt-planned-duration-height$kendo-gantt-planned-border-width
Description
Default height of the gantt planned line.
$kendo-gantt-planned-duration-hover-heightcalc( #{$kendo-gantt-planned-border-width} + 1px )
Description
Hover height of the gantt planned line.
$kendo-gantt-planned-single-drag-hint-top0
Description
Top position of the gantt drag hint.
$kendo-gantt-planned-summary-drag-hint-top.5em
Description
Top position of the gantt summary drag hint.
$kendo-gantt-planned-milestone-drag-hint-top.3em
Description
Top position of the gantt planned milestone drag hint.
$kendo-gantt-planned-offset-resize-handler-margin-x1.4em
Description
of the gantt.
$kendo-gantt-planned-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the gantt planned tooltip.
$kendo-gantt-planned-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Background color of the gantt planned tooltip.
$kendo-gantt-planned-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Border color of the gantt planned tooltip.
$kendo-gantt-delayed-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the gantt delayed task.
$kendo-gantt-delayed-bgif($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 ))
Description
Background color of the gantt delayed task.
$kendo-gantt-delayed-bg-lighterif($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110))
Description
Complement background color of the gantt delayed task.
$kendo-gantt-delayed-hover-bgif($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))
Description
Background hover color of the gantt delayed task.
$kendo-gantt-advanced-bgif($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 ))
Description
Background color of the gantt advanced task.
$kendo-gantt-advanced-bg-lighterif($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 ))
Description
Complement background color of the gantt advanced task.
$kendo-gantt-advanced-hover-bgif($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 ))
Description
Background hover color of the gantt advanced task.
$kendo-gantt-action-on-offset-textif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Text color of the gantt delayed task action.
$kendo-gantt-offset-resize-handler-top50%
Description
Top position of the gantt delayed task resize handler.
$kendo-gantt-validation-tooltip-width200px
Description
Default width of the gantt validation tooltip.
$kendo-gantt-validation-tooltip-label-width50px
Description
Default width of the gantt validation tooltip label.
$kendo-gantt-validation-tooltip-bordervar( --kendo-component-border, inherit )
Description
Border color of the gantt validation tooltip.
$kendo-gantt-validation-tooltip-valid-borderif($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 ))
Description
Border color of the gantt validation tooltip in valid state.
$kendo-gantt-validation-tooltip-invalid-borderif($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))
Description
Border color of the gantt validation tooltip in invalid state.

Grid

NameTypeDefault valueComputed value
$kendo-grid-border-width1px
Description
Border width of the grid.
$kendo-grid-border-stylesolid
Description
Border style of the grid.
$kendo-grid-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the grid.
$kendo-grid-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the grid.
$kendo-grid-line-heightvar( --kendo-line-height, normal )
Description
Line height of the grid.
$kendo-grid-padding-x$kendo-table-cell-padding-x
Description
Horizontal padding of the grid.
$kendo-grid-padding-y$kendo-table-cell-padding-y
Description
Vertical padding of the grid.
$kendo-grid-header-padding-x$kendo-grid-padding-x
Description
Horizontal padding of the grid header.
$kendo-grid-header-padding-y$kendo-grid-padding-y
Description
Vertical padding of the grid header.
$kendo-grid-grouping-header-padding-x$kendo-toolbar-md-padding-x
Description
Horizontal padding of the grid grouping header.
$kendo-grid-grouping-header-padding-y$kendo-toolbar-md-padding-y
Description
Vertical padding of the grid grouping header.
$kendo-grid-cell-padding-x$kendo-grid-padding-x
Description
Horizontal padding of the grid cell.
$kendo-grid-cell-padding-y$kendo-grid-padding-y
Description
Vertical padding of the grid cell.
$kendo-grid-filter-cell-padding-x$kendo-grid-padding-y
Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y$kendo-grid-filter-cell-padding-x
Description
Vertical padding of the grid filter cell.
$kendo-grid-edit-cell-padding-x$kendo-grid-cell-padding-x
Description
Horizontal padding of the grid edit cells.
$kendo-grid-edit-cell-padding-y5px
Description
Vertical padding of the grid edit cells.
$kendo-grid-group-drop-hint-size6px
Description
Size of the grid group drop clue.
$kendo-grid-group-drop-hint-line-size1px
Description
Line size of the grid group drop clue.
$kendo-grid-group-drop-hint-dot-size$kendo-grid-group-drop-hint-size
Description
Dot size of the grid group drop clue.
$kendo-grid-group-drop-hint-heightcalc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size} )
Description
Height of the grid group drop clue.
$kendo-grid-group-drop-hint-top2px
Description
Top offset of the grid group drop clue.
$kendo-grid-bg$kendo-table-bg
Description
Background color of the grid.
$kendo-grid-text$kendo-table-text
Description
Text color of the grid.
$kendo-grid-border$kendo-table-border
Description
Border color of the grid.
$kendo-grid-focus-shadow$kendo-list-item-focus-shadow
Description
Focus shadow of the grid.
$kendo-grid-alt-bg$kendo-table-alt-row-bg
Description
Background color of alternating rows in grid.
$kendo-grid-alt-text$kendo-table-alt-row-text
Description
Text color of alternating rows in grid.
$kendo-grid-alt-border$kendo-table-alt-row-border
Description
Border color of alternating rows in grid.
$kendo-grid-hover-bg$kendo-table-hover-bg
Description
Background color of hover rows in grid.
$kendo-grid-hover-text$kendo-table-hover-text
Description
Text color of hover rows in grid.
$kendo-grid-hover-border$kendo-table-hover-border
Description
Border color of hover rows in grid.
$kendo-grid-selected-bg$kendo-table-selected-bg
Description
Background color of selected rows in grid.
$kendo-grid-selected-text$kendo-table-selected-text
Description
Text color of selected rows in grid.
$kendo-grid-selected-border$kendo-table-selected-border
Description
Border color of selected rows in grid.
$kendo-grid-selected-hover-bg$kendo-table-selected-hover-bg
Description
Hover background color of selected rows in grid.
$kendo-grid-selected-hover-text$kendo-table-selected-hover-text
Description
Hover text color of selected rows in grid.
$kendo-grid-selected-hover-border$kendo-table-selected-hover-border
Description
Hover border color of selected rows in grid.
$kendo-grid-header-border-width-y$kendo-grid-border-width
Description
Vertical border width of the grid header.
$kendo-grid-header-border-width-x0
Description
Horizontal border width of the grid header.
$kendo-grid-header-font-sizeinherit
Description
Font size of the grid header.
$kendo-grid-header-font-weightvar( --kendo-font-weight-bold, normal )
Description
Font weight of the grid header.
$kendo-grid-header-menu-spacingvar( --kendo-icon-spacing, .5rem )
Description
Menu spacing of the grid header.
$kendo-grid-header-first-border-width$kendo-grid-border-width
Description
Border width of the first cell in the grid header.
$kendo-grid-header-bg$kendo-table-header-bg
Description
Background color of grid header.
$kendo-grid-header-text$kendo-table-header-text
Description
Text color of grid header.
$kendo-grid-header-border$kendo-table-header-border
Description
Border color of grid header.
$kendo-grid-header-icon-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
Background color of grid header icons.
$kendo-grid-footer-bg$kendo-table-footer-bg
$kendo-grid-footer-text$kendo-table-footer-text
Description
Text color of grid footer.
$kendo-grid-footer-border$kendo-table-footer-border
Description
Border color of grid footer.
$kendo-grid-selection-aggregates-bg$kendo-toolbar-bg
Description
Background color of the selection aggregates container
$kendo-grid-selection-aggregates-text$kendo-grid-text
Description
Text color of the selection aggregates container
$kendo-grid-selection-aggregates-border$kendo-grid-border
Description
Border color of the selection aggregates container
$kendo-grid-selection-aggregates-border-width$kendo-grid-border-width
Description
Border width of the selection aggregates container
$kendo-grid-selection-aggregates-spacingmap.get( $kendo-spacing, 2 )
Description
Spacing between the selection aggregates items
$kendo-grid-selection-aggregates-line-height$kendo-grid-line-height
Description
Line height of the selection aggregates container
$kendo-grid-selection-aggregates-font-weight$kendo-font-weight-bold
Description
Font weight of the selection aggregates container
$kendo-grid-grouping-header-bg$kendo-toolbar-bg
Description
Background color of the grid grouping header.
$kendo-grid-grouping-header-text$kendo-toolbar-text
Description
Text color of the grid grouping header.
$kendo-grid-grouping-header-border$kendo-toolbar-border
Description
Border color of the grid grouping header.
$kendo-grid-grouping-row-border-width-y$kendo-grid-border-width
Description
Vertical border width of the grid grouping row.
$kendo-grid-grouping-row-bg$kendo-table-group-row-bg
Description
Background color of the grid grouping row.
$kendo-grid-grouping-row-text$kendo-table-group-row-text
Description
Text color of the grid grouping row.
$kendo-grid-grouping-row-border$kendo-table-group-row-border
Description
Border color of the grid grouping row.
$kendo-grid-filter-cell-padding-x$kendo-grid-padding-y
Description
Horizontal padding of the grid filter cell.
$kendo-grid-filter-cell-padding-y$kendo-grid-filter-cell-padding-x
Description
Vertical padding of the grid filter cell.
$kendo-grid-toolbar-padding-x$kendo-toolbar-md-padding-x
Description
Horizontal padding of the grid toolbar.
$kendo-grid-toolbar-padding-y$kendo-toolbar-md-padding-y
Description
Vertical padding of the grid toolbar.
$kendo-grid-toolbar-spacing$kendo-toolbar-md-spacing
Description
Spacing of the grid toolbar.
$kendo-grid-toolbar-border-width$kendo-grid-border-width
Description
Border width of the grid toolbar.
$kendo-grid-cell-border-width-y$kendo-grid-border-width
Description
Vertical border width of the grid cell.
$kendo-grid-cell-border-width-x0px
Description
Horizontal border width of the grid cell.
$kendo-grid-sort-index-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the grid sort index.
$kendo-grid-sort-index-heightvar( --kendo-icon-size, 1rem )
Description
Default height of the grid sort index.
$kendo-grid-sort-index-spacing-ycalc( var( --kendo-icon-spacing, .5rem ) / 4 )
Description
Horizontal offset of the grid sort index.
$kendo-grid-sort-index-spacing-xmap.get( $kendo-spacing, 0.5 )
Description
Vertical offset of the grid sort index.
$kendo-grid-sort-icon-spacingvar( --kendo-icon-lg-spacing, .5rem )
Description
Spacing of the grid sort icon.
$kendo-grid-sort-indicator-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
Text color of the grid sort indicator.
$kendo-grid-sort-indicator-order-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Text color of the grid sort order indicator.
$kendo-grid-sorted-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
Background color of the sorted grid cells.
$kendo-grid-command-cell-padding-ycalc( #{$kendo-table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em} ) / 2 )
Description
Horizontal padding of the grid command cells.
$kendo-grid-command-cell-button-spacingmap.get( $kendo-spacing, 2 )
Description
Vertical padding of the grid command cells.
$kendo-grid-group-indicator-padding-x$kendo-button-md-padding-x
Description
Horizontal padding of the grid group indicator.
$kendo-grid-group-indicator-padding-y$kendo-button-md-padding-y
Description
Vertical padding of the grid group indicator.
$kendo-grid-group-indicator-border-width$kendo-button-border-width
Description
Border width of the grid group indicator.
$kendo-grid-group-indicator-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
Border radius of the grid group indicator.
$kendo-grid-group-indicator-gap$kendo-table-cell-padding-y
Description
Spacing of the grid group indicator.
$kendo-grid-group-indicator-textvar( --kendo-component-text, initial )
Description
Text color of the grid group indicator.
$kendo-grid-group-indicator-bgvar( --kendo-component-bg, initial )
Description
Background color of the grid group indicator.
$kendo-grid-group-indicator-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
Border color of the grid group indicator.
$kendo-grid-group-indicator-icon-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
Text color of the grid group indicator icon.
$kendo-grid-group-footer-border-width-y0px
Description
Horizontal border width of the grid group footer.
$kendo-grid-group-footer-border-width-x0px
Description
Vertical border width of the grid group footer.
$kendo-grid-group-drop-hint-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Text color of the grid group drop clue.
$kendo-grid-sticky-cell-border-width$kendo-grid-border-width
Description
Border width of the grid sticky cell.
$kendo-grid-sticky-bgvar( --kendo-component-bg, initial )
Description
Background color of the grid sticky cell.
$kendo-grid-sticky-text$kendo-grid-text
Description
Text color of the grid sticky cell.
$kendo-grid-sticky-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 ))
Description
Border color of the grid sticky cell.
$kendo-grid-sticky-alt-bg$kendo-grid-sticky-bg
Description
Alt background color of the grid sticky cell.
$kendo-grid-sticky-hover-bg$kendo-grid-hover-bg
Description
Hover background color of the grid sticky cell.
$kendo-grid-sticky-header-bg$kendo-grid-header-bg
Description
Background color of the grid sticky header.
$kendo-grid-sticky-header-text$kendo-grid-header-text
Description
Text color of the grid sticky header.
$kendo-grid-sticky-header-border$kendo-grid-sticky-border
Description
Border color of the grid sticky header.
$kendo-grid-sticky-footer-bg$kendo-grid-header-bg
Description
Background color of the grid sticky footer.
$kendo-grid-sticky-footer-hover-bg$kendo-grid-hover-bg
Description
Hover background color of the grid sticky footer.
$kendo-grid-sticky-selected-bg$kendo-grid-selected-bg
Description
Selected background color of the grid sticky cells.
$kendo-grid-sticky-selected-alt-bg$kendo-grid-sticky-selected-bg
Description
Alt selected background color of the grid sticky cells.
$kendo-grid-sticky-selected-hover-bgif($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg)
Description
Selected hover background color of the grid sticky cells.
$kendo-filter-menu-container-padding-ymap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the grid filter menu container.
$kendo-filter-menu-container-padding-xmap.get( $kendo-spacing, 3 )
Description
Vertical padding of the grid filter menu container.
$kendo-grid-column-menu-width230px
Description
Default width of the grid column menu.
$kendo-grid-column-menu-max-width320px
Description
Max width of the grid column menu.
$kendo-grid-column-menu-spacingmap.get( $kendo-spacing, 2 )
Description
Spacing of the grid column menu.
$kendo-grid-column-menu-shadowvar( --kendo-box-shadow-depth-4, none )
Description
Focus shadow of the grid column menu.
$kendo-grid-column-menu-bgvar( --kendo-component-bg, inherit )
Description
Background color of the grid column menu.
$kendo-grid-column-menu-textvar( --kendo-component-text, inherit )
Description
Text color of the grid column menu.
$kendo-grid-column-menu-bordervar( --kendo-component-border, inherit )
Description
Border color of the grid column menu.
$kendo-grid-column-menu-multicheck-font-size$kendo-list-md-font-size
Description
Font size of the grid column menu checkbox container.
$kendo-grid-column-menu-multicheck-line-height$kendo-list-md-line-height
Description
Line height of the grid column menu checkbox container.
$kendo-grid-column-menu-items-wrap-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the grid column menu items wrap.
$kendo-grid-column-menu-items-wrap-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the grid column menu items wrap.
$kendo-grid-column-menu-item-padding-y$kendo-list-md-item-padding-y
Description
Horizontal padding of the grid column menu item.
$kendo-grid-column-menu-item-padding-x$kendo-list-md-item-padding-x
Description
Vertical padding of the grid column menu item.
$kendo-grid-column-menu-item-gap$kendo-list-md-item-padding-x
Description
Spacing of the grid column menu item.
$kendo-grid-column-menu-item-icon-spacingvar( --kendo-icon-spacing, .5rem )
Description
Icon spacing of the grid column menu item.
$kendo-grid-column-menu-item-bg$kendo-list-item-bg
Description
Background color of the grid column menu item.
$kendo-grid-column-menu-item-text$kendo-list-item-text
Description
Text color of the grid column menu item.
$kendo-grid-column-menu-item-hover-bg$kendo-list-item-hover-bg
Description
Hover background color of the grid column menu item.
$kendo-grid-column-menu-item-hover-text$kendo-list-item-hover-text
Description
Hover text color of the grid column menu item.
$kendo-grid-column-menu-item-selected-bg$kendo-list-item-selected-bg
Description
Selected background color of the grid column menu item.
$kendo-grid-column-menu-item-selected-text$kendo-list-item-selected-text
Description
Selected text color of the grid column menu item.
$kendo-grid-column-menu-item-focus-shadow$kendo-list-item-focus-shadow
Description
Focus shadow of the grid column menu item.
$kendo-grid-column-menu-item-icon-text$kendo-list-item-icon-text
Description
Text color of the grid column menu item icon.
$kendo-grid-column-menu-group-header-padding-y$kendo-grid-column-menu-item-padding-y
Description
Vertical padding of the grid column menu group header.
$kendo-grid-column-menu-group-header-padding-x$kendo-grid-column-menu-item-padding-x
Description
Horizontal padding of the grid column menu group header.
$kendo-grid-column-menu-group-header-border-width1px
Description
Border width of the grid column menu group header.
$kendo-grid-column-menu-group-header-border-stylesolid
Description
Border style of the grid column menu group header.
$kendo-grid-column-menu-group-header-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the grid column menu group header.
$kendo-grid-column-menu-group-header-font-weightvar( --kendo-font-weight-bold, normal )
Description
Font weight of the grid column menu group header.
$kendo-grid-column-menu-group-header-line-heightvar( --kendo-line-height, normal )
Description
Line height of the grid column menu group header.
$kendo-grid-column-menu-group-header-text-transformuppercase
Description
Text transform of the grid column menu group header.
$kendo-grid-column-menu-group-header-bgvar( --kendo-component-bg, inherit )
Description
Background color of the grid column menu group.
$kendo-grid-column-menu-group-header-textvar( --kendo-component-text, inherit )
Description
Text color of the grid column menu group.
$kendo-grid-column-menu-group-header-bordervar( --kendo-component-border, inherit)
Description
Border color of the grid column menu group.
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-x0
Description
Horizontal padding of the tabstrip content in the grid tabbed column menu.
$kendo-grid-column-menu-tabbed-tabstrip-content-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the tabstrip content in the grid tabbed column menu.
$kendo-grid-column-menu-tabbed-bgvar( --kendo-base-bg, inherit )
Description
Background color of the grid tabbed column menu.
$kendo-grid-drag-cell-widthcalc( var( --kendo-icon-size, 1rem ) * 2.25 )
Description
Default width of the grid drag cell.
$kendo-grid-hierarchy-col-widthcalc( var( --kendo-icon-size, 1rem ) * 2 )
Description
Default width of the grid hierarchy cell.
$kendo-grid-filterable-icon-spacingcalc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} )
Description
Spacing of the grid filterable icon.
$kendo-grid-row-resizer-hover-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))
Description
Background color of the grid row resize indicator
$kendo-grid-row-resizer-active-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Active background color of the grid row indicator
$kendo-grid-row-resizer-heightmap.get( $kendo-spacing, 0.5 )
Description
Height of the grid row resize indicator

Icon

NameTypeDefault valueComputed value
$kendo-icon-size1rem
Description
Font sizes of the icons.
$kendo-icon-spacingmap.get( $kendo-spacing, 2 )
Description
Spacing around the icons.
$kendo-icon-paddingmap.get( $kendo-spacing, 1 )
Description
Padding of the action icons container.

Imageeditor

NameTypeDefault valueComputed value
$kendo-image-editor-bgvar( --kendo-component-bg, inherit )
Description
Background color of the imageeditor.
$kendo-image-editor-textvar( --kendo-component-text, inherit )
Description
Text color of the imageeditor.
$kendo-image-editor-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
Border color of the imageeditor.
$kendo-image-editor-margin-y0
Description
Vertical margin of the imageeditor.
$kendo-image-editor-margin-x0
Description
Horizontal margin of the imageeditor.
$kendo-image-editor-padding-y0
Description
Vertical padding of the imageeditor.
$kendo-image-editor-padding-x0
Description
Horizontal padding of the imageeditor.
$kendo-image-editor-border-width1px
Description
Border width of the imageeditor.
$kendo-image-editor-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the imageeditor.
$kendo-image-editor-line-heightvar( --kendo-line-height, inherit )
Description
Line height of the imageeditor.
$kendo-image-editor-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the imageeditor.
$kendo-image-editor-content-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))
Description
Imageeditor content background color.
$kendo-image-editor-content-textinherit
Description
Imageeditor content text color.
$kendo-image-editor-content-borderinherit
Description
Imageeditor content border color.
$kendo-image-editor-content-border-width0
Description
Imageeditor content border width.
$kendo-image-editor-action-pane-bgvar( --kendo-component-bg, inherit )
Description
Imageeditor action pane background color.
$kendo-image-editor-action-pane-textinherit
Description
Imageeditor action pane text color.
$kendo-image-editor-action-pane-borderinherit
Description
Imageeditor action pane border.
$kendo-image-editor-action-pane-padding-ymap.get( $kendo-spacing, 3 )
Description
Imageeditor action pane vertical padding.
$kendo-image-editor-action-pane-padding-xmap.get( $kendo-spacing, 3 )
Description
Imageeditor action pane horizontal padding.
$kendo-image-editor-action-pane-widthif( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )
Description
Imageeditor action pane width.
$kendo-image-editor-crop-bginherit
Description
Crop background color of the imageeditor.
$kendo-image-editor-crop-textinherit
Description
Crop text color of the imageeditor.
$kendo-image-editor-crop-borderif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Crop border color of the imageeditor.
$kendo-image-editor-crop-overlay-bgrgba( $kendo-color-black, .3 )
Description
Crop overlay background color of the imageeditor.
$kendo-image-editor-crop-border-width1px
Description
Crop border width of the imageeditor.
$kendo-image-editor-crop-border-styledashed
Description
Crop border style of the imageeditor.
$kendo-image-editor-resize-handle-margin-x1px
Description
Imageeditor resize handle horizontal margin.
$kendo-image-editor-resize-handle-margin-y1px
Description
Imageeditor resize handle vertical margin.
$kendo-image-editor-resize-handle-border-width0 2px 2px 0
Description
Imageeditor resize handle border width.
$kendo-image-editor-resize-handle-sizemap.get( $kendo-spacing, 4 )
Description
Imageeditor resize handle size.
$kendo-image-editor-resize-top-offsetmath.div( $kendo-image-editor-resize-handle-size, 2 )
Description
Imageeditor resize handle top offset.
$kendo-image-editor-resize-left-offsetmath.div( $kendo-image-editor-resize-handle-size, 2 )
Description
Imageeditor resize handle left offset.

Input

NameTypeDefault valueComputed value
$kendo-input-width100%
Description
The width of the Input components.
$kendo-input-border-width1px
Description
The width of the border around the Input components.
$kendo-input-border-height( $kendo-input-border-width * 2 )
Description
The height of the border around the Input components.
$kendo-input-sm-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the small Input components.
$kendo-input-md-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the medium Input components.
$kendo-input-lg-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the large Input components.
$kendo-input-sm-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the small Input components.
$kendo-input-md-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the medium Input components.
$kendo-input-lg-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the large Input components.
$kendo-input-sm-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the small Input components.
$kendo-input-md-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the medium Input components.
$kendo-input-lg-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the large Input components.
$kendo-input-sm-line-heightvar( --kendo-line-height, normal )
Description
The line height of the small Input components.
$kendo-input-md-line-heightvar( --kendo-line-height, normal )
Description
The line height of the medium Input components.
$kendo-input-lg-line-heightvar( --kendo-line-height, normal )
Description
The line height of the large Input components.
$kendo-input-sm-button-widthcalc( #{$kendo-button-sm-line-height} * 1em + #{$kendo-button-sm-padding-y} * 2 )
Description
The width of the small Input button.
$kendo-input-md-button-widthcalc( #{$kendo-button-md-line-height} * 1em + #{$kendo-button-md-padding-y} * 2 )
Description
The width of the medium Input button.
$kendo-input-lg-button-widthcalc( #{$kendo-button-lg-line-height} * 1em + #{$kendo-button-lg-padding-y} * 2 )
Description
The width of the large Input button.
$kendo-input-button-border-width1px
Description
The border width of the Input button.
$kendo-input-sm-spinner-width$kendo-input-sm-button-width
Description
The width of the small Input spinner button.
$kendo-input-md-spinner-width$kendo-input-md-button-width
Description
The width of the medium Input spinner button.
$kendo-input-lg-spinner-width$kendo-input-lg-button-width
Description
The width of the large Input spinner button.
$kendo-input-spinner-icon-offsetnull
Description
The icon offset of the Input spinner button.
$kendo-input-solid-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the solid Input components.
$kendo-input-solid-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the solid Input components.
$kendo-input-solid-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the solid Input components.
$kendo-input-solid-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the hovered solid Input components.
$kendo-input-solid-hover-bg$kendo-input-solid-bg
Description
The background color of the hovered solid Input components.
$kendo-input-solid-hover-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the hovered solid Input components.
$kendo-input-solid-focus-text$kendo-input-solid-text
Description
The text color of the focused solid Input components.
$kendo-input-solid-focus-bg$kendo-input-solid-bg
Description
The background color of the focused solid Input components.
$kendo-input-solid-focus-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the focused solid Input components.
$kendo-input-solid-hover-focus-text$kendo-input-solid-focus-text
Description
The text color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-bg$kendo-input-solid-focus-bg
Description
The background color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-border$kendo-input-solid-focus-border
Description
The border color of the hovered and focused solid Input components.
$kendo-input-solid-disabled-text$kendo-disabled-text
Description
The text color of the disabled solid Input components.
$kendo-input-solid-disabled-bg$kendo-disabled-bg
Description
The background color of the disabled solid Input components.
$kendo-input-solid-disabled-border$kendo-disabled-border
Description
The border color of the disabled solid Input components.
$kendo-input-outline-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the outline Input components.
$kendo-input-outline-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the outline Input components.
$kendo-input-outline-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the outline Input components.
$kendo-input-outline-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the hovered outline Input components.
$kendo-input-outline-hover-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the hovered outline Input components.
$kendo-input-outline-hover-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the hovered outline Input components.
$kendo-input-outline-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the focused outline Input components.
$kendo-input-outline-focus-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the focused outline Input components.
$kendo-input-outline-focus-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the focused outline Input components.
$kendo-input-outline-hover-focus-text$kendo-input-outline-focus-text
Description
The text color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-bg$kendo-input-outline-focus-bg
Description
The background color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-border$kendo-input-outline-focus-border
Description
The border color of the hovered and focused outline Input components.
$kendo-input-outline-disabled-text$kendo-disabled-text
Description
The text color of the disabled outline Input components.
$kendo-input-outline-disabled-bgnone
Description
The background color of the disabled outline Input components.
$kendo-input-outline-disabled-border$kendo-disabled-text
Description
The border color of the disabled outline Input components.
$kendo-input-flat-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the flat Input components.
$kendo-input-flat-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the flat Input components.
$kendo-input-flat-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the flat Input components.
$kendo-input-flat-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the hovered flat Input components.
$kendo-input-flat-hover-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the hovered flat Input components.
$kendo-input-flat-hover-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the hovered flat Input components.
$kendo-input-flat-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the focused flat Input components.
$kendo-input-flat-focus-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the focused flat Input components.
$kendo-input-flat-focus-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the focused flat Input components.
$kendo-input-flat-hover-focus-text$kendo-input-flat-focus-text
Description
The text color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-bg$kendo-input-flat-focus-bg
Description
The background color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-border$kendo-input-flat-focus-border
Description
The border color of the hovered and focused flat Input components.
$kendo-input-flat-disabled-text$kendo-disabled-text
Description
The text color of the disabled flat Input components.
$kendo-input-flat-disabled-bgnone
Description
The background color of the disabled flat Input components.
$kendo-input-flat-disabled-border$kendo-disabled-text
Description
The border color of the disabled flat Input components.
$kendo-picker-solid-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the solid Picker components.
$kendo-picker-solid-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the solid Picker components.
$kendo-picker-solid-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default
Description
The border color of the solid Picker components.
$kendo-picker-solid-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the hovered solid Picker components.
$kendo-picker-solid-hover-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of hovered the solid Picker components.
$kendo-picker-solid-hover-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the hovered solid Picker components.
$kendo-picker-solid-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the focused solid Picker components.
$kendo-picker-solid-focus-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the focused solid Picker components.
$kendo-picker-solid-focus-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the focused solid Picker components.
$kendo-picker-solid-hover-focus-text$kendo-picker-solid-focus-text
Description
The text color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-bg$kendo-picker-solid-focus-bg
Description
The background color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-border$kendo-picker-solid-focus-border
Description
The border color of the hovered and focused solid Picker components.
$kendo-picker-solid-disabled-text$kendo-disabled-text
Description
The text color of the disabled solid Picker components.
$kendo-picker-solid-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The background color of the disabled solid Picker components.
$kendo-picker-solid-disabled-border$kendo-disabled-border
Description
The border color of the disabled solid Picker components.
$kendo-picker-outline-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the outline Picker components.
$kendo-picker-outline-bgnone
Description
The background color of the outline Picker components.
$kendo-picker-outline-borderif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the outline Picker components.
$kendo-picker-outline-hover-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the hovered outline Picker components.
$kendo-picker-outline-hover-bgif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The background color of the hovered outline Picker components.
$kendo-picker-outline-hover-border$kendo-picker-outline-hover-bg!default
Description
The border color of the hovered outline Picker components.
$kendo-picker-outline-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the focused outline Picker components.
$kendo-picker-outline-focus-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the focused outline Picker components.
$kendo-picker-outline-focus-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the focused outline Picker components.
$kendo-picker-outline-hover-focus-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-bgif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The background color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the hovered and focused outline Picker components.
$kendo-picker-outline-disabled-text$kendo-disabled-text
Description
The text color of the disabled outline Picker components.
$kendo-picker-outline-disabled-bgnone
Description
The background color of the disabled outline Picker components.
$kendo-picker-outline-disabled-border$kendo-picker-outline-disabled-text!default
Description
The border color of the disabled outline Picker components.
$kendo-picker-flat-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the flat Picker components.
$kendo-picker-flat-bgnone
Description
The background color of the flat Picker components.
$kendo-picker-flat-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the flat Picker components.
$kendo-picker-flat-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the hovered flat Picker components.
$kendo-picker-flat-hover-bgif($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the hovered flat Picker components.
$kendo-picker-flat-hover-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the hovered flat Picker components.
$kendo-picker-flat-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the focused flat Picker components.
$kendo-picker-flat-focus-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the focused flat Picker components.
$kendo-picker-flat-focus-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the focused flat Picker components.
$kendo-picker-flat-hover-focus-text$kendo-picker-flat-hover-text
Description
The text color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-bg$kendo-picker-flat-hover-bg
Description
The background color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-border$kendo-picker-flat-border
Description
The border color of the hovered and focused flat Picker components.
$kendo-picker-flat-disabled-text$kendo-disabled-text
Description
The text color of the disabled flat Picker components.
$kendo-picker-flat-disabled-bgnone
Description
The background color of the disabled flat Picker components.
$kendo-picker-flat-disabled-border$kendo-picker-flat-disabled-text
Description
The border color of the disabled flat Picker components.
$kendo-input-sizes( 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, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-md-padding-y * 2} ), button-padding-x: $kendo-input-sm-padding-y, button-padding-y: $kendo-input-sm-padding-y, button-width: $kendo-input-sm-button-width ), 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, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-sm-padding-y * 2} ), button-padding-x: $kendo-input-md-padding-y, button-padding-y: $kendo-input-md-padding-y, button-width: $kendo-input-md-button-width ), 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, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-lg-padding-y * 2} ), button-padding-x: $kendo-input-lg-padding-y, button-padding-y: $kendo-input-lg-padding-y, button-width: $kendo-input-lg-button-width ) )
Description
The sizes map for the Input components.
$kendo-input-theme-colors( input: ( solid: ( text: $kendo-input-solid-text, bg: $kendo-input-solid-bg, border: $kendo-input-solid-border,
        hover-text: $kendo-input-solid-hover-text,
        hover-bg: $kendo-input-solid-hover-bg,
        hover-border: $kendo-input-solid-hover-border,

        focus-text: $kendo-input-solid-focus-text,
        focus-bg: $kendo-input-solid-focus-bg,
        focus-border: $kendo-input-solid-focus-border,

        hover-focus-text: $kendo-input-solid-hover-focus-text,
        hover-focus-bg: $kendo-input-solid-hover-focus-bg,
        hover-focus-border: $kendo-input-solid-hover-focus-border,

        disabled-text: $kendo-input-solid-disabled-text,
        disabled-bg: $kendo-input-solid-disabled-bg,
        disabled-border: $kendo-input-solid-disabled-border

    ),
    outline: (
        text: $kendo-input-outline-text,
        bg: $kendo-input-outline-bg,
        border: $kendo-input-outline-border,

        hover-text: $kendo-input-outline-hover-text,
        hover-bg: $kendo-input-outline-hover-bg,
        hover-border: $kendo-input-outline-hover-border,

        focus-text: $kendo-input-outline-focus-text,
        focus-bg: $kendo-input-outline-focus-bg,
        focus-border: $kendo-input-outline-focus-border,

        hover-focus-text: $kendo-input-outline-hover-focus-text,
        hover-focus-bg: $kendo-input-outline-hover-focus-bg,
        hover-focus-border: $kendo-input-outline-hover-focus-border,

        disabled-text: $kendo-input-outline-disabled-text,
        disabled-bg: $kendo-input-outline-disabled-bg,
        disabled-border: $kendo-input-outline-disabled-border
    ),
    flat: (
        text: $kendo-input-flat-text,
        bg: $kendo-input-flat-bg,
        border: $kendo-input-flat-border,

        hover-text: $kendo-input-flat-hover-text,
        hover-bg: $kendo-input-flat-hover-bg,
        hover-border: $kendo-input-flat-hover-border,

        focus-text: $kendo-input-flat-focus-text,
        focus-bg: $kendo-input-flat-focus-bg,
        focus-border: $kendo-input-flat-focus-border,

        hover-focus-tex: $kendo-input-flat-hover-focus-text,
        hover-focus-bg: $kendo-input-flat-hover-focus-bg,
        hover-focus-border: $kendo-input-flat-hover-focus-border,

        disabled-text: $kendo-input-flat-disabled-text,
        disabled-bg: $kendo-input-flat-disabled-bg,
        disabled-border: $kendo-input-flat-disabled-border
    )
),
picker: (
    solid: (
        text: $kendo-picker-solid-text,
        bg: $kendo-picker-solid-bg,
        border: $kendo-picker-solid-border,

        hover-text: $kendo-picker-solid-hover-text,
        hover-bg: $kendo-picker-solid-hover-bg,
        hover-border: $kendo-picker-solid-hover-border,

        focus-text: $kendo-picker-solid-focus-text,
        focus-bg: $kendo-picker-solid-focus-bg,
        focus-border: $kendo-picker-solid-focus-border,

        hover-focus-tex: $kendo-picker-solid-hover-focus-text,
        hover-focus-bg: $kendo-picker-solid-hover-focus-bg,
        hover-focus-border: $kendo-picker-solid-hover-focus-border,

        disabled-text: $kendo-picker-solid-disabled-text,
        disabled-bg: $kendo-picker-solid-disabled-bg,
        disabled-border: $kendo-picker-solid-disabled-border
    ),
    outline: (
        text: $kendo-picker-outline-text,
        bg: $kendo-picker-outline-bg,
        border: $kendo-picker-outline-border,

        hover-text: $kendo-picker-outline-hover-text,
        hover-bg: $kendo-picker-outline-hover-bg,
        hover-border: $kendo-picker-outline-hover-border,

        focus-text: $kendo-picker-outline-focus-text,
        focus-bg: $kendo-picker-outline-focus-bg,
        focus-border: $kendo-picker-outline-focus-border,

        hover-focus-text: $kendo-picker-outline-hover-focus-text,
        hover-focus-bg: $kendo-picker-outline-hover-focus-bg,
        hover-focus-border: $kendo-picker-outline-hover-focus-border,

        disabled-text: $kendo-picker-outline-disabled-text,
        disabled-bg: $kendo-picker-outline-disabled-bg,
        disabled-border: $kendo-picker-outline-disabled-border
    ),
    flat: (
        text: $kendo-picker-flat-text,
        bg: $kendo-picker-flat-bg,
        border: $kendo-picker-flat-border,

        hover-text: $kendo-picker-flat-hover-text,
        hover-bg: $kendo-picker-flat-hover-bg,
        hover-border: $kendo-picker-flat-hover-border,

        focus-text: $kendo-picker-flat-focus-text,
        focus-bg: $kendo-picker-flat-focus-bg,
        focus-border: $kendo-picker-flat-focus-border,

        hover-focus-tex: $kendo-picker-flat-hover-focus-text,
        hover-focus-bg: $kendo-picker-flat-hover-focus-bg,
        hover-focus-border: $kendo-picker-flat-hover-focus-border,

        disabled-text: $kendo-picker-flat-disabled-text,
        disabled-bg: $kendo-picker-flat-disabled-bg,
        disabled-border: $kendo-picker-flat-disabled-border
    )
)

)

Description
Colors map of the input.
$kendo-input-prefix-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the Input prefix.
$kendo-input-suffix-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the Input suffix.
$kendo-input-separator-textk-get-theme-color-var( neutral-30 )
Description
The color of the Input separator.
$kendo-input-prefix-textk-get-theme-color-var( neutral-130 )
Description
The text color of the Input prefix.
$kendo-input-suffix-textk-get-theme-color-var( neutral-130 )
Description
The text color of the Input suffix.
$kendo-input-prefix-disabled-textk-get-theme-color-var( neutral-60 )
Description
The text color of the disabled Input prefix.
$kendo-input-suffix-disabled-textk-get-theme-color-var( neutral-60 )
Description
The text color of the disabled Input suffix.
$kendo-input-invalid-bordervar( --kendo-invalid-border, #{$kendo-invalid-border} )
Description
The border color of the invalid Input components.
$kendo-input-invalid-textvar( --kendo-invalid-text, #{$kendo-invalid-text} )
Description
The text color of the invalid Input components.
$kendo-input-placeholder-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Input placeholder.
$kendo-input-placeholder-opacity1
Description
The opacity of the Input placeholder.
$kendo-input-clear-value-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The color of the Input clear value icon.
$kendo-input-clear-value-opacity.6
Description
The opacity of the Input clear value icon.
$kendo-input-clear-value-hover-textinherit
Description
The color of the hovered Input clear value icon.
$kendo-input-clear-value-hover-opacity1
Description
The opacity of the hovered Input clear value icon.

List

NameTypeDefault valueComputed value
$kendo-list-font-familyvar( --kendo-font-family, inherit)
Description
The font family of the List components.
$kendo-list-sm-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the List component.
$kendo-list-sm-line-heightvar( --kendo-line-height, normal )
Description
The line height of the List component.
$kendo-list-sm-header-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the List header.
$kendo-list-sm-header-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the List header.
$kendo-list-header-border-width0
Description
The border width of the List header.
$kendo-list-sm-header-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the List header.
$kendo-list-sm-header-line-heightvar( --kendo-line-height, normal )
Description
The line height of the List header.
$kendo-list-header-font-weightvar( --kendo-font-weight-bold, normal )
Description
The font weight of the List header.
$kendo-list-sm-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the List items.
$kendo-list-sm-item-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the List items.
$kendo-list-sm-item-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the List items.
$kendo-list-sm-item-line-heightvar( --kendo-line-height, normal )
Description
The line height of the List items.
$kendo-list-item-group-label-sm-font-sizevar( --kendo-font-size-xs, inherit )
Description
The font size of the List item group label.
$kendo-list-sm-group-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the List group items.
$kendo-list-sm-group-item-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the List group items.
$kendo-list-item-group-label-sm-padding-xmap.get( $kendo-spacing, 0.5 )
Description
The horizontal padding of the List item group label.
$kendo-list-item-group-label-sm-padding-ymap.get( $kendo-spacing, 0.5 )
Description
The vertical padding of the List item group label.
$kendo-list-group-item-border-width1px 0 0
Description
The border width of the List group items.
$kendo-list-sm-group-item-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the List group items.
$kendo-list-sm-group-item-line-heightvar( --kendo-line-height, normal )
Description
The line height of the List group items.
$kendo-list-group-item-font-weightvar( --kendo-font-weight-bold, normal )
Description
The font weight of the List group item.
$kendo-list-item-icon-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the List item icon
$kendo-list-sizes( 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: $kendo-list-sm-header-font-size, header-line-height: $kendo-list-sm-header-line-height, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: $kendo-list-sm-item-font-size, item-line-height: $kendo-list-sm-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y, item-group-label-font-size: $kendo-list-item-group-label-sm-font-size, 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: $kendo-list-sm-group-item-font-size, group-item-line-height: $kendo-list-sm-group-item-line-height ), 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: $kendo-list-md-header-font-size, header-line-height: $kendo-list-md-header-line-height, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: $kendo-list-md-item-font-size, item-line-height: $kendo-list-md-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y, item-group-label-font-size: $kendo-list-item-group-label-md-font-size, 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: $kendo-list-md-group-item-font-size, group-item-line-height: $kendo-list-md-group-item-line-height ), 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: $kendo-list-lg-header-font-size, header-line-height: $kendo-list-lg-header-line-height, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: $kendo-list-lg-item-font-size, item-line-height: $kendo-list-lg-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y, item-group-label-font-size: $kendo-list-item-group-label-lg-font-size, 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: $kendo-list-lg-group-item-font-size, group-item-line-height: $kendo-list-lg-group-item-line-height ) )
Description
The map with the sizes of the List.
$kendo-list-bgvar( --kendo-component-bg, transparent )
Description
The background color of the List component.
$kendo-list-textvar( --kendo-component-text, inherit )
Description
The text color of the List component.
$kendo-list-bordervar( --kendo-component-border, inherit )
Description
The border color of the List component.
$kendo-list-header-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the List header.
$kendo-list-header-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the List header.
$kendo-list-header-borderinherit
Description
The border color of the List header.
$kendo-list-header-shadow$kendo-box-shadow-depth-3
Description
The box shadow of the List header.
$kendo-list-item-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the List items.
$kendo-list-item-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the List items.
$kendo-list-item-hover-bgif($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the hovered List items.
$kendo-list-item-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the hovered List items.
$kendo-list-item-focus-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the focused List items.
$kendo-list-item-focus-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the focused List items.
$kendo-list-item-focus-shadowinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
Description
The box shadow of the focused List items.
$kendo-list-item-selected-bgif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 ))
Description
The background color of the selected List items.
$kendo-list-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the selected List items.
$kendo-list-item-selected-hover-bgif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 ))
Description
The background color of the selected hovered List items.
$kendo-list-item-selected-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the selected hovered List items.
$kendo-list-item-disabled-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the disabled List items.
$kendo-list-item-disabled-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))
Description
The text color of the disabled List items.
$kendo-list-group-item-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the List group items.
$kendo-list-group-item-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the List group items.
$kendo-list-group-item-borderinherit
Description
The border color of the List group items.
$kendo-list-group-item-shadownone
Description
The base shadow of the List group items.
$kendo-list-no-data-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the 'No Data' text.
$kendo-list-option-label-text$kendo-subtle-text
Description
The color of the 'Option Label' text.
$kendo-list-option-label-disabled-text$kendo-disabled-text
Description
The color of the disabled 'Option Label' text.

Listbox

NameTypeDefault valueComputed value
$kendo-listbox-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the ListBox elements.
$kendo-listbox-button-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the ListBox buttons.
$kendo-listbox-width10em
Description
WThe width of the ListBox.
$kendo-listbox-height200px
Description
The height of the ListBox.
$kendo-listbox-border-width1px
Description
The width of the border around the ListBox.
$kendo-listbox-font-familyvar( --kendo-font-family, normal )
Description
The font family of the ListBox.
$kendo-listbox-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the ListBox.
$kendo-listbox-line-heightvar( --kendo-line-height, normal )
Description
The line height of the ListBox.
$kendo-listbox-textvar( --kendo-component-text, inherit )
Description
The text color of the ListBox.
$kendo-listbox-bgvar( --kendo-component-bg, transparent )
Description
The background color of the ListBox.
$kendo-listbox-bordervar( --kendo-component-border, inherit )
Description
The border color of the ListBox.
$kendo-listbox-drop-hint-width1px
Description
The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the ListBox drop hint.

Listgroup

NameTypeDefault valueComputed value
$kendo-listgroup-border-width1px
Description
Border width of the listgroup.
$kendo-listgroup-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
Border radius of the listgroup.
$kendo-listgroup-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the listgroup.
$kendo-listgroup-line-heightvar( --kendo-line-height, normal )
Description
Line height of the listgroup.
$kendo-listgroup-bgvar( --kendo-component-bg, transparent )
Description
Background color of the listgroup component.
$kendo-listgroup-textvar( --kendo-component-text, inherit )
Description
Text color of the listgroup component.
$kendo-listgroup-bordervar( --kendo-component-border, inherit )
Description
Border color of the listgroup component.
$kendo-listgroup-item-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the listgroup items.
$kendo-listgroup-item-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the listgroup items.
$kendo-listgroup-item-border-width1px
Description
Border width of the listgroup item.

Listview

NameTypeDefault valueComputed value
$kendo-listview-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal padding of the ListView.
$kendo-listview-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the ListView.
$kendo-listview-border-width1px
Description
The width of the border around bordered ListView.
$kendo-listview-header-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the ListView header.
$kendo-listview-header-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the ListView header.
$kendo-listview-footer-padding-x$kendo-listview-header-padding-x
Description
The horizontal padding of the ListView footer.
$kendo-listview-footer-padding-y$kendo-listview-header-padding-y
Description
The vertical padding of the ListView footer.
$kendo-listview-item-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal padding of the ListView items.
$kendo-listview-item-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the ListView items.
$kendo-listview-font-familyvar( --kendo-font-family, initial )
Description
The font family of the ListView.
$kendo-listview-font-sizevar( --kendo-font-size, initial )
Description
The font size of the ListView.
$kendo-listview-line-heightvar( --kendo-line-height, initial )
Description
The line height of the ListView.
$kendo-listview-grid-gapmap.get( $kendo-spacing, 0 )
Description
The gap between items of ListView with grid layout.
$kendo-listview-textvar( --kendo-component-text, initial )
Description
The text color of the ListView.
$kendo-listview-bgvar( --kendo-component-bg, initial )
Description
The background color of the ListView.
$kendo-listview-bordervar( --kendo-component-border, initial )
Description
The border color of the ListView.
$kendo-listview-header-textinitial
Description
The text color of the ListView header.
$kendo-listview-header-bginitial
Description
The background color of the ListView header.
$kendo-listview-header-border$kendo-listview-border
Description
The border color of the ListView header.
$kendo-listview-footer-textinitial
Description
The text color of the ListView footer.
$kendo-listview-footer-bginitial
Description
The background color of the ListView footer.
$kendo-listview-item-selected-textinitial
Description
The text color of the selected ListView items.
$kendo-listview-item-selected-bgif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the selected ListView items.
$kendo-listview-item-focus-textinitial
Description
The text color of the focused ListView items.
$kendo-listview-item-focus-bginitial
Description
The background color of the focused ListView items.
$kendo-listview-item-focus-shadowvar( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow )
Description
The box shadow of the focused ListView items.

Loader

NameTypeDefault valueComputed value
$kendo-loader-segment-border-radius50%
Description
The border radius of the Loader segment.
$kendo-loader-sm-segment-sizemap.get( $kendo-spacing, 1 )
Description
The size of the small Loader segment.
$kendo-loader-md-segment-sizemap.get( $kendo-spacing, 2 )
Description
The size of the medium Loader segment.
$kendo-loader-lg-segment-sizemap.get( $kendo-spacing, 4 )
Description
The size of the large Loader segment.
$kendo-loader-sm-padding-xmath.div( $kendo-loader-sm-segment-size, 2 )
Description
The horizontal padding of the small Loader.
$kendo-loader-md-padding-xmath.div( $kendo-loader-md-segment-size, 2 )
Description
The horizontal padding of the medium Loader.
$kendo-loader-lg-padding-xmath.div( $kendo-loader-lg-segment-size, 2 )
Description
The horizontal padding of the large Loader.
$kendo-loader-sm-padding-ymath.div( $kendo-loader-sm-segment-size, 2 )
Description
The vertical padding of the small Loader.
$kendo-loader-md-padding-ymath.div( $kendo-loader-md-segment-size, 2 )
Description
The vertical padding of the medium Loader.
$kendo-loader-lg-padding-ymath.div( $kendo-loader-lg-segment-size, 2 )
Description
The vertical padding of the large Loader.
$kendo-loader-equilateral-height.8660
Description
The equilateral height of the Loader.
$kendo-loader-sm-spinner-3-width( $kendo-loader-sm-segment-size * 4 )
Description
The width of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-width( $kendo-loader-md-segment-size * 4 )
Description
The width of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-width( $kendo-loader-lg-segment-size * 4 )
Description
The width of the large spinner-3 Loader.
$kendo-loader-sm-spinner-3-height( $kendo-loader-sm-spinner-3-width * $kendo-loader-equilateral-height )
Description
The height of the small spinner-3 Loader.
$kendo-loader-md-spinner-3-height( $kendo-loader-md-spinner-3-width * $kendo-loader-equilateral-height )
Description
The height of the medium spinner-3 Loader.
$kendo-loader-lg-spinner-3-height( $kendo-loader-lg-spinner-3-width * $kendo-loader-equilateral-height )
Description
The height of the large spinner-3 Loader.
$kendo-loader-sm-spinner-4-width( $kendo-loader-sm-segment-size * 4 )
Description
The width of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-width( $kendo-loader-md-segment-size * 4 )
Description
The width of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-width( $kendo-loader-lg-segment-size * 4 )
Description
The width of the large spinner-4 Loader.
$kendo-loader-sm-spinner-4-height$kendo-loader-sm-spinner-4-width
Description
The height of the small spinner-4 Loader.
$kendo-loader-md-spinner-4-height$kendo-loader-md-spinner-4-width
Description
The height of the medium spinner-4 Loader.
$kendo-loader-lg-spinner-4-height$kendo-loader-lg-spinner-4-width
Description
The height of the large spinner-4 Loader.
$kendo-loader-container-panel-border-width1px
Description
The border width of the container panel.
$kendo-loader-container-panel-border-stylesolid
Description
The border style of the container panel.
$kendo-loader-container-panel-border-colorvar( --kendo-component-border, initial )
Description
The border color of the container panel.
$kendo-loader-container-panel-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the container panel.
$kendo-loader-container-panel-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the container panel.
$kendo-loader-sm-container-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the small Loader container.
$kendo-loader-md-container-padding-xmap.get( $kendo-spacing, 5 )
Description
The horizontal padding of the medium Loader container.
$kendo-loader-lg-container-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the large Loader container.
$kendo-loader-sm-container-padding-ymap.get( $kendo-spacing, 4 )
Description
The vertical padding of the small Loader container.
$kendo-loader-md-container-padding-ymap.get( $kendo-spacing, 5 )
Description
The vertical padding of the medium Loader container.
$kendo-loader-lg-container-padding-ymap.get( $kendo-spacing, 6 )
Description
The vertical padding of the large Loader container.
$kendo-loader-sm-container-gapmap.get( $kendo-spacing, 1 )
Description
The gap of the small Loader container.
$kendo-loader-md-container-gapmap.get( $kendo-spacing, 2 )
Description
The gap of the medium Loader container.
$kendo-loader-lg-container-gapmap.get( $kendo-spacing, 3 )
Description
The gap of the large Loader container.
$kendo-loader-sm-container-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the small Loader container.
$kendo-loader-md-container-font-sizevar( --kendo-font-size-md, inherit )
Description
The font size of the medium Loader container.
$kendo-loader-lg-container-font-sizevar( --kendo-font-size-lg, inherit )
Description
The font size of the large Loader container.
$kendo-loader-brand-colors( primary: primary, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, error: error, success: success, warning: warning, info: info )
Description
The theme variations for the Loader.
$kendo-loader-theme-colors()
Description
The theme colors map for the Loader variations.

Map

NameTypeDefault valueComputed value
$kendo-map-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the map.
$kendo-map-line-heightvar( --kendo-line-height, normal )
Description
Line height of the map.
$kendo-map-font-familyvar( --kendo-font-family, normal )
Description
Font family of the map.
$kendo-map-bgvar( --kendo-component-bg, transparent )
Description
Background color of the map.
$kendo-map-textvar( --kendo-component-text, inherit )
Description
Text color of the map.
$kendo-map-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
Border color of the map.
$kendo-map-border-width0px
Description
Border width of the map.
$kendo-map-height600px
Description
Height of the map.
$kendo-map-navigator-margin-xmap.get( $kendo-spacing, 4 )
Description
Map navigator horizontal margin.
$kendo-map-navigator-margin-ymap.get( $kendo-spacing, 4 )
Description
Map navigator vertical margin.
$kendo-map-navigator-paddingmap.get( $kendo-spacing, 0.5 )
Description
Map navigator padding.
$kendo-map-navigator-widthcalc( var( --kendo-icon-size) * 3 + #{$kendo-map-navigator-padding * 2} )
Description
Map navigator width.
$kendo-map-navigator-height$kendo-map-navigator-width
Description
Map navigator height.
$kendo-map-navigator-border-width1px
Description
Map navigator border width.
$kendo-map-navigator-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Map navigator background color.
$kendo-map-navigator-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
Map navigator text color.
$kendo-map-navigator-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
Map navigator border color.
$kendo-map-zoom-control-marginmap.get( $kendo-spacing, 4 )
Description
Map zoom control margin.
$kendo-map-zoom-control-button-padding-x$kendo-button-md-padding-y
Description
Map zoom control horizontal padding.
$kendo-map-zoom-control-button-padding-y$kendo-map-zoom-control-button-padding-x
Description
Map zoom control vertical padding.
$kendo-map-attribution-padding-x$kendo-padding-sm-x
Description
Map attribution horizontal padding.
$kendo-map-attribution-padding-y$kendo-padding-sm-y
Description
Map attribution vertical padding.
$kendo-map-attribution-font-sizecalc( #{$kendo-map-font-size} * .75 )
Description
Map attribution font size.
$kendo-map-attribution-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Map attribution background color.
$kendo-map-marker-fillif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Map marker fill color.

Mediaplayer

NameTypeDefault valueComputed value
$kendo-media-player-border-width1px
Description
Border width of the mediaplayer.
$kendo-media-player-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the mediaplayer.
$kendo-media-player-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the mediaplayer.
$kendo-media-player-line-heightvar( --kendo-line-height, normal )
Description
Line height of the mediaplayer.
$kendo-media-player-bgvar( --kendo-component-bg, inherit )
Description
Background color of the mediaplayer.
$kendo-media-player-textvar( --kendo-component-text, inherit )
Description
Text color of the mediaplayer.
$kendo-media-player-bordervar( --kendo-component-border, inherit )
Description
Border color of the mediaplayer.
$kendo-media-player-overlay-bgif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Mediaplayer overlay background color.
$kendo-media-player-quality-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
Mediaplayer quality button border color.
$kendo-media-player-title-font-sizevar( --kendo-font-size-xl, inherit )
Description
Media player title font size.
$kendo-media-player-titlebar-padding-xmap.get( $kendo-spacing, 2 )
Description
Mediaplayer titlebar horizontal padding.
$kendo-media-player-titlebar-padding-ymap.get( $kendo-spacing, 2 )
Description
Mediaplayer titlebar vertical padding.
$kendo-media-player-titlebar-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 ))
Description
Mediaplayer titlebar background color.
$kendo-media-player-titlebar-text$kendo-media-player-bg
Description
Mediaplayer titlebar text color.

Menu

NameTypeDefault valueComputed value
$kendo-menu-border-widthmap.get( $kendo-spacing, 0 )
Description
Width of the menu border.
$kendo-menu-font-familyvar( --kendo-font-family, inherit )
$kendo-menu-font-sizevar( --kendo-font-size, inherit )
$kendo-menu-line-heightvar( --kendo-line-height, normal )
Description
Line heights used along with $kendo-font-size.
$kendo-menu-item-padding-xmap.get( $kendo-spacing, 2 )
Description
Padding of menu root items.
$kendo-menu-item-spacingmap.get( $kendo-spacing, 0 )
Description
Spacing between menu root items.
$kendo-menu-item-icon-spacingvar( --kendo-icon-spacing, .5rem )
Description
Spacing between menu root items text and icons.
$kendo-menu-separator-marginmap.get( $kendo-spacing, 1 )
Description
Spacing between menu separator and items.
$kendo-menu-separator-width1px
Description
Separator width
$kendo-menu-item-focus-outline-offset- map.get( $kendo-spacing, 0.5 )
Description
The base outline of focused menu item.
$kendo-menu-textvar( --kendo-body-text, inherit )
Description
The text color of the menu.
$kendo-menu-bgtransparent
Description
The background color of the menu.
$kendo-menu-borderinitial
Description
The border color of the menu.
$kendo-menu-shadownone
Description
The shadow of the menu.
$kendo-menu-item-text$kendo-menu-text
Description
The text color of menu items.
$kendo-menu-item-bgtransparent
Description
The background color of menu items.
$kendo-menu-item-hover-textvar( --kendo-hover-text, inherit )
Description
The text color of hover menu items.
$kendo-menu-item-hover-bgvar( --kendo-hover-bg, initial )
Description
The background color of hover menu items.
$kendo-menu-item-focus-text$kendo-menu-item-text
Description
The text color of focused menu items.
$kendo-menu-item-focus-bg$kendo-menu-item-bg
Description
The background color of focused menu items.
$kendo-menu-item-focus-outlinevar( --kendo-focus-outline, none )
Description
The outline of focused menu items.
$kendo-menu-item-expanded-text$kendo-menu-item-hover-text
Description
The text color of expanded menu items.
$kendo-menu-item-expanded-bgvar( --kendo-selected-bg, initial )
Description
The background color of expanded menu items.
$kendo-menu-item-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of disabled menu items.
$kendo-menu-item-disabled-bg$kendo-menu-item-bg
Description
The background color of disabled menu items.
$kendo-menu-popup-padding-x$kendo-popup-padding-x
Description
Horizontal padding of the menu popup.
$kendo-menu-popup-padding-y$kendo-popup-padding-y
Description
Vertical padding of the menu popup.
$kendo-menu-popup-border-width$kendo-popup-border-width
Description
Width of the border around the menu popup.
$kendo-menu-popup-font-sizevar( --kendo-font-size-md, inherit )
Description
Font sizes of the menu popup.
$kendo-menu-popup-line-heightvar( --kendo-line-height-md, 30px )
Description
Line heights used along with $kendo-font-size.
$kendo-menu-popup-bgvar( --kendo-component-bg, initial )
Description
The background of the menu popup.
$kendo-menu-popup-borderinitial
Description
The border color of the menu popup.
$kendo-menu-popup-shadowvar( --kendo-box-shadow-depth-6, none )
Description
The shadow of the menu popup.
$kendo-menu-popup-item-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the menu item in popup.
$kendo-menu-popup-sm-item-padding-y$kendo-list-sm-item-padding-y
Description
Vertical padding of the menu item in popup.
$kendo-menu-popup-sm-item-padding-endcalc( #{$kendo-menu-popup-sm-item-padding-x * 2} + var( --kendo-icon-size, 1rem ) )
Description
The end padding of the menu item in popup.
$kendo-menu-popup-sm-item-icon-margin-startmap.get( $kendo-spacing, 0 )
Description
The start margin of the menu item expand icon.
$kendo-menu-popup-sm-item-icon-margin-endcalc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) )
Description
The end margin of the menu item expand icon.
$kendo-menu-popup-focus-outline-offset$kendo-menu-item-focus-outline-offset
Description
The base shadow of focused menu item in popup.
$kendo-menu-popup-item-spacingmap.get( $kendo-spacing, 0 )
Description
The spacing between the menu items in popup.
$kendo-menu-sizes( sm: ( group-font-size: $kendo-menu-popup-sm-font-size, group-line-height: $kendo-menu-popup-sm-line-height, link-padding-x: $kendo-menu-popup-sm-item-padding-x, link-padding-y: $kendo-menu-popup-sm-item-padding-y, link-padding-inline-end: $kendo-menu-popup-sm-item-padding-end, arrow-margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start, arrow-margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end, ), md: ( group-font-size: $kendo-menu-popup-md-font-size, group-line-height: $kendo-menu-popup-md-line-height, link-padding-x: $kendo-menu-popup-md-item-padding-x, link-padding-y: $kendo-menu-popup-md-item-padding-y, link-padding-inline-end: $kendo-menu-popup-md-item-padding-end, arrow-margin-inline-start: $kendo-menu-popup-item-icon-md-margin-start, arrow-margin-inline-end: $kendo-menu-popup-item-icon-md-margin-end, ), lg: ( group-font-size: $kendo-menu-popup-lg-font-size, group-line-height: $kendo-menu-popup-lg-line-height, link-padding-x: $kendo-menu-popup-lg-item-padding-x, link-padding-y: $kendo-menu-popup-lg-item-padding-y, link-padding-inline-end: $kendo-menu-popup-lg-item-padding-end, arrow-margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start, arrow-margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end ) )
Description
Sizes map for the menu.
$kendo-menu-popup-item-text$kendo-list-item-text
Description
The text color of the menu item in popup.
$kendo-menu-popup-item-bg$kendo-list-item-bg
Description
The background of the menu item in popup.
$kendo-menu-popup-item-hover-text$kendo-list-item-hover-text
Description
The text color of hovered menu item in popup.
$kendo-menu-popup-item-hover-bg$kendo-list-item-hover-bg
Description
The background of hovered menu item in popup.
$kendo-menu-popup-item-focus-text$kendo-menu-item-text
Description
The text color of focused menu items.
$kendo-menu-popup-item-focus-bg$kendo-menu-item-bg
Description
The background color of focused menu items.
$kendo-menu-popup-item-focus-outlineif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
Description
The outline of focused menu items.
$kendo-menu-popup-item-expanded-text$kendo-list-item-selected-text
Description
The text color of expanded menu item in popup.
$kendo-menu-popup-item-expanded-bg$kendo-list-item-selected-bg
Description
The background of expanded menu item in popup.
$kendo-menu-popup-item-disabled-text$kendo-list-item-disabled-text
Description
The text color of disabled menu item in popup.
$kendo-menu-popup-item-disabled-bg$kendo-list-item-disabled-bg
Description
The background of disabled menu item in popup.
$kendo-menu-scroll-button-bgvar( --kendo-component-bg, $kendo-component-bg )
Description
The background color of scroll menu buttons.
$kendo-menu-scroll-button-bordervar( --kendo-component-border, $kendo-component-border )
Description
The border color of scroll menu buttons.
$kendo-menu-scroll-button-hover-bgnull
Description
The background color of hover scroll menu buttons.
$kendo-menu-scroll-button-hover-bordernull
Description
The border color of scroll hover menu buttons.
$kendo-menu-icon-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The color of menu items icon.

Messagebox

NameTypeDefault valueComputed value
$kendo-message-box-margin0 0 map.get( $kendo-spacing, 3 ) 0
Description
Margin around the message box.
$kendo-message-box-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the message box.
$kendo-message-box-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the message box.
$kendo-message-box-border-width0
Description
Border width of the message box.
$kendo-message-box-border-stylesolid
Description
Border style of the message box.
$kendo-message-box-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the message box.
$kendo-message-box-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the message box.
$kendo-message-box-line-heightvar( --kendo-line-height-sm, normal )
Description
Line height of the message box.
$kendo-message-box-link-font-stylenormal
Description
Font style of the message box links.
$kendo-message-box-link-decorationunderline
Description
Text decoration of the message box links.
$kendo-message-box-link-textvar( --kendo-link-text, initial )
Description
Text color of the message box links.
$kendo-message-box-link-hover-textvar( --kendo-link-hover-text, initial )
Description
Hover text color of the message box links.

Notification

NameTypeDefault valueComputed value
$kendo-notification-group-gapmap.get( $kendo-spacing, 2 )
Description
The row-gap between the elements in the Notification group.
$kendo-notification-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Notification.
$kendo-notification-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Notification.
$kendo-notification-border-width1px
$kendo-notification-border-radiusmap.get( $kendo-spacing, 0.5 )
Description
The border radius of the Notification.
$kendo-notification-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Notification.
$kendo-notification-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Notification.
$kendo-notification-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Notification.
$kendo-notification-bgvar( --kendo-component-bg, inherit )
Description
The background color of the Notification.
$kendo-notification-textvar( --kendo-component-text, inherit )
Description
The text color of the Notification.
$kendo-notification-bordervar( --kendo-component-border, inherit )
Description
The border color of the Notification.
$kendo-notification-box-shadownone
Description
The box shadow of the Notification.
$kendo-notification-icon-spacingmap.get( $kendo-spacing, 2 )
Description
The horizontal spacing of the Notification icon.
$kendo-notification-close-icon-spacingmap.get( $kendo-spacing, 4 )
Description
The horizontal spacing of the Notification close icon.
$kendo-notification-icon-textvar( --kendo-component-text, inherit )
Description
The color of the Notification icon.
$kendo-notification-brand-colors( primary: primary, error: error, warning: warning, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )
Description
The theme variations for the Notification.
$kendo-notification-theme-colors()
Description
The theme colors map for the Notification variations.

Orgchart

NameTypeDefault valueComputed value
$kendo-orgchart-spacermap.get( $kendo-spacing, 6)
Description
The spacing index of the OrgChart.
$kendo-orgchart-padding-y$kendo-orgchart-spacer
Description
The vertical padding of the OrgChart.
$kendo-orgchart-padding-x$kendo-orgchart-padding-y
Description
The horizontal padding of the OrgChart.
$kendo-orgchart-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the OrgChart.
$kendo-orgchart-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the OrgChart.
$kendo-orgchart-line-heightvar( --kendo-line-height, normal )
Description
The line height of the OrgChart.
$kendo-orgchart-bgvar( --kendo-component-bg, initial )
Description
The background color of the OrgChart.
$kendo-orgchart-textvar( --kendo-component-text, initial )
Description
The text color of the OrgChart.
$kendo-orgchart-bordervar( --kendo-component-border, initial )
Description
The border color of the OrgChart.
$kendo-orgchart-node-spacing$kendo-orgchart-spacer
Description
The spacing of the OrgChart node.
$kendo-orgchart-group-spacing$kendo-orgchart-spacer
Description
The spacing of the OrgChart group.
$kendo-orgchart-node-container-spacing$kendo-orgchart-spacer
Description
The spacing of the OrgChart node container.
$kendo-orgchart-node-group-padding-y$kendo-orgchart-spacer
Description
The vertical padding of the OrgChart node group.
$kendo-orgchart-node-group-padding-x$kendo-orgchart-node-group-padding-y
Description
The horizontal padding of the OrgChart node group.
$kendo-orgchart-node-group-border-width1px
Description
The border width of the OrgChart node group.
$kendo-orgchart-node-group-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the OrgChart node group.
$kendo-orgchart-node-group-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the OrgChart node group.
$kendo-orgchart-node-group-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the OrgChart node group.
$kendo-orgchart-node-group-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The border color of the OrgChart node group.
$kendo-orgchart-node-group-focus-border$kendo-card-focus-border
Description
The border color of the focused OrgChart node group.
$kendo-orgchart-node-group-focus-shadow$kendo-card-focus-shadow
Description
The shadow of the focused OrgChart node group.
$kendo-orgchart-node-group-title-margin-y0px
Description
The vertical margin of the OrgChart node group title.
$kendo-orgchart-node-group-title-font-sizevar( --kendo-font-size-xl, inherit )
Description
The font size of the OrgChart node group title.
$kendo-orgchart-node-group-title-line-heightvar( --kendo-line-height-md, normal )
Description
The line height of the OrgChart node group title.
$kendo-orgchart-node-group-subtitle-margin-y$kendo-orgchart-spacer - map.get( $kendo-spacing, 1 )
Description
The vertical margin of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-textvar( --kendo-subtle-text, inherit )
Description
The line height of the OrgChart node group subtitle.
$kendo-orgchart-card-width300px
Description
The width of the OrgChart Card.
$kendo-orgchart-card-border-width$kendo-card-border-width
Description
The border width of the OrgChart Card.
$kendo-orgchart-card-shadow$kendo-card-shadow
Description
The shadow of the OrgChart Card.
$kendo-orgchart-card-focus-shadow$kendo-card-focus-shadow
Description
The shadow of the focused OrgChart Card.
$kendo-orgchart-card-title-margin-y0px
Description
The vertical margin of the OrgChart Card title.
$kendo-orgchart-card-title-font-size$kendo-card-title-font-size
Description
The font size of the OrgChart Card title.
$kendo-orgchart-card-title-line-heightvar( --kendo-line-height, normal )
Description
The line height of the OrgChart Card title.
$kendo-orgchart-card-subtitle-margin-y0px
Description
The vertical margin of the OrgChart Card subtitle.
$kendo-orgchart-card-subtitle-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the OrgChart Card subtitle.
$kendo-orgchart-card-subtitle-line-heightvar( --kendo-line-height-md, inherit )
Description
The line height of the OrgChart Card subtitle.
$kendo-orgchart-card-body-padding-y$kendo-orgchart-spacer - map.get( $kendo-spacing, 2 )
Description
The vertical padding of the OrgChart Card body.
$kendo-orgchart-card-body-padding-x$kendo-orgchart-card-body-padding-y
Description
The horizontal padding of the OrgChart Card body.
$kendo-orgchart-card-body-border-width2px 0 0
Description
The top border width of the OrgChart Card body.
$kendo-orgchart-card-body-border-colortransparent
Description
The border color of the OrgChart Card body.
$kendo-orgchart-card-body-vbox-margin-x$kendo-orgchart-spacer - map.get( $kendo-spacing, 2 )
Description
The horizontal margin of the OrgChart Card body title wrap.
$kendo-orgchart-card-body-vbox-min-height$kendo-card-avatar-size
Description
The min height of the OrgChart Card body title wrap.
$kendo-orgchart-line-size1px
Description
The size of the OrgChart connecting line.
$kendo-orgchart-line-textif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The fill color of the OrgChart connecting line.
$kendo-orgchart-line-v-height25px
Description
The height of the OrgChart connecting line.

Overlay

NameTypeDefault valueComputed value
$kendo-overlay-opacity.4
Description
Opacity of the overlay.
$kendo-overlay-dark$kendo-color-black
Description
Background color of the dark overlay.
$kendo-overlay-light$kendo-color-white
Description
Background color of the light overlay.

Pager

NameTypeDefault valueComputed value
$kendo-pager-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the Pager.
$kendo-pager-sm-padding-xmap.get( $kendo-spacing, 1.5 )
Description
The horizontal padding of the small Pager.
$kendo-pager-md-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the medium Pager.
$kendo-pager-lg-padding-xmap.get( $kendo-spacing, 2.5 )
Description
The horizontal padding of the large Pager.
$kendo-pager-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Pager.
$kendo-pager-sm-padding-y$kendo-pager-sm-padding-x
Description
The vertical padding of the small Pager.
$kendo-pager-md-padding-y$kendo-pager-md-padding-x
Description
The vertical padding of the medium Pager.
$kendo-pager-lg-padding-y$kendo-pager-lg-padding-x
Description
The vertical padding of the large Pager.
$kendo-pager-border-width1px
Description
The border width of the Pager.
$kendo-pager-font-familyvar( --kendo-font-family, normal )
Description
The font family of the Pager.
$kendo-pager-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Pager.
$kendo-pager-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Pager.
$kendo-pager-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Pager.
$kendo-pager-textvar( --kendo-component-text, inherit )
Description
The text color of the Pager.
$kendo-pager-bordervar( --kendo-component-border, inherit )
Description
The border color of the Pager.
$kendo-pager-focus-bgvar( --kendo-pager-bg, #{$kendo-pager-bg})
Description
The background color of the focused Pager.
$kendo-pager-focus-textvar( --kendo-pager-text, #{$kendo-pager-text})
Description
The text color of the focused Pager.
$kendo-pager-focus-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the focused Pager.
$kendo-pager-item-border-radius0
Description
The border radius of the Pager items.
$kendo-pager-item-spacingnull
Description
The spacing around the Pager items.
$kendo-pager-sm-item-group-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the item groups of the small Pager.
$kendo-pager-md-item-group-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the item groups of the medium Pager.
$kendo-pager-lg-item-group-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the item groups of the large Pager.
$kendo-pager-sizes-label-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the Pagers' sizes label.
$kendo-pager-info-label-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Pagers' info label.
$kendo-pager-input-width5em
Description
The width of the Inputs in the Pager.
$kendo-pager-dropdown-width5em
Description
The width of the DropDowns in the Pager.
$kendo-pager-sizes( sm: ( padding-x: $kendo-pager-sm-padding-x, padding-y: $kendo-pager-sm-padding-y, item-group-spacing: $kendo-pager-sm-item-group-spacing ), md: ( padding-x: $kendo-pager-md-padding-x, padding-y: $kendo-pager-md-padding-y, item-group-spacing: $kendo-pager-md-item-group-spacing ), lg: ( padding-x: $kendo-pager-lg-padding-x, padding-y: $kendo-pager-lg-padding-y, item-group-spacing: $kendo-pager-lg-item-group-spacing ) )
Description
The sizes map of the Pager.

Panelbar

NameTypeDefault valueComputed value
$kendo-panelbar-padding-x0px
Description
Horizontal padding of the panelbar.
$kendo-panelbar-padding-y0px
Description
Vertical padding of the panelbar.
$kendo-panelbar-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the panelbar.
$kendo-panelbar-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the panelbar.
$kendo-panelbar-line-heightvar( --kendo-line-height, inherit )
Description
Line height of the panelbar.
$kendo-panelbar-border-width1px
Description
Width of the border around the panelbar.
$kendo-panelbar-border-stylesolid
Description
Border style around the the panelbar.
$kendo-panelbar-item-border-width0
Description
Width of the border around the panelbar items.
$kendo-panelbar-item-border-stylesolid
Description
Style of the border around the panelbar items.
$kendo-panelbar-icon-spacingmap.get( $kendo-spacing, 2 )
Description
Spacing around the icon of the panelbar items.
$kendo-panelbar-header-padding-x-startcalc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )
Description
Horizontal padding of the panelbar header.
$kendo-panelbar-header-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the panelbar header.
$kendo-panelbar-item-padding-x-startcalc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )
Description
Horizontal padding of the panelbar items.
$kendo-panelbar-item-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the panelbar items.
$kendo-panelbar-item-level-count4
Description
Maximum nesting of the panelbar items.
$kendo-panelbar-bgvar( --kendo-component-bg, initial )
Description
Background color of the panelbar.
$kendo-panelbar-textvar( --kendo-component-text, initial )
Description
Text color of the panelbar.
$kendo-panelbar-bordervar( --kendo-component-border, initial )
Description
Border color of the panelbar.
$kendo-panelbar-header-bgvar( --kendo-panelbar-bg, #{$kendo-panelbar-bg} )
Description
Background color of the panelbar header.
$kendo-panelbar-header-textvar( --kendo-panelbar-text, #{$kendo-panelbar-text} )
Description
Text color of the panelbar header.
$kendo-panelbar-header-borderinherit
Description
Border color of the panelbar header.
$kendo-panelbar-header-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of the panelbar header when hovered.
$kendo-panelbar-header-hover-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
Text color of the panelbar header when hovered.
$kendo-panelbar-header-hover-borderinherit
Description
Border color of the panelbar header when hovered.
$kendo-panelbar-header-focus-bginherit
Description
Background color of the panelbar header when focused.
$kendo-panelbar-header-focus-textinherit
Description
Text color of the panelbar header when focused.
$kendo-panelbar-header-focus-borderinherit
Description
Border color of the panelbar header when focused.
$kendo-panelbar-header-focus-shadow$kendo-list-item-focus-shadow
Description
Shadow of the panelbar header when focused.
$kendo-panelbar-header-hover-focus-bg$kendo-panelbar-header-hover-bg
Description
Background color of the panelbar header when focused and hovered.
$kendo-panelbar-header-hover-focus-text$kendo-panelbar-header-hover-text
Description
Text color of the panelbar header when focused and hovered.
$kendo-panelbar-header-hover-focus-bordernull
Description
Border color of the panelbar header when focused and hovered.
$kendo-panelbar-header-selected-bgvar( --kendo-selected-bg, inherit )
Description
Background color of the panelbar header when selected.
$kendo-panelbar-header-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Text color of the panelbar header when selected.
$kendo-panelbar-header-selected-borderinherit
Description
Border color of the panelbar header when selected.
$kendo-panelbar-selected-markerif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Color of the marker of the panelbar header when selected.
$kendo-panelbar-header-selected-hover-bg$kendo-panelbar-header-selected-bg
Description
Background color of the panelbar header when selected and hovered.
$kendo-panelbar-header-selected-hover-text$kendo-panelbar-header-hover-text
Description
Text color of the panelbar header when selected and hovered.
$kendo-panelbar-header-selected-hover-borderinherit
Description
Border color of the panelbar header when selected and hovered.
$kendo-panelbar-header-selected-focus-bg$kendo-panelbar-header-selected-bg
Description
Background color of the panelbar header when selected and focused.
$kendo-panelbar-header-selected-focus-text$kendo-panelbar-header-selected-text
Description
Text color of the panelbar header when selected and focused.
$kendo-panelbar-header-selected-focus-borderinherit
Description
Border color of the panelbar header when selected and focused.
$kendo-panelbar-header-selected-hover-focus-bg$kendo-panelbar-header-selected-hover-bg
Description
Background color of the panelbar header when selected, focused and hovered.
$kendo-panelbar-header-selected-hover-focus-text$kendo-panelbar-header-selected-hover-text
Description
Text color of the panelbar header when selected, focused and hovered.
$kendo-panelbar-header-selected-hover-focus-borderinherit
Description
Border color of the panelbar header when selected, focused and hovered.
$kendo-panelbar-header-expanded-bginherit
Description
Background color of the panelbar header when expanded.
$kendo-panelbar-header-expanded-textinherit
Description
Text color of the panelbar header when expanded.
$kendo-panelbar-header-expanded-borderinherit
Description
Border color of the panelbar header when expanded.
$kendo-panelbar-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of the panelbar item when hovered.
$kendo-panelbar-item-hover-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
Text color of the panelbar item when hovered.
$kendo-panelbar-item-hover-borderinherit
Description
Border color of the panelbar item when hovered.
$kendo-panelbar-item-focus-bginherit
Description
Background color of the panelbar item when focused.
$kendo-panelbar-item-focus-textinherit
Description
Text color of the panelbar item when focused.
$kendo-panelbar-item-focus-borderinherit
Description
Border color of the panelbar item when focused.
$kendo-panelbar-item-focus-shadow$kendo-list-item-focus-shadow
Description
Box shadow of the panelbar item when focused.
$kendo-panelbar-item-hover-focus-bg$kendo-panelbar-item-hover-bg
Description
Background color of the panelbar item when focused and hovered.
$kendo-panelbar-item-hover-focus-text$kendo-panelbar-item-hover-text
Description
Text color of the panelbar item when focused and hovered.
$kendo-panelbar-item-hover-focus-borderinherit
Description
Border color of the panelbar item when focused and hovered.
$kendo-panelbar-item-selected-bgvar( --kendo-selected-bg, inherit )
Description
Background color of the panelbar item when selected.
$kendo-panelbar-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
Description
Text color of the panelbar item when selected.
$kendo-panelbar-item-selected-borderinherit
Description
Border color of the panelbar item when selected.
$kendo-panelbar-item-selected-hover-bg$kendo-panelbar-item-selected-bg
Description
Background color of the panelbar item when selected and hovered.
$kendo-panelbar-item-selected-hover-text$kendo-panelbar-item-hover-text
Description
Text color of the panelbar item when selected and hovered.
$kendo-panelbar-item-selected-hover-borderinherit
Description
Border color of the panelbar item when selected and hovered.
$kendo-panelbar-item-selected-focus-bg$kendo-panelbar-item-selected-bg
Description
Background color of the panelbar item when selected and focused.
$kendo-panelbar-item-selected-focus-text$kendo-panelbar-item-selected-text
Description
Text color of the panelbar item when selected and focused.
$kendo-panelbar-item-selected-focus-borderinherit
Description
Border color of the panelbar item when selected and focused.
$kendo-panelbar-item-selected-hover-focus-bg$kendo-panelbar-item-selected-hover-bg
Description
Background color of the panelbar item when selected, focused and hovered.
$kendo-panelbar-item-selected-hover-focus-text$kendo-panelbar-item-selected-hover-text
Description
Text color of the panelbar item when selected, focused and hovered.
$kendo-panelbar-item-selected-hover-focus-borderinherit
Description
Border color of the panelbar item when selected, focused and hovered.

Pdf-viewer

NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-width1px
Description
The border width of the PDFViewer.
$kendo-pdf-viewer-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the PDFViewer.
$kendo-pdf-viewer-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the PDFViewer.
$kendo-pdf-viewer-line-heightvar( --kendo-line-height, normal )
Description
The line height of the PDFViewer.
$kendo-pdf-viewer-bgvar( --kendo-component-bg, initial )
Description
The background color of the PDFViewer.
$kendo-pdf-viewer-textvar( --kendo-component-text, initial )
Description
The text color of the PDFViewer.
$kendo-pdf-viewer-bordervar( --kendo-component-border, initial )
Description
The border color of the PDFViewer.
$kendo-pdf-viewer-canvas-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-textvar( --kendo-component-text, inherit )
Description
Text color of the PDF viewer canvas.
$kendo-pdf-viewer-canvas-bordervar( --kendo-component-border, inherit )
Description
The border color of the PDFViewer canvas.
$kendo-pdf-viewer-page-spacingmap.get( $kendo-spacing, 7.5 )
Description
The spacing of the PDFViewer page.
$kendo-pdf-viewer-page-bgvar( --kendo-component-bg, inherit )
Description
The background color of the PDFViewer page.
$kendo-pdf-viewer-page-textvar( --kendo-component-text, inherit )!default
Description
The text color of the PDFViewer page.
$kendo-pdf-viewer-page-bordervar( --kendo-component-border, inherit )
Description
The border color of the PDFViewer page.
$kendo-pdf-viewer-page-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The shadow of the PDFViewer page.
$kendo-pdf-viewer-search-panel-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-padding-y$kendo-pdf-viewer-search-panel-padding-x
Description
The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-width1px
Description
The border width of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-bgvar( --kendo-component-bg, inherit )
Description
The background color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-textvar( --kendo-component-text, inherit )
Description
The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-bordervar( --kendo-component-border, inherit )!default
Description
The border color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-shadownone
Description
The shadow of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-matches-spacingvar( --kendo-icon-spacing, .5rem )
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-margin-ycalc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 )
Description
The vertical margin of the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-heightvar( --kendo-line-height-sm, normal )
Description
The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bgvar( --kendo-component-text, inherit )
Description
The background color of the PDFViewer highlight.
$kendo-pdf-viewer-search-highlight-mark-bgyellow
Description
The background color of the PDFViewer highlight mark.
$kendo-pdf-viewer-icon-text$kendo-dropzone-icon-text
Description
The text color of the PDFViewer icon.

Pivotgrid

NameTypeDefault valueComputed value
$kendo-pivotgrid-spacermap.get( $kendo-spacing, 3 )
Description
Spacer of the PivotGrid.
$kendo-pivotgrid-padding-x0px
Description
Horizontal padding of the PivotGrid.
$kendo-pivotgrid-padding-y0px
Description
Vertical of the PivotGrid.
$kendo-pivotgrid-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the PivotGrid.
$kendo-pivotgrid-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the PivotGrid.
$kendo-pivotgrid-line-heightvar( --kendo-line-height, normal )
Description
Line height of the PivotGrid.
$kendo-pivotgrid-border-width1px
Description
Border width of the PivotGrid.
$kendo-pivotgrid-icon-spacingmap.get( $kendo-spacing, 1 )
Description
Icon spacing of the PivotGrid.
$kendo-pivotgrid-bgvar( --kendo-component-bg, initial )
Description
Background color of the PivotGrid.
$kendo-pivotgrid-textvar( --kendo-component-text, initial )
Description
Text color of the PivotGrid.
$kendo-pivotgrid-bordervar( --kendo-component-border, initial )
Description
Border color of the PivotGrid.
$kendo-pivotgrid-alt-border$kendo-pivotgrid-border
Description
Alt border color of the PivotGrid.
$kendo-pivotgrid-row-header-width300px
Description
Default width of the PivotGrid row header.
$kendo-pivotgrid-column-header-height75px
Description
Default height of the PivotGrid column header.
$kendo-pivotgrid-cell-padding-x$kendo-table-cell-padding-x
Description
Horizontal padding of the PivotGrid cell.
$kendo-pivotgrid-cell-padding-y$kendo-table-cell-padding-y
Description
Vertical padding of the PivotGrid cell.
$kendo-pivotgrid-cell-border-width1px
Description
Border width of the PivotGrid cell.
$kendo-pivotgrid-headers-bgvar( --kendo-component-bg, inherit )
Description
Background color of the PivotGrid header.
$kendo-pivotgrid-headers-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
Text color of the PivotGrid header.
$kendo-pivotgrid-headers-bordervar( --kendo-component-border, inherit )
Description
Border color of the PivotGrid header.
$kendo-pivotgrid-total-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))
Description
Background color of the PivotGrid total cells.
$kendo-pivotgrid-total-textvar( --kendo-component-text, inherit )
Description
Text color of the PivotGrid total cells.
$kendo-pivotgrid-total-bordervar( --kendo-component-border, inherit )
Description
Border color of the PivotGrid total cells.
$kendo-pivotgrid-hover-bgvar( --kendo-hover-bg, inherit )
Description
Hover background color of the PivotGrid.
$kendo-pivotgrid-hover-textinherit
Description
Hover text color of the PivotGrid.
$kendo-pivotgrid-hover-borderinherit
Description
Hover border color of the PivotGrid.
$kendo-pivotgrid-selected-bgvar( --kendo-selected-bg, inherit )
Description
Selected background color of the PivotGrid.
$kendo-pivotgrid-selected-textinherit
Description
Selected text color of the PivotGrid.
$kendo-pivotgrid-selected-borderinherit
Description
Selected border color of the PivotGrid.
$kendo-pivotgrid-focus-shadow$kendo-list-item-focus-shadow
Description
Focus shadow of the PivotGrid.
$kendo-pivotgrid-configurator-padding-x0px
Description
Horizontal padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-padding-y0px
Description
Vertical padding of the PivotGrid configurator.
$kendo-pivotgrid-configurator-border-width1px
Description
Border width of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-padding-x$kendo-pivotgrid-spacer
Description
Horizontal padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-padding-y$kendo-pivotgrid-configurator-header-padding-x
Description
Vertical padding of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-sizecalc( var( --kendo-font-size-xl, 2rem ) * .9 )
Description
Font size of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-font-weightvar( --kendo-font-weight-bold, bold )
Description
Font weight of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-content-padding-x$kendo-pivotgrid-spacer
Description
Horizontal padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-content-padding-y0px
Description
Vertical padding of the PivotGrid configurator content.
$kendo-pivotgrid-configurator-fields-margin-x0px
Description
Horizontal margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-fields-margin-ymath.div( $kendo-pivotgrid-spacer, 2 )
Description
Vertical margin of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-fields-gapmap.get( $kendo-spacing, 2)
Description
Spacing of the PivotGrid configurator fields.
$kendo-pivotgrid-configurator-vertical-width320px
Description
Default width of the PivotGrid vertical configurator.
$kendo-pivotgrid-configurator-horizontal-height420px
Description
Default height of the PivotGrid horizontal configurator.
$kendo-pivotgrid-configurator-bgvar( --kendo-component-bg, inherit )
Description
Background color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
Text color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-bordervar( --kendo-component-border, inherit )!default
Description
Border color of the PivotGrid configurator.
$kendo-pivotgrid-configurator-header-bgvar( --kendo-component-bg, inherit )
Description
Background color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-textvar( --kendo-component-text, inherit )
Description
Text color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-header-borderinherit
Description
Border color of the PivotGrid configurator header.
$kendo-pivotgrid-configurator-button-padding-xmap.get( $kendo-spacing, 1 )
Description
Horizontal padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-border-width1px
Description
Border width of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-sizecalc( #{$kendo-pivotgrid-line-height} * 1em + #{$kendo-pivotgrid-configurator-button-padding-y * 2} + #{$kendo-pivotgrid-configurator-button-border-width * 2} )
Description
Size of the PivotGrid configurator button.
$kendo-pivotgrid-configurator-button-icon-spacingmap.get( $kendo-spacing, 2 )
Description
Icon spacing of the PivotGrid configurator button.
$kendo-pivotgrid-calculated-field-padding-x$kendo-pivotgrid-spacer
Description
Horizontal padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-padding-y$kendo-pivotgrid-spacer
Description
Vertical padding of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-width1px
Description
Border width of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
Border radius of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-gap$kendo-pivotgrid-spacer
Description
Spacing of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-bgvar( --kendo-component-bg, inherit )
Description
Background color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-textvar( --kendo-component-text, inherit )
Description
Text color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-bordervar( --kendo-component-border, inherit )
Description
Border color of the PivotGrid calculated field.
$kendo-pivotgrid-calculated-field-header-bginherit
Description
Background color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-textvar( --kendo-component-text, inherit )
Description
Text color of the PivotGrid calculated field header.
$kendo-pivotgrid-calculated-field-header-borderinherit
Description
Border color of the PivotGrid calculated field header.
$kendo-pivotgrid-treeview-padding-xmath.div( $kendo-pivotgrid-spacer, 2 )
Description
Horizontal padding of the PivotGrid treeview.
$kendo-pivotgrid-treeview-padding-y0px
Description
Vertical padding of the PivotGrid treeview.

Popover

NameTypeDefault valueComputed value
$kendo-popover-border-width$kendo-dialog-border-width
Description
The width of the border around the Popover.
$kendo-popover-border-stylesolid
Description
The style of the border around the Popover.
$kendo-popover-border-radius$kendo-window-border-radius
Description
The radius of the border around the Popover.
$kendo-popover-font-family$kendo-window-font-family
Description
The font family of the Popover.
$kendo-popover-font-size$kendo-window-font-size
Description
The font size of the Popover.
$kendo-popover-line-height$kendo-window-line-height
Description
The line height of the Popover.
$kendo-popover-textvar( --kendo-component-text, initial )
Description
The text color of the Popover.
$kendo-popover-bgvar( --kendo-component-bg, initial )
Description
The background color of the Popover.
$kendo-popover-bordervar( --kendo-component-border, initial )
Description
The border color of the Popover.
$kendo-popover-shadowvar( --kendo-box-shadow-depth-6, none )
Description
The box shadow of the Popover.
$kendo-popover-header-padding-x$kendo-dialog-titlebar-padding-x
Description
The horizontal padding of the Popover header.
$kendo-popover-header-padding-y$kendo-dialog-titlebar-padding-y
Description
The vertical padding of the Popover header.
$kendo-popover-header-border-width$kendo-dialog-titlebar-border-width
Description
The border width of the Popover header.
$kendo-popover-header-border-style$kendo-popover-border-style
Description
The border style of the Popover header.
$kendo-popover-header-text$kendo-dialog-titlebar-text
Description
The text color of the Popover header.
$kendo-popover-header-bg$kendo-dialog-titlebar-bg
Description
The background color of the Popover header.
$kendo-popover-header-border$kendo-dialog-titlebar-border
Description
The border color of the Popover header.
$kendo-popover-body-padding-x$kendo-window-inner-padding-x
Description
The horizontal padding of the Popover body.
$kendo-popover-body-padding-y$kendo-window-inner-padding-y
Description
The vertical padding of the Popover body.
$kendo-popover-actions-border-width0
Description
The border width of the Popover actions.
$kendo-popover-actions-padding-x$kendo-popover-body-padding-x
Description
The horizontal padding of the Popover actions.
$kendo-popover-actions-padding-y$kendo-popover-body-padding-y
Description
The vertical padding of the Popover actions.
$kendo-popover-actions-gapmap.get( $kendo-spacing, 3 )
Description
The spacing between the Popover actions.
$kendo-popover-callout-widthmap.get( $kendo-spacing, 5 )
Description
The width of the Popover callout.
$kendo-popover-callout-height$kendo-popover-callout-width
Description
The height of the Popover callout.
$kendo-popover-callout-border-width$kendo-popover-border-width
Description
The border width of the Popover callout.
$kendo-popover-callout-border-style$kendo-popover-border-style
Description
The border style of the Popover callout.

Popup

NameTypeDefault valueComputed value
$kendo-popup-padding-x0
Description
Horizontal padding of the popup.
$kendo-popup-padding-y0
Description
Vertical padding of the popup.
$kendo-popup-border-width0
Description
Width of the border around the popup.
$kendo-popup-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
Border radius of the popup.
$kendo-popup-font-sizevar( --kendo-font-size, inherit)
Description
Font size of the popup.
$kendo-popup-line-heightvar( --kendo-line-height, normal)
Description
Line height of the popup.
$kendo-popup-content-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the content inside the popup.
$kendo-popup-content-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the content inside the popup.
$kendo-popup-bgvar( --kendo-component-bg, initial )
Description
Background color of the popup.
$kendo-popup-textvar( --kendo-component-text, initial )
Description
Text color of the popup.
$kendo-popup-bordervar( --kendo-component-border, initial )
Description
Border color of the popup.
$kendo-popup-shadowvar( --kendo-box-shadow-depth-4, none )
Description
Box shadow around the popup.

Progressbar

NameTypeDefault valueComputed value
$kendo-progressbar-height4px
Description
The height of the ProgressBar.
$kendo-progressbar-horizontal-width100%
Description
The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timing1s linear infinite
Description
The animation timing of the ProgressBar.
$kendo-progressbar-border-width0px
Description
The width of the border around the ProgressBar.
$kendo-progressbar-border-radiusvar( --kendo-border-radius-sm, initial )
Description
The border radius of the ProgressBar.
$kendo-progressbar-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the ProgressBar.
$kendo-progressbar-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the ProgressBar.
$kendo-progressbar-line-heightvar( --kendo-line-height, inherit )
Description
The line height of the ProgressBar.
$kendo-progressbar-padding-x0
Description
The horizontal padding of the ProgressBar.
$kendo-progressbar-padding-y0
Description
The vertical padding of the ProgressBar.
$kendo-progressbar-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
Description
The background color of the ProgressBar.
$kendo-progressbar-textvar( --kendo-component-text, initial )
Description
The text color of the ProgressBar.
$kendo-progressbar-border$kendo-progressbar-bg
Description
The border color of the ProgressBar.
$kendo-progressbar-gradientnull
Description
The background gradient of the ProgressBar.
$kendo-progressbar-value-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The progress background color of the ProgressBar.
$kendo-progressbar-value-textvar( --kendo-component-text, initial )
Description
The progress text color of the ProgressBar.
$kendo-progressbar-value-border$kendo-progressbar-value-bg
Description
The progress border color of the ProgressBar.
$kendo-progressbar-value-gradientnull
Description
The progress background gradient of the ProgressBar.
$kendo-progressbar-offset-ymap.get( $kendo-spacing, 2 )
Description
The progress status offset of the ProgressBar.
$kendo-progressbar-vertical-status-offsetcalc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1)
Description
The progress status offset of the vertical ProgressBar.
$kendo-progressbar-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))
Description
The background color of the disabled ProgressBar.
$kendo-progressbar-disabled-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))
Description
The text color of the disabled ProgressBar.
$kendo-progressbar-disabled-border$kendo-progressbar-disabled-bg
Description
The border color of the disabled ProgressBar.
$kendo-progressbar-value-disabled-bgif($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 ))
Description
The progress background color of the disabled ProgressBar.
$kendo-progressbar-indeterminate-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
Description
The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-text$kendo-progressbar-text
Description
The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-borderif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
Description
The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient-horizontallinear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)
Description
The background gradient of the horizontal indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient-verticallinear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)
Description
The background gradient of the vertical indeterminate ProgressBar.
$kendo-progressbar-indeterminate-animation-horizontal3s ease 0s infinite running progressbar-indeterminate-animation-horizontal
Description
The gradient size of the horizontal indeterminate ProgressBar.
$kendo-progressbar-indeterminate-animation-vertical3s ease 0s infinite running progressbar-indeterminate-animation-vertical
Description
The gradient size of the vertical indeterminate ProgressBar.
$kendo-progressbar-chunk-bordervar( --kendo-body-bg, initial )
Description
The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-strokeif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-stroke$kendo-progressbar-bg
Description
The scale stroke background color of the circular ProgressBar.

Prompt

NameTypeDefault valueComputed value
$kendo-prompt-textvar( --kendo-component-text, initial )
Description
The text color of the Prompt.
$kendo-prompt-bgvar( --kendo-component-bg, initial )
Description
The background color of the Prompt.
$kendo-prompt-bordervar( --kendo-component-border, initial )
Description
The border color of the Prompt.
$kendo-prompt-header-textvar( --kendo-component-text, initial )
Description
The text color of the Prompt header.
$kendo-prompt-header-bgvar( --kendo-component-bg, initial )
Description
The background color of the Prompt header.
$kendo-prompt-header-bordervar( --kendo-component-border, initial )
Description
The border color of the Prompt header.
$kendo-prompt-content-padding-ymap.get( $kendo-spacing, 4 )
Description
The vertical padding of the Prompt content.
$kendo-prompt-content-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the Prompt content.
$kendo-prompt-content-spacingmap.get( $kendo-spacing, 4 )
Description
The spacing between the items of the Prompt content.
$kendo-prompt-content-textk-get-theme-color-var( neutral-190 )
Description
The text color of the Prompt content.
$kendo-prompt-content-bgk-get-theme-color-var( neutral-10 )
Description
The background color of the Prompt content.
$kendo-prompt-content-bordervar( --kendo-component-border, initial )
Description
The text border of the Prompt content.
$kendo-prompt-expander-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the items of the Prompt content expander.
$kendo-prompt-suggestion-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Prompt suggestion container.
$kendo-prompt-suggestion-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the Prompt suggestion container.
$kendo-prompt-suggestion-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the Prompt suggestion container.
$kendo-prompt-suggestion-textvar( --kendo-component-text, initial )
Description
The text color of the Prompt suggestion container.
$kendo-prompt-suggestion-bgvar( --kendo-component-bg, initial )
Description
The background color of the Prompt suggestion container.
$kendo-prompt-suggestion-bordervar( --kendo-component-border, initial )
Description
The border color of the Prompt suggestion container.
$kendo-prompt-suggestion-shadowk-elevation(1)
Description
The elevation of the Prompt suggestion container.

Radio

NameTypeDefault valueComputed value
$kendo-radio-border-radius50%
Description
The border radius of the RadioButton.
$kendo-radio-border-width1px
Description
The border width of the RadioButton.
$kendo-radio-sizes( sm: ( size: map.get( $kendo-spacing, 4 ), glyph-size: map.get( $kendo-spacing, 3.5 ), indicator-size: map.get( $kendo-spacing, 2 ), ripple-size: 300% ), md: ( size: map.get( $kendo-spacing, 5 ), glyph-size: map.get( $kendo-spacing, 4.5 ), indicator-size: map.get( $kendo-spacing, 2.5 ), ripple-size: 300% ), lg: ( size: map.get( $kendo-spacing, 6 ), glyph-size: map.get( $kendo-spacing, 5.5 ), indicator-size: map.get( $kendo-spacing, 3 ), ripple-size: 300% ) )
Description
The map with the different RadioButton sizes.
$kendo-radio-bg$kendo-component-bg
Description
The background color of the RadioButton.
$kendo-radio-texttransparent
Description
The color of the RadioButton.
$kendo-radio-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the RadioButton.
$kendo-radio-hover-bg$kendo-radio-bg
Description
The background color of the hovered RadioButton.
$kendo-radio-hover-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 ))
Description
The color of the hovered RadioButton.
$kendo-radio-hover-border$kendo-radio-border
Description
The border color of the hovered RadioButton.
$kendo-radio-checked-bg$kendo-radio-bg
Description
The background color of the checked RadioButton.
$kendo-radio-checked-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The color of the checked RadioButton.
$kendo-radio-checked-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the checked RadioButton.
$kendo-radio-hover-checked-bg$kendo-radio-bg
Description
The background color of the checked and hovered RadioButton.
$kendo-radio-hover-checked-textif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The color of the checked and hovered RadioButton.
$kendo-radio-hover-checked-borderif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The border color of the checked and hovered RadioButton.
$kendo-radio-focus-bordernull
Description
The border color of the focused RadioButton.
$kendo-radio-focus-shadownull
Description
The box shadow of the focused RadioButton.
$kendo-radio-focus-outline1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The outline of the focused RadioButton.
$kendo-radio-focus-outline-offset2px
Description
The outline offset of the focused RadioButton.
$kendo-radio-disabled-bg$kendo-radio-bg
Description
The background color of the disabled RadioButton.
$kendo-radio-disabled-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The color of the disabled RadioButton.
$kendo-radio-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bg$kendo-radio-disabled-bg
Description
The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-text$kendo-radio-disabled-text
Description
The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-border$kendo-radio-disabled-border
Description
The border color of the disabled and checked RadioButton.
$kendo-radio-invalid-bg$kendo-radio-bg
Description
The background color of the invalid RadioButton.
$kendo-radio-invalid-text$kendo-invalid-text
Description
The color of the invalid RadioButton.
$kendo-radio-invalid-border$kendo-invalid-border
Description
The border color of the invalid RadioButton.
$kendo-radio-indicator-typepseudo
Description
The type of the RadioButton indicator.
$kendo-radio-indicator-border-radius50%
Description
The border radius of the RadioButton indicator.
$kendo-radio-glyph-font-family"WebComponentsIcons", monospace
Description
The glyph font family of the RadioButton indicator.
$kendo-radio-checked-glyph"\e308"
Description
The glyph of the RadioButton indicator.
$kendo-radio-checked-imageescape-svg( url("data:image/svg+xml,") )
Description
The image of the checked RadioButton indicator.
$kendo-radio-disabled-checked-imagenull
Description
The image of the disabled and checked RadioButton indicator.
$kendo-radio-label-spacingmap.get( $kendo-spacing, 2 )
Description
The horizontal margin of the RadioButton inside of a label.
$kendo-radio-list-spacingmap.get( $kendo-spacing, 4 )
Description
The horizontal list item margin of the RadioButton.
$kendo-radio-list-item-padding-x0px
Description
The horizontal list item padding of the RadioButton.
$kendo-radio-list-item-padding-y$kendo-list-md-item-padding-y
Description
The vertical list item padding of the RadioButton.
$kendo-radio-list-item-gapmap.get( $kendo-spacing, 2 )
Description
The gap between the list items of the RadioButton.
$kendo-radio-ripple-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the RadioButton ripple.
$kendo-radio-ripple-opacity.25
Description
The opacity of the RadioButton ripple.

Rating

NameTypeDefault valueComputed value
$kendo-rating-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Rating.
$kendo-rating-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Rating.
$kendo-rating-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Rating.
$kendo-rating-spacingmap.get( $kendo-spacing, 1 )
Description
The content spacing of the Rating.
$kendo-rating-item-padding-xmap.get( $kendo-spacing, 0.5 )
Description
The horizontal padding of the Rating item.
$kendo-rating-item-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Rating item.
$kendo-rating-item-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Rating item.
$kendo-rating-item-hover-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the hovered Rating item.
$kendo-rating-item-focus-text$kendo-rating-item-text
Description
The text color of the focused Rating item.
$kendo-rating-item-focus-outline-width1px
Description
The outline width of the focused Rating item.
$kendo-rating-item-focus-outline-stylesolid
Description
The outline style of the focused Rating item.
$kendo-rating-item-focus-outlinecurrentColor
Description
The outline color of the focused Rating item.
$kendo-rating-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the selected Rating item.
$kendo-rating-item-selected-hover-textif($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
Description
The text color of the selected and hovered Rating item.

Scheduler

NameTypeDefault valueComputed value
$kendo-scheduler-border-width1px
Description
Width of the border around the scheduler.
$kendo-scheduler-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the scheduler.
$kendo-scheduler-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the scheduler.
$kendo-scheduler-line-heightvar( --kendo-line-height, normal )
Description
Line height of the scheduler.
$kendo-scheduler-bgvar( --kendo-component-bg, initial )
Description
Background color of the scheduler.
$kendo-scheduler-textvar( --kendo-component-text, initial )
Description
Text color of the scheduler.
$kendo-scheduler-bordervar( --kendo-component-border, initial )
Description
Border color of the scheduler.
$kendo-scheduler-selected-bgif($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 ))
Description
Background color of the selected row in scheduler.
$kendo-scheduler-selected-text$kendo-scheduler-text
Description
Text color of the selected row in scheduler.
$kendo-scheduler-selected-border$kendo-scheduler-border
Description
Border color of the selected row in scheduler.
$kendo-scheduler-toolbar-bgvar( --kendo-toolbar-bg, $kendo-toolbar-bg )
Description
Background color of the scheduler toolbar.
$kendo-scheduler-toolbar-textvar( --kendo-toolbar-text, $kendo-toolbar-text )
Description
Text color of the scheduler toolbar.
$kendo-scheduler-toolbar-bordervar( --kendo-toolbar-border, $kendo-toolbar-border )
Description
Border color of the scheduler toolbar.
$kendo-scheduler-toolbar-gradientnull
Description
Gradient of the scheduler toolbar.
$kendo-scheduler-footer-bgvar( --kendo-toolbar-bg, $kendo-toolbar-bg )
Description
Background color of the scheduler footer.
$kendo-scheduler-footer-textvar( --kendo-toolbar-text, $kendo-toolbar-text )
Description
Text color of the scheduler footer.
$kendo-scheduler-footer-bordervar( --kendo-toolbar-border, $kendo-toolbar-border )
Description
Border color of the scheduler footer.
$kendo-scheduler-footer-gradientnull
Description
Gradient of the scheduler footer.
$kendo-scheduler-event-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
Border radius of the scheduler event.
$kendo-scheduler-event-line-height$kendo-scheduler-line-height
Description
Line height of the scheduler event.
$kendo-scheduler-event-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the scheduler event.
$kendo-scheduler-event-padding-ymap.get( $kendo-spacing, 0.5 )
Description
Vertical padding of the scheduler event.
$kendo-scheduler-event-min-heightcalc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} )
Description
Minumum height of the scheduler event.
$kendo-scheduler-event-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Background color of the scheduler event.
$kendo-scheduler-event-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the scheduler event.
$kendo-scheduler-event-border$kendo-scheduler-event-bg
Description
Border color of the scheduler event.
$kendo-scheduler-event-gradientnull
Description
Gradient of the scheduler event.
$kendo-scheduler-event-shadownull
Description
Shadow of the scheduler event.
$kendo-scheduler-event-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of the hovered scheduler event.
$kendo-scheduler-event-hover-textvar( --kendo-hover-text, inherit )
Description
Text color of the hovered scheduler event.
$kendo-scheduler-event-hover-bordervar( --kendo-hover-border, inherit )
Description
Boeswe color of the hovered scheduler event.
$kendo-scheduler-event-hover-gradientnull
Description
Gradient of the hovered scheduler event.
$kendo-scheduler-event-hover-shadownull
Description
Shadow of the hovered scheduler event.
$kendo-scheduler-event-selected-bgif($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
Description
Background color of the selected scheduler event.
$kendo-scheduler-event-selected-text$kendo-scheduler-event-text
Description
Text color of the selected scheduler event.
$kendo-scheduler-event-selected-border$kendo-scheduler-event-bg
Description
Border color of the selected scheduler event.
$kendo-scheduler-event-selected-gradientnull
Description
Gradient of the selected scheduler event.
$kendo-scheduler-event-selected-shadownone
Description
Shadow of the selected scheduler event.
$kendo-scheduler-event-ongoing-shadowinset 0px 0px 0px 1px #ff0000
Description
Shadow of the ongoing scheduler event.
$kendo-scheduler-cell-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the scheduler cell.
$kendo-scheduler-cell-padding-ymap.get( $kendo-spacing, 2 )
Description
Vertical padding of the scheduler cell.
$kendo-scheduler-cell-height$kendo-line-height-em
Description
Height of the scheduler cell.
$kendo-scheduler-datecolumn-width12em
Description
Width of the scheduler date column.
$kendo-scheduler-timecolumn-width11em
Description
Width of the scheduler time column.
$kendo-scheduler-nonwork-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
Background color of the non-working hours in the scheduler.
$kendo-scheduler-nonwork-textnull
Description
Text color of the non-working hours in the scheduler.
$kendo-scheduler-weekend-bgnull
Description
Background color of the weekends in the scheduler.
$kendo-scheduler-weekend-textnull
Description
Text color of the weekends in the scheduler.
$kendo-scheduler-othermonth-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
Background color of the other months in the scheduler.
$kendo-scheduler-othermonth-textnull
Description
Text color of the other months in the scheduler.
$kendo-scheduler-yearview-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the scheduler year view.
$kendo-scheduler-yearview-padding-y$kendo-scheduler-yearview-padding-x
Description
Vertical padding of the scheduler year view.
$kendo-scheduler-yearview-calendar-gapmap.get( $kendo-spacing, 3 )
Description
Spacing between the calendars in the scheduler year view.
$kendo-scheduler-yearview-indicator-size3px
Description
Days with events indicator size in the scheduler year view.
$kendo-scheduler-yearview-indicator-calc-offset-topcalc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) )
Description
Top position of the days with events indicator in the scheduler year view.
$kendo-scheduler-yearview-indicator-calc-offset-leftcalc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) )
Description
Left position of the days with events indicator in the scheduler year view.
$kendo-scheduler-yearview-indicator-border-radius50%
Description
Border radius of the days with events indicator in the scheduler year view.
$kendo-scheduler-yearview-indicator-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Background color of the days with events indicator in the scheduler year view.
$kendo-scheduler-yearview-indicator-selected-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Background color of the selected days with events indicator in the scheduler year view.
$kendo-scheduler-tooltip-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the scheduler tooltip.
$kendo-scheduler-tooltip-padding-y$kendo-scheduler-tooltip-padding-x
Description
Vertical padding of the scheduler tooltip.
$kendo-scheduler-tooltip-border-width0
Description
Width of the border of the scheduler tooltip.
$kendo-scheduler-tooltip-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Background color of the scheduler tooltip.
$kendo-scheduler-tooltip-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
Text color of the scheduler tooltip.
$kendo-scheduler-tooltip-bordernull
Description
Border color of the scheduler tooltip.
$kendo-scheduler-tooltip-shadowk-elevation(5)
Description
Shadow of the scheduler tooltip.
$kendo-scheduler-tooltip-title-margin-ymap.get( $kendo-spacing, 3 )
Description
Vertical spacing of the scheduler tooltip title.
$kendo-scheduler-tooltip-month-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the month inside the scheduler tooltip.
$kendo-scheduler-tooltip-day-font-sizecalc( $kendo-scheduler-tooltip-month-font-size * 2 )
Description
Font size of the day inside the scheduler tooltip.
$kendo-scheduler-tooltip-events-max-height250px
Description
Max height of the events inside the scheduler tooltip.
$kendo-scheduler-tooltip-events-gapmap.get( $kendo-spacing, 2 )
Description
Spacing between the events inside the scheduler tooltip.
$kendo-scheduler-tooltip-event-padding-x$kendo-scheduler-event-padding-x
Description
Horizontal padding of the events inside the scheduler tooltip.
$kendo-scheduler-tooltip-event-padding-y$kendo-scheduler-event-padding-y
Description
Vertical padding of the events inside the scheduler tooltip.
$kendo-scheduler-tooltip-event-border-radius$kendo-scheduler-event-border-radius
Description
Border radius of the events inside the scheduler tooltip.
$kendo-scheduler-tooltip-event-gapmap.get( $kendo-spacing, 0.5 )
Description
Spacing between the events items inside the scheduler tooltip.
$kendo-scheduler-tooltip-callout-color$kendo-scheduler-tooltip-bg
Description
Color of the scheduler tooltip callout.
$kendo-scheduler-resize-handle-width2em
Description
Width of the scheduler resize handle.
$kendo-scheduler-more-btn-height13px
Description
Height of the scheduler more events button.
$kendo-scheduler-marquee-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Color of the scheduler marquee.

Scrollview

NameTypeDefault valueComputed value
$kendo-scrollview-border-width0px
Description
The width of the border around the ScrollView.
$kendo-scrollview-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the ScrollView.
$kendo-scrollview-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the ScrollView.
$kendo-scrollview-line-heightvar( --kendo-line-height, normal )
Description
The line height of the ScrollView.
$kendo-scrollview-textvar( --kendo-component-text, inherit )
Description
The text color of the ScrollView.
$kendo-scrollview-bgvar( --kendo-component-bg, inherit )
Description
The background color of the ScrollView.
$kendo-scrollview-bordervar( --kendo-component-border, inherit )
Description
The border color of the ScrollView.
$kendo-scrollview-pagebutton-size10px
Description
The size of the ScrollView page button.
$kendo-scrollview-pagebutton-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the ScrollView page button.
$kendo-scrollview-pagebutton-border$kendo-scrollview-pagebutton-bg
Description
The border color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The primary background color of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-border$kendo-scrollview-pagebutton-primary-bg
Description
The primary border color of the ScrollView page button.
$kendo-scrollview-pagebutton-hover-shadow0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))
Description
The hover box shadow of the ScrollView page button.
$kendo-scrollview-pagebutton-focus-shadow0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The focus box shadow of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-hover-shadow0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))
Description
The primary hover box shadow of the ScrollView page button.
$kendo-scrollview-pagebutton-primary-focus-shadow0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The primary focus box shadow of the ScrollView page button.
$kendo-scrollview-pager-offset0px
Description
The offset of the ScrollView pager.
$kendo-scrollview-pager-item-spacing20px
Description
The spacing between the ScrollView pager items.
$kendo-scrollview-pager-item-border-width0px
Description
The border width of the ScrollView pager items.
$kendo-scrollview-pager-heightcalc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} )
Description
The height of the ScrollView pager.
$kendo-scrollview-navigation-colorif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The color of the ScrollView navigation arrows.
$kendo-scrollview-navigation-arrow-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-bgtransparent
Description
The background color of the ScrollView navigation.
$kendo-scrollview-navigation-focus-shadow0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The focus box shadow of the ScrollView navigation arrows.
$kendo-scrollview-navigation-arrow-hover-shadowvar( --kendo-box-shadow-depth-4, none )
Description
The hover box shadow of the ScrollView navigation arrows.
$kendo-scrollview-pager-light-bgrgba( $kendo-color-white, .4 )
Description
The background color of the ScrollView pager in light mode.
$kendo-scrollview-pager-dark-bgrgba( $kendo-color-black, .4 )
Description
The background color of the ScrollView pager in dark mode.
$kendo-scrollview-transition-duration.3s
Description
The duration of the ScrollView transition.
$kendo-scrollview-transition-timing-functionease-in-out
Description
The timing function of the ScrollView transition.
NameTypeDefault valueComputed value
$kendo-searchbox-icon-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Color of the searchbox icon.

Signature

NameTypeDefault valueComputed value
$kendo-signature-width250px
Description
The default width of the signature component.
$kendo-signature-height84px
Description
The default height of the signature component.
$kendo-signature-maximized-width750px
Description
The default width of the maximized signature component.
$kendo-signature-maximized-height252px
Description
The default height of the maximized signature component.
$kendo-signature-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal paddings of the signature component.
$kendo-signature-padding-y$kendo-signature-padding-x
Description
The vertical paddings of the signature component.
$kendo-signature-disabled-opacity.3
Description
The opacity of the disabled signature component.
$kendo-signature-line-width1px
Description
The bottom-border width of the row line of the signature component.
$kendo-signature-line-styledashed
Description
The border style of the row line of the signature component.
$kendo-signature-line-colorif($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 ))
Description
The color of the row line of the signature component.
$kendo-signature-line-disabled-colorif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The color of the row line of the disabled signature component.
$kendo-signature-line-sizecalc( 100% - 2 * #{$kendo-signature-padding-x} )
Description
The width of the row line of the signature component.
$kendo-signature-line-bottom-offset33%
Description
The bottom offset of the row line of the signature component.
$kendo-signature-sizes( sm: ( padding-x: $kendo-signature-sm-padding-x, padding-y: $kendo-signature-sm-padding-y, line-size: $kendo-signature-sm-line-size ), md: ( padding-x: $kendo-signature-md-padding-x, padding-y: $kendo-signature-md-padding-y, line-size: $kendo-signature-md-line-size ), lg: ( padding-x: $kendo-signature-lg-padding-x, padding-y: $kendo-signature-lg-padding-y, line-size: $kendo-signature-lg-line-size ) )
Description
The sizes map of the signature component.
$kendo-signature-actions-gapmap.get( $kendo-spacing, 1 )
Description
The gap between individual action items of the signature component
$kendo-signature-maximized-line-width3px
Description
The bottom-border width of the row line of the maximized signature component.
$kendo-signature-lg-min-height110px
Description
The min-height of the large size signature component.

Skeleton

NameTypeDefault valueComputed value
$kendo-skeleton-text-transformscale( 1, .6 )
Description
The transform scale of the Skeleton text.
$kendo-skeleton-text-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the Skeleton text.
$kendo-skeleton-rect-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the rectangular Skeleton.
$kendo-skeleton-circle-border-radius9999px
Description
The border radius of the circular Skeleton.
$kendo-skeleton-item-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))
Description
The background color of the Skeleton item.
$kendo-skeleton-wave-bgif($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the Skeleton wave animation.

Slider

NameTypeDefault valueComputed value
$kendo-slider-size200px
Description
The default size of the Slider.
$kendo-slider-alt-size26px
Description
The default size of the Slider's track wrap.
$kendo-slider-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing of the Slider.
$kendo-slider-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Slider.
$kendo-slider-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Slider.
$kendo-slider-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Slider.
$kendo-slider-textinherit
Description
The text color of the Slider.
$kendo-slider-track-sizemap.get( $kendo-spacing, 1 )
Description
The size of the Slider track.
$kendo-slider-track-border-radiusmap.get( $kendo-spacing, 0.5 )
Description
The border radius of the Slider track.
$kendo-slider-track-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the Slider track.
$kendo-slider-track-borderinherit
Description
The border color of the Slider track.
$kendo-slider-track-hover-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the hovered Slider track.
$kendo-slider-track-hover-borderinherit
Description
The border color of the hovered Slider track.
$kendo-slider-track-focus-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the focused Slider track.
$kendo-slider-track-focus-borderinherit
Description
The border color of the focused Slider track.
$kendo-slider-selection-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the Slider's track selection.
$kendo-slider-thumb-size16px
Description
The default size of the Slider thumb.
$kendo-slider-thumb-border-widthmap.get( $kendo-spacing, 0.5 )
Description
The default border width of the Slider thumb.
$kendo-slider-thumb-border-radius999em
Description
The border radius of the Slider thumb.
$kendo-slider-thumb-active-scalenull
Description
The transition scale of the active Slider thumb.
$kendo-slider-thumb-active-sizenull
Description
The size of the active Slider thumb.
$kendo-slider-thumb-bgvar( --kendo-component-bg, transparent )
Description
The background color of the Slider thumb.
$kendo-slider-thumb-textinherit
Description
The text color of the Slider thumb.
$kendo-slider-thumb-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the Slider thumb.
$kendo-slider-thumb-gradienttransparent
Description
The gradient of the Slider thumb.
$kendo-slider-thumb-hover-bg$kendo-slider-thumb-bg
Description
The background color of the hovered Slider thumb.
$kendo-slider-thumb-hover-textinherit
Description
The text color of the hovered Slider thumb.
$kendo-slider-thumb-hover-borderif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))
Description
The border color of the hovered Slider thumb.
$kendo-slider-thumb-hover-gradienttransparent
Description
The gradient of the hovered Slider thumb.
$kendo-slider-thumb-active-bg$kendo-slider-thumb-hover-bg
Description
The background color of the active Slider thumb.
$kendo-slider-thumb-active-textinherit
Description
The text color of the active Slider thumb.
$kendo-slider-thumb-active-borderif($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 ))
Description
The border color of the active Slider thumb.
$kendo-slider-thumb-active-gradienttransparent
Description
The gradient of the active Slider thumb.
$kendo-slider-thumb-focus-bg$kendo-slider-thumb-hover-bg
Description
The background color of the focused Slider thumb.
$kendo-slider-thumb-focus-textinherit
Description
The text color of the focused Slider thumb.
$kendo-slider-thumb-focus-border$kendo-slider-thumb-active-border
Description
The border color of the focused Slider thumb.
$kendo-slider-thumb-focus-gradienttransparent
Description
The gradient of the focused Slider thumb.
$kendo-slider-disabled-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 ))
Description
The text color of the disabled Slider.
$kendo-slider-track-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))
Description
The background color of the disabled Slider track.
$kendo-slider-selection-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))
Description
The background color of the disabled Slider's track selection.
$kendo-slider-thumb-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the disabled Slider thumb.
$kendo-slider-transition-speed.3s
Description
The transition speed of the Slider.
$kendo-slider-transition-functionease-out
Description
The transition function of the Slider.
$kendo-slider-thumb-transition-speed.4s
Description
The transition speed of the Slider thumb.
$kendo-slider-thumb-transition-functioncubic-bezier(.25, .8, .25, 1)
Description
The transition function of the Slider thumb.

Split-button

NameTypeDefault valueComputed value
$kendo-split-button-sm-arrow-padding-y$kendo-button-sm-padding-y
Description
The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-y$kendo-button-md-padding-y
Description
The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-y$kendo-button-lg-padding-y
Description
The vertical padding of the large arrow Button.
$kendo-split-button-sm-arrow-padding-x$kendo-split-button-sm-arrow-padding-y
Description
The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-x$kendo-split-button-md-arrow-padding-y
Description
The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-x$kendo-split-button-lg-arrow-padding-y
Description
The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-delimiter-sizecalc( #{$kendo-button-inner-calc-size} / 2 )
Description
The height of the SplitButton arrow delimiter.
$kendo-split-button-arrow-delimiter-line-size1px
Description
The width of the SplitButton arrow delimiter.
$kendo-split-button-arrow-delimiter-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the SplitButton arrow delimiter.
$kendo-split-button-sizes( sm: $kendo-split-button-sm-arrow-padding-y, md: $kendo-split-button-md-arrow-padding-y, lg: $kendo-split-button-lg-arrow-padding-y )
Description
The sizes map for the SplitButton.

Splitter

NameTypeDefault valueComputed value
$kendo-splitter-border-width1px
Description
The width of the border around the Splitter.
$kendo-splitter-font-sizevar( --kendo-font-size, initial )
Description
The font size of the Splitter.
$kendo-splitter-line-heightvar( --kendo-line-height, initial )
Description
The line height of the Splitter.
$kendo-splitter-font-familyvar( --kendo-font-family, initial )
Description
The font family of the Splitter.
$kendo-splitter-bgvar( --kendo-component-bg, initial )
Description
The background color of the Splitter.
$kendo-splitter-textvar( --kendo-component-text, initial )
Description
The text color of the Splitter.
$kendo-splitter-bordervar( --kendo-component-border, initial )
Description
The border color of the Splitter.
$kendo-splitter-splitbar-sizemap.get( $kendo-spacing, 3 )
Description
The size of the Splitter split bar.
$kendo-splitter-drag-handle-lengthmap.get( $kendo-spacing, 5 )
Description
The length of the Splitter drag handle.
$kendo-splitter-drag-handle-thicknessmap.get( $kendo-spacing, 0.5 )
Description
The thickness of the Splitter drag handle.
$kendo-splitter-drag-icon-marginmap.get( $kendo-spacing, 2 )
Description
The margin of the Splitter drag handle icon.
$kendo-splitter-collapse-icon-padding-xnull
Description
The horizontal padding of the collapse icon in the Splitter.
$kendo-splitter-collapse-icon-padding-ymap.get( $kendo-spacing, .5 )
Description
The vertical padding of the collapse icon in the Splitter.
$kendo-splitbar-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Splitter split bar.
$kendo-splitbar-textvar( --kendo-component-text, initial )
Description
The text color of the Splitter split bar.
$kendo-splitbar-hover-bgif($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
Description
The hover background color of the Splitter split bar.
$kendo-splitbar-hover-text$kendo-splitbar-text
Description
The hover text color of the Splitter split bar.
$kendo-splitbar-selected-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The selected background color of the Splitter split bar.
$kendo-splitbar-selected-textvar( --kendo-component-bg, inherit )
Description
The selected text color of the Splitter split bar.
$kendo-splitter-splitbar-static-sizemap.get( $kendo-spacing, 0.5 )
Description
The size of the Splitter static split bar.

Spreadsheet

NameTypeDefault valueComputed value
$kendo-spreadsheet-border-width1px
Description
The width of the border around the Spreadsheet.
$kendo-spreadsheet-font-familyvar( --kendo-font-family, initial )
Description
The font family of the Spreadsheet.
$kendo-spreadsheet-font-sizevar( --kendo-font-size, initial )
Description
The font size of the Spreadsheet.
$kendo-spreadsheet-line-heightvar( --kendo-line-height, initial )
Description
The line height of the Spreadsheet.
$kendo-spreadsheet-bgvar( --kendo-component-bg, initial )
Description
The background color of the Spreadsheet.
$kendo-spreadsheet-textvar( --kendo-component-text, initial )
Description
The text color of the Spreadsheet.
$kendo-spreadsheet-bordervar( --kendo-component-border, initial )
Description
The border color of the Spreadsheet.
$kendo-spreadsheet-primary-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The primary border color of the Spreadsheet.
$kendo-spreadsheet-primary-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The primary background color of the Spreadsheet.
$kendo-spreadsheet-header-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Spreadsheet header.
$kendo-spreadsheet-header-text$kendo-table-header-text
Description
The text color of the Spreadsheet header.
$kendo-spreadsheet-header-border$kendo-table-header-border
Description
The border color of the Spreadsheet header.
$kendo-spreadsheet-table-header-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-text$kendo-spreadsheet-header-text
Description
The text color of the Spreadsheet table headers.
$kendo-spreadsheet-table-header-border$kendo-spreadsheet-header-border
Description
The border color of the Spreadsheet table headers.
$kendo-spreadsheet-selected-textif($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 ))
Description
The text color of the selected Spreadsheet.
$kendo-spreadsheet-selected-bgif($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 ))
Description
The background color of the selected Spreadsheet.
$kendo-spreadsheet-selected-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the selected Spreadsheet.
$kendo-spreadsheet-popup-menu-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Spreadsheet popup Menu.
$kendo-spreadsheet-popup-menu-padding-y$kendo-spreadsheet-popup-menu-padding-x
Description
The vertical padding of the Spreadsheet popup Menu.
$kendo-spreadsheet-action-bar-border-width1px
Description
The border width of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-ymap.get( $kendo-spacing, 1 )
Description
The horizontal padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-padding-xmap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-size$kendo-spreadsheet-font-size
Description
The font size of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-font-familyArial, Verdana, sans-serif
Description
The font family of the Spreadsheet action bar.
$kendo-spreadsheet-action-bar-spacingmap.get( $kendo-spacing, 2 )
Description
The spacings of the Spreadsheet action bar.
$kendo-spreadsheet-formula-bar-gapmap.get( $kendo-spacing, 2 )
Description
The gap of the Spreadsheet formula bar.
$kendo-spreadsheet-formula-input-padding-xvar( --kendo-input-md-padding-x, #{$kendo-input-md-padding-x} )
Description
The horizontal padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-padding-yvar( --kendo-input-md-padding-y, #{$kendo-input-md-padding-y} )
Description
The vertical padding of the Spreadsheet formula input.
$kendo-spreadsheet-formula-input-line-heightvar( --kendo-input-md-line-height, #{$kendo-input-md-line-height} )
Description
The line height of the Spreadsheet formula input.
$kendo-spreadsheet-view-font-familyArial, Verdana, sans-serif
Description
The font family of the Spreadsheet view.
$kendo-spreadsheet-view-font-size$kendo-spreadsheet-font-size
Description
The font size of the Spreadsheet view.
$kendo-spreadsheet-selection-bgtransparent
Description
The background color of the Spreadsheet selection.
$kendo-spreadsheet-selection-textnull
Description
The text color of the Spreadsheet selection.
$kendo-spreadsheet-selection-border$kendo-spreadsheet-primary-border
Description
The border color of the Spreadsheet selection.
$kendo-spreadsheet-selection-shadownone
Description
The shadow of the Spreadsheet selection.
$kendo-spreadsheet-single-selection-bg$kendo-spreadsheet-selected-border
Description
The background color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-textnull
Description
The text color of the Spreadsheet single selection.
$kendo-spreadsheet-single-selection-border$kendo-spreadsheet-border
Description
The border color of the Spreadsheet single selection.
$kendo-spreadsheet-partial-selection-bgcolor-mix(in srgb, $kendo-spreadsheet-selected-bg 75%, transparent)
Description
The background color of the Spreadsheet partial selection.
$kendo-spreadsheet-active-cell-bg$kendo-spreadsheet-bg
Description
The background color of the Spreadsheet active cell.
$kendo-spreadsheet-active-cell-shadowinset 0 0 0 1px $kendo-spreadsheet-selected-bg
Description
The shadow of the Spreadsheet active cell.
$kendo-spreadsheet-auto-fill-bgcolor-mix(in srgb, $kendo-spreadsheet-selected-bg 75%, transparent)
Description
The background color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-textnull
Description
The text color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-border$kendo-spreadsheet-selected-bg
Description
The border color of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-shadowinset 0 0 0 1px $kendo-spreadsheet-selected-bg
Description
The shadow of the Spreadsheet auto fill.
$kendo-spreadsheet-auto-fill-punch-bgcolor-mix(in srgb, $kendo-spreadsheet-bg 50%, transparent)
Description
The background color of the Spreadsheet auto fill punch.
$kendo-spreadsheet-cell-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-padding-x$kendo-spreadsheet-cell-padding-y
Description
The horizontal padding of the Spreadsheet cell.
$kendo-spreadsheet-cell-editor-line-heightvar( --kendo-spreadsheet-line-height, $kendo-spreadsheet-line-height )
Description
The line height of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-padding-y0px
Description
The vertical padding of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-bg$kendo-spreadsheet-bg
Description
The background color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-text$kendo-spreadsheet-text
Description
The text color of the Spreadsheet cell editor.
$kendo-spreadsheet-cell-editor-bordernull
Description
The border color of the Spreadsheet cell editor.
$kendo-spreadsheet-resize-handle-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the Spreadsheet resize handle.
$kendo-spreadsheet-cell-comment-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the Spreadsheet cell comment indicator.
$kendo-spreadsheet-cell-dirty-borderif($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))
Description
The border color of the Spreadsheet cell dirty indicator.
$kendo-spreadsheet-sheets-bar-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-bar-border-width1px
Description
The border width of the Spreadsheet sheets bar.
$kendo-spreadsheet-sheets-remove-inline-start- map.get( $kendo-spacing, 2 )
Description
The horizontal margin of the Spreadsheet sheets remove.
$kendo-spreadsheet-sheets-remove-inline-endmap.get( $kendo-spacing, 2 )
Description
The vertical margin of the Spreadsheet sheets remove.
$kendo-filter-menu-padding-leftcalc( var( --kendo-icon-size, 1rem ) + 2 * var( --kendo-padding-y, #{$kendo-padding-md-y} ) )
Description
The left padding of the Spreadsheet sheets menu.
$kendo-spreadsheet-filter-button-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background color of the Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-hover-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the hovered Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-hover-bgif($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
Description
The background color of the hovered Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-hover-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the hovered Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-active-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of the active Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-active-bgf($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))
Description
The background color of the active Spreadsheet filter Button.
$kendo-spreadsheet-filter-button-active-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the active Spreadsheet filter Button.
$kendo-spreadsheet-filter-menu-icon-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The color of the Spreadsheet Menu icon.
$kendo-spreadsheet-error-borderif($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))
Description
The border color of the Spreadsheet error.
$kendo-spreadsheet-insert-image-dialog-border-styledashed
Description
The border style of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-border-widthmap.get( $kendo-spacing, 0.5 )
Description
The border width of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-text-margin-bottom30px
Description
The bottom margin of the Spreadsheet image Dialog.
$kendo-spreadsheet-insert-image-dialog-preview-width355px
Description
The width of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-height230px
Description
The height of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-img"image-fluent.png"
Description
The image of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-bordervar( --kendo-component-border, initial )
Description
The border of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-border-radiusvar( --kendo-border-radius-md, initial )
Description
The border radius of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadowinset 0 0 0 2000px rgba(0, 0, 0, .5)
Description
The shadow of the Spreadsheet image Dialog preview.
$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radiusvar( --kendo-border-radius-md, initial )
Description
The border radius of the Spreadsheet image Dialog preview overlay.
$kendo-spreadsheet-insert-image-dialog-overlay-hover-textvar( --kendo-component-bg, initial )
Description
The text color of the hovered Spreadsheet image Dialog preview.
$kendo-spreadsheet-drawing-handle-widthmap.get( $kendo-spacing, 1.5 )
Description
The width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-heightmap.get( $kendo-spacing, 1.5 )
Description
The height of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-stylesolid
Description
The border style of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-width1px
Description
The border width of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-colorvar( --kendo-selected-bg, initial )
Description
The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-outline-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The outline color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-handle-border-radiusvar( --kendo-border-radius-lg, initial )
Description
The border radius of the Spreadsheet drawing handle.
$kendo-spreadsheet-drawing-outline-stylesolid
Description
The outline style of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-outline-widthmap.get( $kendo-spacing, 0.5 )
Description
The outline width of the Spreadsheet drawing.
$kendo-spreadsheet-drawing-anchor-bg$kendo-spreadsheet-selected-bg
Description
The background color of the Spreadsheet drawing anchor.
$kendo-spreadsheet-dropzone-spacing-ymap.get( $kendo-spacing, 3 )
Description
The vertical spacing of the Spreadsheet DropZone.
$kendo-spreadsheet-insert-image-dialog-imgurl("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAGQCAYAAAAjl1AKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMGVmMzZmZi04YmI1LTRlN2YtOTcwMS04OTU5ZTg1N2ZhY2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDNDOTBDNUQ2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDNDOTBDNUM2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmZmZjM0Mi05NjEyLTQwM2YtYWZhYS01MTE1ZjQ2NThmMWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphYjlhMmUwMy1kNmIwLTY3NGMtODc4ZS0yMjUzMjdkNDI5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68UHLbAAAgpElEQVR42uzd2ZNc9dnY8TOL9gU0IAkjgwpkI8QOQmI1FS+FHW9VLt/7wpWb900qKV+lTL3vTZzElSvnJilfvM4fkQunfEOw2LUgiUUsNhiMAFsjtIzQrpmJnhOdoaent+np5SyfT1XXiJ4R0hz19Lef31l6ZHZ2NgEAWhu1CQBAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQQAwQQAwQQAwQQAMuP9/gNGRkZsZQAGop/v8WzCBIA8TJj9GFr9swGUYyAUTHEEoLvn+NxGdLwgG1BEAaoxYY7kNZ55C+bIEu4DoFixHGkT0JE8RTMvwWwXxRHBBKhMQGcbPN8PPZx5COZIh6EcEU+AQgex2fRYH8tm4RxqNIcdzGbxa/dROAGKOT3WhnCk5nOzTX5PbqI5zGB2Estmv24XTwDyO2HOtohi/f25ieawgtkqlvW/HukgnqIJULxY1v96tsV0OvRo5mkfZn0YR5tEs920CUB+o9kokvW3mQ6iWYkJc6RNLOtvo7/85S/X/eIXv/jntWvX/mjZsmVfGRsbG3eNWoCClvOq6enpy1f9/Ysvvvjfv/nNb/7zr3/96zM1oRxN2u/THHhAR/p5odr0D1gYtvpg1kdztObj6N///vf/NDEx8e/Gx8eXeZgBlM+VK1cunzhx4n9u3rz5n65Fc6Zm0my0dFs/tdbGuG9/z2FefL1ROOdi+ZOf/GTl1NTU/920adMvxBKgvOI5/upz/X+I5/x47q8bnEaSnByvMugJs1EkRxoEcyw23Lp16x72UAKojjNnzuxfv379N6/+crrBlDnbbsos44TZ7Mo+aTSPHTv2X8USoHriuT8a0GS6HOqUOewl2QW3OMBnYmLiHz1sAKopGhAtSFqfJTH4aA1pSbbRUmx6m5yc/O833njjv/GQAaiu48eP/6+NGzf+++TLg4AaLc0mSQWWZJuN1iNr1qz5vocKQLVdbcG/TnJ2cZpBBrPV1Xnmps1ly5Zt8lABqLarLdiYNL9YTbOmlCaY9fFsdHm8kbgogYcKQLVda0HTVpR9wuwonq7gA0CD418qtSTbzdQJQIW7macujOZgYwBA7psxmrONIKAA5LIN42XaIFeuXEmmpqaSixcvJjMzMx5qAMOYxEZHkxUrViTr16+P68T2shGVe3uvvohYTk5OCiXAkMXz8Pnz59PhZePGjb2IZj5eCJTlHygmS7EEyFc447m5NJNzWb6ReCUDQL5cuHBBMPP4SgaAfOn39coFEwBypjQH/bhCEAAmTAAQTAAQTAAQTAAQTABAMAFAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQSAAhkvyzcyMjLiXxMAEyYACCYACCYACCYACCYAIJgAIJgAIJgAIJgAIJgAIJgAIJgAIJgAgGACwBJ5ey8AMGECgGACgGACgGACgGACgGACgGACAIIJAIIJAIIJAIIJAIIJAKXg4usAYMIEAMEEAMEEAMEEAMEEAMEEAMEEAAQTAAQTAAQTAAQTAAQTAErBxdcBwIQJAIIJAAMzbhMA9cbGxpLx8fH0Fr8eHR1NP8auj+wWZmdn527T09PJzMxM+vHKlSvpLX4NggmUKpDLly9Pb8uWLUsD2YnaeMb/o14E9PLly8mlS5fSm4AimEDhRBRXrlyZ3mKSrHXmzJnk5MmTyalTp5IvvvgivV28eDG9RfQigukTyLUpdMWKFWls165dm96uv/76ZMOGDcn69evTz8UtxNR54cKF9BYxBcEEcivCtmrVqrmIZYGcnJxMPv300+Rvf/tbGsZMLLc2ky29nj9/Pv3vY8eOzft8/Bk33XRTsmXLlmTTpk3JunXr5qIaf0b8vpg8oQhGWv0w9OQP+PJ0j5Gaj9lttOYW6zljV/8+J7v5c+p/UIFkQbzWrFkzb5r88MMPk7/85S9pKOt18tzQ6msafe7mm29Otm3bltx2223zonv27Nl5kaZc4sVSl/3YcPXD9LXbTM1ttuaW1HxM+tk0wYSSi32SMdHFx5BNku++++7c0mqvItlpROPvsmPHjrnJM8TfJZZ+6/9OCKZgCib0VeyjjFDGPsrw+eefpxPlO++80/NpsptpM3PXXXelE+eNN96Y/nfs34xw2scpmIIpmNB3sfwa+wuzo13/9Kc/JXv37h1oJFt9vtH9jz32WLJ9+/b01xHL2K9qmVYwBVMwoW8/bxHKbKr8+OOPkwMHDqT7CPMwTbb7XEzEu3fvTrZu3To3bUY4+/08hWAKJlRInAcZp3HE/sE49ePgwYPpfsphT5OLnTRD7N/ctWtX+j3FPs2pqSnncArm0IPptBIogYjkddddly7BxkE9L7/8cseT2bCmyVb3HzlyJDl69Gjy1FNPpU+2cU7n6dOnHRDEUJVmwownCaiiOK8yJsv4WfvrX/+avPTSS+mpGkWZJlt9LibMiGYcFBRfE5Om8zaLZ+PGjaWYMF18HQosDu7JYvn+++8ne/bsaRnL7Lqv3Xy+9rqx3Xyu099Te398L88++2zy3nvvpd9jduUgGAZLslDgyTIO8ImQ/PnPf05eeeWVQk+Tre6PFwLxMY6ije85fm3SZNBMmFDEV7rj43OTZbNYFm2abHf/888/nx7ElE2a9de/BcEE5v/Qjo6mB/hky7D1sew2hJ3+3l4GdLH3x6SZLc9mBzmBYAILZNNVhOKjjz5Kj4btVQjzNE22uv+5555LPvjgg3kvHGAQxsv0RAJlFxdPj1NI4jJ3EctBnxLS632Tnd7fKJqxLTZv3pxe7CAupQcmTCCVvS1XiGXYZuckLnVizNM02ey++N4jmnExg7iqkSNnEUwgFSsoMUmF2Id34sSJjqPWj8/18/5O4xlvbp3tv41p0yoTggmkQYh9dnFt2FdffbWjqbCbyXCQU2Mn02S7qL7xxhvp+3nGtoltBIIJFRanT2QXU9+3b1/HU+FiJr28TpOdRPXFF19MP8Y2cqoJggkVVrsUGwe3DOKUkF6dKtLLabLZ/XHN3LfeemvetgLBhIqJg1liaoqjYltdnGBQ50cOI4jtvjZ+/cc//jF9x6LYVg4AQjChgrKjYuO8w35Nk0sJaK+j2s3XZuJNsmu3GQgmVEScRhITU0xOb7/9du5PCRnENNnqaw8dOpR89tln6TaLbQeCCRWRHejzySef5PpydYOcJuuXYuvvi7c3q912IJhQ9h/M0dH0ij7hnXfeyd00OYggtvvaRvcdPnx4bjp3nVl6zaXxIIfiwJV4TMf1YrO3scr75ery8LWxreIdTeJtwGLKPH/+vAcTJkwoezBDHOxjmmy/FFt7fwSzdhuCCRPK+ip2dDQ9cGVqaiqdMAc5NRZpmmx2X2yzuGze9ddfn27LmZkZDypMmFBG2RGecXTsoKfGok2TzX7/p59+Om9bgmBCCWUH+xw9ejT3R7q2+38sNZ7d/v4PP/xw3raEXrAkCzkNZjYl1YahmaUudy72/n4spfby98dF6gUTwYQSGxsbS4+Ojf2XFy9e7Hv4ihrEdvfF0bHZfszYpvG+mSCYULJghtOnTw88fGWL5+TkZBrMOIBKMOkF+zAhh8GM6ag+BHm++Hke92MeP3583jYFEyaU6RXstavTxIRpmlza12bb0BV/EMw6rvRDKX4gr70BcuzDbDRFDTuIRYpnbMNswvT8gGBCyWRP7OfOnRPEJX5ttg3FEsGEEgfzwoULhb/izrDjmV1HVjARTChxMOsv5yaei//aK1euCCaCCWUPZrzrhiAu/Z1LBBPBhJJbygE/4tn6qkggmFCSUMZEFJd0u3z5cqGClLe/a3bhdfFEMKHEwYxTIbIlxbIEbdDnlGYXLBBMBBNKGsxsOsqO8ixj/AYRz5UrVwomggllD+bq1asXXB4vD0Ea9u9fzP8jtqFg0kuuGQU5kl0kfP369fNiMKjrr/bjWrG9vNbsYq6Zm21DF17HhFnHoeOUQXb+5XXXXVf5pdil/j9iG2bb1PMDggklnTA3bNhQyCAO+mtb3b9x48Z5L0JAMKGEwYz3cazaOZK9jmcWzOyKPyCYUCIxDcWTfiwnxlGecU3ZPMQv79Nk/f2rVq1KJiYm0vtNmPSKg34gZ+KCBWHLli2FPDCn26/t9v/R6P9z6623ztuWIJhQQtkSYvak30lMlhq0QQSxl0fAtro/brfddtu8bQm9YEkWcjphfuUrX6nc1Xl6df9Xv/pVEyYmTCi72OcWB//Efsxt27a1nMSKuhTbr/tDTJc33HBDug3tv0QwoeSy68h+/etfL/xS7CDvj9s999wzbxtCr1iShZwGM470jAkzrivbi/fHHPTyar+XYht9LrbV3XffLZiYMKEqYikx2/9233335XqaHNaU2ehzDz/8cPoxtp3lWASTwjt+/LiN0IGLFy+mH7du3drz+PU6fIPYN9ns/trP3X777fO2HfSSa8ky8Fg+//zzyZNPPpls2rTJBmkhTomIA1fiaNkHHnggOXjw4IJINApHs6AM6msHcX+jz+3evTu55ZZb0m0W285zAiZMCh3LPXv2pO/zGNE8duyYjdJGdqWfOPin22kyr0fALnaKbfe5u+66a942A8Gk8LHMntREs73YFxcT00033ZR885vfzEUQlxq9pQS02ee+973vJTfffHO6rZx7iWBSmljWTk+i2d65c+fSj/fee2+ybt26wl6urpcBrf1cvO/lQw89NG9bgWBSyFhGFOtjKZqdi6kpO0XiqaeeGug02cvL1fXi9zT6fU8//XT6MbaRN4tGMCl0LNu96s+iOTk5aaM1ES84IhJf+9rXkm9961uluMBAN9Nk/ed37dqVbN++Pb2/2YsyEExKEcvaaMayrWgmTYORbcs4LzN7r8eiXK6uV9NkrXiT7XjxUPuCAgSTQsYynsTi0P5Ob3HunEmzuTiYJTu/8Dvf+U4yPj5eqWmy9vPxvf/4xz9OP8ZSrKv6IJgUOpbdsDzbfvtkR81+97vfXXTI8nKBgW4/l30+YhnvSBLbwlIsgkkhY/nCCy8s+QlMNJuLYJw9ezb9eMcdd8xFMy9TZi8/1+zPi1ju2LFj3raAQRjp94Ot5mobIzUfs9tozW0sblf/Pie7+XNOnz7tX3OIIm69iGWtlStXuiJQE2NjY8maNWvSn6833ngj+cMf/tAwNs0i1Iv7h/G5H/7wh+lVj7JYOiq2GOKt6rrsx4arH6av3WZqbrM1t6TmY19fQJkwyWUss0kz/r9OOVkoQhEHAcWTQ5yfWTtplmmarPWDH/xgLpbxvYslgyaYLEm2DBtxW8wBPos5EEg0G4vrpWZHh0Y042o3ebtcXSch7OTzP/rRj5IHH3xw7vSR+N5BMClULGNfY7+v3SmazcWRs9mkGW+cnB05mofL1S31SNjsaNif/vSnyf333z83Wbr0HcNiHya5jmWtFStW2KfZRO0+zU8++ST5/e9/n5w8eXIuPq2mt8Xcv5TPLfbzExMT6QuAeAcS+yyLrSz7MAWTrmLZj32WncgOBMpO3OdLo6OjyerVq9N4Rliee+65ZP/+/T0J3lJC2M3vjSv4fPvb306WLVs2t7/WG0ILpmAKpliKZk9/3mL7LF++PP3v9957L3n22WfTn488T5O1T6xxbdg777wz/e+4IEGsYjh1RDAFUzALGcs8vN9gtjwrmo3FZLZq1aq5n7948+n6U0+GMU22+prvf//7yc6dO+e+Jl6U2V8pmIIpmGIpmgOfNj/99NPk7bffTvbu3ZuLaTLzyCOPJHfffXeyZcsWU6VgCqZgFtvnn38+9GVY0exeHGka4Yx9m+Ho0aPJBx98kOzbty+NU7+WZFt9Tfy77d69O9m2bVt6UE+IfZURSqeMCKZg9jmYU1NTHpV9nCzzfL3OiMETTzzh6NkOwhmhysIZ3n333eTNN99MPw5imox9k3H6S1zaLhOhjFOHhLK84k2+BVMwxVI0CxnO2McZt9pVhI8//jh5//33k48++mjBv3m302TsR926dWv6Pp633nprcsMNN8x9LvZPxk0oBVMwBbPwsXzxxRcL9U4QlmcX/7OZhbN26swCGheKiNupU6fSW5zakV1lJ3s7rez3xwuWOA/0+uuvT2/xb7B58+Z5gcymySyU9lEKpmAKpljmYNIUzcWJczhj8oxwxsean9slieeXCGyEMj46l1IwBVMwSyMmi4hlTBNFJZq9CWjEMz5mt+z6vrU/19nzR3YpuwhidotICiSCKZiljmUZ3pA3lmdFEwSzpy8k/VNStliGOOoyvh9vQg0IJmLZQTRfeukl0QQEE7FsJ06EF01AMFlyLCMm/Xrz57zcskkzjv4FEEy6imVZJ8t62T5N0QS6VZqjZM+cOeNfcxGxLPMybCtxysnjjz/u6FkYoHXr1nXbD0fJIpbDYp8mYMI0YXYcyzy9RdewxHmaJk0wYZowaRjL7AAfnHICCCYtYlnVZdhW0Xz55ZdFExBMxLKdmLgjmo6eBdqxD7PETpw4IZYdyvZp3njjjTYG9Jh9mIhlibi4AVCZCfOLL77wr3mNA3yWNmk+9thjjp6FHlq7dq0JE7Es46TpQCBAMCsQy3iyF0vRZPg8fgSTnMfSPsveRfOVV17xpEdXYl/4888/nxw7dszGKBH7ME2WtJDt03T0LIuJ5Z49e9IXr3Ht4m984xvJpk2bKr1N7MMkF+JoWLHs76TpPE26iWWIn0uTZnkIplgimvQhlhnRFExyEkv7LEWTfMQyotjszdjj8fPCCy+IZsHZh2myZBFin+ajjz5qnyYLYtnJi9fYp/nkk09Wbp9mWfZhliaYZ8+ercQDzwE++YmmixsQR1F3GsvaaFbtQKA1a9aUIpiWZAsWyzjVQSyHyykn1May2TJss1s8fuzTLCbBLFgs7bMUTfIVy24fP6JZPJZkC8A+y/yyT7OasYwDeHrx4rUq+zQtySKWzE2ajp4Vy27Ez7WjZ4tDMMUS0WQIsRTN4rEkm+NYOsCnWGJ59pFHHrE8W0K151n2SyzPPvHEE6VcnrUki1iyYNJ89dVXTZpi2fWk+eKLL5o0c0wwxRLRZMixFE3BRCxFk0LHMvYtDvrnUTTzqzT7MM+dO1fof4g4zzKeZMWyPOzTLK5+HeCzGGU65WT16tXd9sM+TMTSpEneY7nYK/j0+haPH5NmvgjmkMUyrFiWO5p79+4VzQLGMg8sz+aLJVmxZABieXb37t2WZ3Ms22eZx8tPFv2UE0uyiCUmTbE0aVaIYIolA4zmvn37RFMsRVMwEUs6edITzfzFctgH+DgQqBjswxxwLGNZTizJ9mnecMMNNsYQYxnxKeJb5mX7NIvyJub2YSKWdC3bpxmnFDF4sd0jlkWZLJtNmt6P1YRZugnz5MmT6TJsPMih1vLly02aQ4plGd6MPSbNxx9/PPeTZlkmzNIEM68PfpMl7cTy7K5du5xyMgBFXoZtF808n3KyatWqUgTTkqxYMmSOnhXLpYjnl5deesny7ACYMPscS8uwdMrybP9jWeYXr7FSkdcDgUyYiCU9denSJQcC9SmWMYGVfaUnnm9Mmv0lmH2IZSyviSXdRjMeP6LZ21iWbRm2Gcuz/WVJVizJoViejQOBLM+KZTfydvRsWZZkBVMsEc3SqT3Psqpin2ZeomkfJnPiPMv9+/eLJT0Vy7PxuLI8K5bdiOejl19+2fKsCTM/E2bE0mRJvyfNhx9+2KQpll2J5dnHHntsqJOmJVnBFEsGGs1Ynp2YmLAxWsSyCkfDdiNbnh3WxTEsyVacWDJI2fJs7CtHLBcrO+XExTFMmKlB/qDEk5Z9lgxr0rQ8O19VzrPshWEtz8afa8KsILEkD5OmA4HEstvBwoFAJsyB/MBYhiUvYp/Uzp07Kz1pWoZd2uNnkJOmCbNixJI8icfhgQMHKjtpiuXSHz8mTRNm32JpGZY8in2aVZs0xbK3k9+jjz7a90nThFmhyVIsyavYpxmTZlWOno1YxmQklr0R2/GVV15x9KwJUyyp1qQZR8+W+TxNseyfbJ9mv87TLMuEKZgtYhmv3MWSIkUzlmfLGE2xLHY0LcmWmFhSRGVdnhXLwcgOBLI8K5hiiWgWUHwfsY9NLAcXTfs0W0y8lmS/dOrUqXSfZTzpQJHF8uxDDz1U6OXZiKXJcjhieTaOnu3V8qwl2ZKJWMYrc7GkLJPmwYMHCztpiqVJM48EsyaWlmEp25NeEaMplqKZV6VZku02drHP8rXXXhNLSqtIy7NxgE88SQ/r/W1ZKLu4wVKWZ2OJt8t+OK0kL8EUS6oinrAefPDBXEczi6XJMp+Pn6VEsyzBrOySrFhSJXlfnhXL/D9+LM9WdMKMfZZiSRXF8mzeJs3s1BHLsOWdNC3JFjSYYoknvRXJAw88kItoOs+ymI+fRx55ZFHRFMwCBjOLpVNHMGkuH3o0xbI60bQPs2AilrEPRyzh/5+neejQoXRf/rBi+eqrr4plQcWAEv9+VdunWYlgZrG0DAvDj2YWS/ssix/NvXv3VupNzEu/JCuW0Fq2T3PDhg0mS7p6/MTybKs3MbcPswDBPH36tH2W0IFsn2Y/oxmTrH2W1YymYOY8mBFLkyXkI5oRS5Nl+aO5e/fuhtF00E/ORJizm1jC4tXu06z9eVrqTSyroXafZv1joDSdKcuEmS27OhoW8jNp2mdZ3Umz9pSTeEyVYcIsVTAjlvEK2WQJw49mxDImDrGsZjR37do1F03BzFkwjx07lsbSZAm9sWzZsq6jKZbURrMswSzNPkyxhN66fPlycvjw4UWfpymWhFjp27dvX6nO0yxNMMUS+vNztZhoiiX10YzHQ1mMl+UbKdORWJDHSfP+++9vuTwbUY2JIp4k/TxSxmFm1D8n0Gk0m02acb/JkrITTKDjaL7++uvp0ehiiWACtBDLa0eOHEmmp6fFksqxDxPoWJxqct999yVjY2NzsbTPEhMmQF0sd+7cmaxdu3beAT4gmADXxInnEct169bNxdIyLFVjSRZoO1k+9NBDaSzjPEuxRDABWsQyJsv9+/fbZ0llWZIFOoqlyRITZkl4xQu9j2XtAT5iiWACtImlZViwJAu0iGW2zxKwJAtkTwbj4wtiaRkWShhMYGmT5YMPPpjGMq4V62hYWMiSLIjlvFi6gg+UfML0Shi6eAIYH284WQIlDiaw+MnygQcesAwLJkygVSzvv//+BVfwAUyYQIPJUixBMIEOYnngwIH0TaGt0ECFgukHHtrHMpZha2NpsoTOOa0ExBKo0oQJtI9lHA372muvWYaFKgfTDz80+AEfH58XS5MlCCbQYLK877775k4dMVnC0tiHCRWJpckSTJgpr5rh2g/1+LhYgmACnUyW2dGwBw8eFEsQTKCTWFp9AcGcx5MClf5BvrYMa7KE/nHQD4glUKUJE6oolmHvvffeufMsDx065NQRMGECrWJpsgQTZke8oqZSP7jj42IJggm0myzvueeeebG0DAuCacKEusmyUSwBwQRqYhnLsGvWrJl3gA8wGA76gYLG0j5LMGECNbJ9llksDx8+bJ8lCGb3PHlQ1smyPpYmSxgOS7JQgFiePn1aLMGECdSLZdi777577mhYy7AgmD3jiYQyTZb1sTRZgmACdbG0zxIEE2ghW4Z1NCwIZl95UqHok2WjWAL54ShZyFksX3/9dbEEwQSaxTJOHYlY2mcJOf15tQkgH7G0zxIEcyA8yVC0WN51110LYgkIJtAklrEMe/nyZS/6IOfsw4Qhx9JkCSbMgfLqnKLEcvXq1WIJggl0Ess33njDMiwUjCVZGEIsTZZgwhwar9TJayx37NghlmDCBDqN5ZtvvimWYMI0YUJ9LO+8884FsfQ4BRMmUDdZxqkjU1NTyVtvvWWyBBMm0CiWJksQzNzyhEQeYtloGRYoB0uy0IdYWoYFwQQ6iKW36ALBBMQSqvnzXpZvxD5MhhHL7du3L1iG9VgEE2aujY2N+ddkKLGMU0eOHDlinyWU/Lm5NBPm+vXrk5MnT3p0MvBYmiyhuYmJCcHMm1tuuSU5c+ZMMj097RFKX18tN4ol0PjF5W233Vaa72dkdna2v3/Al6+6R2o+ZrfRmlvM7WNX/z5dj4kXLlxIjh49mj6RCSf9+OG/4447xBI6eGEZk2XEMn5eltCPDVc/TF+7zdTcZmtuSc3HpJ9Ny0MwR67FMn49vpRgAlAe14J55Vokp6+FcWjBzMtBPwu+aQAqL1dtGM3JxgCAXDdjNGcbQkAByGUXRvO2Qaanp0UToOJmZmZyF85hBbPRN5/ed+UqDxWAart8+fKVVq0oezAb7bydrdsAsxcuXJj0UAGotnPnzk0mLY6GTYZwQFBelmTnfn3mzJnfe6gAVNupU6f+T5NADk2eTitJb7/97W//+eoo7qoDABV16dKl6d/97nf/1GDCHKpBXrgg/c8GHxdc9efEiRP/bcOGDf/Wwwagej744IP/sW3btv+YdHZ1n3kRK8uVfmpDWR/LBVf+OX/+/HMrV67c6aEDUB3Hjh07sHnz5n+VNL+yT/3EObBgDnpJttnRTvW3mZ/97GdPX7hw4S0PH4BqmJycPPLzn//86RaRnG3TlP4OgAOeMJtNmUndhDm3RHvixIn/snr16n9YsWLFMg8ngPK5Ohxd/uyzz357++23P5MsXIKdSRaeUdE0mGW/luxsk4kzvdjuxMTEM7/61a9uPXr06L9MTU19dunSpSv9jjwA/RMXJbh48eKVkydPfvbhhx/+yzPPPHPr1Vj+MvnyXUnaLr0OwzAmzEZTZu202ektafARgHxqdLDOYm5JJwHtZ9PGc7IRRxpsiFaRHGkRXgDyGctGwUzaBDI371gyPsSNN9Immo3imYglQKmimXQQyaEe7JOHCbNVNEeabKDa++sjKZoA+Y9lJ/HMXSyHHczFTpr1X18fTkcCAZQnnLmKZR6C2SyaSdJ+iTYXGxCAvsUzN7HMSzAbRbCTcAJQnmC2imIuGjCew4030mZDCShAeaOZu1DmMZiNNtBI3jcgAAONqGAuYsM5GhZAHAWzbBsYgHIYtQkAQDABoCf6viTrnUUAMGECgGACAIIJAIIJAIIJAIIJAIIJAIIJAIIJAIIJAAgmAAgmAAgmAAgmAAgmAAgmAAgmACCYACCYACCYACCYACCYAFB0/0+AAQDHHxQEMMRIrwAAAABJRU5ErkJggg==")
Description
The image of the Spreadsheet insert image Dialog.

Stepper

NameTypeDefault valueComputed value
$kendo-stepper-border-width0px
Description
The width of the border around the Stepper.
$kendo-stepper-font-sizevar( --kendo-font-size, inherit )
$kendo-stepper-font-familyvar( --kendo-font-family, inherit )
$kendo-stepper-line-heightvar( --kendo-line-height, normal )
$kendo-stepper-bgtransparent
Description
The background color of the Stepper.
$kendo-stepper-textvar( --kendo-component-text, initial )
Description
The text color of the Stepper.
$kendo-stepper-bordertransparent
Description
The border color of the Stepper.
$kendo-stepper-label-margin-xmap.get( $kendo-spacing, 2 )
Description
The horizontal margin the Stepper label.
$kendo-stepper-label-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding the Stepper label.
$kendo-stepper-label-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding the Stepper label.
$kendo-stepper-inline-content-padding-xmap.get( $kendo-spacing, 5 )
Description
The horizontal padding of the Stepper content.
$kendo-stepper-inline-content-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the Stepper content.
$kendo-stepper-indicator-widthmap.get( $kendo-spacing, 7.5 )
Description
The width of the Stepper indicator.
$kendo-stepper-indicator-height$kendo-stepper-indicator-width
Description
The height of the Stepper indicator.
$kendo-stepper-indicator-border-width1px
Description
The border width of the Stepper indicator.
$kendo-stepper-indicator-border-radius50%
Description
The border radius of the Stepper indicator.
$kendo-stepper-indicator-focus-border-width$kendo-stepper-indicator-border-width
Description
The border width of the focused Stepper indicator.
$kendo-stepper-indicator-focus-sizemap.get( $kendo-spacing, 0.5 )
Description
The size of the focused Stepper indicator.
$kendo-stepper-indicator-focus-offset3px
Description
The offset of the Stepper's focused indicator.
$kendo-stepper-indicator-focus-calc-offsetcalc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} )
Description
The calculated offset of the Stepper's focused indicator.
$kendo-stepper-indicator-bgvar( --kendo-component-bg, initial )
Description
The background color of the Stepper indicator.
$kendo-stepper-indicator-textvar( --kendo-component-text, initial )
Description
The text color of the Stepper indicator.
$kendo-stepper-indicator-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the Stepper indicator.
$kendo-stepper-indicator-hover-bgvar( --kendo-hover-bg, initial )
Description
The background color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-textvar( --kendo-hover-text, initial )
Description
The text color of the hovered Stepper indicator.
$kendo-stepper-indicator-hover-border$kendo-stepper-indicator-border
Description
The border color of the hovered Stepper indicator.
$kendo-stepper-indicator-disabled-bgvar( --kendo-disabled-bg, initial )
Description
The background color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-textvar( --kendo-disabled-text, initial)
Description
The text color of the disabled Stepper indicator.
$kendo-stepper-indicator-disabled-bordervar( --kendo-disabled-border, initial )
Description
The border color of the disabled Stepper indicator.
$kendo-stepper-indicator-done-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the Stepper's done indicator.
$kendo-stepper-indicator-done-textif($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white)
Description
The text color of the Stepper's done indicator.
$kendo-stepper-indicator-done-border$kendo-stepper-indicator-done-bg
Description
The border color of the Stepper's done indicator.
$kendo-stepper-indicator-done-hover-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The background color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-text$kendo-stepper-indicator-done-text
Description
The text color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-hover-border$kendo-stepper-indicator-done-hover-bg
Description
The border color of the Stepper's hovered done indicator.
$kendo-stepper-indicator-done-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 ))
Description
The background color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-done-disabled-bordervar( --kendo-disabled-border, initial )
Description
The border color of the Stepper's disabled done indicator.
$kendo-stepper-indicator-current-bgif($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
Description
The background color of the Stepper current indicator.
$kendo-stepper-indicator-current-text$kendo-stepper-indicator-done-text
Description
The text color of the Stepper current indicator.
$kendo-stepper-indicator-current-border$kendo-stepper-indicator-current-bg
Description
The border color of the Stepper current indicator.
$kendo-stepper-indicator-current-hover-bg$kendo-stepper-indicator-done-hover-bg
Description
The background color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-text$kendo-stepper-indicator-done-hover-text
Description
The text color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-hover-border$kendo-stepper-indicator-done-hover-border
Description
The border color of the Stepper's hovered current indicator.
$kendo-stepper-indicator-current-disabled-bg$kendo-stepper-indicator-done-disabled-bg
Description
The background color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-text$kendo-stepper-indicator-done-disabled-text
Description
The text color of the Stepper's disabled current indicator.
$kendo-stepper-indicator-current-disabled-border$kendo-stepper-indicator-done-disabled-border
Description
The border color of the Stepper's disabled current indicator.
$kendo-stepper-label-textinherit
Description
The text color of the Stepper label.
$kendo-stepper-label-success-textif($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))
Description
The success text color of the Stepper label.
$kendo-stepper-label-error-textif($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))
Description
The error text color of the Stepper label.
$kendo-stepper-label-hover-text$kendo-stepper-text
Description
The text color of the hovered Stepper label.
$kendo-stepper-label-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of the disabled Stepper label.
$kendo-stepper-current-label-font-weightvar( --kendo-font-weight-bold, bold )
Description
The font weight of the disabled Stepper label.
$kendo-stepper-optional-label-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the optional Stepper label.
$kendo-stepper-optional-label-font-sizeinherit
Description
The font size of the optional Stepper label.
$kendo-stepper-optional-label-font-styleitalic
Description
The font style of the optional Stepper label.
$kendo-stepper-progressbar-sizemap.get( $kendo-spacing, 0.5 )
Description
The size of the Stepper ProgressBar.
$kendo-stepper-content-transition-propertynone
Description
The property name of the Stepper transition.
$kendo-stepper-content-transition-duration300ms
Description
The duration of the Stepper transition.
$kendo-stepper-content-transition-timing-functioncubic-bezier(.4, 0, .2, 1) 0ms
Description
The timing function of the Stepper transition.

Switch

NameTypeDefault valueComputed value
$kendo-switch-font-familyvar( --kendo-font-family, normal )
Description
The font family of the Switch.
$kendo-switch-track-border-width1px
Description
The border width of the Switch track.
$kendo-switch-thumb-border-width0
Description
The border width of the Switch thumb.
$kendo-switch-label-text-transformuppercase
Description
The text transform of the Switch label.
$kendo-switch-label-displaynone
Description
The display of the Switch label.
$kendo-switch-sizes( sm: ( font-size: 10px, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px ), md: ( font-size: 10px, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px ), lg: ( font-size: 10px, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px ) )
Description
The map with the different Switch sizes.
$kendo-switch-focus-ring1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The ring around the focused Switch.
$kendo-switch-off-track-bgvar( --kendo-component-bg, transparent )
Description
The background of the track when the Switch is not checked.
$kendo-switch-off-track-textvar( --kendo-component-text, inherit )
Description
The text color of the track when the Switch is not checked.
$kendo-switch-off-track-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the track when the Switch is not checked.
$kendo-switch-off-track-hover-bgvar( --kendo-component-bg, transparent )
Description
The background of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-textvar( --kendo-component-text, inherit )
Description
The text color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-hover-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the track when the hovered Switch is not checked.
$kendo-switch-off-track-focus-bgvar( --kendo-component-bg, transparent )
Description
The background of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-textvar( --kendo-component-text, inherit )
Description
The text color of the track when the focused Switch is not checked.
$kendo-switch-off-track-focus-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
Description
The border color of the track when the focused Switch is not checked.
$kendo-switch-off-track-disabled-bgvar( --kendo-component-bg, transparent )
Description
The background of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-textvar( --kendo-component-text, inherit )
Description
The text color of the track when the disabled Switch is not checked.
$kendo-switch-off-track-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The border color of the track when the disabled Switch is not checked.
$kendo-switch-off-thumb-bgif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The background of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-textinherit
Description
The text color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the thumb when the Switch is not checked.
$kendo-switch-off-thumb-hover-bgif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The background of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-textinherit
Description
The text color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-hover-borderif($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
Description
The border color of the thumb when the hovered Switch is not checked.
$kendo-switch-off-thumb-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background of the thumb when the disabled Switch is not checked.
$kendo-switch-off-thumb-disabled-textinherit
Description
The text color of the thumb when the disabled Switch is not checked.
$kendo-switch-off-thumb-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The border color of the thumb when the disabled Switch is not checked.
$kendo-switch-on-track-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background of the track when the Switch is checked.
$kendo-switch-on-track-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the track when the Switch is checked.
$kendo-switch-on-track-border$kendo-switch-on-track-bg
Description
The border color of the track when the Switch is checked.
$kendo-switch-on-track-hover-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
Description
The background of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the track when the hovered Switch is checked.
$kendo-switch-on-track-hover-border$kendo-switch-on-track-hover-bg
Description
The border color of the track when the hovered Switch is checked.
$kendo-switch-on-track-focus-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the track when the focused Switch is checked.
$kendo-switch-on-track-focus-border$kendo-switch-on-track-focus-bg
Description
The border color of the track when the focused Switch is checked.
$kendo-switch-on-track-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The text color of the track when the disabled Switch is checked.
$kendo-switch-on-track-disabled-borderif($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg)
Description
The border color of the track when the disabled Switch is checked.
$kendo-switch-on-thumb-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background of the thumb when the Switch is checked.
$kendo-switch-on-thumb-textinherit
Description
The text color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-borderinherit
Description
The border color of the thumb when the Switch is checked.
$kendo-switch-on-thumb-hover-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The background of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-textinherit
Description
The text color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-hover-borderinherit
Description
The border color of the thumb when the hovered Switch is checked.
$kendo-switch-on-thumb-disabled-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 ))
Description
The background of the thumb when the disabled Switch is checked.
$kendo-switch-on-thumb-disabled-textinherit
Description
The text color of the thumb when the disabled Switch is checked.
$kendo-switch-on-thumb-disabled-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))
Description
The border color of the thumb when the disabled Switch is checked.

Table

NameTypeDefault valueComputed value
$kendo-table-border-width1px
Description
The width of the table border.
$kendo-table-cell-vertical-border-width0px
Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-width1px
Description
The width of horizontal border of table cells.
$kendo-table-cell-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-header-font-weightvar( --kendo-font-weight-bold, normal )
Description
Font weight of the table header cells.
$kendo-table-sizes( sm: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, inherit ), cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y, group-label-padding-x: $kendo-list-item-group-label-sm-padding-x, group-label-padding-y: $kendo-list-item-group-label-sm-padding-y, group-label-font-size: $kendo-list-item-group-label-sm-font-size ), md: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, inherit ), cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y, group-label-padding-x: $kendo-list-item-group-label-md-padding-x, group-label-padding-y: $kendo-list-item-group-label-md-padding-y, group-label-font-size: $kendo-list-item-group-label-md-font-size ), lg: ( font-size: var( --kendo-font-size, inherit ), line-height: var( --kendo-line-height, inherit ), cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y, group-label-padding-x: $kendo-list-item-group-label-lg-padding-x, group-label-padding-y: $kendo-list-item-group-label-lg-padding-y, group-label-font-size: $kendo-list-item-group-label-lg-font-size ) )
Description
The sizes of the table.
$kendo-table-bgvar( --kendo-component-bg, initial )
Description
Background color of tables.
$kendo-table-textvar( --kendo-component-text, initial )
Description
Text color of tables.
$kendo-table-bordervar( --kendo-component-border, initial )
Description
Border color of tables.
$kendo-table-header-bg$kendo-table-bg
Description
Background color of table headers.
$kendo-table-header-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
Text color of table headers.
$kendo-table-header-border$kendo-table-border
Description
Border color of table headers.
$kendo-table-sticky-header-text$kendo-list-header-text
Description
Text color of the sticky table header.
$kendo-table-sticky-header-bg$kendo-list-header-bg
Description
Background color of the sticky table header.
$kendo-table-sticky-header-border$kendo-list-header-border
Description
Border color of the sticky table header.
$kendo-table-sticky-header-shadow$kendo-list-header-shadow
Description
Shadow of the sticky table header.
$kendo-table-footer-bg$kendo-table-header-bg
Description
Background color of table footers.
$kendo-table-footer-text$kendo-table-header-text
Description
Text color of table footers.
$kendo-table-footer-border$kendo-table-header-border
Description
Border color of table footers.
$kendo-table-group-row-bg$kendo-table-header-bg
Description
Background color of group rows in table.
$kendo-table-group-row-text$kendo-table-header-text
Description
Text color of group rows in table.
$kendo-table-group-row-border$kendo-table-header-border
Description
Border color of group rows in table.
$kendo-table-group-label-text$kendo-list-bg
Description
Text color of group label in table.
$kendo-table-group-label-bg$kendo-list-text
Description
Background color of group label in table.
$kendo-table-alt-row-bginitial
Description
Background color of alternating rows in table.
$kendo-table-alt-row-text$kendo-table-text
Description
Text color of alternating rows in table.
$kendo-table-alt-row-border$kendo-table-border
Description
Border color of alternating rows in table.
$kendo-table-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of hovered rows in table.
$kendo-table-hover-textvar( --kendo-hover-text, inherit )
Description
Text color of hovered rows in table.
$kendo-table-hover-border$kendo-table-border
Description
Border color of hovered rows in table.
$kendo-table-focus-bginherit
Description
Background color of focused rows in table.
$kendo-table-focus-textinherit
Description
Text color of focused rows in table.
$kendo-table-focus-borderinherit
Description
Border color of focused rows in table.
$kendo-table-focus-shadow$kendo-list-item-focus-shadow
Description
Box shadow of focused rows in table.
$kendo-table-selected-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 ))
Description
Background color of selected rows in table.
$kendo-table-selected-text$kendo-table-text
Description
Text color of selected rows in table.
$kendo-table-selected-border$kendo-table-border
Description
Border color of selected rows in table.
$kendo-table-selected-hover-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 ))
Description
Hover background color of selected rows in table.
$kendo-table-selected-hover-text$kendo-table-selected-text
Description
Hover text color of selected rows in table.
$kendo-table-selected-hover-border$kendo-table-selected-border
Description
Hover border color of selected rows in table.

Tabstrip

NameTypeDefault valueComputed value
$kendo-tabstrip-wrapper-padding-x0px
Description
The horizontal padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-padding-y0px
Description
The vertical padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-border-width0px
Description
The width of the border around the tabstrip wrapper
$kendo-tabstrip-wrapper-bgtransparent
Description
The background color of the tabstrip wrapper
$kendo-tabstrip-wrapper-textinitial
Description
The text color of the tabstrip wrapper
$kendo-tabstrip-wrapper-borderinitial
Description
The border color of the tabstrip wrapper
$kendo-tabstrip-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the tabstrip
$kendo-tabstrip-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the tabstrip
$kendo-tabstrip-line-heightvar( --kendo-line-height, normal )
Description
The line height of the tabstrip
$kendo-tabstrip-border-width0px
Description
The width of the border around the tabstrip
$kendo-tabstrip-bgtransparent
Description
The background color of the tabstrip
$kendo-tabstrip-textvar( --kendo-component-text, initial )
Description
The text color of the tabstrip
$kendo-tabstrip-bordertransparent
Description
The border color of the tabstrip
$kendo-tabstrip-item-padding-xvar( --kendo-padding-x, #{$kendo-padding-md-x} )
Description
The horizontal padding of the tabstrip item
$kendo-tabstrip-item-padding-ymap.get( $kendo-spacing, 2 ) + map.get( $kendo-spacing, 1 )
Description
The vertical padding of the tabstrip item
$kendo-tabstrip-item-border-width0px
Description
The width of the border around the tabstrip item
$kendo-tabstrip-item-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the tabstrip item
$kendo-tabstrip-item-gapmap.get( $kendo-spacing, 2 )
Description
The gap between the tabstrip items
$kendo-tabstrip-item-bgtransparent
Description
The background color of the tabstrip item
$kendo-tabstrip-item-textvar( --kendo-component-text, initial )
Description
The text color of the tabstrip item
$kendo-tabstrip-item-bordertransparent
Description
The border color of the tabstrip item
$kendo-tabstrip-item-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of the disabled tabstrip item
$kendo-tabstrip-item-disabled-bgnone
Description
The background color of the disabled tabstrip item
$kendo-tabstrip-item-disabled-bordervar( --kendo-disabled-border, initial )
Description
The border color of the disabled tabstrip item
$kendo-tabstrip-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
The background color of hovered tabs
$kendo-tabstrip-item-hover-textvar( --kendo-hover-text, inherit )
Description
The text color of hovered tabs
$kendo-tabstrip-item-hover-bordervar( --kendo-hover-bg, inherit )
Description
The border color of hovered tabs
$kendo-tabstrip-item-selected-bgvar( --kendo-component-bg, transparent )
Description
The background color of selected tabs
$kendo-tabstrip-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of selected tabs
$kendo-tabstrip-item-selected-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of selected tabs
$kendo-tabstrip-item-selected-font-weightvar( --kendo-font-weight-bold, normal )
Description
The background gradient of selected tabs
$kendo-tabstrip-item-focus-shadow$kendo-list-item-focus-shadow
Description
The focus shadow of the tabstrip item
$kendo-tabstrip-item-dragging-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the sortable tabstrip item
$kendo-tabstrip-indicator-sizemap.get( $kendo-spacing, 0.5 )
Description
The border width of the tabstrip indicator
$kendo-tabstrip-indicator-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the tabstrip ripple
$kendo-tabstrip-content-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of tabstrip content
$kendo-tabstrip-content-border-width1px
Description
The width of border around tabstrip content
$kendo-tabstrip-content-bgvar( --kendo-component-bg, transparent )
Description
The background color of tabstrip content
$kendo-tabstrip-content-textvar( --kendo-component-text, inherit )
Description
The text color of tabstrip content
$kendo-tabstrip-content-bordertransparent
Description
The border color of tabstrip content
$kendo-tabstrip-content-focus-bordervar( --kendo-component-text, initial )
Description
The border color of tabstrip focused content
$kendo-tabstrip-scrollable-button-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal button padding of the scrollable tabstrip
$kendo-tabstrip-scrollable-button-padding-ymap.get( $kendo-spacing, 1 )

Taskboard

NameTypeDefault valueComputed value
$kendo-taskboard-spacermap.get( $kendo-spacing, 4 )
Description
The spacing index of the TaskBoard.
$kendo-taskboard-border-width1px
Description
The border width of the TaskBoard.
$kendo-taskboard-border-stylesolid
Description
The border style of the TaskBoard.
$kendo-taskboard-padding-y0px
Description
The vertical padding of the TaskBoard.
$kendo-taskboard-padding-x0px
Description
The horizontal of the TaskBoard.
$kendo-taskboard-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the TaskBoard.
$kendo-taskboard-font-sizevar( --kendo-font-size-md, inherit )
Description
The font size of the TaskBoard.
$kendo-taskboard-line-heightvar( --kendo-line-height, inherit )
Description
The line height of the TaskBoard.
$kendo-taskboard-bgvar( --kendo-component-bg, initial )
Description
The background color of the TaskBoard.
$kendo-taskboard-textvar( --kendo-component-text, initial )
Description
The text color of the TaskBoard.
$kendo-taskboard-bordervar( --kendo-component-border, initial )
Description
The border color of the TaskBoard.
$kendo-taskboard-content-padding-y0px
Description
The vertical padding of the TaskBoard content.
$kendo-taskboard-content-padding-x0px
Description
The horizontal padding of the TaskBoard content.
$kendo-taskboard-column-container-spacing-ymath.div( $kendo-taskboard-spacer, 2 )
Description
The vertical spacing of the TaskBoard column container.
$kendo-taskboard-column-container-padding-y0px
Description
The vertical padding of the TaskBoard column container.
$kendo-taskboard-column-container-padding-xmath.div( $kendo-taskboard-spacer, 2 )
Description
The horizontal padding of the TaskBoard column container.
$kendo-taskboard-columns-container-gap$kendo-taskboard-spacer
Description
The spacing of the TaskBoard columns container.
$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard column.
$kendo-taskboard-column-border-width1px
Description
The border width of the TaskBoard column.
$kendo-taskboard-column-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the TaskBoard column.
$kendo-taskboard-column-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the TaskBoard column.
$kendo-taskboard-column-textvar( --kendo-component-text, inherit )
Description
The text color of the TaskBoard column.
$kendo-taskboard-column-bordertransparent
Description
The border color of the TaskBoard column.
$kendo-taskboard-column-focus-bg$kendo-taskboard-column-bg
Description
The background color of the focused TaskBoard column.
$kendo-taskboard-column-focus-text$kendo-taskboard-column-text
Description
The text color of the focused TaskBoard column.
$kendo-taskboard-column-focus-borderif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the focused TaskBoard column.
$kendo-taskboard-column-header-padding-ymath.div( $kendo-taskboard-spacer, 2 )
Description
The vertical padding of the TaskBoard column header.
$kendo-taskboard-column-header-padding-x$kendo-taskboard-column-header-padding-y
Description
The horizontal padding of the TaskBoard column header.
$kendo-taskboard-column-header-gapmath.div( $kendo-taskboard-spacer, 4 )
Description
The spacing of the TaskBoard column header.
$kendo-taskboard-column-header-actions-gapmath.div( $kendo-taskboard-spacer, 2 )
Description
The spacing of the TaskBoard column header actions.
$kendo-taskboard-column-header-font-weight400
Description
The font weight of the TaskBoard column header.
$kendo-taskboard-column-header-textvar( --kendo-component-text, inherit )
Description
The text color of the TaskBoard column header.
$kendo-taskboard-column-cards-padding-y0px
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-padding-x0px
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-gapmath.div( $kendo-taskboard-spacer, 2 )
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-taskboard-pane-width$kendo-taskboard-column-width
Description
The default width of the TaskBoard pane.
$kendo-taskboard-pane-padding-y0px
Description
The vertical padding of the TaskBoard pane.
$kendo-taskboard-pane-padding-x0px
Description
The horizontal padding of the TaskBoard pane.
$kendo-taskboard-pane-border-width1px
Description
The border width of the TaskBoard pane.
$kendo-taskboard-pane-bgvar( --kendo-component-bg, inherit )
Description
The background color of the TaskBoard pane.
$kendo-taskboard-pane-textvar( --kendo-component-text, inherit )
Description
The text color of the TaskBoard pane.
$kendo-taskboard-pane-bordervar( --kendo-component-border, inherit )
Description
The border color of the TaskBoard pane.
$kendo-taskboard-pane-header-padding-y$kendo-taskboard-spacer
Description
The vertical padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-font-sizevar( --kendo-font-size-xl, 1rem )
Description
The font size of the TaskBoard pane header.
$kendo-taskboard-pane-header-font-weightvar( --kendo-font-weight-bold, bold )
Description
The font weight of the TaskBoard pane header.
$kendo-taskboard-pane-header-text$kendo-taskboard-pane-text
Description
The text color of the TaskBoard pane header.
$kendo-taskboard-pane-content-padding-y0px
Description
The vertical padding of the TaskBoard pane content.
$kendo-taskboard-pane-content-padding-x$kendo-taskboard-pane-header-padding-x
Description
The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-pane-actions-padding-ymap.get( $kendo-spacing, 6 )
Description
The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-pane-actions-padding-x$kendo-taskboard-pane-actions-padding-y
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-card-padding-ymath.div( $kendo-taskboard-spacer, 2 )
Description
The vertical padding of the TaskBoard Card.
$kendo-taskboard-card-padding-x$kendo-taskboard-card-padding-y
Description
The horizontal padding of the TaskBoard Card.
$kendo-taskboard-card-category-border-width4px
Description
The border width of the TaskBoard Card category.
$kendo-taskboard-card-focus-shadownone
Description
The shadow of the focused TaskBoard Card.
$kendo-taskboard-card-selected-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border of the selected TaskBoard Card.
$kendo-taskboard-card-selected-shadowvar( --kendo-box-shadow-depth-3, none )
Description
The shadow of the selected TaskBoard Card.
$kendo-taskboard-card-title-font-sizevar( --kendo-font-size-md, 1rem )
Description
The font size of the TaskBoard Card title.
$kendo-taskboard-card-title-font-weightvar( --kendo-font-weight-bold, 600 )
Description
The font weight of the TaskBoard Card title.
$kendo-taskboard-drag-placeholder-border-width1px
Description
The border width of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-border-radius$kendo-card-border-radius
Description
The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))
Description
The background color of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-bordervar( --kendo-component-border, inherit )
Description
The border color of the TaskBoard Card placeholder.

Tilelayout

NameTypeDefault valueComputed value
$kendo-tile-layout-border-width0px
Description
The width of the border around the TileLayout.
$kendo-tile-layout-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the TileLayout.
$kendo-tile-layout-padding-xmap.get( $kendo-spacing, 4 )
Description
The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-y$kendo-tile-layout-padding-x
Description
The vertical padding of the TileLayout
$kendo-tile-layout-hint-border-width1px
Description
The width of the border around the TileLayout hint.
$kendo-tile-layout-hint-border-radiusvar( --kendo-border-radius-lg, initial )
Description
The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-bordervar( --kendo-component-border, initial )
Description
The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bgrgba(255, 255, 255, .2)
Description
The background color of the TileLayout hint.

Time-selector

NameTypeDefault valueComputed value
$kendo-time-selector-border-width1px
Description
Width of the border around the time-selector.
$kendo-time-selector-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the time-selector.
$kendo-time-selector-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the time-selector.
$kendo-time-selector-line-heightvar( --kendo-line-height, normal )
Description
Line height of the time-selector.
$kendo-time-selector-bgvar( --kendo-component-bg, initial )
Description
Background color of the time-selector.
$kendo-time-selector-textvar( --kendo-component-text, initial )
Description
Text color of the time-selector.
$kendo-time-selector-bordervar( --kendo-component-border, initial )
Description
Border color of the time-selector.
$kendo-time-selector-header-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the time-selector header.
$kendo-time-selector-header-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding color of the time-selector header.
$kendo-time-selector-header-border-width0px
Description
Width of the border around the time-selector header.
$kendo-time-list-separator-displaynone
Description
Visibility of the time-selector separator.
$kendo-time-list-width4em
Description
Minimum width of the time-selector columns.
$kendo-time-list-height240px
Description
Height of the time-selector columns.
$kendo-time-list-title-spacingmap.get( $kendo-spacing, 3 )
Description
Spacing beneath the time selector titles.
$kendo-time-list-title-font-sizevar( --kendo-font-size-xs, inherit )
Description
Font size of the time-selector titles.
$kendo-time-list-title-line-heightvar( --kendo-line-height-lg, inherit )
Description
Line height of the time-selector titles.
$kendo-time-list-title-heightcalc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} )
Description
Height of the time-selector titles.
$kendo-time-list-title-textvar( --kendo-subtle-text, inherit )
Description
Text color of the time-selector titles.
$kendo-time-list-title-focus-text$kendo-time-selector-text
Description
Text color of the focused time-selector titles.
$kendo-time-list-item-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the time-selector list items.
$kendo-time-list-item-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the time-selector list items.
$kendo-time-list-highlight-border-width1px 0px
Description
Width of the border of the selected item in the time-selector.
$kendo-time-list-highlight-heightcalc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} )
Description
Height of the selected item in the time-selector.
$kendo-time-list-highlight-bg$kendo-time-selector-bg
Description
Background color of the selected item in the time-selector.
$kendo-time-list-highlight-border$kendo-time-selector-border
Description
Border color of the selected item in the time-selector.
$kendo-time-list-focus-bgrgba(0, 0, 0, .04)
Description
Background color of the focused time-selector column.
$kendo-time-selector-sm-font-size$kendo-list-sm-font-size
Description
Font sizes of the time-selector.
$kendo-time-selector-sm-line-height$kendo-list-sm-line-height
Description
Line heights used along with $kendo-font-size.
$kendo-time-selector-sm-list-item-padding-x$kendo-list-sm-item-padding-x
Description
Horizontal padding of the time-selector items.
$kendo-time-selector-sm-list-item-padding-y$kendo-list-sm-item-padding-y
Description
Vertical padding of the time-selector items.
$kendo-time-selector-sizes( sm: ( font-size: $kendo-time-selector-sm-font-size, line-height: $kendo-time-selector-sm-line-height, list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x, list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y ), md: ( font-size: $kendo-time-selector-md-font-size, line-height: $kendo-time-selector-md-line-height, list-item-padding-x: $kendo-time-selector-md-list-item-padding-x, list-item-padding-y: $kendo-time-selector-md-list-item-padding-y ), lg: ( font-size: $kendo-time-selector-lg-font-size, line-height: $kendo-time-selector-lg-line-height, list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x, list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y ) )
Description
Sizes map for the time-selector.

Timeline

NameTypeDefault valueComputed value
$kendo-timeline-spacing-xmap.get( $kendo-spacing, 10 )
Description
The horizontal spacing of the Timeline.
$kendo-timeline-spacing-ymap.get( $kendo-spacing, 10 )
Description
The vertical spacing of the Timeline.
$kendo-timeline-items-paddingmap.get( $kendo-spacing, 4 )
Description
The padding between the Timeline's track items.
$kendo-timeline-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Timeline.
$kendo-timeline-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Timeline.
$kendo-timeline-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Timeline.
$kendo-timeline-mobile-spacing-xmap.get( $kendo-spacing, 4 )
Description
The horizontal spacing of the mobile Timeline.
$kendo-timeline-mobile-spacing-ymap.get( $kendo-spacing, 4 )
Description
The vertical spacing of the mobile Timeline.
$kendo-timeline-track-arrow-widthmap.get( $kendo-spacing, 7.5 )
Description
The width of the Timeline track arrow.
$kendo-timeline-track-arrow-heightmap.get( $kendo-spacing, 7.5 )
Description
The height of the Timeline track arrow.
$kendo-timeline-track-sizemap.get( $kendo-spacing, 1.5 )
Description
The size of the Timeline track.
$kendo-timeline-track-wrap-padding-bottommath.div( $kendo-timeline-track-size, 2 )
Description
The bottom padding of the Timeline's track wrapper.
$kendo-timeline-track-border-width1px
Description
The border width of the Timeline track.
$kendo-timeline-track-margin-bottommap.get( $kendo-spacing, 4 )
Description
The bottom margin of the Timeline track.
$kendo-timeline-track-bottom-calccalc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } )
Description
The bottom offset of the Timeline track.
$kendo-timeline-track-start-calccalc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } )
Description
The left offset of the Timeline track.
$kendo-timeline-track-end-calccalc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } )
Description
The right offset of the Timeline track.
$kendo-timeline-track-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Timeline track.
$kendo-timeline-track-border-colorif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The border color of the Timeline track.
$kendo-timeline-arrow-inset-block-endcalc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } )
Description
The block end inset of the Timeline arrow.
$kendo-timeline-track-arrow-disabled-bgvar( --kendo-disabled-bg, initial )
Description
The background color of the disabled Timeline arrow.
$kendo-timeline-track-arrow-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of the disabled Timeline arrow.
$kendo-timeline-track-arrow-disabled-bordervar( --kendo-disabled-border, initial)
Description
The border color of the disabled Timeline arrow.
$kendo-timeline-track-event-offsetmap.get( $kendo-spacing, 8 )
Description
The offset of the Timeline track event.
$kendo-timeline-flag-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the Timeline flag.
$kendo-timeline-flag-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Timeline flag.
$kendo-timeline-flag-border-radiusmap.get( $kendo-spacing, 0.5 )
Description
The border radius of the Timeline flag.
$kendo-timeline-flag-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Timeline flag.
$kendo-timeline-flag-box-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The box shadow of the Timeline flag.
$kendo-timeline-flag-min-widthmap.get( $kendo-spacing, 20 )
Description
The minimum width of the Timeline flag.
$kendo-timeline-flag-max-widthcalc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } )
Description
The maximum width of the Timeline flag.
$kendo-timeline-mobile-flag-max-widthcalc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } )
Description
The maximum width of the mobile Timeline flag.
$kendo-timeline-horizontal-flag-min-widthmap.get( $kendo-spacing, 15 )
Description
The minimum width of the horizontal Timeline flag.
$kendo-timeline-flag-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the Timeline flag.
$kendo-timeline-flag-textvar( --kendo-component-bg, initial )
Description
The text color of the Timeline flag.
$kendo-timeline-flag-callout-widthmap.get( $kendo-spacing, 2.5 )
Description
The width of the Timeline's flag callout.
$kendo-timeline-flag-callout-heightmap.get( $kendo-spacing, 2.5 )
Description
The height of the Timeline's flag callout.
$kendo-timeline-flag-offset-bottommap.get( $kendo-spacing, 1 )
Description
The bottom offset of the Timeline flag.
$kendo-timeline-flag-margin-bottom-calccalc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } )
Description
The bottom margin of the Timeline flag.
$kendo-timeline-card-header-bgvar( --kendo-component-bg, initial )
Description
The background color of the Timeline's Card header.
$kendo-timeline-card-header-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the Timeline's Card header.
$kendo-timeline-card-body-scroll-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The border of the Timeline's Card body scroll.
$kendo-timeline-card-body-scroll-bgvar( --kendo-component-bg, initial )
Description
The background color of the Timeline's Card body scroll.
$kendo-timeline-card-scroll-thumb-hovervar( --kendo-hover-border, initial )
Description
The color of the Timeline's hovered card scroll thumb.
$kendo-timeline-date-body-textvar( --kendo-body-text, initial )
Description
The text color of the Timeline date body.
$kendo-timeline-date-widthmap.get( $kendo-spacing, 12 ) + map.get( $kendo-spacing, 0.5 )
Description
The width of the Timeline date.
$kendo-timeline-date-margin-bottommap.get( $kendo-spacing, 2 )
Description
The bottom margin of the Timeline date.
$kendo-timeline-vertical-padding-calccalc( #{ $kendo-timeline-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 )
Description
The padding of the vertical Timeline.
$kendo-timeline-vertical-padding-with-dates-calccalc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } )
Description
The padding of the vertical Timeline date.
$kendo-timeline-vertical-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-lg} )
Description
The border radius of the vertical Timeline.
$kendo-timeline-mobile-vertical-padding-calccalc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 )
Description
The padding of the vertical mobile Timeline.
$kendo-timeline-mobile-vertical-padding-with-dates-calccalc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } )
Description
The padding of the vertical mobile Timeline date.
$kendo-timeline-circle-widthmap.get( $kendo-spacing, 4 )
Description
The width of the Timeline circle.
$kendo-timeline-circle-heightmap.get( $kendo-spacing, 4 )
Description
The height of the Timeline circle.
$kendo-timeline-circle-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the Timeline circle.
$kendo-timeline-event-width400px
Description
The width of the Timeline event.
$kendo-timeline-event-height600px
Description
The height of the Timeline event.
$kendo-timeline-event-min-height-calccalc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) )
Description
The minimum height of the Timeline event.
$kendo-timeline-icon-spacingvar( --kendo-icon-spacing, .5rem )
Description
The spacing of the Timeline icons.

Toolbar

NameTypeDefault valueComputed value
$kendo-toolbar-sm-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-xmap.get( $kendo-spacing, 2.5 )
Description
The horizontal padding of the large Toolbar.
$kendo-toolbar-sm-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-ymap.get( $kendo-spacing, 2.5 )
Description
The vertical padding of the large Toolbar.
$kendo-toolbar-sm-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacingmap.get( $kendo-spacing, 2 )
Description
The spacing between the tools of the large Toolbar.
$kendo-toolbar-border-width1px
Description
The width of the border around the Toolbar.
$kendo-toolbar-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Toolbar.
$kendo-toolbar-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Toolbar.
$kendo-toolbar-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Toolbar.
$kendo-toolbar-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Toolbar.
$kendo-toolbar-textvar( --kendo-component-text, inherit )
Description
The text color of the Toolbar.
$kendo-toolbar-bordervar( --kendo-component-border, initial )
Description
The color of the border around the Toolbar.
$kendo-toolbar-separator-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The color of the separator border of the Toolbar.
$kendo-toolbar-input-width10em
Description
The width of the input in the Toolbar.
$kendo-toolbar-item-focus-outline-width1px
Description
The border width of the focused Toolbar item.
$kendo-toolbar-item-focus-outline-stylesolid
Description
The border style of the focused Toolbar item.
$kendo-toolbar-item-focus-outline-colorif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The border color of the focused Toolbar item.
$kendo-toolbar-flat-border-width1px
Description
Border width of the flat Toolbar.
$kendo-toolbar-sizes( 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 ) )
Description
The sizes map for the Toolbar.

Tooltip

NameTypeDefault valueComputed value
$kendo-tooltip-border-radius$kendo-border-radius
Description
The border radius of the Tooltip.
$kendo-tooltip-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the Tooltip.
$kendo-tooltip-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Tooltip.
$kendo-tooltip-border-width0px
Description
The width of the border around the Tooltip.
$kendo-tooltip-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Tooltip.
$kendo-tooltip-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Tooltip.
$kendo-tooltip-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Tooltip.
$kendo-tooltip-title-font-sizecalc( #{$kendo-tooltip-font-size} * 1.25 )
Description
The font size of the Tooltip title.
$kendo-tooltip-title-line-heightvar( --kendo-line-heigh-xs, normal )
Description
The line height of the Tooltip title.
$kendo-tooltip-title-marginmap.get( $kendo-spacing, 1 )
Description
The margin of the Tooltip title.
$kendo-tooltip-callout-sizemap.get( $kendo-spacing, 2 )
Description
The size of the Tooltip callout.
$kendo-tooltip-bgif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
The default background of the Tooltip.
$kendo-tooltip-textvar( --kendo-component-text, initial )
Description
The default text color of the Tooltip.
$kendo-tooltip-bordertransparent
Description
The default border color of the Tooltip.
$kendo-tooltip-shadowvar( --kendo-box-shadow-depth-2, none )
Description
The box-shadow of the Tooltip.
$kendo-tooltip-button-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial ))
Description
The text color of the Tooltip button.

Treelist

NameTypeDefault valueComputed value
$kendo-treelist-footer-row-bg$kendo-grid-hover-bg
Description
Background color of the treelist footer row.
$kendo-treelist-footer-row-border-width1px
Description
Border width of the treelist footer row.

Treeview

NameTypeDefault valueComputed value
$kendo-treeview-font-familyvar( --kendo-font-family, normal )
Description
The font family of the TreeView.
$kendo-treeview-sm-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the small TreeView.
$kendo-treeview-md-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the medium TreeView.
$kendo-treeview-lg-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the large TreeView.
$kendo-treeview-sm-line-heightvar( --kendo-line-height, normal )
Description
The line height of the small TreeView.
$kendo-treeview-md-line-heightvar( --kendo-line-height, normal )
Description
The line height of the medium TreeView.
$kendo-treeview-lg-line-heightvar( --kendo-line-height, normal )
Description
The line height of the large TreeView.
$kendo-treeview-indentmap.get( $kendo-spacing, 6 )
Description
The indentation of child groups in the TreeView.
$kendo-treeview-sm-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the small TreeView items.
$kendo-treeview-md-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the large TreeView items.
$kendo-treeview-sm-item-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the small TreeView items.
$kendo-treeview-md-item-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the medium TreeView items.
$kendo-treeview-lg-item-padding-ymap.get( $kendo-spacing, 2.5 )
Description
The vertical padding of the large TreeView items.
$kendo-treeview-item-border-width0
Description
The border width of the TreeView items.
$kendo-treeview-item-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the TreeView items.
$kendo-treeview-filter-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the TreeViews' filter element.
$kendo-treeview-filter-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the TreeViews' filter element.
$kendo-treeview-sizes( sm: ( font-size: $kendo-treeview-sm-font-size, line-height: $kendo-treeview-sm-line-height, item-padding-x: $kendo-treeview-sm-item-padding-x, item-padding-y: $kendo-treeview-sm-item-padding-y ), md: ( font-size: $kendo-treeview-md-font-size, line-height: $kendo-treeview-md-line-height, item-padding-x: $kendo-treeview-md-item-padding-x, item-padding-y: $kendo-treeview-md-item-padding-y ), lg: ( font-size: $kendo-treeview-lg-font-size, line-height: $kendo-treeview-lg-line-height, item-padding-x: $kendo-treeview-lg-item-padding-x, item-padding-y: $kendo-treeview-lg-item-padding-y ) )
Description
The sizes map of the TreeView.
$kendo-treeview-bgtransparent
Description
The background color of the TreeView.
$kendo-treeview-textvar( --kendo-component-text, inherit )
Description
The text color of the TreeView.
$kendo-treeview-borderinherit
Description
The border color of the TreeView.
$kendo-treeview-item-bgtransparent
Description
The background color of the TreeView items.
$kendo-treeview-item-textvar( --kendo-component-text, inherit )
Description
The text color of the TreeView items.
$kendo-treeview-item-borderinherit
Description
The border color of the TreeView items.
$kendo-treeview-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
The background color of hovered TreeView items.
$kendo-treeview-item-hover-textvar( --kendo-hover-text, inherit )
Description
The text color of hovered TreeView items.
$kendo-treeview-item-hover-borderinherit
Description
The border color of hovered TreeView items
$kendo-treeview-item-focus-bg$kendo-treeview-item-bg
Description
The background color of focused TreeView items.
$kendo-treeview-item-focus-text$kendo-treeview-item-text
Description
The text color of focused TreeView items.
$kendo-treeview-item-focus-border$kendo-treeview-item-border
Description
The border color of focused TreeView items.
$kendo-treeview-item-focus-shadowinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The box shadow of focused TreeView items.
$kendo-treeview-item-selected-bgvar( --kendo-selected-bg, inherit )
Description
The background color of selected TreeView items.
$kendo-treeview-item-selected-textvar( --kendo-selected-text, inherit )
Description
The text color of selected TreeView items.
$kendo-treeview-item-selected-borderinherit
Description
The border color of selected TreeView items.
$kendo-treeview-item-disabled-bg$kendo-treeview-item-bg
Description
The background color of disabled TreeView items.
$kendo-treeview-item-disabled-textvar( --kendo-disabled-text, inherit )
Description
The text color of disabled TreeView items.
$kendo-treeview-item-disabled-borderinherit
Description
The border color of disabled TreeView items.
$kendo-treeview-loadmore-bgtransparent
Description
The background color of the Load More button in the TreeView
$kendo-treeview-loadmore-textvar( --kendo-link-text, initial )
Description
The text color of the Load More button in the TreeView
$kendo-treeview-loadmore-borderinherit
Description
The border color of the Load More button in the TreeView
$kendo-treeview-loadmore-hover-bgtransparent
Description
The background color of the hovered Load More button in the TreeView
$kendo-treeview-loadmore-hover-textvar( --kendo-link-hover-text, initial )
Description
The text color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-hover-borderinherit
Description
The border color of the hovered Load More button in the TreeView.
$kendo-treeview-loadmore-focus-bgtransparent
Description
The background color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-textvar( --kendo-link-hover-text, initial )
Description
The text color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-borderinherit
Description
The border color of the focused Load More button in the TreeView.
$kendo-treeview-loadmore-focus-shadow$kendo-treeview-item-focus-shadow
Description
The box shadow of the focused Load More button in the TreeView.
$kendo-treeview-checkbox-wrap-paddingmap.get( $kendo-spacing, .5 )
Description
The padding of the checkbox wrapper in the TreeView.

Typography

NameTypeDefault valueComputed value
$kendo-enable-typographyfalse
Description
Global typography styles for the Kendo Default theme.
$kendo-font-family-monospaceSFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description
Font family for monospaced text. Used for styling the code.

Upload

NameTypeDefault valueComputed value
$kendo-upload-border-width1px
Description
The width of the border around the Upload.
$kendo-upload-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Upload.
$kendo-upload-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Upload.
$kendo-upload-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Upload.
$kendo-upload-max-height300px
Description
The maximum height of the list with uploaded items.
$kendo-upload-textvar( --kendo-component-text, initial )
Description
The text color of the Upload.
$kendo-upload-bgvar( --kendo-component-bg, initial )
Description
The background color of the Upload.
$kendo-upload-bordervar( --kendo-component-border, initial )
Description
The border color of the Upload.
$kendo-upload-dropzone-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the Upload dropzone.
$kendo-upload-dropzone-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Upload dropzone.
$kendo-upload-dropzone-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Upload dropzone.
$kendo-upload-dropzone-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The background color of the Upload dropzone.
$kendo-upload-dropzone-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))
Description
The border color of the Upload dropzone.
$kendo-upload-dropzone-hover-bgvar( --kendo-hover-bg, inherit )
Description
The background color of the hovered Upload dropzone.
$kendo-upload-status-textvar( --kendo-subtle-text, inherit )
Description
The text color of the Upload status message.
$kendo-upload-status-text-opacitynull
Description
The opacity of the Upload status message.
$kendo-upload-item-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of an uploaded item.
$kendo-upload-item-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of an uploaded item.
$kendo-upload-multiple-items-spacingmap.get( $kendo-spacing, 4 )
Description
The vertical spacing between uploaded batch items.
$kendo-upload-validation-font-sizevar( --kendo-font-size-xs, inherit )
Description
The font size of the Upload validation message.
$kendo-upload-icon-spacingvar( --kendo-icon-spacing, .5rem )
Description
The horizontal spacing of the Upload status icon.
$kendo-upload-icon-colorvar( --kendo-subtle-text, inherit )
Description
The color of the uploaded items icon.
$kendo-upload-progress-thickness2px
Description
The thickness of the Upload progress bar.
$kendo-upload-progress-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The background color of the Upload progress bar.
$kendo-upload-success-textif($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))
Description
The success text color of the Upload.
$kendo-upload-success-bgif($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))
Description
The success background color of the Upload progress bar.
$kendo-upload-error-textif($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))
Description
The error text color of the Upload.
$kendo-upload-error-bgif($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))
Description
The error background color of the Upload progress bar.
$kendo-upload-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, .13)
Description
The shadow of the focused Upload button, actions and uploaded items.

Window

NameTypeDefault valueComputed value
$kendo-window-border-widthmap.get( $kendo-spacing, 1 ) 0 0
Description
The width of the border around the Window.
$kendo-window-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the Window.
$kendo-window-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Window.
$kendo-window-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Window.
$kendo-window-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Window.
$kendo-window-titlebar-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the Window titlebar.
$kendo-window-titlebar-padding-ymap.get( $kendo-spacing, 5 )
Description
The vertical padding of the Window titlebar.
$kendo-window-titlebar-border-width0
Description
The width of the border of the Window titlebar.
$kendo-window-titlebar-border-stylesolid
Description
The style of the border of the Window titlebar.
$kendo-window-title-font-sizevar( --kendo-font-size-xl, inherit )
Description
The font size of the title of the Window.
$kendo-window-title-line-heightvar( --kendo-line-height, normal )
Description
The line height of the title of the Window.
$kendo-window-title-font-weightvar( --kendo-font-weight-bold, bold )
Description
The font weight of the title of the Window.
$kendo-window-actions-gap0px
Description
The spacing between the buttons in the Window titlebar.
$kendo-window-action-opacity1
Description
OThe opacity of the buttons in the Window titlebar.
$kendo-window-action-hover-opacity1
Description
The opacity of the hovered buttons in the Window titlebar.
$kendo-window-inner-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the content of the Window.
$kendo-window-inner-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the content of the Window.
$kendo-window-buttongroup-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the Window action buttons.
$kendo-window-buttongroup-padding-ymap.get( $kendo-spacing, 6 )
Description
The vertical padding of the Window action buttons.
$kendo-window-buttongroup-border-width0
Description
The width of the top border of the Window action buttons.
$kendo-window-buttongroup-spacingmap.get( $kendo-spacing, 3 )
Description
The spacing between the Window action buttons.
$kendo-window-bgvar( --kendo-component-bg, initial )
Description
The background color of the Window.
$kendo-window-textvar( --kendo-component-text, initial )
Description
The text color of the Window.
$kendo-window-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the Window.
$kendo-window-shadowvar( --kendo-box-shadow-depth-8, none )
Description
The box shadow of the Window.
$kendo-window-focus-shadowvar( --kendo-box-shadow-depth-9, none )
Description
The box shadow of the focused Window.
$kendo-window-titlebar-bgvar( --kendo-component-bg, initial )
Description
The background color of the Window titlebar.
$kendo-window-titlebar-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the Window titlebar.
$kendo-window-titlebar-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the Window titlebar.
$kendo-window-sizes( sm: 300px, md: 800px, lg: 1200px )
Description
The map of the width of the different Window sizes.
$kendo-window-brand-colors( primary: primary )
Description
The theme variations for the Window.
$kendo-window-theme-colors()
Description
The theme colors map for the Window.

Wizard

NameTypeDefault valueComputed value
$kendo-wizard-border-width0px
Description
The border width of the Wizard.
$kendo-wizard-padding-xmap.get( $kendo-spacing, 6 )
Description
The horizontal padding of the Wizard.
$kendo-wizard-padding-ymap.get( $kendo-spacing, 6 )
Description
The vertical padding of the Wizard.
$kendo-wizard-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the Wizard.
$kendo-wizard-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Wizard.
$kendo-wizard-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Wizard.
$kendo-wizard-steps-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of the Wizard steps.
$kendo-wizard-steps-padding-ymap.get( $kendo-spacing, 3 )
Description
The vertical padding of the Wizard steps.
$kendo-wizard-content-padding-x0px
Description
The horizontal padding of the Wizard content.
$kendo-wizard-content-padding-y0px
Description
The vertical padding of the Wizard content.
$kendo-wizard-content-textvar( --kendo-component-text, initial )
Description
The text color of the Wizard content.
$kendo-wizard-content-bgvar( --kendo-component-bg, initial )
Description
The background color of the Wizard content.
$kendo-wizard-buttons-margin-xmap.get( $kendo-spacing, 7 )
Description
The horizontal margin of the Wizard's Button container.
$kendo-wizard-buttons-margin-ymap.get( $kendo-spacing, 6 )
Description
The vertical margin of the Wizard Button container.
$kendo-wizard-step-focus-borderif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
The outline of the focused Wizard step.

Classnames

. k-sr-only

This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.

.k-spacer

This is equivalent to flex: 1 0 auto;. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.

.k-spacer-sized

This is equivalent to flex-grow: 0;. The spacer will not take any of the remaining space in a flex container.