Sass Variables
The Telerik and Kendo UI InlineAIPrompt is a composite UI component that consists of TextArea, Button, Card, and Popup components, and does not have dedicated Sass variables. To configure and customize the appearance of the Telerik and Kendo UI InlineAIPrompt, modify the Sass variables of the TextArea, Button, Card and Popup components.
TextArea Variables
| Variable | Default Value | Computed Value | Value | ||||||
|---|---|---|---|---|---|---|---|---|---|
kendo-input-default-width | 100% | 100% | Default: 100%Computed: 100% | ||||||
| Description: The default width of the Input components. | |||||||||
kendo-input-border-width | 1px | 1px | Default: 1pxComputed: 1px | ||||||
| Description: The border width of the Input components. | |||||||||
kendo-input-border-radius | null | null | Default: nullComputed: null | ||||||
| Description: The border radius of the Input components. | |||||||||
kendo-input-sm-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 small Input components. | |||||||||
kendo-input-md-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 medium Input components. | |||||||||
kendo-input-lg-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 large Input components. | |||||||||
kendo-input-sm-padding-y | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem) | ||||||
| Description: The vertical padding of the small Input components. | |||||||||
kendo-input-md-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) | ||||||
| Description: The vertical padding of the medium Input components. | |||||||||
kendo-input-lg-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 large Input components. | |||||||||
kendo-input-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 Input components. | |||||||||
kendo-input-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 Input components. | |||||||||
kendo-input-sm-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 small Input components. | |||||||||
kendo-input-md-font-size | $kendo-input-font-size | var(--kendo-font-size, inherit) | Default: $kendo-input-font-sizeComputed: var(--kendo-font-size, inherit) | ||||||
| Description: The font size of the medium Input components. | |||||||||
kendo-input-lg-font-size | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) | Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit) | ||||||
| Description: The font size of the large Input components. | |||||||||
kendo-input-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 Input components. | |||||||||
kendo-input-sm-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 small Input components. | |||||||||
kendo-input-md-line-height | $kendo-input-line-height | var(--kendo-line-height, normal) | Default: $kendo-input-line-heightComputed: var(--kendo-line-height, normal) | ||||||
| Description: The line height of the medium Input components. | |||||||||
kendo-input-lg-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 large Input components. | |||||||||
kendo-input-sm-calc-size | calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + (2px)) | Default: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) )Computed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + (2px)) | ||||||
| Description: The calculated height of the Input. | |||||||||
kendo-input-sizes |
| Computed: (sm: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), button-padding-x: var(--kendo-spacing-0\.5, 0.125rem), button-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), button-padding-x: var(--kendo-spacing-1, 0.25rem), button-padding-y: var(--kendo-spacing-1, 0.25rem)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), button-padding-x: var(--kendo-spacing-2, 0.5rem), button-padding-y: var(--kendo-spacing-2, 0.5rem))) | |||||||
| Description: The sizes map for the Input components. | |||||||||
kendo-input-bg | k-color(surface-alt) | var(--kendo-color-surface-alt, #ffffff) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt, #ffffff) | ||||||
| Description: The background color of the Input components. | |||||||||
kendo-input-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 Input components. | |||||||||
kendo-input-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 Input components. | |||||||||
kendo-input-shadow | null | null | Default: nullComputed: null | ||||||
| Description: The shadow of the Input components. | |||||||||
kendo-input-hover-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the hovered Input components. | |||||||||
kendo-input-hover-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the hovered Input components. | |||||||||
kendo-input-hover-border | k-color(border-alt) | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: k-color(border-alt)Computed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | ||||||
| Description: The border color of the hovered Input components. | |||||||||
kendo-input-hover-shadow | null | null | Default: nullComputed: null | ||||||
| Description: The shadow of the hovered Input components. | |||||||||
kendo-input-focus-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the focused Input components. | |||||||||
kendo-input-focus-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the focused Input components. | |||||||||
kendo-input-focus-border | $kendo-input-hover-border | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: $kendo-input-hover-borderComputed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | ||||||
| Description: The border color of the focused Input components. | |||||||||
kendo-input-focus-shadow | 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent)Computed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | ||||||
| Description: The shadow of the focused Input components. | |||||||||
kendo-input-disabled-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the disabled Input components. | |||||||||
kendo-input-disabled-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the disabled Input components. | |||||||||
kendo-input-disabled-border | null | null | Default: nullComputed: null | ||||||
| Description: The border color of the disabled Input components. | |||||||||
kendo-input-disabled-gradient | null | null | Default: nullComputed: null | ||||||
| Description: The gradient of the disabled Input components. | |||||||||
kendo-input-disabled-shadow | null | null | Default: nullComputed: null | ||||||
| Description: The shadow of the disabled Input components. | |||||||||
kendo-input-outline-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the outline Input components. | |||||||||
kendo-input-outline-text | $kendo-input-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-input-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) | ||||||
| Description: The text color of the outline Input components. | |||||||||
kendo-input-outline-border | color-mix(in srgb, k-color(on-base) 50%, transparent) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) | Default: color-mix(in srgb, k-color(on-base) 50%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) | ||||||
| Description: The border color of the outline Input components. | |||||||||
kendo-input-outline-hover-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the outline hovered Input components. | |||||||||
kendo-input-outline-hover-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the outline hovered Input components. | |||||||||
kendo-input-outline-hover-border | color-mix(in srgb, k-color(on-base) 80%, transparent) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 80%, transparent) | Default: color-mix(in srgb, k-color(on-base) 80%, transparent)Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 80%, transparent) | ||||||
| Description: The border color of the outline hovered Input components. | |||||||||
kendo-input-outline-focus-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the outline focused Input components. | |||||||||
kendo-input-outline-focus-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the outline focused Input components. | |||||||||
kendo-input-outline-focus-border | null | null | Default: nullComputed: null | ||||||
| Description: The border color of the outline focused Input components. | |||||||||
kendo-input-outline-focus-shadow | $kendo-input-focus-shadow | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: $kendo-input-focus-shadowComputed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | ||||||
| Description: The shadow of the outline focused Input components. | |||||||||
kendo-input-flat-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the flat Input components. | |||||||||
kendo-input-flat-text | $kendo-input-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-input-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) | ||||||
| Description: The text color of the flat Input components. | |||||||||
kendo-input-flat-border | $kendo-input-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-input-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | ||||||
| Description: The border color of the flat Input components. | |||||||||
kendo-input-flat-hover-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the flat hovered Input components. | |||||||||
kendo-input-flat-hover-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the flat hovered Input components. | |||||||||
kendo-input-flat-hover-border | $kendo-input-hover-border | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: $kendo-input-hover-borderComputed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | ||||||
| Description: The border color of the flat hovered Input components. | |||||||||
kendo-input-flat-focus-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the flat focused Input components. | |||||||||
kendo-input-flat-focus-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the flat focused Input components. | |||||||||
kendo-input-flat-focus-border | null | null | Default: nullComputed: null | ||||||
| Description: The border color of the flat focused Input components. | |||||||||
kendo-input-flat-focus-shadow | $kendo-input-focus-shadow | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: $kendo-input-focus-shadowComputed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | ||||||
| Description: The shadow of the flat focused Input components. | |||||||||
kendo-input-placeholder-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 Input placeholder. | |||||||||
kendo-input-placeholder-opacity | 1 | 1 | Default: 1Computed: 1 | ||||||
| Description: The opacity of the Input placeholder. | |||||||||
kendo-input-clear-value-text | null | null | Default: nullComputed: null | ||||||
| Description: The color of the Input clear value icon. | |||||||||
kendo-input-clear-value-opacity | .5 | 0.5 | Default: .5Computed: 0.5 | ||||||
| Description: The opacity of the Input clear value icon. | |||||||||
kendo-input-clear-value-hover-text | null | null | Default: nullComputed: null | ||||||
| Description: The color of the hovered Input clear value icon. | |||||||||
kendo-input-clear-value-hover-opacity | 1 | 1 | Default: 1Computed: 1 | ||||||
| Description: The opacity of the hovered Input clear value icon. | |||||||||
kendo-input-button-width | $kendo-button-inner-calc-size | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2) | Default: $kendo-button-inner-calc-sizeComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2) | ||||||
| Description: The width of the Input button. | |||||||||
kendo-input-button-border-width | 1px | 1px | Default: 1pxComputed: 1px | ||||||
| Description: The border width of the Input button. | |||||||||
kendo-input-spinner-width | $kendo-button-inner-calc-size | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2) | Default: $kendo-button-inner-calc-sizeComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2) | ||||||
| Description: The width of the Input spinner button. | |||||||||
kendo-input-spinner-icon-offset | null | null | Default: nullComputed: null | ||||||
| Description: The icon offset of the Input spinner button. | |||||||||
kendo-input-separator-text | $kendo-input-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-input-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | ||||||
| Description: The color of the Input separator. | |||||||||
kendo-input-prefix-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 Input prefix. | |||||||||
kendo-input-prefix-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the Input prefix. | |||||||||
kendo-input-suffix-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 Input suffix. | |||||||||
kendo-input-suffix-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the Input suffix. | |||||||||
kendo-input-invalid-border | k-color(error) | var(--kendo-color-error, #f31700) | Default: k-color(error)Computed: var(--kendo-color-error, #f31700) | ||||||
| Description: The border color of the invalid Input components. | |||||||||
kendo-input-invalid-shadow | null | null | Default: nullComputed: null | ||||||
| Description: The shadow of the invalid Input components. | |||||||||
Button Variables
| Variable | Default Value | Computed Value | Value | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
kendo-button-border-width | 1px | 1px | Default: 1pxComputed: 1px | ||||||||||||||||||||||
| Description: The width of the border around the Button. | |||||||||||||||||||||||||
kendo-button-border-radius | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The border radius of the Button. | |||||||||||||||||||||||||
kendo-button-sm-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 small Button. | |||||||||||||||||||||||||
kendo-button-md-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 medium Button. | |||||||||||||||||||||||||
kendo-button-lg-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 large Button. | |||||||||||||||||||||||||
kendo-button-sm-padding-y | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem) | ||||||||||||||||||||||
| Description: The vertical padding of the small Button. | |||||||||||||||||||||||||
kendo-button-md-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) | ||||||||||||||||||||||
| Description: The vertical padding of the medium Button. | |||||||||||||||||||||||||
kendo-button-lg-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 large Button. | |||||||||||||||||||||||||
kendo-button-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 Button. | |||||||||||||||||||||||||
kendo-button-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal) | ||||||||||||||||||||||
| Description: The font weight of the Button. | |||||||||||||||||||||||||
kendo-button-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 Button. | |||||||||||||||||||||||||
kendo-button-sm-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 small Button. | |||||||||||||||||||||||||
kendo-button-md-font-size | $kendo-button-font-size | var(--kendo-font-size, inherit) | Default: $kendo-button-font-sizeComputed: var(--kendo-font-size, inherit) | ||||||||||||||||||||||
| Description: The font size of the medium Button. | |||||||||||||||||||||||||
kendo-button-lg-font-size | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) | Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit) | ||||||||||||||||||||||
| Description: The font size of the large Button. | |||||||||||||||||||||||||
kendo-button-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 used along with the $kendo-font-size the. | |||||||||||||||||||||||||
kendo-button-sm-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 used along with the $kendo-font-size the of the small Button. | |||||||||||||||||||||||||
kendo-button-md-line-height | $kendo-button-line-height | var(--kendo-line-height, normal) | Default: $kendo-button-line-heightComputed: var(--kendo-line-height, normal) | ||||||||||||||||||||||
| Description: The line height used along with the $kendo-font-size the of the medium Button. | |||||||||||||||||||||||||
kendo-button-lg-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 used along with the $kendo-font-size the of the large Button. | |||||||||||||||||||||||||
kendo-button-sm-calc-size | calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2) | Default: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) )Computed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2) | ||||||||||||||||||||||
| Description: The calculated height of the Button. | |||||||||||||||||||||||||
kendo-button-inner-calc-size | calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) | calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2) | Default: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) )Computed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2) | ||||||||||||||||||||||
| Description: The calculated inner height of the Button excluding the border width. | |||||||||||||||||||||||||
kendo-button-sizes |
| Computed: (sm: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal))) | |||||||||||||||||||||||
| Description: The sizes map for the Button. | |||||||||||||||||||||||||
kendo-button-theme-colors |
| Computed: ("base": var(--kendo-color-base, #f5f5f5), "primary": var(--kendo-color-primary, #ff6358), "secondary": var(--kendo-color-secondary, #666666), "tertiary": var(--kendo-color-tertiary, #03a9f4), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #3d3d3d), "light": var(--kendo-color-light, #ebebeb), "inverse": var(--kendo-color-dark, #3d3d3d)) | |||||||||||||||||||||||
| Description: The theme colors map for the Button. | |||||||||||||||||||||||||
kendo-button-bg | k-color(base) | var(--kendo-color-base, #f5f5f5) | Default: k-color(base)Computed: var(--kendo-color-base, #f5f5f5) | ||||||||||||||||||||||
| Description: The base background of the Button. | |||||||||||||||||||||||||
kendo-button-text | k-color(on-base) | var(--kendo-color-on-base, #3d3d3d) | Default: k-color(on-base)Computed: var(--kendo-color-on-base, #3d3d3d) | ||||||||||||||||||||||
| Description: The base text color of the Button. | |||||||||||||||||||||||||
kendo-button-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 base border color of the Button. | |||||||||||||||||||||||||
kendo-button-gradient | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base background gradient of the Button. | |||||||||||||||||||||||||
kendo-button-shadow | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base shadow of the Button. | |||||||||||||||||||||||||
kendo-button-hover-bg | k-color(base-hover) | var(--kendo-color-base-hover, #ebebeb) | Default: k-color(base-hover)Computed: var(--kendo-color-base-hover, #ebebeb) | ||||||||||||||||||||||
| Description: The base background of the hovered Button. | |||||||||||||||||||||||||
kendo-button-hover-text | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base text color of the hovered Button. | |||||||||||||||||||||||||
kendo-button-hover-border | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base border color of the hovered Button. | |||||||||||||||||||||||||
kendo-button-hover-gradient | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base background gradient of the hovered Button. | |||||||||||||||||||||||||
kendo-button-hover-shadow | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base shadow of the hovered Button. | |||||||||||||||||||||||||
kendo-button-active-bg | k-color(base-active) | var(--kendo-color-base-active, #d6d6d6) | Default: k-color(base-active)Computed: var(--kendo-color-base-active, #d6d6d6) | ||||||||||||||||||||||
| Description: The base background color of the active Button. | |||||||||||||||||||||||||
kendo-button-active-text | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base text color of the active Button. | |||||||||||||||||||||||||
kendo-button-active-border | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base border color of the active Button. | |||||||||||||||||||||||||
kendo-button-active-gradient | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base background gradient of the active Button. | |||||||||||||||||||||||||
kendo-button-active-shadow | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base shadow of the active Button. | |||||||||||||||||||||||||
kendo-button-selected-bg | k-color(primary) | var(--kendo-color-primary, #ff6358) | Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358) | ||||||||||||||||||||||
| Description: The base background color of the selected Button. | |||||||||||||||||||||||||
kendo-button-selected-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 selected Button. | |||||||||||||||||||||||||
kendo-button-selected-border | $kendo-button-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-button-selected-bgComputed: var(--kendo-color-primary, #ff6358) | ||||||||||||||||||||||
| Description: The border color of the selected Button. | |||||||||||||||||||||||||
kendo-button-selected-gradient | $kendo-button-active-gradient | null | Default: $kendo-button-active-gradientComputed: null | ||||||||||||||||||||||
| Description: The background gradient of the selected Button. | |||||||||||||||||||||||||
kendo-button-selected-shadow | $kendo-button-active-shadow | null | Default: $kendo-button-active-shadowComputed: null | ||||||||||||||||||||||
| Description: The base shadow of the selected Button. | |||||||||||||||||||||||||
kendo-button-focus-shadow | 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent)Computed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | ||||||||||||||||||||||
| Description: The base shadow of the focused Button. | |||||||||||||||||||||||||
kendo-button-disabled-bg | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base background of the disabled Button. | |||||||||||||||||||||||||
kendo-button-disabled-text | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base text color of the disabled Button. | |||||||||||||||||||||||||
kendo-button-disabled-border | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base border color of the disabled Button. | |||||||||||||||||||||||||
kendo-button-disabled-gradient | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base background gradient of the disabled Button. | |||||||||||||||||||||||||
kendo-button-disabled-shadow | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The base shadow of the disabled Button. | |||||||||||||||||||||||||
kendo-button-pulsing-opacity | .4 | 0.4 | Default: .4Computed: 0.4 | ||||||||||||||||||||||
| Description: The opacity of the pulsing animation for the generating Button. | |||||||||||||||||||||||||
kendo-flat-button-hover-opacity | .04 | 0.04 | Default: .04Computed: 0.04 | ||||||||||||||||||||||
| Description: The overlay opacity of the hovered flat Button. Used to create a background for the flat Button. | |||||||||||||||||||||||||
kendo-flat-button-focus-opacity | null | null | Default: nullComputed: null | ||||||||||||||||||||||
| Description: The overlay opacity of the focused flat Button. Used to create a background for the flat Button. | |||||||||||||||||||||||||
kendo-flat-button-active-opacity | .16 | 0.16 | Default: .16Computed: 0.16 | ||||||||||||||||||||||
| Description: The overlay opacity of the active flat Button. Used to create background for the flat Button. | |||||||||||||||||||||||||
kendo-flat-button-selected-opacity | .2 | 0.2 | Default: .2Computed: 0.2 | ||||||||||||||||||||||
| Description: The overlay opacity of the selected flat Button. Used to create background for the flat Button. | |||||||||||||||||||||||||
kendo-flat-button-focus-ring-opacity | .12 | 0.12 | Default: .12Computed: 0.12 | ||||||||||||||||||||||
| Description: The opacity of the flat Button focus ring. Used to create a border for the flat Button. | |||||||||||||||||||||||||
kendo-button-transition | color .2s ease-in-out | (color 0.2s ease-in-out) | Default: color .2s ease-in-outComputed: (color 0.2s ease-in-out) | ||||||||||||||||||||||
| Description: The color transition of the flat Button. | |||||||||||||||||||||||||
Card Variables
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-card-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 Card. | |||
kendo-card-padding-y | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the Card. | |||
kendo-card-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the Card. | |||
kendo-card-border-radius | k-border-radius(lg) | var(--kendo-border-radius-lg, 0.375rem) | Default: k-border-radius(lg)Computed: var(--kendo-border-radius-lg, 0.375rem) |
| Description: The border radius of the Card. | |||
kendo-card-inner-border-radius | calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) | calc(var(--kendo-border-radius-lg, 0.375rem) - 1px) | Default: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )Computed: calc(var(--kendo-border-radius-lg, 0.375rem) - 1px) |
| Description: The inner border radius of the Card. | |||
kendo-card-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 Card. | |||
kendo-card-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 Card. | |||
kendo-card-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 Card. | |||
kendo-card-deck-gap | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem) |
| Description: The spacing between the Cards in the Card deck. | |||
kendo-card-bg | k-color(surface-alt) | var(--kendo-color-surface-alt, #ffffff) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the Card. | |||
kendo-card-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 Card. | |||
kendo-card-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 Card. | |||
kendo-card-shadow | null | null | Default: nullComputed: null |
| Description: The shadow of the Card. | |||
kendo-card-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused Card. | |||
kendo-card-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the focused Card. | |||
kendo-card-focus-border | rgba( black, .15 ) | rgba(0, 0, 0, 0.15) | Default: rgba( black, .15 )Computed: rgba(0, 0, 0, 0.15) |
| Description: The border color of the focused Card. | |||
kendo-card-focus-shadow | null | null | Default: nullComputed: null |
| Description: The shadow of the focused Card. | |||
kendo-card-header-padding-x | $kendo-card-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-card-padding-xComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the Card header. | |||
kendo-card-header-padding-y | $kendo-card-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-card-padding-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the Card header. | |||
kendo-card-header-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The bottom border width of the Card header. | |||
kendo-card-header-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Card header. | |||
kendo-card-header-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 Card header. | |||
kendo-card-header-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 Card header. | |||
kendo-card-body-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 Card body. | |||
kendo-card-body-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 Card body. | |||
kendo-card-footer-padding-x | $kendo-card-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-card-padding-xComputed: var(--kendo-spacing-4, 1rem) |
| Description: The horizontal padding of the Card footer. | |||
kendo-card-footer-padding-y | $kendo-card-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-card-padding-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the Card footer. | |||
kendo-card-footer-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The top border width of the Card footer. | |||
kendo-card-footer-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Card footer. | |||
kendo-card-footer-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 Card footer. | |||
kendo-card-footer-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 Card footer. | |||
kendo-card-title-margin-bottom | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The bottom margin of the Card title. | |||
kendo-card-title-font-size | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) | Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit) |
| Description: The font size of the Card title. | |||
kendo-card-title-font-family | null | null | Default: nullComputed: null |
| Description: The font family of the Card title. | |||
kendo-card-title-line-height | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) | Default: var( --kendo-line-height-sm, normal )Computed: var(--kendo-line-height-sm, normal) |
| Description: The line height of the Card title. | |||
kendo-card-title-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal) |
| Description: The font weight of the Card title. | |||
kendo-card-title-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the Card title. | |||
kendo-card-subtitle-margin-bottom | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The bottom margin of the Card subtitle. | |||
kendo-card-subtitle-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 Card subtitle. | |||
kendo-card-subtitle-font-family | null | null | Default: nullComputed: null |
| Description: The font family of the Card subtitle. | |||
kendo-card-subtitle-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 Card subtitle. | |||
kendo-card-subtitle-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal) |
| Description: The font weight of the Card subtitle. | |||
kendo-card-subtitle-letter-spacing | null | null | Default: nullComputed: null |
| Description: The letter spacing of the Card subtitle. | |||
kendo-card-subtitle-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 Card subtitle. | |||
kendo-card-img-max-width | 100px | 100px | Default: 100pxComputed: 100px |
| Description: The maximum width of the Card image. | |||
kendo-card-avatar-size | 45px | 45px | Default: 45pxComputed: 45px |
| Description: The size of the Avatar in the Card. | |||
kendo-card-avatar-spacing | $kendo-card-header-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-card-header-padding-xComputed: var(--kendo-spacing-4, 1rem) |
| Description: The spacing between the Avatar and the text in the Card. | |||
kendo-card-actions-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 Card actions. | |||
kendo-card-actions-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 Card actions. | |||
kendo-card-actions-border-width | 0 | 0 | Default: 0Computed: 0 |
| Description: The top border width of the Card actions. | |||
kendo-card-actions-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 Card actions. | |||
kendo-card-deck-scroll-button-radius | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The border radius of the scroll button in the Card deck. | |||
kendo-card-deck-scroll-button-offset | -$kendo-button-border-width | -1px | Default: -$kendo-button-border-widthComputed: -1px |
| Description: The border radius of the scroll button in the Card deck. | |||
kendo-card-callout-width | 20px | 20px | Default: 20pxComputed: 20px |
| Description: The width of the Card callout. | |||
kendo-card-callout-height | 20px | 20px | Default: 20pxComputed: 20px |
| Description: The height of the Card callout. | |||
Popup Variables
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-popup-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: Width of the border around the popup. | |||
kendo-popup-border-radius | null | null | Default: nullComputed: null |
| Description: Border radius of the popup. | |||
kendo-popup-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: Font size of the popup. | |||
kendo-popup-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: Line height of the popup. | |||
kendo-popup-content-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: Horizontal padding of the popup content. | |||
kendo-popup-content-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: Vertical padding of the popup content. | |||
kendo-popup-bg | k-color(surface-alt) | var(--kendo-color-surface-alt, #ffffff) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt, #ffffff) |
| Description: Background color of the popup. | |||
kendo-popup-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: Text color of the popup. | |||
kendo-popup-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: Border color of the popup. | |||
kendo-popup-shadow | k-elevation(4) | var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(4)Computed: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: Box shadow of the popup. | |||
