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 | $kendo-font-family | inherit | Default: $kendo-font-familyComputed: inherit |
| Description: The font family of the Rating. | |||
kendo-rating-font-size | $kendo-font-size-md | 14px | Default: $kendo-font-size-mdComputed: 14px |
| Description: The font size of the Rating. | |||
kendo-rating-line-height | $kendo-line-height-md | 1.4285714286 | Default: $kendo-line-height-mdComputed: 1.4285714286 |
| Description: The line height of the Rating. | |||
kendo-rating-container-margin-x | $kendo-padding-sm-x | 4px | Default: $kendo-padding-sm-xComputed: 4px |
| Description: The horizontal margin of the Rating container. | |||
kendo-rating-item-padding-x | $kendo-padding-sm-x | 4px | Default: $kendo-padding-sm-xComputed: 4px |
| Description: The horizontal padding of the Rating item. | |||
kendo-rating-item-padding-y | $kendo-padding-md-y | 4px | Default: $kendo-padding-md-yComputed: 4px |
| Description: The vertical padding of the Rating item. | |||
kendo-rating-label-margin-x | $kendo-padding-md-x | 8px | Default: $kendo-padding-md-xComputed: 8px |
| Description: The horizontal margin of the Rating label. | |||
kendo-rating-label-margin-y | $kendo-padding-md-y | 4px | Default: $kendo-padding-md-yComputed: 4px |
| Description: The vertical margin of the Rating label. | |||
kendo-rating-label-line-height | $kendo-line-height-lg | 1.5 | Default: $kendo-line-height-lgComputed: 1.5 |
| 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 | #424242 | Default: $kendo-component-textComputed: #424242 |
| Description: The text color of the Rating icon. | |||
kendo-rating-icon-selected-text | $kendo-selected-bg | #ff6358 | Default: $kendo-selected-bgComputed: #ff6358 |
| Description: The text color of the selected Rating icon. | |||
kendo-rating-icon-hover-text | $kendo-selected-bg | #ff6358 | Default: $kendo-selected-bgComputed: #ff6358 |
| Description: The text color of the hovered Rating icon. | |||
kendo-rating-icon-focus-text | $kendo-selected-bg | #ff6358 | Default: $kendo-selected-bgComputed: #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. | |||
