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(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the Chat. | |||
kendo-chat-padding-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the Chat. | |||
kendo-chat-width | 320px | 320px | Default: 320pxComputed: 320px |
| Description: The minimum width of the Chat. | |||
kendo-chat-height | 600px | 600px | Default: 600pxComputed: 600px |
| 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-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Chat. | |||
kendo-chat-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Chat. | |||
kendo-chat-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the Chat. | |||
kendo-chat-item-spacing-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| 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, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The spacing between the items of the Chat message. | |||
kendo-chat-message-list-padding-x | $kendo-chat-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-chat-padding-xComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the Chat message list. | |||
kendo-chat-message-list-padding-y | $kendo-chat-padding-y | var(--kendo-spacing-4, 1rem) | Default: $kendo-chat-padding-yComputed: var(--kendo-spacing-4, 1rem) |
| Description: The vertical padding of the Chat message list. | |||
kendo-chat-message-list-spacing | $kendo-chat-item-spacing-y | var(--kendo-spacing-4, 1rem) | Default: $kendo-chat-item-spacing-yComputed: var(--kendo-spacing-4, 1rem) |
| Description: The spacing of the Chat message list. | |||
kendo-chat-message-status-gap | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing between the icon and text in the Chat message status. | |||
kendo-chat-timestamp-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) |
| Description: The font size of the Chat timestamp. | |||
kendo-chat-timestamp-line-height | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) | Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal) |
| 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, #666666) | Default: k-color(subtle)Computed: var(--kendo-color-subtle, #666666) |
| 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, rgba(0, 0, 0, 0.08)) | Default: k-color(border)Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The background color of the Chat timestamp separator. | |||
kendo-chat-timestamp-separator-spacing | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing between the Chat timestamp and its separator. | |||
kendo-chat-message-meta-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) |
| Description: The font size of the Chat message meta text. | |||
kendo-chat-message-meta-line-height | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) | Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal) |
| Description: The line height of the Chat message meta text. | |||
kendo-chat-author-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) |
| Description: The font size of the Chat author text. | |||
kendo-chat-author-line-height | var( --kendo-line-height-xs, normal ) | var(--kendo-line-height-xs, normal) | Default: var( --kendo-line-height-xs, normal )Computed: var(--kendo-line-height-xs, normal) |
| Description: The line height of the Chat author text. | |||
kendo-chat-status-text | k-color(subtle) | var(--kendo-color-subtle, #666666) | Default: k-color(subtle)Computed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the Chat status. | |||
kendo-chat-bubble-spacing | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The spacing of the Chat bubble message. | |||
kendo-chat-toolbar-bg | $kendo-toolbar-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-toolbar-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the Chat Toolbar. | |||
kendo-chat-toolbar-text | $kendo-toolbar-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-toolbar-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| 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(surface) | var(--kendo-color-surface, #fafafa) | Default: k-color(surface)Computed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the Chat. | |||
kendo-chat-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Chat. | |||
kendo-chat-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(border)Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Chat. | |||
kendo-chat-typing-indicator-text | k-color(base-on-subtle) | var(--kendo-color-base-on-subtle, #3d3d3d) | Default: k-color(base-on-subtle)Computed: var(--kendo-color-base-on-subtle, #3d3d3d) |
| Description: The color of the typing indicator dots. | |||
kendo-chat-alt-bubble-bg | k-color(primary) | var(--kendo-color-primary, #ff6358) | Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the Chat alt bubble. | |||
kendo-chat-alt-bubble-text | k-color(on-primary) | var(--kendo-color-on-primary, #ffffff) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the Chat alt bubble. | |||
kendo-chat-alt-bubble-border | $kendo-chat-alt-bubble-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-chat-alt-bubble-bgComputed: var(--kendo-color-primary, #ff6358) |
| 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-file-width | 240px | 240px | Default: 240pxComputed: 240px |
| Description: The width of a file in the Chat Textarea. | |||
kendo-chat-file-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Chat file. | |||
kendo-chat-file-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Chat file. | |||
kendo-chat-file-gap | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing between the elements of the Chat file. | |||
kendo-chat-file-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The border width of the Chat file. | |||
kendo-chat-file-border-style | solid | solid | Default: solidComputed: solid |
| Description: The border style of the Chat file. | |||
kendo-chat-file-bg | k-color(base-subtle) | var(--kendo-color-base-subtle, #ebebeb) | Default: k-color(base-subtle)Computed: var(--kendo-color-base-subtle, #ebebeb) |
| Description: The background color of the Chat file. | |||
kendo-chat-file-text | k-color(base-on-subtle) | var(--kendo-color-base-on-subtle, #3d3d3d) | Default: k-color(base-on-subtle)Computed: var(--kendo-color-base-on-subtle, #3d3d3d) |
| Description: The text color of the Chat file. | |||
kendo-chat-file-border | $kendo-chat-file-bg | var(--kendo-color-base-subtle, #ebebeb) | Default: $kendo-chat-file-bgComputed: var(--kendo-color-base-subtle, #ebebeb) |
| Description: The border color of the Chat file. | |||
kendo-chat-file-border-radius | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| Description: The border-radius of the Chat file. | |||
kendo-chat-file-download-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the file download wrapper. | |||
kendo-chat-file-download-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the file download wrapper. | |||
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, rgba(0, 0, 0, 0.08)) | Default: k-color(border)Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Chat pinned message; | |||
kendo-chat-message-reference-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Chat message reference. | |||
kendo-chat-message-reference-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Chat message reference. | |||
kendo-chat-message-reference-bg | k-color(surface) | var(--kendo-color-surface, #fafafa) | Default: k-color(surface)Computed: var(--kendo-color-surface, #fafafa) |
| 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, #3d3d3d) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Chat message reference. | |||
kendo-chat-message-reference-marker-bg | k-color(base-emphasis) | var(--kendo-color-base-emphasis, #c2c2c2) | Default: k-color(base-emphasis)Computed: var(--kendo-color-base-emphasis, #c2c2c2) |
| 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, #ff9d97) | Default: k-color(primary-emphasis)Computed: var(--kendo-color-primary-emphasis, #ff9d97) |
| Description: The background color of the message reference alt marker. | |||
