Sass Variables
The Telerik and Kendo UI ImageEditor enables you to configure and customize its appearance through the available Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-image-editor-margin-y | null | null | Default: nullComputed: null |
| Description: The vertical margin of the ImageEditor. | |||
kendo-image-editor-margin-x | null | null | Default: nullComputed: null |
| Description: The horizontal margin of the ImageEditor. | |||
kendo-image-editor-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the ImageEditor. | |||
kendo-image-editor-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the ImageEditor. | |||
kendo-image-editor-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the ImageEditor. | |||
kendo-image-editor-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the ImageEditor. | |||
kendo-image-editor-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the ImageEditor. | |||
kendo-image-editor-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the ImageEditor. | |||
kendo-image-editor-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the ImageEditor. | |||
kendo-image-editor-content-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the ImageEditor content. | |||
kendo-image-editor-action-pane-padding-y | k-spacing(8) | var(--kendo-spacing-8) | Default: k-spacing(8)Computed: var(--kendo-spacing-8) |
| Description: The vertical padding of the ImageEditor action pane. | |||
kendo-image-editor-action-pane-padding-x | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the ImageEditor action pane. | |||
kendo-image-editor-action-pane-width | if( $kendo-image-editor-content-border-width == null, 320px, calc(320px + #{$kendo-image-editor-content-border-width}) ) | calc(320px + 1px) | Default: if( $kendo-image-editor-content-border-width == null, 320px, calc(320px + #{$kendo-image-editor-content-border-width}) )Computed: calc(320px + 1px) |
| Description: The width of the ImageEditor action pane. | |||
kendo-image-editor-pane-header-padding-y | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The vertical padding of the ImageEditor pane header. | |||
kendo-image-editor-pane-header-padding-x | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the ImageEditor pane header. | |||
kendo-image-editor-pane-header-gap | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The gap between the title and the actions of the ImageEditor pane header. | |||
kendo-image-editor-pane-content-padding-top | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The top padding of the ImageEditor pane content. | |||
kendo-image-editor-pane-content-padding-bottom | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The bottom padding of the ImageEditor pane content. | |||
kendo-image-editor-pane-content-padding-x | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the ImageEditor pane content. | |||
kendo-image-editor-pane-content-gap | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The gap between the fields of the ImageEditor pane content. | |||
kendo-image-editor-adjustment-row-gap | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The gap between the slider and the numeric input of an ImageEditor adjustment row. | |||
kendo-image-editor-pane-footer-padding-y | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The vertical padding of the ImageEditor pane footer. | |||
kendo-image-editor-pane-footer-padding-x | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The horizontal padding of the ImageEditor pane footer. | |||
kendo-image-editor-option-list-gap | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The gap between the ImageEditor option list items. | |||
kendo-image-editor-option-list-scroll-gradient | rgba(255, 255, 255, 0) 0%, k-color(surface) 100% | (rgba(255, 255, 255, 0) 0%, var(--kendo-color-surface) 100%) | Default: rgba(255, 255, 255, 0) 0%, k-color(surface) 100%Computed: (rgba(255, 255, 255, 0) 0%, var(--kendo-color-surface) 100%) |
| Description: The scroll-fade gradient stops of the ImageEditor option list. | |||
kendo-image-editor-option-preview-padding-y | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The vertical padding of an ImageEditor option preview. | |||
kendo-image-editor-option-preview-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of an ImageEditor option preview. | |||
kendo-image-editor-option-preview-border-radius | k-border-radius(md) | var(--kendo-border-radius-md) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md) |
| Description: The border radius of an ImageEditor option preview. | |||
kendo-image-editor-option-preview-width | 88px | 88px | Default: 88pxComputed: 88px |
| Description: The width of an ImageEditor option preview. | |||
kendo-image-editor-option-label-font-size | var(--kendo-font-size-sm) | var(--kendo-font-size-sm) | Default: var(--kendo-font-size-sm)Computed: var(--kendo-font-size-sm) |
| Description: The font size of the ImageEditor option label. | |||
kendo-image-editor-frame-border-width | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The width of the border around the ImageEditor overlay frame. | |||
kendo-image-editor-frame-border-style | solid | solid | Default: solidComputed: solid |
| Description: The style of the border around the ImageEditor overlay frame. | |||
kendo-image-editor-handle-margin-x | 0 | 0 | Default: 0Computed: 0 |
| Description: The horizontal margin of the ImageEditor handle. | |||
kendo-image-editor-handle-margin-y | 0 | 0 | Default: 0Computed: 0 |
| Description: The vertical margin of the ImageEditor handle. | |||
kendo-image-editor-handle-border-width | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The width of the border around the ImageEditor handle. | |||
kendo-image-editor-handle-size | 24px | 24px | Default: 24pxComputed: 24px |
| Description: The size of the ImageEditor handle. | |||
kendo-image-editor-handle-thickness | 12px | 12px | Default: 12pxComputed: 12px |
| Description: The thickness of the ImageEditor handle. | |||
kendo-image-editor-handle-border-radius | k-border-radius(full) | var(--kendo-border-radius-full) | Default: k-border-radius(full)Computed: var(--kendo-border-radius-full) |
| Description: The border radius of the ImageEditor handle. | |||
kendo-image-editor-scale-handle-size | 12px | 12px | Default: 12pxComputed: 12px |
| Description: The size of the ImageEditor scale handle. | |||
kendo-image-editor-rotate-handle-offset | 24px | 24px | Default: 24pxComputed: 24px |
| Description: The distance between the bottom edge of the selection frame and the ImageEditor rotate handle. | |||
kendo-image-editor-rotate-handle-padding | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The padding of the ImageEditor rotate handle. | |||
kendo-image-editor-bg | k-color(surface-alt) | var(--kendo-color-surface-alt) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt) |
| Description: The background color of the ImageEditor. | |||
kendo-image-editor-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the ImageEditor. | |||
kendo-image-editor-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the ImageEditor. | |||
kendo-image-editor-content-bg | k-color(surface) | var(--kendo-color-surface) | Default: k-color(surface)Computed: var(--kendo-color-surface) |
| Description: The background color of the ImageEditor content. | |||
kendo-image-editor-content-text | null | null | Default: nullComputed: null |
| Description: The text color of the ImageEditor content. | |||
kendo-image-editor-content-border | null | null | Default: nullComputed: null |
| Description: The border color of the ImageEditor content. | |||
kendo-image-editor-action-pane-bg | k-color(surface) | var(--kendo-color-surface) | Default: k-color(surface)Computed: var(--kendo-color-surface) |
| Description: The background color of the ImageEditor action pane. | |||
kendo-image-editor-action-pane-text | null | null | Default: nullComputed: null |
| Description: The text color of the ImageEditor action pane. | |||
kendo-image-editor-action-pane-border | null | null | Default: nullComputed: null |
| Description: The border color of the ImageEditor action pane. | |||
kendo-image-editor-pane-title-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the ImageEditor pane title. | |||
kendo-image-editor-option-preview-bg | null | null | Default: nullComputed: null |
| Description: The background color of an ImageEditor option preview. | |||
kendo-image-editor-option-preview-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of an ImageEditor option preview. | |||
kendo-image-editor-option-preview-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of an ImageEditor option preview. | |||
kendo-image-editor-option-preview-hover-bg | color-mix(in srgb, k-color(on-app-surface) 6%, transparent) | color-mix(in srgb, var(--kendo-color-on-app-surface) 6%, transparent) | Default: color-mix(in srgb, k-color(on-app-surface) 6%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-app-surface) 6%, transparent) |
| Description: The background color of a hovered ImageEditor option preview. | |||
kendo-image-editor-option-preview-hover-text | null | null | Default: nullComputed: null |
| Description: The text color of a hovered ImageEditor option preview. | |||
kendo-image-editor-option-preview-focus-shadow | inset 0 0 0 2px k-color(border-alt) | (inset 0 0 0 2px var(--kendo-color-border-alt)) | Default: inset 0 0 0 2px k-color(border-alt)Computed: (inset 0 0 0 2px var(--kendo-color-border-alt)) |
| Description: The box shadow of a focused ImageEditor option preview. | |||
kendo-image-editor-option-preview-selected-shadow | none | none | Default: noneComputed: none |
| Description: The box shadow of a selected ImageEditor option preview. | |||
kendo-image-editor-option-preview-selected-border | k-color(primary-emphasis) | var(--kendo-color-primary-emphasis) | Default: k-color(primary-emphasis)Computed: var(--kendo-color-primary-emphasis) |
| Description: The border color of a selected ImageEditor option preview. | |||
kendo-image-editor-option-preview-selected-text | null | null | Default: nullComputed: null |
| Description: The text color of a selected ImageEditor option preview. | |||
kendo-image-editor-option-preview-selected-font-weight | var(--kendo-font-weight-bold) | var(--kendo-font-weight-bold) | Default: var(--kendo-font-weight-bold)Computed: var(--kendo-font-weight-bold) |
| Description: The font weight of a selected ImageEditor option preview. | |||
kendo-image-editor-frame-bg | null | null | Default: nullComputed: null |
| Description: The background color of the ImageEditor overlay frame. | |||
kendo-image-editor-frame-text | null | null | Default: nullComputed: null |
| Description: The text color of the ImageEditor overlay frame. | |||
kendo-image-editor-frame-border | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The border color of the ImageEditor overlay frame. | |||
kendo-image-editor-crop-overlay-bg | rgba(black, .2) | rgba(0, 0, 0, 0.2) | Default: rgba(black, .2)Computed: rgba(0, 0, 0, 0.2) |
| Description: The background color of the ImageEditor crop overlay. | |||
kendo-image-editor-crop-overlay-accent-bg | color-mix(in srgb, k-color(primary) 25%, transparent) | color-mix(in srgb, var(--kendo-color-primary) 25%, transparent) | Default: color-mix(in srgb, k-color(primary) 25%, transparent)Computed: color-mix(in srgb, var(--kendo-color-primary) 25%, transparent) |
| Description: The accent-tinted overlay color of the ImageEditor crop overlay, layered above the background. | |||
kendo-image-editor-grid-line-color | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The color of the ImageEditor rule-of-thirds grid lines. | |||
kendo-image-editor-handle-bg | k-color(primary-subtle) | var(--kendo-color-primary-subtle) | Default: k-color(primary-subtle)Computed: var(--kendo-color-primary-subtle) |
| Description: The background color of the ImageEditor handle. | |||
kendo-image-editor-handle-border | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The border color of the ImageEditor handle. | |||
