Sass Variables
The Telerik and Kendo UI TextBox enables you to configure and customize its appearance through the Sass variables of the Input components.
All Input components share common Sass variables. Customizing the Sass variables in the table below will affect all Input components, not only the TextBox.
| 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-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 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 | $kendo-input-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-input-padding-xComputed: 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-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 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 | $kendo-input-padding-y | var(--kendo-spacing-1, 0.25rem) | Default: $kendo-input-padding-yComputed: 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-sizes | (
sm: (
padding-x: $kendo-input-sm-padding-x,
padding-y: $kendo-input-sm-padding-y,
font-size: $kendo-input-sm-font-size,
line-height: $kendo-input-sm-line-height,
button-padding-x: $kendo-input-sm-padding-y,
button-padding-y: $kendo-input-sm-padding-y
),
md: (
padding-x: $kendo-input-md-padding-x,
padding-y: $kendo-input-md-padding-y,
font-size: $kendo-input-md-font-size,
line-height: $kendo-input-md-line-height,
button-padding-x: $kendo-input-md-padding-y,
button-padding-y: $kendo-input-md-padding-y
),
lg: (
padding-x: $kendo-input-lg-padding-x,
padding-y: $kendo-input-lg-padding-y,
font-size: $kendo-input-lg-font-size,
line-height: $kendo-input-lg-line-height,
button-padding-x: $kendo-input-lg-padding-y,
button-padding-y: $kendo-input-lg-padding-y
)
) | (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))) | Default: (
sm: (
padding-x: $kendo-input-sm-padding-x,
padding-y: $kendo-input-sm-padding-y,
font-size: $kendo-input-sm-font-size,
line-height: $kendo-input-sm-line-height,
button-padding-x: $kendo-input-sm-padding-y,
button-padding-y: $kendo-input-sm-padding-y
),
md: (
padding-x: $kendo-input-md-padding-x,
padding-y: $kendo-input-md-padding-y,
font-size: $kendo-input-md-font-size,
line-height: $kendo-input-md-line-height,
button-padding-x: $kendo-input-md-padding-y,
button-padding-y: $kendo-input-md-padding-y
),
lg: (
padding-x: $kendo-input-lg-padding-x,
padding-y: $kendo-input-lg-padding-y,
font-size: $kendo-input-lg-font-size,
line-height: $kendo-input-lg-line-height,
button-padding-x: $kendo-input-lg-padding-y,
button-padding-y: $kendo-input-lg-padding-y
)
)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 | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the Input components. | |||
kendo-input-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Input components. | |||
kendo-input-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: 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 | if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) | var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) | Default: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 ))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 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 )) | 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent) | Default: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 ))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-selected-bg | null | null | Default: nullComputed: null |
| Description: The background color of the selected Input components. | |||
kendo-input-selected-text | null | null | Default: nullComputed: null |
| Description: The text color of the selected 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 | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5)) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5))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 | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8)) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 80%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8))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 | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: 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-values-margin-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 margin of the clear value icon. | |||
kendo-input-values-margin-x | $kendo-input-values-margin-y | var(--kendo-spacing-0\.5, 0.125rem) | Default: $kendo-input-values-margin-yComputed: var(--kendo-spacing-0\.5, 0.125rem) |
| Description: The horizontal margin of the 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-separator-opacity | .5 | 0.5 | Default: .5Computed: 0.5 |
| Description: The opacity of the Input separator. | |||
kendo-input-prefix-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the Input prefix. | |||
kendo-input-suffix-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the Input suffix. | |||
kendo-input-invalid-border | $kendo-invalid-border | var(--kendo-color-error, #f31700) | Default: $kendo-invalid-borderComputed: var(--kendo-color-error, #f31700) |
| Description: The border color of the invalid Input components. | |||
kendo-input-invalid-shadow | $kendo-invalid-shadow | null | Default: $kendo-invalid-shadowComputed: null |
| Description: The shadow of the invalid Input components. | |||
