New to Kendo UI for Vue? Start a free 30-day trial
Customizing Floating-label
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-floating-label-scale | Number | 1 | 1 |
Description
The transformation scale of the Floating Label. | |||
| $kendo-floating-label-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Floating Label. | |||
| $kendo-floating-label-max-width | Number | 90% | 90% |
Description
The maximum width of the Floating Label. | |||
| $kendo-floating-label-font-weight | String | var( --kendo-font-weight-bold, inherit ) | var(--kendo-font-weight-bold, inherit) |
Description
The font weight of the Floating Label. | |||
| $kendo-floating-label-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Floating Label. | |||
| $kendo-floating-label-height | Calculation | calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) | calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) |
Description
The height of the Floating Label. | |||
| $kendo-floating-label-offset-x | Calculation | calc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} ) | calc(var(--kendo-spacing-2, 0.5rem) + 1px) |
Description
The horizontal offset of the Floating Label. | |||
| $kendo-floating-label-offset-y | Calculation | calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} ) | calc(calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1\.5, 0.375rem)) |
Description
The vertical offset of the Floating Label. | |||
| $kendo-floating-label-focus-scale | Number | 1 | 1 |
Description
The transformation scale of the focused Floating Label. | |||
| $kendo-floating-label-focus-offset-x | Number | 0 | 0 |
Description
The horizontal offset of the focused Floating Label. | |||
| $kendo-floating-label-focus-offset-y | Number | 0 | 0 |
Description
The vertical offset of the focused Floating Label. | |||
| $kendo-floating-label-transition | List | .2s ease-out | 0.2s ease-out |
Description
The transition of the Floating Label. | |||
| $kendo-floating-label-bg | String | inherit | inherit |
Description
The background color of the Floating Label. | |||
| $kendo-floating-label-text | String | inherit | inherit |
Description
The text color of the Floating Label. | |||
| $kendo-floating-label-focus-bg | String | inherit | inherit |
Description
The background color of the focused Floating Label. | |||
| $kendo-floating-label-focus-text | String | inherit | inherit |
Description
The text color of the focused Floating Label. | |||
| $kendo-floating-label-invalid-text | String | var( --kendo-invalid-text, #{$kendo-invalid-text} ) | var(--kendo-invalid-text, var(--kendo-color-error-on-surface, #a4262c)) |
Description
The invalid text color of the Floating Label. | |||
