Configuring the Appearance of the Spreadsheet Component

Sass Variables

The Telerik and Kendo UI Spreadsheet is a composite UI component that consists of Toolbar, Button, TabStrip, and Menu components. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar, Textbox, TabStrip, and Menu Sass variables, as well as those provided by the Button component.

Variable	Default Value	Computed Value	Value
`kendo-spreadsheet-border-width`	`1px`	`1px`	Default: `1px`Computed: `1px`
Description: The width of the border around the Spreadsheet.
`kendo-spreadsheet-font-family`	`var( --kendo-font-family, inherit )`	`var(--kendo-font-family, inherit)`	Default: `var( --kendo-font-family, inherit )`Computed: `var(--kendo-font-family, inherit)`
Description: The font family of the Spreadsheet.
`kendo-spreadsheet-font-size`	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`	Default: `var( --kendo-font-size, inherit )`Computed: `var(--kendo-font-size, inherit)`
Description: The font size of the Spreadsheet.
`kendo-spreadsheet-line-height`	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`	Default: `var( --kendo-line-height, normal )`Computed: `var(--kendo-line-height, normal)`
Description: The line height of the Spreadsheet.
`kendo-spreadsheet-bg`	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`	Default: `$kendo-component-bg`Computed: `var(--kendo-color-surface-alt, #ffffff)`
Description: The background color of the Spreadsheet.
`kendo-spreadsheet-text`	`$kendo-component-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `$kendo-component-text`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The text color of the Spreadsheet.
`kendo-spreadsheet-border`	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`	Default: `$kendo-component-border`Computed: `var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description: The border color of the Spreadsheet.
`kendo-spreadsheet-header-bg`	`$kendo-component-header-bg`	`var(--kendo-color-surface, #fafafa)`	Default: `$kendo-component-header-bg`Computed: `var(--kendo-color-surface, #fafafa)`
Description: The background color of the Spreadsheet header.
`kendo-spreadsheet-header-text`	`$kendo-component-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `$kendo-component-header-text`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The text color of the Spreadsheet header.
`kendo-spreadsheet-header-border`	`$kendo-component-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`	Default: `$kendo-component-header-border`Computed: `var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description: The border color of the Spreadsheet header.
`kendo-spreadsheet-header-gradient`	`$kendo-component-header-gradient`	`null`	Default: `$kendo-component-header-gradient`Computed: `null`
Description: The gradient of the Spreadsheet header.
`kendo-spreadsheet-table-header-bg`	`$kendo-spreadsheet-header-bg`	`var(--kendo-color-surface, #fafafa)`	Default: `$kendo-spreadsheet-header-bg`Computed: `var(--kendo-color-surface, #fafafa)`
Description: The background color of the Spreadsheet table headers.
`kendo-spreadsheet-table-header-text`	`$kendo-spreadsheet-header-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `$kendo-spreadsheet-header-text`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The text color of the Spreadsheet table headers.
`kendo-spreadsheet-table-header-border`	`$kendo-spreadsheet-header-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`	Default: `$kendo-spreadsheet-header-border`Computed: `var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description: The border color of the Spreadsheet table headers.
`kendo-spreadsheet-table-header-gradient`	`$kendo-spreadsheet-header-gradient`	`null`	Default: `$kendo-spreadsheet-header-gradient`Computed: `null`
Description: The gradient of the Spreadsheet table headers.
`kendo-spreadsheet-action-bar-border-width`	`1px`	`1px`	Default: `1px`Computed: `1px`
Description: The border width of the Spreadsheet action bar.
`kendo-spreadsheet-action-bar-padding-y`	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`	Default: `k-spacing(1)`Computed: `var(--kendo-spacing-1, 0.25rem)`
Description: The horizontal padding of the Spreadsheet action bar.
`kendo-spreadsheet-action-bar-padding-x`	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`	Default: `k-spacing(2)`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The vertical padding of the Spreadsheet action bar.
`kendo-spreadsheet-action-bar-font-size`	`$kendo-spreadsheet-font-size`	`var(--kendo-font-size, inherit)`	Default: `$kendo-spreadsheet-font-size`Computed: `var(--kendo-font-size, inherit)`
Description: The font size of the Spreadsheet action bar.
`kendo-spreadsheet-action-bar-font-family`	`Arial, Verdana, sans-serif`	`Arial, Verdana, sans-serif`	Default: `Arial, Verdana, sans-serif`Computed: `Arial, Verdana, sans-serif`
Description: The font family of the Spreadsheet action bar.
`kendo-spreadsheet-action-bar-spacing`	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`	Default: `k-spacing(2)`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The spacings of the Spreadsheet action bar.
`kendo-spreadsheet-formula-bar-gap`	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`	Default: `k-spacing(2)`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The gap of the Spreadsheet formula bar.
`kendo-spreadsheet-formula-input-padding-x`	`$kendo-input-padding-x`	`var(--kendo-spacing-2, 0.5rem)`	Default: `$kendo-input-padding-x`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The horizontal padding of the Spreadsheet formula input.
`kendo-spreadsheet-formula-input-padding-y`	`$kendo-input-padding-y`	`var(--kendo-spacing-1, 0.25rem)`	Default: `$kendo-input-padding-y`Computed: `var(--kendo-spacing-1, 0.25rem)`
Description: The vertical padding of the Spreadsheet formula input.
`kendo-spreadsheet-formula-input-line-height`	`$kendo-input-line-height`	`var(--kendo-line-height, normal)`	Default: `$kendo-input-line-height`Computed: `var(--kendo-line-height, normal)`
Description: The line height of the Spreadsheet formula input.
`kendo-spreadsheet-view-font-family`	`Arial, Verdana, sans-serif`	`Arial, Verdana, sans-serif`	Default: `Arial, Verdana, sans-serif`Computed: `Arial, Verdana, sans-serif`
Description: The font family of the Spreadsheet view.
`kendo-spreadsheet-view-font-size`	`$kendo-spreadsheet-font-size`	`var(--kendo-font-size, inherit)`	Default: `$kendo-spreadsheet-font-size`Computed: `var(--kendo-font-size, inherit)`
Description: The font size of the Spreadsheet view.
`kendo-spreadsheet-selection-bg`	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`	Default: `if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`Computed: `color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
Description: The background color of the Spreadsheet selection.
`kendo-spreadsheet-selection-text`	`null`	`null`	Default: `null`Computed: `null`
Description: The text color of the Spreadsheet selection.
`kendo-spreadsheet-selection-border`	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-selected-bg`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The border color of the Spreadsheet selection.
`kendo-spreadsheet-selection-shadow`	`inset 0 0 0 1px $kendo-selected-bg`	`inset 0 0 0 1px var(--kendo-color-primary, #ff6358)`	Default: `inset 0 0 0 1px $kendo-selected-bg`Computed: `inset 0 0 0 1px var(--kendo-color-primary, #ff6358)`
Description: The shadow of the Spreadsheet selection.
`kendo-spreadsheet-single-selection-bg`	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-selected-bg`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The background color of the Spreadsheet single selection.
`kendo-spreadsheet-single-selection-text`	`null`	`null`	Default: `null`Computed: `null`
Description: The text color of the Spreadsheet single selection.
`kendo-spreadsheet-single-selection-border`	`$kendo-spreadsheet-bg`	`var(--kendo-color-surface-alt, #ffffff)`	Default: `$kendo-spreadsheet-bg`Computed: `var(--kendo-color-surface-alt, #ffffff)`
Description: The border color of the Spreadsheet single selection.
`kendo-spreadsheet-partial-selection-bg`	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`	Default: `if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`Computed: `color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
Description: The background color of the Spreadsheet partial selection.
`kendo-spreadsheet-active-cell-bg`	`$kendo-spreadsheet-bg`	`var(--kendo-color-surface-alt, #ffffff)`	Default: `$kendo-spreadsheet-bg`Computed: `var(--kendo-color-surface-alt, #ffffff)`
Description: The background color of the Spreadsheet active cell.
`kendo-spreadsheet-active-cell-shadow`	`inset 0 0 0 1px $kendo-selected-bg`	`inset 0 0 0 1px var(--kendo-color-primary, #ff6358)`	Default: `inset 0 0 0 1px $kendo-selected-bg`Computed: `inset 0 0 0 1px var(--kendo-color-primary, #ff6358)`
Description: The shadow of the Spreadsheet active cell.
`kendo-spreadsheet-auto-fill-bg`	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`	Default: `if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`Computed: `color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
Description: The background color of the Spreadsheet auto fill.
`kendo-spreadsheet-auto-fill-text`	`null`	`null`	Default: `null`Computed: `null`
Description: The text color of the Spreadsheet auto fill.
`kendo-spreadsheet-auto-fill-border`	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-selected-bg`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The border color of the Spreadsheet auto fill.
`kendo-spreadsheet-auto-fill-shadow`	`inset 0 0 0 1px $kendo-selected-bg`	`inset 0 0 0 1px var(--kendo-color-primary, #ff6358)`	Default: `inset 0 0 0 1px $kendo-selected-bg`Computed: `inset 0 0 0 1px var(--kendo-color-primary, #ff6358)`
Description: The shadow of the Spreadsheet auto fill.
`kendo-spreadsheet-auto-fill-punch-bg`	`rgba( $kendo-spreadsheet-bg, .5 )`	`rgba(var(--kendo-color-surface-alt, #ffffff), 0.5)`	Default: `rgba( $kendo-spreadsheet-bg, .5 )`Computed: `rgba(var(--kendo-color-surface-alt, #ffffff), 0.5)`
Description: The background color of the Spreadsheet auto fill punch.
`kendo-spreadsheet-cell-padding-y`	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`	Default: `k-spacing(1)`Computed: `var(--kendo-spacing-1, 0.25rem)`
Description: The vertical padding of the Spreadsheet cell.
`kendo-spreadsheet-cell-padding-x`	`$kendo-spreadsheet-cell-padding-y`	`var(--kendo-spacing-1, 0.25rem)`	Default: `$kendo-spreadsheet-cell-padding-y`Computed: `var(--kendo-spacing-1, 0.25rem)`
Description: The horizontal padding of the Spreadsheet cell.
`kendo-spreadsheet-cell-editor-line-height`	`20px`	`20px`	Default: `20px`Computed: `20px`
Description: The line height of the Spreadsheet cell editor.
`kendo-spreadsheet-cell-editor-padding-x`	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`	Default: `k-spacing(1)`Computed: `var(--kendo-spacing-1, 0.25rem)`
Description: The horizontal padding of the Spreadsheet cell editor.
`kendo-spreadsheet-cell-editor-padding-y`	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`	Default: `k-spacing(0)`Computed: `var(--kendo-spacing-0, 0px)`
Description: The vertical padding of the Spreadsheet cell editor.
`kendo-spreadsheet-cell-editor-bg`	`$kendo-spreadsheet-bg`	`var(--kendo-color-surface-alt, #ffffff)`	Default: `$kendo-spreadsheet-bg`Computed: `var(--kendo-color-surface-alt, #ffffff)`
Description: The background color of the Spreadsheet cell editor.
`kendo-spreadsheet-cell-editor-text`	`$kendo-spreadsheet-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `$kendo-spreadsheet-text`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The text color of the Spreadsheet cell editor.
`kendo-spreadsheet-cell-editor-border`	`null`	`null`	Default: `null`Computed: `null`
Description: The border color of the Spreadsheet cell editor.
`kendo-spreadsheet-resize-handle-bg`	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-color-primary`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The background color of the Spreadsheet resize handle.
`kendo-spreadsheet-cell-comment-border`	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-color-primary`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The border color of the Spreadsheet cell comment indicator.
`kendo-spreadsheet-cell-dirty-border`	`$kendo-color-error`	`var(--kendo-color-error, #f31700)`	Default: `$kendo-color-error`Computed: `var(--kendo-color-error, #f31700)`
Description: The border color of the Spreadsheet cell dirty indicator.
`kendo-spreadsheet-sheets-bar-padding-x`	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`	Default: `k-spacing(2)`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The horizontal padding of the Spreadsheet sheets bar.
`kendo-spreadsheet-sheets-bar-padding-y`	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`	Default: `k-spacing(2)`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The vertical padding of the Spreadsheet sheets bar.
`kendo-spreadsheet-sheets-bar-border-width`	`1px`	`1px`	Default: `1px`Computed: `1px`
Description: The border width of the Spreadsheet sheets bar.
`kendo-spreadsheet-insert-image-dialog-border-style`	`dashed`	`dashed`	Default: `dashed`Computed: `dashed`
Description: The border style of the Spreadsheet image Dialog.
`kendo-spreadsheet-insert-image-dialog-border-width`	`2px`	`2px`	Default: `2px`Computed: `2px`
Description: The border width of the Spreadsheet image Dialog.
`kendo-spreadsheet-insert-image-dialog-text-margin-bottom`	`k-spacing(7.5)`	`var(--kendo-spacing-7\.5, 1.875rem)`	Default: `k-spacing(7.5)`Computed: `var(--kendo-spacing-7\.5, 1.875rem)`
Description: The bottom margin of the Spreadsheet image Dialog.
`kendo-spreadsheet-insert-image-dialog-preview-width`	`355px`	`355px`	Default: `355px`Computed: `355px`
Description: The width of the Spreadsheet image Dialog preview.
`kendo-spreadsheet-insert-image-dialog-preview-height`	`230px`	`230px`	Default: `230px`Computed: `230px`
Description: The height of the Spreadsheet image Dialog preview.
`kendo-spreadsheet-insert-image-dialog-preview-img`	`"image-default.png"`	`"image-default.png"`	Default: `"image-default.png"`Computed: `"image-default.png"`
Description: The image of the Spreadsheet image Dialog preview.
`kendo-spreadsheet-insert-image-dialog-preview-border`	`$kendo-component-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`	Default: `$kendo-component-border`Computed: `var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description: The border of the Spreadsheet image Dialog preview.
`kendo-spreadsheet-insert-image-dialog-preview-border-radius`	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`	Default: `k-border-radius(md)`Computed: `var(--kendo-border-radius-md, 0.25rem)`
Description: The border radius of the Spreadsheet image Dialog preview.
`kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow`	`inset 0 0 0 2000px rgba(0, 0, 0, .5)`	`inset 0 0 0 2000px rgba(0, 0, 0, 0.5)`	Default: `inset 0 0 0 2000px rgba(0, 0, 0, .5)`Computed: `inset 0 0 0 2000px rgba(0, 0, 0, 0.5)`
Description: The shadow of the Spreadsheet image Dialog preview.
`kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius`	`k-border-radius(md)`	`var(--kendo-border-radius-md, 0.25rem)`	Default: `k-border-radius(md)`Computed: `var(--kendo-border-radius-md, 0.25rem)`
Description: The border radius of the Spreadsheet image Dialog preview overlay.
`kendo-spreadsheet-insert-image-dialog-overlay-hover-text`	`$kendo-component-bg`	`var(--kendo-color-surface-alt, #ffffff)`	Default: `$kendo-component-bg`Computed: `var(--kendo-color-surface-alt, #ffffff)`
Description: The text color of the hovered Spreadsheet image Dialog preview.
`kendo-spreadsheet-drawing-handle-width`	`6px`	`6px`	Default: `6px`Computed: `6px`
Description: The width of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-handle-height`	`6px`	`6px`	Default: `6px`Computed: `6px`
Description: The height of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-handle-border-style`	`solid`	`solid`	Default: `solid`Computed: `solid`
Description: The border style of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-handle-border-width`	`1px`	`1px`	Default: `1px`Computed: `1px`
Description: The border width of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-handle-outline-color`	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-color-primary`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The border color of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-handle-border-color`	`$kendo-selected-bg`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-selected-bg`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The outline color of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-handle-bg`	`$kendo-color-primary`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-color-primary`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The border color of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-handle-border-radius`	`k-border-radius(lg)`	`var(--kendo-border-radius-lg, 0.375rem)`	Default: `k-border-radius(lg)`Computed: `var(--kendo-border-radius-lg, 0.375rem)`
Description: The border radius of the Spreadsheet drawing handle.
`kendo-spreadsheet-drawing-outline-style`	`solid`	`solid`	Default: `solid`Computed: `solid`
Description: The outline style of the Spreadsheet drawing.
`kendo-spreadsheet-drawing-outline-width`	`2px`	`2px`	Default: `2px`Computed: `2px`
Description: The outline width of the Spreadsheet drawing.
`kendo-spreadsheet-drawing-anchor-bg`	`if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`	`color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`	Default: `if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))`Computed: `color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)`
Description: The background color of the Spreadsheet drawing anchor.
`kendo-spreadsheet-dropzone-spacing-y`	`k-spacing(4)`	`var(--kendo-spacing-4, 1rem)`	Default: `k-spacing(4)`Computed: `var(--kendo-spacing-4, 1rem)`
Description: The vertical spacing of the Spreadsheet DropZone.

Variable	Default Value	Computed Value	Value
`kendo-menu-popup-padding-x`	`null`	`null`	Default: `null`Computed: `null`
Description: Horizontal padding of the menu popup.
`kendo-menu-popup-padding-y`	`null`	`null`	Default: `null`Computed: `null`
Description: Vertical padding of the menu popup.
`kendo-menu-popup-border-width`	`$kendo-popup-border-width`	`1px`	Default: `$kendo-popup-border-width`Computed: `1px`
Description: Width of the border around the menu popup.
`kendo-menu-popup-font-size`	`var( --kendo-font-size, inherit )`	`var(--kendo-font-size, inherit)`	Default: `var( --kendo-font-size, inherit )`Computed: `var(--kendo-font-size, inherit)`
Description: Font sizes of the menu popup.
`kendo-menu-popup-line-height`	`var( --kendo-line-height, normal )`	`var(--kendo-line-height, normal)`	Default: `var( --kendo-line-height, normal )`Computed: `var(--kendo-line-height, normal)`
Description: Line heights used along with $kendo-font-size.
`kendo-menu-popup-bg`	`$kendo-popup-bg`	`var(--kendo-color-surface-alt, #ffffff)`	Default: `$kendo-popup-bg`Computed: `var(--kendo-color-surface-alt, #ffffff)`
Description: The background of the menu popup.
`kendo-menu-popup-text`	`$kendo-popup-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `$kendo-popup-text`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The text color of the menu popup.
`kendo-menu-popup-border`	`$kendo-popup-border`	`var(--kendo-color-border, rgba(0, 0, 0, 0.08))`	Default: `$kendo-popup-border`Computed: `var(--kendo-color-border, rgba(0, 0, 0, 0.08))`
Description: The border color of the menu popup.
`kendo-menu-popup-gradient`	`null`	`null`	Default: `null`Computed: `null`
Description: The background gradient of the menu popup.
`kendo-menu-popup-item-padding-x`	`k-spacing(2)`	`var(--kendo-spacing-2, 0.5rem)`	Default: `k-spacing(2)`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: Horizontal padding of the menu item in popup.
`kendo-menu-popup-item-padding-y`	`k-spacing(1)`	`var(--kendo-spacing-1, 0.25rem)`	Default: `k-spacing(1)`Computed: `var(--kendo-spacing-1, 0.25rem)`
Description: Vertical padding of the menu item in popup.
`kendo-menu-popup-item-padding-end`	`calc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )`	`calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)`	Default: `calc( #{$kendo-menu-popup-item-padding-x} * 2 + #{$kendo-icon-size} )`Computed: `calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px)`
Description: The end padding of the menu item in popup.
`kendo-menu-popup-sm-item-icon-margin-start`	`$kendo-menu-popup-sm-item-padding-x`	`var(--kendo-spacing-2, 0.5rem)`	Default: `$kendo-menu-popup-sm-item-padding-x`Computed: `var(--kendo-spacing-2, 0.5rem)`
Description: The start margin of the menu item expand icon.
`kendo-menu-popup-sm-item-icon-margin-end`	`calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )`	`calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))`	Default: `calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) )`Computed: `calc(-1 * (calc(var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2))`
Description: The end margin of the menu item expand icon.
`kendo-menu-popup-item-spacing`	`k-spacing(0)`	`var(--kendo-spacing-0, 0px)`	Default: `k-spacing(0)`Computed: `var(--kendo-spacing-0, 0px)`
Description: The spacing between the menu items in popup.
`kendo-menu-popup-item-bg`	`null`	`null`	Default: `null`Computed: `null`
Description: The background of the menu item in popup.
`kendo-menu-popup-item-text`	`null`	`null`	Default: `null`Computed: `null`
Description: The text color of the menu item in popup.
`kendo-menu-popup-item-border`	`null`	`null`	Default: `null`Computed: `null`
Description: The border color of the menu item in popup.
`kendo-menu-popup-item-gradient`	`null`	`null`	Default: `null`Computed: `null`
Description: The background gradient of the menu item in popup.
`kendo-menu-popup-item-hover-bg`	`$kendo-list-item-hover-bg`	`var(--kendo-color-base-hover, #ebebeb)`	Default: `$kendo-list-item-hover-bg`Computed: `var(--kendo-color-base-hover, #ebebeb)`
Description: The background of hovered menu item in popup.
`kendo-menu-popup-item-hover-text`	`$kendo-list-item-hover-text`	`var(--kendo-color-on-app-surface, #3d3d3d)`	Default: `$kendo-list-item-hover-text`Computed: `var(--kendo-color-on-app-surface, #3d3d3d)`
Description: The text color of hovered menu item in popup.
`kendo-menu-popup-item-hover-border`	`null`	`null`	Default: `null`Computed: `null`
Description: The border color of hovered menu item in popup.
`kendo-menu-popup-item-hover-gradient`	`null`	`null`	Default: `null`Computed: `null`
Description: The background gradient of hovered menu item in popup.
`kendo-menu-popup-item-expanded-bg`	`$kendo-list-item-selected-bg`	`var(--kendo-color-primary, #ff6358)`	Default: `$kendo-list-item-selected-bg`Computed: `var(--kendo-color-primary, #ff6358)`
Description: The background of expanded menu item in popup.
`kendo-menu-popup-item-expanded-text`	`$kendo-list-item-selected-text`	`var(--kendo-color-on-primary, #ffffff)`	Default: `$kendo-list-item-selected-text`Computed: `var(--kendo-color-on-primary, #ffffff)`
Description: The text color of expanded menu item in popup.
`kendo-menu-popup-item-expanded-border`	`null`	`null`	Default: `null`Computed: `null`
Description: The border color of expanded menu item in popup.
`kendo-menu-popup-item-expanded-gradient`	`null`	`null`	Default: `null`Computed: `null`
Description: The background gradient of expanded menu item in popup.
`kendo-menu-popup-item-focus-shadow`	`$kendo-menu-item-focus-shadow`	`inset 0 0 0 2px rgba(0, 0, 0, 0.12)`	Default: `$kendo-menu-item-focus-shadow`Computed: `inset 0 0 0 2px rgba(0, 0, 0, 0.12)`
Description: The base shadow of focused menu item in popup.

Foundation

Themes

CSS Utilities

Components

Resources

Spreadsheet

Sass Variables

Menu Variables

On this page