New to Kendo UI for Angular? Start a free 30-day trial

Customizing Common

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radiusNumberk-map-get( $kendo-spacing, 1 )4px
Description
Border radius for all components.
$kendo-base-bgColork-map-get( $theme, base-bg )#ffffff
Description
The background of the components' chrome area.
$kendo-base-textColork-map-get( $theme, component-text )rgba(0, 0, 0, 0.87)
Description
The text color of the components' chrome area.
$kendo-base-borderColorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )rgba(0, 0, 0, 0.08)
Description
The border of the components' chrome area.
$kendo-base-gradientNullnullnull
Description
The gradient background of the components' chrome area.
$kendo-hover-bgColork-map-get( $theme, hover-bg )rgba(0, 0, 0, 0.04)
Description
The background of hovered items.
$kendo-hover-textColor$kendo-base-textrgba(0, 0, 0, 0.87)
Description
The text color of hovered items.
$kendo-hover-borderColorrgba( $kendo-base-border, .15 )rgba(0, 0, 0, 0.15)
Description
The border color of hovered items.
$kendo-hover-gradientNullnullnull
Description
The gradient background of hovered items.
$kendo-selected-bgColor$kendo-color-secondary#e51a5f
Description
The background of selected items.
$kendo-selected-textColor$kendo-color-secondary-contrastwhite
Description
The text color of selected items.
$kendo-selected-borderColorrgba( $kendo-base-border, .1 )rgba(0, 0, 0, 0.1)
Description
The border color of selected items.
$kendo-selected-gradientNullnullnull
Description
The gradient background of selected items.
$kendo-list-sizesMap( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )(sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 6px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 8px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 16px, header-padding-y: 8px, header-font-size: null, header-line-height: null, item-padding-x: 16px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 16px, group-item-padding-y: 10px, group-item-font-size: null, group-item-line-height: null))
Description
The map with the sizes of the List.
@group list

In this article

Not finding the help you need?