Sass Variables
The Telerik and Kendo UI FlatColorPicker is a composite UI component that consists of ColorPalette, ColorGradient, and Button elements. To configure and customize its appearance, use not only its dedicated Sass variables but also the ColorPalette and ColorGradient Sass variables, as well as those provided by the Button component.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-color-editor-spacer | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The spacer of the ColorEditor. | |||
kendo-color-editor-min-width | 272px | 272px | Default: 272pxComputed: 272px |
| Description: The minimum width of the ColorEditor. | |||
kendo-color-editor-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the ColorEditor. | |||
kendo-color-editor-border-radius | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| Description: The border radius of the ColorEditor. | |||
kendo-color-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 ColorEditor. | |||
kendo-color-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 ColorEditor. | |||
kendo-color-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 ColorEditor. | |||
kendo-color-editor-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the ColorEditor. | |||
kendo-color-editor-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the ColorEditor. | |||
kendo-color-editor-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the ColorEditor. | |||
kendo-color-editor-focus-border | null | null | Default: nullComputed: null |
| Description: The border color of the focused ColorEditor. | |||
kendo-color-editor-focus-shadow | null | null | Default: nullComputed: null |
| Description: The box shadow of the focused ColorEditor. | |||
kendo-color-editor-header-padding-y | $kendo-color-editor-spacer | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-color-editor-spacerComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the ColorEditor header. | |||
kendo-color-editor-header-padding-x | $kendo-color-editor-header-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-color-editor-header-padding-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the ColorEditor header. | |||
kendo-color-editor-header-actions-gap | calc( #{$kendo-color-editor-spacer} / 1.5 ) | calc(var(--kendo-spacing-3, 0.75rem) / 1.5) | Default: calc( #{$kendo-color-editor-spacer} / 1.5 )Computed: calc(var(--kendo-spacing-3, 0.75rem) / 1.5) |
| Description: The spacing between the ColorEditor header actions. | |||
kendo-color-editor-color-preview-width | 32px | 32px | Default: 32pxComputed: 32px |
| Description: The width of the ColorEditor preview. | |||
kendo-color-editor-color-preview-height | 12px | 12px | Default: 12pxComputed: 12px |
| Description: The height of the ColorEditor preview. | |||
kendo-color-editor-preview-gap | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing between the colors in the ColorEditor preview. | |||
kendo-color-editor-views-padding-y | $kendo-color-editor-spacer | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-color-editor-spacerComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the ColorEditor views container. | |||
kendo-color-editor-views-padding-x | $kendo-color-editor-views-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-color-editor-views-padding-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the ColorEditor views container. | |||
kendo-color-editor-views-gap | $kendo-color-editor-spacer | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-color-editor-spacerComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The spacing of the ColorEditor views container. | |||
kendo-color-editor-color-gradient-focus-outline-color | rgba(0, 0, 0, .3) | rgba(0, 0, 0, 0.3) | Default: rgba(0, 0, 0, .3)Computed: rgba(0, 0, 0, 0.3) |
| Description: The outline color of the focused ColorGradient. | |||
kendo-color-editor-color-gradient-focus-outline | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The outline width of the focused ColorGradient. | |||
kendo-color-editor-color-gradient-focus-outline-offset | 4px | 4px | Default: 4pxComputed: 4px |
| Description: The outline offset of the focused ColorGradient. | |||
