New to Kendo UI for Angular? Start a free 30-day trial
Customizing Rating
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-rating-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the rating. | |||
| $kendo-rating-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the rating. | |||
| $kendo-rating-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the rating. | |||
| $kendo-rating-spacing | map.get( $kendo-spacing, 1 ) | ||
Description
Content spacing of the rating. | |||
| $kendo-rating-item-padding-x | map.get( $kendo-spacing, 0.5 ) | ||
Description
Horizontal padding of the rating item. | |||
| $kendo-rating-item-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the rating item. | |||
| $kendo-rating-item-text | k-get-theme-color-var( neutral-130 ) | ||
Description
Normal color of the rating item. | |||
| $kendo-rating-item-hover-text | k-get-theme-color-var( primary-100 ) | ||
Description
Hover color of the rating item. | |||
| $kendo-rating-item-focus-text | $kendo-rating-item-text | ||
Description
Focus color of the rating item. | |||
| $kendo-rating-item-focus-outline-width | 1px | ||
Description
Outline width of the focused rating item. | |||
| $kendo-rating-item-focus-outline-style | solid | ||
Description
Outline style of the focused rating item. | |||
| $kendo-rating-item-focus-outline | currentColor | ||
Description
Outline color of the focused rating item. | |||
| $kendo-rating-item-selected-text | k-get-theme-color-var( neutral-160 ) | ||
Description
Selected color of the rating item. | |||
| $kendo-rating-item-selected-hover-text | k-get-theme-color-var( primary-120 ) | ||
Description
Selected hover color of the rating item. | |||
