Customizing Imageeditor
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-image-editor-bg | String | var( --kendo-component-bg, inherit ) | var(--kendo-component-bg, inherit) |
Description
Background color of the imageeditor. | |||
| $kendo-image-editor-text | String | var( --kendo-component-text, inherit ) | var(--kendo-component-text, inherit) |
Description
Text color of the imageeditor. | |||
| $kendo-image-editor-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent) |
Description
Border color of the imageeditor. | |||
| $kendo-image-editor-margin-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
Vertical margin of the imageeditor. | |||
| $kendo-image-editor-margin-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
Horizontal margin of the imageeditor. | |||
| $kendo-image-editor-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
Vertical padding of the imageeditor. | |||
| $kendo-image-editor-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
Horizontal padding of the imageeditor. | |||
| $kendo-image-editor-border-width | Number | 1px | 1px |
Description
Border width of the imageeditor. | |||
| $kendo-image-editor-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
Font size of the imageeditor. | |||
| $kendo-image-editor-line-height | String | var( --kendo-line-height, inherit ) | var(--kendo-line-height, inherit) |
Description
Line height of the imageeditor. | |||
| $kendo-image-editor-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
Font family of the imageeditor. | |||
| $kendo-image-editor-content-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 23%, transparent) |
Description
Imageeditor content background color. | |||
| $kendo-image-editor-content-text | String | inherit | inherit |
Description
Imageeditor content text color. | |||
| $kendo-image-editor-content-border | String | inherit | inherit |
Description
Imageeditor content border color. | |||
| $kendo-image-editor-content-border-width | Number | 0 | 0 |
Description
Imageeditor content border width. | |||
| $kendo-image-editor-action-pane-bg | String | var( --kendo-component-bg, inherit ) | var(--kendo-component-bg, inherit) |
Description
Imageeditor action pane background color. | |||
| $kendo-image-editor-action-pane-text | String | inherit | inherit |
Description
Imageeditor action pane text color. | |||
| $kendo-image-editor-action-pane-border | String | inherit | inherit |
Description
Imageeditor action pane border. | |||
| $kendo-image-editor-action-pane-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
Imageeditor action pane vertical padding. | |||
| $kendo-image-editor-action-pane-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
Imageeditor action pane horizontal padding. | |||
| $kendo-image-editor-action-pane-width | Number | if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) | 240px |
Description
Imageeditor action pane width. | |||
| $kendo-image-editor-crop-bg | String | inherit | inherit |
Description
Crop background color of the imageeditor. | |||
| $kendo-image-editor-crop-text | String | inherit | inherit |
Description
Crop text color of the imageeditor. | |||
| $kendo-image-editor-crop-border | String | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | var(--kendo-color-app-surface, #ffffff) |
Description
Crop border color of the imageeditor. | |||
| $kendo-image-editor-crop-overlay-bg | Color | rgba( $kendo-color-black, .3 ) | rgba(0, 0, 0, 0.3) |
Description
Crop overlay background color of the imageeditor. | |||
| $kendo-image-editor-crop-border-width | Number | 1px | 1px |
Description
Crop border width of the imageeditor. | |||
| $kendo-image-editor-crop-border-style | String | dashed | dashed |
Description
Crop border style of the imageeditor. | |||
| $kendo-image-editor-resize-handle-margin-x | String | k-spacing(1px) | var(--kendo-spacing-1px, 1px) |
Description
Imageeditor resize handle horizontal margin. | |||
| $kendo-image-editor-resize-handle-margin-y | String | k-spacing(1px) | var(--kendo-spacing-1px, 1px) |
Description
Imageeditor resize handle vertical margin. | |||
| $kendo-image-editor-resize-handle-border-width | List | 0 2px 2px 0 | 0 2px 2px 0 |
Description
Imageeditor resize handle border width. | |||
| $kendo-image-editor-resize-handle-size | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
Imageeditor resize handle size. | |||
| $kendo-image-editor-resize-top-offset | Calculation | calc( #{$kendo-image-editor-resize-handle-size} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
Imageeditor resize handle top offset. | |||
| $kendo-image-editor-resize-left-offset | Calculation | calc( #{$kendo-image-editor-resize-handle-size} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
Imageeditor resize handle left offset. | |||
