Sass Variables
The Telerik and Kendo UI Rating enables you to configure and customize its appearance through the available Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-rating-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the Rating. | |||
kendo-rating-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the Rating. | |||
kendo-rating-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the Rating. | |||
kendo-rating-container-margin-x | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The horizontal margin of the Rating container. | |||
kendo-rating-item-padding-x | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The horizontal padding of the Rating item. | |||
kendo-rating-item-padding-y | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The vertical padding of the Rating item. | |||
kendo-rating-label-margin-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal margin of the Rating label. | |||
kendo-rating-label-margin-y | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The vertical margin of the Rating label. | |||
kendo-rating-label-line-height | var(--kendo-line-height-lg) | var(--kendo-line-height-lg) | Default: var(--kendo-line-height-lg)Computed: var(--kendo-line-height-lg) |
| Description: The line height of the Rating label. | |||
kendo-rating-icon-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Rating icon. | |||
kendo-rating-icon-selected-text | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The text color of the selected Rating icon. | |||
kendo-rating-icon-hover-text | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The text color of the hovered Rating icon. | |||
kendo-rating-icon-focus-text | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The text color of the focused Rating icon. | |||
kendo-rating-icon-focus-shadow | k-elevation(1) | var(--kendo-elevation-1) | Default: k-elevation(1)Computed: var(--kendo-elevation-1) |
| Description: The shadow of the focused Rating icon. | |||
kendo-rating-icon-focus-selected-shadow | k-elevation(1) | var(--kendo-elevation-1) | Default: k-elevation(1)Computed: var(--kendo-elevation-1) |
| Description: The shadow of the focused and selected Rating icon. | |||
