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: 1px Computed: 1px |
Description: The border width of the Input components. | |||
kendo-input-border-radius | null | null | Default: null Computed: 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-x 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-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-y 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-size Computed: 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-height Computed: 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-bg Computed: 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-text Computed: 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-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: null Computed: null |
Description: The shadow of the Input components. | |||
kendo-input-hover-bg | null | null | Default: null Computed: null |
Description: The background color of the hovered Input components. | |||
kendo-input-hover-text | null | null | Default: null Computed: 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: null Computed: null |
Description: The shadow of the hovered Input components. | |||
kendo-input-focus-bg | null | null | Default: null Computed: null |
Description: The background color of the focused Input components. | |||
kendo-input-focus-text | null | null | Default: null Computed: 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-border Computed: 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: null Computed: null |
Description: The background color of the selected Input components. | |||
kendo-input-selected-text | null | null | Default: null Computed: null |
Description: The text color of the selected Input components. | |||
kendo-input-disabled-bg | null | null | Default: null Computed: null |
Description: The background color of the disabled Input components. | |||
kendo-input-disabled-text | null | null | Default: null Computed: null |
Description: The text color of the disabled Input components. | |||
kendo-input-disabled-border | null | null | Default: null Computed: null |
Description: The border color of the disabled Input components. | |||
kendo-input-disabled-gradient | null | null | Default: null Computed: null |
Description: The gradient of the disabled Input components. | |||
kendo-input-disabled-shadow | null | null | Default: null Computed: null |
Description: The shadow of the disabled Input components. | |||
kendo-input-outline-bg | null | null | Default: null Computed: 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-text Computed: 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: null Computed: null |
Description: The background color of the outline hovered Input components. | |||
kendo-input-outline-hover-text | null | null | Default: null Computed: 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: null Computed: null |
Description: The background color of the outline focused Input components. | |||
kendo-input-outline-focus-text | null | null | Default: null Computed: null |
Description: The text color of the outline focused Input components. | |||
kendo-input-outline-focus-border | null | null | Default: null Computed: 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-shadow Computed: (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: null Computed: 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-text Computed: 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-border Computed: 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: null Computed: null |
Description: The background color of the flat hovered Input components. | |||
kendo-input-flat-hover-text | null | null | Default: null Computed: 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-border Computed: 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: null Computed: null |
Description: The background color of the flat focused Input components. | |||
kendo-input-flat-focus-text | null | null | Default: null Computed: null |
Description: The text color of the flat focused Input components. | |||
kendo-input-flat-focus-border | null | null | Default: null Computed: 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-shadow Computed: (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-text Computed: var(--kendo-color-subtle, #666666) |
Description: The text color of the Input placeholder. | |||
kendo-input-placeholder-opacity | 1 | 1 | Default: 1 Computed: 1 |
Description: The opacity of the Input placeholder. | |||
kendo-input-clear-value-text | null | null | Default: null Computed: null |
Description: The color of the Input clear value icon. | |||
kendo-input-clear-value-opacity | .5 | 0.5 | Default: .5 Computed: 0.5 |
Description: The opacity of the Input clear value icon. | |||
kendo-input-clear-value-hover-text | null | null | Default: null Computed: null |
Description: The color of the hovered Input clear value icon. | |||
kendo-input-clear-value-hover-opacity | 1 | 1 | Default: 1 Computed: 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-y Computed: 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-size Computed: 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: 1px Computed: 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-size Computed: 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: null Computed: 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-border Computed: 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: .5 Computed: 0.5 |
Description: The opacity of the Input separator. | |||
kendo-input-prefix-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-text Computed: 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-text Computed: 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-border Computed: 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-shadow Computed: null |
Description: The shadow of the invalid Input components. |