Customizing Rating

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-rating-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the Rating.
$kendo-rating-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the Rating.
$kendo-rating-line-heightvar( --kendo-line-height, normal )
Description
The line height of the Rating.
$kendo-rating-spacingmap.get( $kendo-spacing, 1 )
Description
The content spacing of the Rating.
$kendo-rating-item-padding-xmap.get( $kendo-spacing, 0.5 )
Description
The horizontal padding of the Rating item.
$kendo-rating-item-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the Rating item.
$kendo-rating-item-textif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
Description
The text color of the Rating item.
$kendo-rating-item-hover-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the hovered Rating item.
$kendo-rating-item-focus-text$kendo-rating-item-text
Description
The text color of the focused Rating item.
$kendo-rating-item-focus-outline-width1px
Description
The outline width of the focused Rating item.
$kendo-rating-item-focus-outline-stylesolid
Description
The outline style of the focused Rating item.
$kendo-rating-item-focus-outlinecurrentColor
Description
The outline color of the focused Rating item.
$kendo-rating-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
Description
The text color of the selected Rating item.
$kendo-rating-item-selected-hover-textif($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
Description
The text color of the selected and hovered Rating item.

In this article

Not finding the help you need?