Customizing Spreadsheet
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-spreadsheet-border-width | Number | 1px | 1px |
Description
The width of the border around the Spreadsheet. | |||
| $kendo-spreadsheet-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Spreadsheet. | |||
| $kendo-spreadsheet-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Spreadsheet. | |||
| $kendo-spreadsheet-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Spreadsheet. | |||
| $kendo-spreadsheet-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Spreadsheet. | |||
| $kendo-spreadsheet-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet. | |||
| $kendo-spreadsheet-border | String | $kendo-component-border | var(--kendo-color-border, #dee2e6) |
Description
The border color of the Spreadsheet. | |||
| $kendo-spreadsheet-header-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Spreadsheet header. | |||
| $kendo-spreadsheet-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet header. | |||
| $kendo-spreadsheet-header-border | String | $kendo-component-header-border | var(--kendo-color-border, #dee2e6) |
Description
The border color of the Spreadsheet header. | |||
| $kendo-spreadsheet-header-gradient | Null | $kendo-component-header-gradient | null |
Description
The gradient of the Spreadsheet header. | |||
| $kendo-spreadsheet-table-header-bg | String | $kendo-spreadsheet-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Spreadsheet table headers. | |||
| $kendo-spreadsheet-table-header-text | String | $kendo-spreadsheet-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet table headers. | |||
| $kendo-spreadsheet-table-header-border | String | $kendo-spreadsheet-header-border | var(--kendo-color-border, #dee2e6) |
Description
The border color of the Spreadsheet table headers. | |||
| $kendo-spreadsheet-table-header-gradient | Null | $kendo-spreadsheet-header-gradient | null |
Description
The gradient of the Spreadsheet table headers. | |||
| $kendo-spreadsheet-action-bar-border-width | Number | 1px | 1px |
Description
The border width of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-action-bar-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-action-bar-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-action-bar-font-size | String | $kendo-spreadsheet-font-size | var(--kendo-font-size, inherit) |
Description
The font size of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-action-bar-font-family | List | Arial, Verdana, sans-serif | Arial, Verdana, sans-serif |
Description
The font family of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-action-bar-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacings of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-formula-bar-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The gap of the Spreadsheet formula bar. | |||
| $kendo-spreadsheet-formula-input-padding-x | Number | $kendo-input-padding-x | 0.75rem |
Description
The horizontal padding of the Spreadsheet formula input. | |||
| $kendo-spreadsheet-formula-input-padding-y | Number | $kendo-input-padding-y | 0.375rem |
Description
The vertical padding of the Spreadsheet formula input. | |||
| $kendo-spreadsheet-formula-input-line-height | Number | $kendo-input-line-height | 1.5 |
Description
The line height of the Spreadsheet formula input. | |||
| $kendo-spreadsheet-view-font-family | List | Arial, Verdana, sans-serif | Arial, Verdana, sans-serif |
Description
The font family of the Spreadsheet view. | |||
| $kendo-spreadsheet-view-font-size | String | $kendo-spreadsheet-font-size | var(--kendo-font-size, inherit) |
Description
The font size of the Spreadsheet view. | |||
| $kendo-spreadsheet-selection-bg | String | 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, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet selection. | |||
| $kendo-spreadsheet-selection-text | Null | null | null |
Description
The text color of the Spreadsheet selection. | |||
| $kendo-spreadsheet-selection-border | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet selection. | |||
| $kendo-spreadsheet-selection-shadow | List | inset 0 0 0 1px $kendo-selected-bg | inset 0 0 0 1px var(--kendo-color-primary, #0d6efd) |
Description
The shadow of the Spreadsheet selection. | |||
| $kendo-spreadsheet-single-selection-bg | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Spreadsheet single selection. | |||
| $kendo-spreadsheet-single-selection-text | Null | null | null |
Description
The text color of the Spreadsheet single selection. | |||
| $kendo-spreadsheet-single-selection-border | String | $kendo-spreadsheet-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The border color of the Spreadsheet single selection. | |||
| $kendo-spreadsheet-partial-selection-bg | String | 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, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet partial selection. | |||
| $kendo-spreadsheet-active-cell-bg | String | $kendo-spreadsheet-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Spreadsheet active cell. | |||
| $kendo-spreadsheet-active-cell-shadow | List | inset 0 0 0 1px $kendo-selected-bg | inset 0 0 0 1px var(--kendo-color-primary, #0d6efd) |
Description
The shadow of the Spreadsheet active cell. | |||
| $kendo-spreadsheet-auto-fill-bg | String | 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, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet auto fill. | |||
| $kendo-spreadsheet-auto-fill-text | Null | null | null |
Description
The text color of the Spreadsheet auto fill. | |||
| $kendo-spreadsheet-auto-fill-border | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet auto fill. | |||
| $kendo-spreadsheet-auto-fill-shadow | List | inset 0 0 0 1px $kendo-selected-bg | inset 0 0 0 1px var(--kendo-color-primary, #0d6efd) |
Description
The shadow of the Spreadsheet auto fill. | |||
| $kendo-spreadsheet-auto-fill-punch-bg | String | rgba( $kendo-spreadsheet-bg, .5 ) | rgba(var(--kendo-color-surface-alt, #ffffff), 0.5) |
Description
The background color of the Spreadsheet auto fill punch. | |||
| $kendo-spreadsheet-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the Spreadsheet cell. | |||
| $kendo-spreadsheet-cell-padding-x | String | $kendo-spreadsheet-cell-padding-y | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Spreadsheet cell. | |||
| $kendo-spreadsheet-cell-editor-line-height | Number | 20px | 20px |
Description
The line height of the Spreadsheet cell editor. | |||
| $kendo-spreadsheet-cell-editor-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Spreadsheet cell editor. | |||
| $kendo-spreadsheet-cell-editor-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the Spreadsheet cell editor. | |||
| $kendo-spreadsheet-cell-editor-bg | String | $kendo-spreadsheet-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Spreadsheet cell editor. | |||
| $kendo-spreadsheet-cell-editor-text | String | $kendo-spreadsheet-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Spreadsheet cell editor. | |||
| $kendo-spreadsheet-cell-editor-border | Null | null | null |
Description
The border color of the Spreadsheet cell editor. | |||
| $kendo-spreadsheet-resize-handle-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the Spreadsheet resize handle. | |||
| $kendo-spreadsheet-cell-comment-border | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet cell comment indicator. | |||
| $kendo-spreadsheet-cell-dirty-border | String | $kendo-color-error | var(--kendo-color-error, #dc3545) |
Description
The border color of the Spreadsheet cell dirty indicator. | |||
| $kendo-spreadsheet-sheets-bar-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Spreadsheet sheets bar. | |||
| $kendo-spreadsheet-sheets-bar-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Spreadsheet sheets bar. | |||
| $kendo-spreadsheet-sheets-bar-border-width | Number | 1px | 1px |
Description
The border width of the Spreadsheet sheets bar. | |||
| $kendo-spreadsheet-insert-image-dialog-border-style | String | dashed | dashed |
Description
The border style of the Spreadsheet image Dialog. | |||
| $kendo-spreadsheet-insert-image-dialog-border-width | Number | 2px | 2px |
Description
The border width of the Spreadsheet image Dialog. | |||
| $kendo-spreadsheet-insert-image-dialog-text-margin-bottom | String | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) |
Description
The bottom margin of the Spreadsheet image Dialog. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-width | Number | 355px | 355px |
Description
The width of the Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-height | Number | 230px | 230px |
Description
The height of the Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-img | String | "image-default.png" | "image-default.png" |
Description
The image of the Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-border | String | $kendo-component-border | var(--kendo-color-border, #dee2e6) |
Description
The border of the Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow | List | inset 0 0 0 2000px rgba( black, .5 ) | inset 0 0 0 2000px rgba(0, 0, 0, 0.5) |
Description
The shadow of the Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
Description
The border radius of the Spreadsheet image Dialog preview overlay. | |||
| $kendo-spreadsheet-insert-image-dialog-overlay-hover-text | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The text color of the hovered Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-drawing-handle-width | Number | 6px | 6px |
Description
The width of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-height | Number | 6px | 6px |
Description
The height of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-border-style | String | solid | solid |
Description
The border style of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-border-width | Number | 1px | 1px |
Description
The border width of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-outline-color | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-border-color | String | $kendo-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The outline color of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-bg | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
Description
The border color of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-border-radius | String | k-border-radius(lg) | var(--kendo-border-radius-lg, 0.5rem) |
Description
The border radius of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-outline-style | String | solid | solid |
Description
The outline style of the Spreadsheet drawing. | |||
| $kendo-spreadsheet-drawing-outline-width | Number | 2px | 2px |
Description
The outline width of the Spreadsheet drawing. | |||
| $kendo-spreadsheet-drawing-anchor-bg | String | 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, #0d6efd) 25%, transparent) |
Description
The background color of the Spreadsheet drawing anchor. | |||
| $kendo-spreadsheet-dropzone-spacing-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical spacing of the Spreadsheet DropZone. | |||
