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, 1.25rem) | Default: k-spacing(5)Computed: var(--kendo-spacing-5, 1.25rem) |
| Description: The horizontal padding of the Chat. | |||
kendo-chat-padding-y | k-spacing(5) | var(--kendo-spacing-5, 1.25rem) | Default: k-spacing(5)Computed: var(--kendo-spacing-5, 1.25rem) |
| 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-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-sequential-messages-border-radius | k-border-radius(sm) | var(--kendo-border-radius-sm, 0.125rem) | Default: k-border-radius(sm)Computed: var(--kendo-border-radius-sm, 0.125rem) |
| Description: The border radius of sequential Chat messages. | |||
kendo-chat-message-list-padding-x | $kendo-chat-padding-x | var(--kendo-spacing-5, 1.25rem) | Default: $kendo-chat-padding-xComputed: var(--kendo-spacing-5, 1.25rem) |
| Description: The horizontal padding of the Chat message list. | |||
kendo-chat-message-list-padding-y | $kendo-chat-padding-y | var(--kendo-spacing-5, 1.25rem) | Default: $kendo-chat-padding-yComputed: var(--kendo-spacing-5, 1.25rem) |
| 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-box-wrapper-spacing | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The spacing of the Chat message box wrapper. | |||
kendo-chat-status-min-size | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem) |
| Description: The minimum size of the Chat message status. | |||
kendo-chat-status-max-size | k-spacing(8) | var(--kendo-spacing-8, 2rem) | Default: k-spacing(8)Computed: var(--kendo-spacing-8, 2rem) |
| Description: The maximum size of the Chat message status. | |||
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-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 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(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| 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 | transparent | transparent | Default: transparentComputed: transparent |
| 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-failed-bubble-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 bubble of the failed Chat message. | |||
kendo-chat-failed-bubble-bg | k-color(error-subtle) | var(--kendo-color-error-subtle, #fcddda) | Default: k-color(error-subtle)Computed: var(--kendo-color-error-subtle, #fcddda) |
| 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, #f76f60) | Default: k-color(error-emphasis)Computed: var(--kendo-color-error-emphasis, #f76f60) |
| 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, #ca1400) | Default: k-color(error-on-surface)Computed: var(--kendo-color-error-on-surface, #ca1400) |
| 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, #fbc8c3) | Default: k-color(error-subtle-hover)Computed: var(--kendo-color-error-subtle-hover, #fbc8c3) |
| 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, #f98b80) | Default: k-color(error-subtle-active)Computed: var(--kendo-color-error-subtle-active, #f98b80) |
| 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, #ffffff) 14%, transparent) | Default: color-mix(in srgb, k-color(on-primary) 14%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-primary, #ffffff) 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, #ffffff) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary, #ffffff) |
| 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, #ffffff) 14%, transparent) | Default: $kendo-chat-sender-file-bgComputed: color-mix(in srgb, var(--kendo-color-on-primary, #ffffff) 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, 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 | color-mix(in srgb, k-color(surface) 90%, transparent) | color-mix(in srgb, var(--kendo-color-surface, #fafafa) 90%, transparent) | Default: color-mix(in srgb, k-color(surface) 90%, transparent)Computed: color-mix(in srgb, var(--kendo-color-surface, #fafafa) 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, #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. | |||
