New to Kendo UI for Angular? Start a free 30-day trial
Customizing Colorpalette
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-color-palette-font-family | List | $kendo-font-family | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
The font family of the ColorPalette. | |||
| $kendo-color-palette-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the ColorPalette. | |||
| $kendo-color-palette-line-height | Number | 0 | 0 |
Description
The line height of the ColorPalette. | |||
| $kendo-color-palette-tile-width | Number | k-map-get( $kendo-spacing, 6 ) | 1.5rem |
Description
The width of the ColorPalette tile. | |||
| $kendo-color-palette-tile-height | Number | $kendo-color-palette-tile-width | 1.5rem |
Description
The height of the ColorPalette tile. | |||
| $kendo-color-palette-tile-focus-shadow | List | 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) | 0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5) |
Description
The shadow of the ColorPalette focused tile. | |||
| $kendo-color-palette-tile-hover-shadow | List | 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) | 0 0 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.8) |
Description
The shadow of the ColorPalette hovered tile. | |||
| $kendo-color-palette-tile-selected-shadow | List | 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) | 0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white |
Description
The shadow of the ColorPalette selected tile. | |||
