New to Kendo UI for Angular? 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 of links in the bubble of the chat. | |||
| $kendo-chat-link-text | var( --kendo-link-text, inherit ) | ||
Description
The text of links in the bubble of the chat. | |||
| $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 typeing indicator dot in the chat. | |||
| $kendo-chat-typing-indicator-dot-spacing | 5px | ||
Description
The spacing of the chat typeing indicator dot in the chat. | |||
| $kendo-chat-item-spacing-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal spacing between items of the chat. | |||
| $kendo-chat-item-spacing-y | map.get( $kendo-spacing, 4 ) | ||
Description
The vertical spacing between items of the chat. | |||
| $kendo-chat-message-list-padding-x | $kendo-chat-padding-x | ||
Description
The horizontal padding of message list of the chat. | |||
| $kendo-chat-message-list-padding-y | $kendo-chat-padding-y | ||
Description
The vertical padding of message list of the chat. | |||
| $kendo-chat-message-list-spacing | $kendo-chat-item-spacing-y | ||
Description
The spacing of message list of the chat. | |||
| $kendo-chat-timestamp-font-size | smaller | ||
Description
The font size of the timestap. | |||
| $kendo-chat-timestamp-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the timestamp. | |||
| $kendo-chat-timestamp-transform | uppercase | ||
Description
the text transform of the timestamp. | |||
| $kendo-chat-timestamp-text | var( --kendo-subtle-text, inherit ) | ||
Description
The text of the timestamp. | |||
| $kendo-chat-timestamp-bg | normal | ||
Description
the background of the timestamp. | |||
| $kendo-chat-bubble-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the bubble message. | |||
| $kendo-chat-bubble-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the bubble message. | |||
| $kendo-chat-bubble-spacing | map.get( $kendo-spacing, 0.5 ) | ||
Description
The spacing of the bubble message. | |||
| $kendo-chat-bubble-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the bubble message. | |||
| $kendo-chat-scroll-button | map.get( $kendo-spacing, 2 ) | ||
Description
The padding of the scroll button in the chat. | |||
| $kendo-card-deck-scrollbar-size | 20px | ||
Description
The size of the card deck scrollbar in the chat. | |||
| $kendo-chat-bubble-border-radius | map.get( $kendo-spacing, 3 ) | ||
Description
The border radius of the bubble message. | |||
| $kendo-chat-bubble-border-radius-sm | var( --kendo-border-radius, 0 ) | ||
Description
The border radius of the small bubble message | |||
| $kendo-chat-avatar-size | 32px | ||
Description
The size of the avatar. | |||
| $kendo-chat-avatar-spacing | $kendo-chat-item-spacing-x | ||
Description
The spacing of the avatar. | |||
| $kendo-chat-toolbar-padding-x | $kendo-toolbar-md-padding-x | ||
Description
The horizontal padding of the toolbar in the chat. | |||
| $kendo-chat-toolbar-padding-y | $kendo-toolbar-md-padding-y | ||
Description
The vertical padding of the toolbar in the chat. | |||
| $kendo-chat-toolbar-spacing | $kendo-toolbar-md-spacing | ||
Description
The spacing of the toolbar in the chat. | |||
| $kendo-chat-toolbar-bg | $kendo-toolbar-bg | ||
Description
The background of the toolbar in the chat. | |||
| $kendo-chat-toolbar-text | $kendo-toolbar-text | ||
Description
The text of the toolbar in the chat. | |||
| $kendo-chat-toolbar-border | inherit | ||
Description
The border of the toolbar in the chat. | |||
| $kendo-chat-quick-reply-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding of the quick reply in the chat. | |||
| $kendo-chat-quick-reply-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the quick reply in the chat. | |||
| $kendo-chat-quick-reply-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The spacing of the quick reply in the chat. | |||
| $kendo-chat-quick-reply-line-height | $kendo-chat-bubble-line-height | ||
Description
The line height of the quick reply in the chat. | |||
| $kendo-chat-bg | k-get-theme-color-var( neutral-10 ) | ||
Description
The background of the chat. | |||
| $kendo-chat-text | k-get-theme-color-var( neutral-190 ) | ||
Description
The text of the chat. | |||
| $kendo-chat-border | k-get-theme-color-var( neutral-30 ) | ||
Description
The border of the chat. | |||
| $kendo-chat-bubble-bg | var( --kendo-component-bg, inherit ) | ||
Description
The background of the bubble in the chat. | |||
| $kendo-chat-bubble-text | var( --kendo-component-text, inherit ) | ||
Description
The text of the bubble in the chat. | |||
| $kendo-chat-bubble-border | $kendo-chat-bubble-bg | ||
Description
The border of the bubble in the chat. | |||
| $kendo-chat-bubble-shadow | var( --kendo-box-shadow-depth-1, none ) | ||
Description
The box shadow of the bubble in the chat. | |||
| $kendo-chat-bubble-hover-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The hover shadow of the bubble in the chat. | |||
| $kendo-chat-bubble-selected-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The selected shadow of the bubble in the chat. | |||
| $kendo-chat-alt-bubble-bg | k-get-theme-color-var( primary-100 ) | ||
Description
The background of the alt bubble in the chat. | |||
| $kendo-chat-alt-bubble-text | var( --kendo-component-bg, inherit ) | ||
Description
The text of the alt bubble in the chat. | |||
| $kendo-chat-alt-bubble-border | $kendo-chat-alt-bubble-bg | ||
Description
The border of the alt bubble in the chat. | |||
| $kendo-chat-alt-bubble-shadow | var( --kendo-box-shadow-depth-1, none ) | ||
Description
The shadow of the alt bubble in the chat. | |||
| $kendo-chat-alt-bubble-hover-shadow | var( --kendo-box-shadow-depth-2, none ) | ||
Description
The hover shadow of the alt bubble in the chat. | |||
| $kendo-chat-alt-bubble-selected-shadow | var( --kendo-box-shadow-depth-3, none ) | ||
Description
The selected shadow of the alt bubble in the chat. | |||
| $kendo-chat-quick-reply-bg | transparent | ||
Description
The background of quick reply in the chat. | |||
| $kendo-chat-quick-reply-text | k-get-theme-color-var( primary-100 ) | ||
Description
The text of quick reply in the chat. | |||
| $kendo-chat-quick-reply-border | k-get-theme-color-var( primary-100 ) | ||
Description
The border of quick reply in the chat. | |||
| $kendo-chat-quick-reply-hover-bg | k-get-theme-color-var( primary-100 ) | ||
Description
The hover background of quick reply in the chat. | |||
| $kendo-chat-quick-reply-hover-text | var( --kendo-component-bg, inherit ) | ||
Description
The text of quick reply in the chat. | |||
| $kendo-chat-quick-reply-hover-border | k-get-theme-color-var( primary-100 ) | ||
Description
The hover border of quick reply in the chat. | |||
