New to Kendo UI for AngularStart a free 30-day trial

Customizing Rating

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-rating-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Rating.
$kendo-rating-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Rating.
$kendo-rating-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Rating.
$kendo-rating-container-margin-xString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal margin of the Rating container.
$kendo-rating-item-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the Rating item.
$kendo-rating-item-padding-yString$kendo-padding-md-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Rating item.
$kendo-rating-label-margin-xString$kendo-padding-md-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal margin of the Rating label.
$kendo-rating-label-margin-yString$kendo-padding-md-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical margin of the Rating label.
$kendo-rating-label-line-heightStringvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)
Description
The line height of the Rating label.
$kendo-rating-icon-sizeNumber($kendo-icon-size * 1.5)24px
Description
The size of the Rating icon.
$kendo-rating-icon-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Rating icon.
$kendo-rating-icon-selected-textString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The text color of the selected Rating icon.
$kendo-rating-icon-hover-textString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The text color of the hovered Rating icon.
$kendo-rating-icon-focus-textString$kendo-selected-bgvar(--kendo-color-primary, #ff6358)
Description
The text color of the focused Rating icon.
$kendo-rating-icon-focus-shadowStringk-elevation(1)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-shadowStringk-elevation(1)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.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support