New to Kendo UI for Angular? Start a free 30-day trial
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 | $kendo-font-family | inherit |
Description
The font family of the Spreadsheet. | |||
| $kendo-spreadsheet-font-size | Number | $kendo-font-size-md | 14px |
Description
The font size of the Spreadsheet. | |||
| $kendo-spreadsheet-line-height | Number | $kendo-line-height-md | 1.4285714286 |
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 | #424242 |
Description
The text color of the Spreadsheet. | |||
| $kendo-spreadsheet-border | Color | $kendo-component-border | rgba(0, 0, 0, 0.08) |
Description
The border color of the Spreadsheet. | |||
| $kendo-spreadsheet-header-bg | Color | $kendo-component-header-bg | #fafafa |
Description
The background color of the Spreadsheet header. | |||
| $kendo-spreadsheet-header-text | Color | $kendo-component-header-text | #424242 |
Description
The text color of the Spreadsheet header. | |||
| $kendo-spreadsheet-header-border | Color | $kendo-component-header-border | rgba(0, 0, 0, 0.08) |
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 | #fafafa |
Description
The background color of the Spreadsheet table headers. | |||
| $kendo-spreadsheet-table-header-text | Color | $kendo-spreadsheet-header-text | #424242 |
Description
The text color of the Spreadsheet table headers. | |||
| $kendo-spreadsheet-table-header-border | Color | $kendo-spreadsheet-header-border | rgba(0, 0, 0, 0.08) |
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 ) | 4px |
Description
The horizontal padding of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-action-bar-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The vertical padding of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-action-bar-font-size | Number | $kendo-spreadsheet-font-size | 14px |
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 ) | 8px |
Description
The spacings of the Spreadsheet action bar. | |||
| $kendo-spreadsheet-formula-bar-gap | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The gap of the Spreadsheet formula bar. | |||
| $kendo-spreadsheet-formula-input-padding-x | Number | $kendo-input-padding-x | 8px |
Description
The horizontal padding of the Spreadsheet formula input. | |||
| $kendo-spreadsheet-formula-input-padding-y | Number | $kendo-input-padding-y | 4px |
Description
The vertical padding of the Spreadsheet formula input. | |||
| $kendo-spreadsheet-formula-input-line-height | Number | $kendo-input-line-height | 1.4285714286 |
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 | 14px |
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(255, 99, 88, 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 | #ff6358 |
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 #ff6358 |
Description
The shadow of the Spreadsheet selection. | |||
| $kendo-spreadsheet-single-selection-bg | Color | $kendo-selected-bg | #ff6358 |
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(255, 99, 88, 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 #ff6358 |
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(255, 99, 88, 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 | #ff6358 |
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 #ff6358 |
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 ) | 4px |
Description
The vertical padding of the Spreadsheet cell. | |||
| $kendo-spreadsheet-cell-padding-x | Number | $kendo-spreadsheet-cell-padding-y | 4px |
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 ) | 4px |
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 | #424242 |
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 | #ff6358 |
Description
The background color of the Spreadsheet resize handle. | |||
| $kendo-spreadsheet-cell-comment-border | Color | $kendo-color-primary | #ff6358 |
Description
The border color of the Spreadsheet cell comment indicator. | |||
| $kendo-spreadsheet-cell-dirty-border | Color | $kendo-color-error | #f31700 |
Description
The border color of the Spreadsheet cell dirty indicator. | |||
| $kendo-spreadsheet-sheets-bar-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
Description
The horizontal padding of the Spreadsheet sheets bar. | |||
| $kendo-spreadsheet-sheets-bar-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 8px |
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 | rgba(0, 0, 0, 0.08) |
Description
The border of the Spreadsheet image Dialog preview. | |||
| $kendo-spreadsheet-insert-image-dialog-preview-border-radius | Number | $kendo-border-radius-md | 4px |
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(0, 0, 0, .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 | 4px |
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 | #ff6358 |
Description
The border color of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-border-color | Color | $kendo-selected-bg | #ff6358 |
Description
The outline color of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-bg | Color | $kendo-color-primary | #ff6358 |
Description
The border color of the Spreadsheet drawing handle. | |||
| $kendo-spreadsheet-drawing-handle-border-radius | Number | $kendo-border-radius-lg | 6px |
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(255, 99, 88, 0.25) |
Description
The background color of the Spreadsheet drawing anchor. | |||
| $kendo-spreadsheet-dropzone-spacing-y | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The vertical spacing of the Spreadsheet DropZone. | |||
