Sass Variables
The Telerik and Kendo UI AIPrompt is a composite UI component that consists of TextArea, Toolbar, Button, Chip, Card, and PanelBar components. To configure and customize its appearance, use not only its dedicated Sass variables but also the TextArea, Toolbar, Chip, Card and PanelBar Sass variables, as well as those provided by the Button component.
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-prompt-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the AIPrompt. | |||
kendo-prompt-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the AIPrompt. | |||
kendo-prompt-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the AIPrompt. | |||
kendo-prompt-header-text | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the AIPrompt header. | |||
kendo-prompt-header-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the AIPrompt header. | |||
kendo-prompt-header-border | $kendo-component-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the AIPrompt header. | |||
kendo-prompt-content-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 AIPrompt content. | |||
kendo-prompt-content-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 AIPrompt content. | |||
kendo-prompt-content-spacing | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The spacing between the items of the AIPrompt content. | |||
kendo-prompt-content-text | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the AIPrompt content. | |||
kendo-prompt-content-bg | $kendo-component-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-component-header-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: The background color of the AIPrompt content. | |||
kendo-prompt-content-border | $kendo-component-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The text border of the AIPrompt content. | |||
kendo-prompt-expander-spacing | 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 AIPrompt content expander. | |||
kendo-prompt-suggestion-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 AIPrompt suggestion container. | |||
kendo-prompt-suggestion-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 AIPrompt suggestion container. | |||
kendo-prompt-suggestion-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 AIPrompt suggestion container. | |||
kendo-prompt-suggestion-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the AIPrompt suggestion container. | |||
kendo-prompt-suggestion-bg | $kendo-body-bg | var(--kendo-color-app-surface, #ffffff) | Default: $kendo-body-bg Computed: var(--kendo-color-app-surface, #ffffff) |
Description: The background color of the AIPrompt suggestion container. | |||
kendo-prompt-suggestion-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the AIPrompt suggestion container. | |||
kendo-prompt-suggestion-shadow | k-elevation(1) | var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(1) Computed: var(--kendo-elevation-1, 0 2px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.12)) |
Description: The elevation of the AIPrompt suggestion container. |