Customizing Common
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-border-radius | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
Border radius for all components. | |||
| $kendo-base-bg | Color | k-map-get( $theme, base-bg ) | #ffffff |
Description
The background of the components' chrome area. | |||
| $kendo-base-text | Color | k-map-get( $theme, component-text ) | rgba(0, 0, 0, 0.87) |
Description
The text color of the components' chrome area. | |||
| $kendo-base-border | Color | rgba( 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-gradient | Null | null | null |
Description
The gradient background of the components' chrome area. | |||
| $kendo-hover-bg | Color | k-map-get( $theme, hover-bg ) | rgba(0, 0, 0, 0.04) |
Description
The background of hovered items. | |||
| $kendo-hover-text | Color | $kendo-base-text | rgba(0, 0, 0, 0.87) |
Description
The text color of hovered items. | |||
| $kendo-hover-border | Color | rgba( $kendo-base-border, .15 ) | rgba(0, 0, 0, 0.15) |
Description
The border color of hovered items. | |||
| $kendo-hover-gradient | Null | null | null |
Description
The gradient background of hovered items. | |||
| $kendo-selected-bg | Color | $kendo-color-secondary | #e51a5f |
Description
The background of selected items. | |||
| $kendo-selected-text | Color | $kendo-color-secondary-contrast | white |
Description
The text color of selected items. | |||
| $kendo-selected-border | Color | rgba( $kendo-base-border, .1 ) | rgba(0, 0, 0, 0.1) |
Description
The border color of selected items. | |||
| $kendo-selected-gradient | Null | null | null |
Description
The gradient background of selected items. | |||
| $kendo-disabled-text | Color | k-map-get( $theme, disabled-text ) | rgba(0, 0, 0, 0.38) |
Description
Text color of disabled items. | |||
| $kendo-list-sizes | Map | (
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 | |||
