Customizing Chip
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-chip-border-width | 1px | ||
Description
The width of the border around the Chip. | |||
| $kendo-chip-spacing | map.get( $kendo-spacing, 1 ) | ||
Description
The spacing between the text and the icons of the Chip. | |||
| $kendo-chip-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Chip. | |||
| $kendo-chip-avatar-width | 1em | ||
Description
The width of the Chip' avatar. | |||
| $kendo-chip-avatar-height | 1em | ||
Description
The height of the Chip' avatar. | |||
| $kendo-chip-avatar-flex-basis | 1em | ||
Description
The flex basis of the Chip' avatar. | |||
| $kendo-chip-disabled-text | var( --kendo-disabled-text, inherit ) | ||
Description
The text color of the disabled Chip. | |||
| $kendo-chip-solid-disabled-bg | var( --kendo-disabled-bg, transparent ) | ||
Description
The background color of the solid disabled Chip. | |||
| $kendo-chip-solid-disabled-border | var( --kendo-disabled-border, inherit ) | ||
Description
The border color of the solid disabled Chip. | |||
| $kendo-chip-outline-disabled-bg | var( $kendo-component-bg, transparent ) | ||
Description
The background color of the outline disabled Chip. | |||
| $kendo-chip-outline-disabled-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | ||
Description
The border color of the outline disabled Chip. | |||
| $kendo-chip-focus-offset | map.get( $kendo-spacing, 0.5 ) | ||
Description
The offset of the outline focused Chip. | |||
| $kendo-chip-focus-outline-width | 1px | ||
Description
The outline width of the outline focused Chip. | |||
| $kendo-chip-focus-outline-style | solid | ||
Description
The outline style of the outline focused Chip. | |||
| $kendo-chip-sm-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the small Chip. | |||
| $kendo-chip-md-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the medium Chip. | |||
| $kendo-chip-lg-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal padding of the large Chip. | |||
| $kendo-chip-sm-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
The vertical padding of the small Chip. | |||
| $kendo-chip-md-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the medium Chip. | |||
| $kendo-chip-lg-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the large Chip. | |||
| $kendo-chip-sm-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the small Chip. | |||
| $kendo-chip-md-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the medium Chip. | |||
| $kendo-chip-lg-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the large Chip. | |||
| $kendo-chip-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The small Chip's line height that is related to the $kendo-font-size. | |||
| $kendo-chip-md-line-height | var( --kendo-line-height, normal ) | ||
Description
The medium Chip's line height that is related to the $kendo-font-size. | |||
| $kendo-chip-lg-line-height | var( --kendo-line-height, normal ) | ||
Description
The large Chip's line height that is related to the $kendo-font-size. | |||
| $kendo-chip-calc-size | calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) | ||
Description
The calculated height of the Chip. | |||
| $kendo-chip-sizes | (
sm: (
padding-x: $kendo-chip-sm-padding-x,
padding-y: $kendo-chip-sm-padding-y,
font-size: $kendo-chip-sm-font-size,
line-height: $kendo-chip-sm-line-height
),
md: (
padding-x: $kendo-chip-md-padding-x,
padding-y: $kendo-chip-md-padding-y,
font-size: $kendo-chip-md-font-size,
line-height: $kendo-chip-md-line-height
),
lg: (
padding-x: $kendo-chip-lg-padding-x,
padding-y: $kendo-chip-lg-padding-y,
font-size: $kendo-chip-lg-font-size,
line-height: $kendo-chip-lg-line-height
)
) | ||
Description
The map with the sizes of the Chip. | |||
| $kendo-chip-list-sizes | (
sm: map.get( $kendo-spacing, 1 ),
md: map.get( $kendo-spacing, 1 ),
lg: map.get( $kendo-spacing, 1 )
) | ||
Description
The sizes of the Chip list. | |||
