New to Kendo UI for Vue? Start a free 30-day trial
Customizing Chip
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-chip-border-width | Number | 1px | 1px |
Description
The width of the border around the Chip. | |||
| $kendo-chip-spacing | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The spacing between the text and the icons of the Chip. | |||
| $kendo-chip-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Chip. | |||
| $kendo-chip-avatar-width | Number | 1em | 1em |
Description
The width of the Chip' avatar. | |||
| $kendo-chip-avatar-height | Number | 1em | 1em |
Description
The height of the Chip' avatar. | |||
| $kendo-chip-avatar-flex-basis | Number | 1em | 1em |
Description
The flex basis of the Chip' avatar. | |||
| $kendo-chip-disabled-text | String | var( --kendo-disabled-text, inherit ) | var(--kendo-disabled-text, inherit) |
Description
The text color of the disabled Chip. | |||
| $kendo-chip-solid-disabled-bg | String | var( --kendo-disabled-bg, transparent ) | var(--kendo-disabled-bg, transparent) |
Description
The background color of the solid disabled Chip. | |||
| $kendo-chip-solid-disabled-border | String | var( --kendo-disabled-border, inherit ) | var(--kendo-disabled-border, inherit) |
Description
The border color of the solid disabled Chip. | |||
| $kendo-chip-outline-disabled-bg | String | var( $kendo-component-bg, transparent ) | var(var(--kendo-color-surface-alt, #ffffff), transparent) |
Description
The background color of the outline disabled Chip. | |||
| $kendo-chip-outline-disabled-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent) |
Description
The border color of the outline disabled Chip. | |||
| $kendo-chip-focus-offset | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The offset of the outline focused Chip. | |||
| $kendo-chip-focus-outline-width | Number | 1px | 1px |
Description
The outline width of the outline focused Chip. | |||
| $kendo-chip-focus-outline-style | String | solid | solid |
Description
The outline style of the outline focused Chip. | |||
| $kendo-chip-sm-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the small Chip. | |||
| $kendo-chip-md-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the medium Chip. | |||
| $kendo-chip-lg-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the large Chip. | |||
| $kendo-chip-sm-padding-y | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the small Chip. | |||
| $kendo-chip-md-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the medium Chip. | |||
| $kendo-chip-lg-padding-y | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the large Chip. | |||
| $kendo-chip-sm-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the small Chip. | |||
| $kendo-chip-md-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium Chip. | |||
| $kendo-chip-lg-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the large Chip. | |||
| $kendo-chip-sm-line-height | String | var( --kendo-line-height, normal ) | 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 | String | var( --kendo-line-height, normal ) | 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 | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The large Chip's line height that is related to the $kendo-font-size. | |||
| $kendo-chip-calc-size | Calculation | calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) |
Description
The calculated height of the Chip. | |||
| $kendo-chip-sizes | Map | (
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
)
) | (sm: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal))) |
Description
The map with the sizes of the Chip. | |||
| $kendo-chip-list-sizes | Map | (
sm: k-spacing(1),
md: k-spacing(1),
lg: k-spacing(1)
) | (sm: var(--kendo-spacing-1, 0.25rem), md: var(--kendo-spacing-1, 0.25rem), lg: var(--kendo-spacing-1, 0.25rem)) |
Description
The sizes of the Chip list. | |||
