New to Kendo UI for Vue? Start a free 30-day trial
Customizing Imageeditor
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-image-editor-bg | var( --kendo-component-bg, inherit ) | ||
Description
Background color of the imageeditor. | |||
| $kendo-image-editor-text | var( --kendo-component-text, inherit ) | ||
Description
Text color of the imageeditor. | |||
| $kendo-image-editor-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
Border color of the imageeditor. | |||
| $kendo-image-editor-margin-y | 0 | ||
Description
Vertical margin of the imageeditor. | |||
| $kendo-image-editor-margin-x | 0 | ||
Description
Horizontal margin of the imageeditor. | |||
| $kendo-image-editor-padding-y | 0 | ||
Description
Vertical padding of the imageeditor. | |||
| $kendo-image-editor-padding-x | 0 | ||
Description
Horizontal padding of the imageeditor. | |||
| $kendo-image-editor-border-width | 1px | ||
Description
Border width of the imageeditor. | |||
| $kendo-image-editor-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the imageeditor. | |||
| $kendo-image-editor-line-height | var( --kendo-line-height, inherit ) | ||
Description
Line height of the imageeditor. | |||
| $kendo-image-editor-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the imageeditor. | |||
| $kendo-image-editor-content-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) | ||
Description
Imageeditor content background color. | |||
| $kendo-image-editor-content-text | inherit | ||
Description
Imageeditor content text color. | |||
| $kendo-image-editor-content-border | inherit | ||
Description
Imageeditor content border color. | |||
| $kendo-image-editor-content-border-width | 0 | ||
Description
Imageeditor content border width. | |||
| $kendo-image-editor-action-pane-bg | var( --kendo-component-bg, inherit ) | ||
Description
Imageeditor action pane background color. | |||
| $kendo-image-editor-action-pane-text | inherit | ||
Description
Imageeditor action pane text color. | |||
| $kendo-image-editor-action-pane-border | inherit | ||
Description
Imageeditor action pane border. | |||
| $kendo-image-editor-action-pane-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Imageeditor action pane vertical padding. | |||
| $kendo-image-editor-action-pane-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Imageeditor action pane horizontal padding. | |||
| $kendo-image-editor-action-pane-width | if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) | ||
Description
Imageeditor action pane width. | |||
| $kendo-image-editor-crop-bg | inherit | ||
Description
Crop background color of the imageeditor. | |||
| $kendo-image-editor-crop-text | inherit | ||
Description
Crop text color of the imageeditor. | |||
| $kendo-image-editor-crop-border | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Crop border color of the imageeditor. | |||
| $kendo-image-editor-crop-overlay-bg | rgba( $kendo-color-black, .3 ) | ||
Description
Crop overlay background color of the imageeditor. | |||
| $kendo-image-editor-crop-border-width | 1px | ||
Description
Crop border width of the imageeditor. | |||
| $kendo-image-editor-crop-border-style | dashed | ||
Description
Crop border style of the imageeditor. | |||
| $kendo-image-editor-resize-handle-margin-x | 1px | ||
Description
Imageeditor resize handle horizontal margin. | |||
| $kendo-image-editor-resize-handle-margin-y | 1px | ||
Description
Imageeditor resize handle vertical margin. | |||
| $kendo-image-editor-resize-handle-border-width | 0 2px 2px 0 | ||
Description
Imageeditor resize handle border width. | |||
| $kendo-image-editor-resize-handle-size | map.get( $kendo-spacing, 4 ) | ||
Description
Imageeditor resize handle size. | |||
| $kendo-image-editor-resize-top-offset | math.div( $kendo-image-editor-resize-handle-size, 2 ) | ||
Description
Imageeditor resize handle top offset. | |||
| $kendo-image-editor-resize-left-offset | math.div( $kendo-image-editor-resize-handle-size, 2 ) | ||
Description
Imageeditor resize handle left offset. | |||
