Sass Variables
The Telerik and Kendo UI Editor enables you to configure and customize its appearance through the available Sass variables. Additionally, to configure and customize the appearance of its toolbar, use the Sass variables provided by the ToolBar Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-editor-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the Еditor. | |||
kendo-editor-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 Еditor. | |||
kendo-editor-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 Еditor. | |||
kendo-editor-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 Еditor. | |||
kendo-editor-placeholder-text | $kendo-input-placeholder-text | var(--kendo-color-subtle, #666666) | Default: $kendo-input-placeholder-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the Еditor placeholder. | |||
kendo-editor-placeholder-opacity | $kendo-input-placeholder-opacity | 1 | Default: $kendo-input-placeholder-opacityComputed: 1 |
| Description: The opacity of the Editor placeholder. | |||
kendo-editor-selected-text | $kendo-color-primary-contrast | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-color-primary-contrastComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The selected text color of the Editor. | |||
kendo-editor-selected-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The selected background color of the Editor. | |||
kendo-editor-highlighted-bg | if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) | var(--kendo-color-primary-subtle, #ffeceb) | Default: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%))Computed: var(--kendo-color-primary-subtle, #ffeceb) |
| Description: The highlighted background color of the Editor. | |||
kendo-editor-export-tool-icon-margin-x | .25em | 0.25em | Default: .25emComputed: 0.25em |
| Description: The horizontal margin of the Editor's export tool icon. | |||
kendo-editor-resize-handle-size | 8px | 8px | Default: 8pxComputed: 8px |
| Description: The size of the Editor's resize handle. | |||
kendo-editor-resize-handle-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Editor's resize handle. | |||
kendo-editor-resize-handle-border | #000000 | #000000 | Default: #000000Computed: #000000 |
| Description: The border color of the Editor's resize handle. | |||
kendo-editor-resize-handle-bg | #ffffff | #ffffff | Default: #ffffffComputed: #ffffff |
| Description: The background color of the Editor's resize handle. | |||
kendo-editor-selectednode-outline-width | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The outline width of the Editor's selected node. | |||
kendo-editor-selectednode-outline-color | #88ccff | #88ccff | Default: #88ccffComputed: #88ccff |
| Description: The outline color of the Editor's selected node. | |||
kendo-editor-inline-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 inline Editor. | |||
kendo-editor-inline-padding-y | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem) |
| Description: The vertical padding of the inline Editor. | |||
kendo-editor-filebrowser-tiles-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 Editor file browser tiles. | |||
kendo-editor-filebrowser-tiles-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 Editor file browser tiles. | |||
kendo-editor-content-padding | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The padding of the Editor content. | |||
