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-2, 0.5rem)
Description
The horizontal margin of the Rating container.
$kendo-rating-item-padding-xString$kendo-padding-sm-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Rating item.
$kendo-rating-item-padding-yString$kendo-padding-md-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Rating item.
$kendo-rating-label-margin-xString$kendo-padding-md-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal margin of the Rating label.
$kendo-rating-label-margin-yString$kendo-padding-md-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical margin of the Rating label.
$kendo-rating-label-line-heightNumber$kendo-line-height-lg2
Description
The line height of the Rating label.
$kendo-rating-icon-textString$kendo-subtle-textvar(--kendo-color-subtle, #596169)
Description
The text color of the Rating icon.
$kendo-rating-icon-selected-textString$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The text color of the selected Rating icon.
$kendo-rating-icon-hover-textString$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The text color of the hovered Rating icon.
$kendo-rating-icon-focus-textString$kendo-selected-bgvar(--kendo-color-primary, #0d6efd)
Description
The text color of the focused Rating icon.
$kendo-rating-icon-focus-shadowList0 2px 4px rgba( black, .1 )0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused Rating icon.
$kendo-rating-icon-focus-selected-shadowList0 2px 4px rgba( black, .1)0 2px 4px rgba(0, 0, 0, 0.1)
Description
The shadow of the focused and selected Rating icon.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support