New to Kendo UI for Vue? Start a free 30-day trial
Customizing Chat
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-chat-transition | var( --kendo-transition, inherit ) | ||
Description
The box shadow transition of the Chat. | |||
| $kendo-chat-link-hover-text | var( --kendo-link-hover-text, inherit ) | ||
Description
The hover text color of the Chat bubble links. | |||
| $kendo-chat-link-text | var( --kendo-link-text, inherit ) | ||
Description
The text color of the Chat bubble links. | |||
| $kendo-chat-padding-x | map.get( $kendo-spacing, 4 ) | ||
Description
The horizontal padding of the Chat. | |||
| $kendo-chat-padding-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical padding of the Chat. | |||
| $kendo-chat-width | 500px | ||
Description
The width of the Chat. | |||
| $kendo-chat-height | 600px | ||
Description
The height of the Chat. | |||
| $kendo-chat-border-width | 1px | ||
Description
The border width of the Chat. | |||
| $kendo-chat-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Chat. | |||
| $kendo-chat-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Chat. | |||
| $kendo-chat-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Chat. | |||
| $kendo-chat-typing-indicator-dot-size | 8px | ||
Description
The size of the Chat typing indicator dot. | |||
| $kendo-chat-typing-indicator-dot-spacing | 5px | ||
Description
The spacing of the Chat typing indicator dot. | |||
| $kendo-chat-item-spacing-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal spacing between the items of the Chat. | |||
| $kendo-chat-item-spacing-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical spacing between the items of the Chat. | |||
| $kendo-chat-message-list-padding-x | $kendo-chat-padding-x | ||
Description
The horizontal padding of the Chat message list. | |||
| $kendo-chat-message-list-padding-y | $kendo-chat-padding-y | ||
Description
The vertical padding of the Chat message list. | |||
| $kendo-chat-message-list-spacing | $kendo-chat-item-spacing-y | ||
Description
The spacing of the Chat message list. | |||
| $kendo-chat-timestamp-font-size | smaller | ||
Description
The font size of the Chat timestamp. | |||
| $kendo-chat-timestamp-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Chat timestamp. | |||
| $kendo-chat-timestamp-transform | uppercase | ||
Description
The text transform of the Chat timestamp. | |||
| $kendo-chat-timestamp-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text color of the Chat timestamp. | |||
| $kendo-chat-timestamp-bg | normal | ||
Description
The background color of the Chat timestamp. | |||
| $kendo-chat-bubble-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Chat bubble message. | |||
| $kendo-chat-bubble-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Chat bubble message. | |||
| $kendo-chat-bubble-spacing | map.get( $kendo-spacing, 0.5 ) | ||
Description
The spacing of the Chat bubble message. | |||
| $kendo-chat-bubble-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Chat bubble message. | |||
| $kendo-chat-scroll-button | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the Chat scroll button. | |||
| $kendo-card-deck-scrollbar-size | 20px | ||
Description
The size of the Chat Card deck scrollbar. | |||
| $kendo-chat-bubble-border-radius | map.get( $kendo-spacing, 3 ) | ||
Description
The border radius of the Chat bubble message. | |||
| $kendo-chat-bubble-border-radius-sm | var( --kendo-border-radius, 0 ) | ||
Description
The border radius of the Chat small bubble message | |||
| $kendo-chat-avatar-size | 32px | ||
Description
The size of the Chat Avatar. | |||
| $kendo-chat-avatar-spacing | $kendo-chat-item-spacing-x | ||
Description
The spacing of the Chat Avatar. | |||
| $kendo-chat-toolbar-padding-x | $kendo-toolbar-md-padding-x | ||
Description
The horizontal padding of the Chat Toolbar. | |||
| $kendo-chat-toolbar-padding-y | $kendo-toolbar-md-padding-y | ||
Description
The vertical padding of the Chat Toolbar. | |||
| $kendo-chat-toolbar-spacing | $kendo-toolbar-md-spacing | ||
Description
The spacing of the Chat Toolbar. | |||
| $kendo-chat-toolbar-bg | $kendo-toolbar-bg | ||
Description
The background color of the Chat Toolbar. | |||
| $kendo-chat-toolbar-text | $kendo-toolbar-text | ||
Description
The text color of the Chat Toolbar. | |||
| $kendo-chat-toolbar-border | inherit | ||
Description
The border color of the Chat Toolbar. | |||
| $kendo-chat-quick-reply-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the Chat quick reply. | |||
| $kendo-chat-quick-reply-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the Chat quick reply. | |||
| $kendo-chat-quick-reply-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the Chat quick reply. | |||
| $kendo-chat-quick-reply-line-height | $kendo-chat-bubble-line-height | ||
Description
The line height of the Chat quick reply. | |||
| $kendo-chat-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
The background color of the Chat. | |||
| $kendo-chat-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) | ||
Description
The text color of the Chat. | |||
| $kendo-chat-border | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) | ||
Description
The border color of the Chat. | |||
| $kendo-chat-bubble-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background color of the Chat bubble. | |||
| $kendo-chat-bubble-text | var( --kendo-component-text, inherit ) | ||
Description
The text color of the Chat bubble. | |||
| $kendo-chat-bubble-border | $kendo-chat-bubble-bg | ||
Description
The border color of the Chat bubble. | |||
| $kendo-chat-bubble-shadow | var( --kendo-box-shadow-depth-1, none ) | ||
Description
The box shadow of the Chat bubble. | |||
| $kendo-chat-bubble-hover-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The shadow of the hovered Chat bubble. | |||
| $kendo-chat-bubble-selected-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The shadow of the selected Chat bubble. | |||
| $kendo-chat-alt-bubble-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Chat alt bubble. | |||
| $kendo-chat-alt-bubble-text | var( --kendo-component-bg, inherit ) | ||
Description
The text color of the Chat alt bubble. | |||
| $kendo-chat-alt-bubble-border | $kendo-chat-alt-bubble-bg | ||
Description
The border color of the Chat alt bubble. | |||
| $kendo-chat-alt-bubble-shadow | var( --kendo-box-shadow-depth-1, none ) | ||
Description
The shadow of the Chat alt bubble. | |||
| $kendo-chat-alt-bubble-hover-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The shadow of the hovered Chat alt bubble. | |||
| $kendo-chat-alt-bubble-selected-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The shadow of the selected Chat alt bubble. | |||
| $kendo-chat-quick-reply-bg | transparent | ||
Description
The background color of the Chat quick reply. | |||
| $kendo-chat-quick-reply-text | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The text color of the Chat quick reply. | |||
| $kendo-chat-quick-reply-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the Chat quick reply. | |||
| $kendo-chat-quick-reply-hover-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the hovered Chat quick reply. | |||
| $kendo-chat-quick-reply-hover-text | var( --kendo-component-bg, inherit ) | ||
Description
The text color of the hovered Chat quick reply. | |||
| $kendo-chat-quick-reply-hover-border | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The border color of the hovered Chat quick reply. | |||
