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: 272px Computed: 272px |
Description: The minimum width of the ColorEditor. | |||
kendo-color-editor-border-width | 1px | 1px | Default: 1px Computed: 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-text Computed: 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-bg Computed: 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-border Computed: 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: null Computed: null |
Description: The border color of the focused ColorEditor. | |||
kendo-color-editor-focus-shadow | null | null | Default: null Computed: 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-spacer Computed: 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-y Computed: 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: 32px Computed: 32px |
Description: The width of the ColorEditor preview. | |||
kendo-color-editor-color-preview-height | 12px | 12px | Default: 12px Computed: 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-spacer Computed: 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-y Computed: 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-spacer Computed: 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: 2px Computed: 2px |
Description: The outline width of the focused ColorGradient. | |||
kendo-color-editor-color-gradient-focus-outline-offset | 4px | 4px | Default: 4px Computed: 4px |
Description: The outline offset of the focused ColorGradient. |