New to Kendo UI for AngularStart a free 30-day trial

Customizing ColorEditor

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-color-editor-spacerStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The spacer of the ColorEditor.
$kendo-color-editor-min-widthNumber272px272px
Description
The minimum width of the ColorEditor.
$kendo-color-editor-border-widthNumber1px1px
Description
The width of the border around the ColorEditor.
$kendo-color-editor-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the ColorEditor.
$kendo-color-editor-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ColorEditor.
$kendo-color-editor-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ColorEditor.
$kendo-color-editor-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the ColorEditor.
$kendo-color-editor-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the ColorEditor.
$kendo-color-editor-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ColorEditor.
$kendo-color-editor-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the ColorEditor.
$kendo-color-editor-focus-borderNullnullnull
Description
The border color of the focused ColorEditor.
$kendo-color-editor-focus-shadowNullnullnull
Description
The box shadow of the focused ColorEditor.
$kendo-color-editor-header-padding-yString$kendo-color-editor-spacervar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the ColorEditor header.
$kendo-color-editor-header-padding-xString$kendo-color-editor-header-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the ColorEditor header.
$kendo-color-editor-header-actions-gapCalculationcalc( #{$kendo-color-editor-spacer} / 1.5 )calc(var(--kendo-spacing-3, 0.75rem) / 1.5)
Description
The spacing between the ColorEditor header actions.
$kendo-color-editor-color-preview-widthNumber32px32px
Description
The width of the ColorEditor preview.
$kendo-color-editor-color-preview-heightNumber12px12px
Description
The height of the ColorEditor preview.
$kendo-color-editor-preview-gapStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing between the colors in the ColorEditor preview.
$kendo-color-editor-views-padding-yString$kendo-color-editor-spacervar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the ColorEditor views container.
$kendo-color-editor-views-padding-xString$kendo-color-editor-views-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the ColorEditor views container.
$kendo-color-editor-views-gapString$kendo-color-editor-spacervar(--kendo-spacing-3, 0.75rem)
Description
The spacing of the ColorEditor views container.
$kendo-color-editor-color-gradient-focus-outline-colorColorrgba(0, 0, 0, .3)rgba(0, 0, 0, 0.3)
Description
The outline color of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outlineNumber2px2px
Description
The outline width of the focused ColorGradient.
$kendo-color-editor-color-gradient-focus-outline-offsetNumber4px4px
Description
The outline offset of the focused ColorGradient.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support