Sass Variables
The Telerik and Kendo UI Chat is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Sass variables provided by the TextArea, Button, and Avatar components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-chat-padding-x | k-spacing(5) | var(--kendo-spacing-5) | Default: k-spacing(5)Computed: var(--kendo-spacing-5) |
| Description: The horizontal padding of the Chat. | |||
kendo-chat-padding-y | k-spacing(5) | var(--kendo-spacing-5) | Default: k-spacing(5)Computed: var(--kendo-spacing-5) |
| Description: The vertical padding of the Chat. | |||
kendo-chat-width | 280px | 280px | Default: 280pxComputed: 280px |
| Description: The minimum width of the Chat. | |||
kendo-chat-height | 320px | 320px | Default: 320pxComputed: 320px |
| Description: The minimum height of the Chat. | |||
kendo-chat-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Chat. | |||
kendo-chat-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the Chat. | |||
kendo-chat-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the Chat. | |||
kendo-chat-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the Chat. | |||
kendo-chat-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the Chat. | |||
kendo-chat-item-spacing-y | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The vertical spacing between the items of the Chat. | |||
kendo-chat-message-max-width | min(75%, 460px) | min(75%, 460px) | Default: min(75%, 460px)Computed: min(75%, 460px) |
| Description: The maximum width of the Chat message. | |||
kendo-chat-message-gap | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The spacing between the items of the Chat message. | |||
kendo-sequential-messages-border-radius | k-border-radius(sm) | var(--kendo-border-radius-sm) | Default: k-border-radius(sm)Computed: var(--kendo-border-radius-sm) |
| Description: The border radius of sequential Chat messages. | |||
kendo-chat-message-list-padding-x | $kendo-chat-padding-x | var(--kendo-spacing-5) | Default: $kendo-chat-padding-xComputed: var(--kendo-spacing-5) |
| Description: The horizontal padding of the Chat message list. | |||
kendo-chat-message-list-padding-y | $kendo-chat-padding-y | var(--kendo-spacing-5) | Default: $kendo-chat-padding-yComputed: var(--kendo-spacing-5) |
| Description: The vertical padding of the Chat message list. | |||
kendo-chat-message-list-spacing | $kendo-chat-item-spacing-y | var(--kendo-spacing-4) | Default: $kendo-chat-item-spacing-yComputed: var(--kendo-spacing-4) |
| Description: The spacing of the Chat message list. | |||
kendo-chat-message-box-wrapper-spacing | k-spacing(4) | var(--kendo-spacing-4) | Default: k-spacing(4)Computed: var(--kendo-spacing-4) |
| Description: The spacing of the Chat message box wrapper. | |||
kendo-chat-status-min-size | k-spacing(1.5) | var(--kendo-spacing-1\.5) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5) |
| Description: The minimum size of the Chat message status. | |||
kendo-chat-status-max-size | k-spacing(8) | var(--kendo-spacing-8) | Default: k-spacing(8)Computed: var(--kendo-spacing-8) |
| Description: The maximum size of the Chat message status. | |||
kendo-chat-message-status-gap | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The spacing between the icon and text in the Chat message status. | |||
kendo-chat-timestamp-font-size | var(--kendo-font-size-sm) | var(--kendo-font-size-sm) | Default: var(--kendo-font-size-sm)Computed: var(--kendo-font-size-sm) |
| Description: The font size of the Chat timestamp. | |||
kendo-chat-timestamp-line-height | var(--kendo-line-height-lg) | var(--kendo-line-height-lg) | Default: var(--kendo-line-height-lg)Computed: var(--kendo-line-height-lg) |
| Description: The line height of the Chat timestamp. | |||
kendo-chat-timestamp-transform | none | none | Default: noneComputed: none |
| Description: The text transform of the Chat timestamp. | |||
kendo-chat-timestamp-text | k-color(subtle) | var(--kendo-color-subtle) | Default: k-color(subtle)Computed: var(--kendo-color-subtle) |
| Description: The text color of the Chat timestamp. | |||
kendo-chat-timestamp-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Chat timestamp. | |||
kendo-chat-timestamp-separator-bg | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The background color of the Chat timestamp separator. | |||
kendo-chat-timestamp-separator-spacing | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The spacing between the Chat timestamp and its separator. | |||
kendo-chat-message-meta-font-size | var(--kendo-font-size-sm) | var(--kendo-font-size-sm) | Default: var(--kendo-font-size-sm)Computed: var(--kendo-font-size-sm) |
| Description: The font size of the Chat message meta text. | |||
kendo-chat-message-meta-line-height | var(--kendo-line-height-xs) | var(--kendo-line-height-xs) | Default: var(--kendo-line-height-xs)Computed: var(--kendo-line-height-xs) |
| Description: The line height of the Chat message meta text. | |||
kendo-chat-author-font-size | var(--kendo-font-size-sm) | var(--kendo-font-size-sm) | Default: var(--kendo-font-size-sm)Computed: var(--kendo-font-size-sm) |
| Description: The font size of the Chat author text. | |||
kendo-chat-author-line-height | var(--kendo-line-height-xs) | var(--kendo-line-height-xs) | Default: var(--kendo-line-height-xs)Computed: var(--kendo-line-height-xs) |
| Description: The line height of the Chat author text. | |||
kendo-chat-status-text | k-color(subtle) | var(--kendo-color-subtle) | Default: k-color(subtle)Computed: var(--kendo-color-subtle) |
| Description: The text color of the Chat status. | |||
kendo-chat-bubble-spacing | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The spacing of the Chat bubble message. | |||
kendo-chat-toolbar-bg | $kendo-toolbar-bg | var(--kendo-color-surface) | Default: $kendo-toolbar-bgComputed: var(--kendo-color-surface) |
| Description: The background color of the Chat Toolbar. | |||
kendo-chat-toolbar-text | $kendo-toolbar-text | var(--kendo-color-on-app-surface) | Default: $kendo-toolbar-textComputed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Chat Toolbar. | |||
kendo-chat-toolbar-border | inherit | inherit | Default: inheritComputed: inherit |
| Description: The border color of the Chat Toolbar. | |||
kendo-chat-bg | k-color(app-surface) | var(--kendo-color-app-surface) | Default: k-color(app-surface)Computed: var(--kendo-color-app-surface) |
| Description: The background color of the Chat. | |||
kendo-chat-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Chat. | |||
kendo-chat-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the Chat. | |||
kendo-chat-typing-indicator-text | k-color(base-on-subtle) | var(--kendo-color-base-on-subtle) | Default: k-color(base-on-subtle)Computed: var(--kendo-color-base-on-subtle) |
| Description: The color of the typing indicator dots. | |||
kendo-chat-alt-bubble-bg | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The background color of the Chat alt bubble. | |||
kendo-chat-alt-bubble-text | k-color(on-primary) | var(--kendo-color-on-primary) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary) |
| Description: The text color of the Chat alt bubble. | |||
kendo-chat-alt-bubble-border | $kendo-chat-alt-bubble-bg | var(--kendo-color-primary) | Default: $kendo-chat-alt-bubble-bgComputed: var(--kendo-color-primary) |
| Description: The border color of the Chat alt bubble. | |||
kendo-chat-alt-bubble-shadow | none | none | Default: noneComputed: none |
| Description: The shadow of the Chat alt bubble. | |||
kendo-chat-failed-bubble-text | k-color(base-on-subtle) | var(--kendo-color-base-on-subtle) | Default: k-color(base-on-subtle)Computed: var(--kendo-color-base-on-subtle) |
| Description: The text color of the bubble of the failed Chat message. | |||
kendo-chat-failed-bubble-bg | k-color(error-subtle) | var(--kendo-color-error-subtle) | Default: k-color(error-subtle)Computed: var(--kendo-color-error-subtle) |
| Description: The background color of the bubble of the failed Chat message. | |||
kendo-chat-failed-bubble-border | k-color(error-emphasis) | var(--kendo-color-error-emphasis) | Default: k-color(error-emphasis)Computed: var(--kendo-color-error-emphasis) |
| Description: The border color of the bubble of the failed Chat message. | |||
kendo-chat-failed-content-color | k-color(error-on-surface) | var(--kendo-color-error-on-surface) | Default: k-color(error-on-surface)Computed: var(--kendo-color-error-on-surface) |
| Description: The text color of the failed Chat message content. | |||
kendo-chat-failed-bubble-hover-bg | k-color(error-subtle-hover) | var(--kendo-color-error-subtle-hover) | Default: k-color(error-subtle-hover)Computed: var(--kendo-color-error-subtle-hover) |
| Description: The background color of the hovered bubble of the failed Chat message. | |||
kendo-chat-failed-bubble-selected-bg | k-color(error-subtle-active) | var(--kendo-color-error-subtle-active) | Default: k-color(error-subtle-active)Computed: var(--kendo-color-error-subtle-active) |
| Description: The background color of the selected bubble of the failed Chat message. | |||
kendo-chat-sender-file-bg | color-mix(in srgb, k-color(on-primary) 14%, transparent) | color-mix(in srgb, var(--kendo-color-on-primary) 14%, transparent) | Default: color-mix(in srgb, k-color(on-primary) 14%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-primary) 14%, transparent) |
| Description: The background color of the Chat sender file. | |||
kendo-chat-sender-file-text | k-color(on-primary) | var(--kendo-color-on-primary) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary) |
| Description: The text color of the Chat sender file. | |||
kendo-chat-sender-file-border | $kendo-chat-sender-file-bg | color-mix(in srgb, var(--kendo-color-on-primary) 14%, transparent) | Default: $kendo-chat-sender-file-bgComputed: color-mix(in srgb, var(--kendo-color-on-primary) 14%, transparent) |
| Description: The border color of the Chat sender file. | |||
kendo-chat-message-pinned-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Chat pinned message; | |||
kendo-chat-message-pinned-border-style | solid | solid | Default: solidComputed: solid |
| Description: The border style of the Chat pinned message; | |||
kendo-chat-message-pinned-border-color | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the Chat pinned message; | |||
kendo-chat-message-reference-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the Chat message reference. | |||
kendo-chat-message-reference-padding-y | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The vertical padding of the Chat message reference. | |||
kendo-chat-message-reference-bg | color-mix(in srgb, k-color(surface) 90%, transparent) | color-mix(in srgb, var(--kendo-color-surface) 90%, transparent) | Default: color-mix(in srgb, k-color(surface) 90%, transparent)Computed: color-mix(in srgb, var(--kendo-color-surface) 90%, transparent) |
| Description: The background color of the Chat message reference. | |||
kendo-chat-message-reference-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Chat message reference. | |||
kendo-chat-message-reference-marker-bg | k-color(base-emphasis) | var(--kendo-color-base-emphasis) | Default: k-color(base-emphasis)Computed: var(--kendo-color-base-emphasis) |
| Description: The background color of the message reference marker. | |||
kendo-chat-message-reference-marker-alt-bg | k-color(primary-emphasis) | var(--kendo-color-primary-emphasis) | Default: k-color(primary-emphasis)Computed: var(--kendo-color-primary-emphasis) |
| Description: The background color of the message reference alt marker. | |||
