Sass Variables
The Telerik and Kendo UI ColorPalette enables you to configure and customize its appearance through the available Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-color-palette-font-family | $kendo-font-family | inherit | Default: $kendo-font-familyComputed: inherit |
| Description: The font family of the ColorPalette. | |||
kendo-color-palette-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the ColorPalette. | |||
kendo-color-palette-line-height | 0 | 0 | Default: 0Computed: 0 |
| Description: The line height of the ColorPalette. | |||
kendo-color-palette-tile-width | k-map-get( $kendo-spacing, 6 ) | 24px | Default: k-map-get( $kendo-spacing, 6 )Computed: 24px |
| Description: The width of the ColorPalette tile. | |||
kendo-color-palette-tile-height | $kendo-color-palette-tile-width | 24px | Default: $kendo-color-palette-tile-widthComputed: 24px |
| Description: The height of the ColorPalette tile. | |||
kendo-color-palette-tile-focus-shadow | 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) | Default: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )Computed: 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 | 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) | Default: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )Computed: 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 | 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 | Default: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )Computed: 0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white |
| Description: The shadow of the ColorPalette selected tile. | |||
