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, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Rating. | |||
kendo-rating-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 Rating. | |||
kendo-rating-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 Rating. | |||
kendo-rating-container-margin-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The horizontal margin of the Rating container. | |||
kendo-rating-item-padding-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The horizontal padding of the Rating item. | |||
kendo-rating-item-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the Rating item. | |||
kendo-rating-label-margin-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal margin of the Rating label. | |||
kendo-rating-label-margin-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical margin of the Rating label. | |||
kendo-rating-label-line-height | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) | Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal) |
| Description: The line height of the Rating label. | |||
kendo-rating-icon-size | ($kendo-icon-size * 1.5) | 24px | Default: ($kendo-icon-size * 1.5)Computed: 24px |
| Description: The size of the Rating icon. | |||
kendo-rating-icon-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Rating icon. | |||
kendo-rating-icon-selected-text | $kendo-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the selected Rating icon. | |||
kendo-rating-icon-hover-text | $kendo-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the hovered Rating icon. | |||
kendo-rating-icon-focus-text | $kendo-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The text color of the focused Rating icon. | |||
kendo-rating-icon-focus-shadow | k-elevation(1) | var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(1)Computed: var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the focused Rating icon. | |||
kendo-rating-icon-focus-selected-shadow | k-elevation(1) | var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(1)Computed: var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the focused and selected Rating icon. | |||
