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 | List | $kendo-font-family | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
The font family of the Spreadsheet. | |||
$kendo-spreadsheet-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the Spreadsheet. | |||
$kendo-spreadsheet-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line height of the Spreadsheet. | |||
$kendo-spreadsheet-bg | Color | $kendo-component-bg | #ffffff |
Description
The background color of the Spreadsheet. | |||
$kendo-spreadsheet-text | Color | $kendo-component-text | #212529 |
Description
The text color of the Spreadsheet. | |||
$kendo-spreadsheet-border | Color | $kendo-component-border | #dee2e6 |
Description
The border color of the Spreadsheet. | |||
$kendo-spreadsheet-header-bg | Color | $kendo-component-header-bg | #f8f9fa |
Description
The background color of the Spreadsheet header. | |||
$kendo-spreadsheet-header-text | Color | $kendo-component-header-text | #212529 |
Description
The text color of the Spreadsheet header. | |||
$kendo-spreadsheet-header-border | Color | $kendo-component-header-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 | Color | $kendo-spreadsheet-header-bg | #f8f9fa |
Description
The background color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-table-header-text | Color | $kendo-spreadsheet-header-text | #212529 |
Description
The text color of the Spreadsheet table headers. | |||
$kendo-spreadsheet-table-header-border | Color | $kendo-spreadsheet-header-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 | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The horizontal padding of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The vertical padding of the Spreadsheet action bar. | |||
$kendo-spreadsheet-action-bar-font-size | Number | $kendo-spreadsheet-font-size | 1rem |
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 | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The spacings of the Spreadsheet action bar. | |||
$kendo-spreadsheet-formula-bar-gap | Number | k-map-get( $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 | Number | $kendo-spreadsheet-font-size | 1rem |
Description
The font size of the Spreadsheet view. | |||
$kendo-spreadsheet-selection-bg | Color | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | rgba(13, 110, 253, 0.25) |
Description
The background color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-text | Null | null | null |
Description
The text color of the Spreadsheet selection. | |||
$kendo-spreadsheet-selection-border | Color | $kendo-selected-bg | #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 #0d6efd |
Description
The shadow of the Spreadsheet selection. | |||
$kendo-spreadsheet-single-selection-bg | Color | $kendo-selected-bg | #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 | Color | $kendo-spreadsheet-bg | #ffffff |
Description
The border color of the Spreadsheet single selection. | |||
$kendo-spreadsheet-partial-selection-bg | Color | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | rgba(13, 110, 253, 0.25) |
Description
The background color of the Spreadsheet partial selection. | |||
$kendo-spreadsheet-active-cell-bg | Color | $kendo-spreadsheet-bg | #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 #0d6efd |
Description
The shadow of the Spreadsheet active cell. | |||
$kendo-spreadsheet-auto-fill-bg | Color | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | rgba(13, 110, 253, 0.25) |
Description
The background color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-text | Null | null | null |
Description
The text color of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-border | Color | $kendo-selected-bg | #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 #0d6efd |
Description
The shadow of the Spreadsheet auto fill. | |||
$kendo-spreadsheet-auto-fill-punch-bg | Color | rgba( $kendo-spreadsheet-bg, .5 ) | rgba(255, 255, 255, 0.5) |
Description
The background color of the Spreadsheet auto fill punch. | |||
$kendo-spreadsheet-cell-padding-y | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The vertical padding of the Spreadsheet cell. | |||
$kendo-spreadsheet-cell-padding-x | Number | $kendo-spreadsheet-cell-padding-y | 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 | Number | k-map-get( $kendo-spacing, 1 ) | 0.25rem |
Description
The horizontal padding of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-padding-y | Number | 0px | 0px |
Description
The vertical padding of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-bg | Color | $kendo-spreadsheet-bg | #ffffff |
Description
The background color of the Spreadsheet cell editor. | |||
$kendo-spreadsheet-cell-editor-text | Color | $kendo-spreadsheet-text | #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 | Color | $kendo-color-primary | #0d6efd |
Description
The background color of the Spreadsheet resize handle. | |||
$kendo-spreadsheet-cell-comment-border | Color | $kendo-color-primary | #0d6efd |
Description
The border color of the Spreadsheet cell comment indicator. | |||
$kendo-spreadsheet-cell-dirty-border | Color | $kendo-color-error | #dc3545 |
Description
The border color of the Spreadsheet cell dirty indicator. | |||
$kendo-spreadsheet-sheets-bar-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
The horizontal padding of the Spreadsheet sheets bar. | |||
$kendo-spreadsheet-sheets-bar-padding-y | Number | k-map-get( $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 | Number | 30px | 30px |
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 | Color | $kendo-component-border | #dee2e6 |
Description
The border of the Spreadsheet image Dialog preview. | |||
$kendo-spreadsheet-insert-image-dialog-preview-border-radius | Number | $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 | Number | $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 | Color | $kendo-component-bg | #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 | Color | $kendo-color-primary | #0d6efd |
Description
The border color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-color | Color | $kendo-selected-bg | #0d6efd |
Description
The outline color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-bg | Color | $kendo-color-primary | #0d6efd |
Description
The border color of the Spreadsheet drawing handle. | |||
$kendo-spreadsheet-drawing-handle-border-radius | Number | $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 | Color | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) | rgba(13, 110, 253, 0.25) |
Description
The background color of the Spreadsheet drawing anchor. | |||
$kendo-spreadsheet-dropzone-spacing-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
The vertical spacing of the Spreadsheet DropZone. |