Customizing Floating-label
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-floating-label-scale | 1 | ||
Description
The transformation scale of the Floating Label. | |||
| $kendo-floating-label-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Floating Label. | |||
| $kendo-floating-label-max-width | 90% | ||
Description
The maximum width of the Floating Label. | |||
| $kendo-floating-label-font-weight | var( --kendo-font-weight-bold, inherit ) | ||
Description
The font weight of the Floating Label. | |||
| $kendo-floating-label-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Floating Label. | |||
| $kendo-floating-label-height | calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) | ||
Description
The height of the Floating Label. | |||
| $kendo-floating-label-offset-x | calc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} ) | ||
Description
The horizontal offset of the Floating Label. | |||
| $kendo-floating-label-offset-y | calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} ) | ||
Description
The vertical offset of the Floating Label. | |||
| $kendo-floating-label-focus-scale | 1 | ||
Description
The transformation scale of the focused Floating Label. | |||
| $kendo-floating-label-focus-offset-x | 0 | ||
Description
The horizontal offset of the focused Floating Label. | |||
| $kendo-floating-label-focus-offset-y | 0 | ||
Description
The vertical offset of the focused Floating Label. | |||
| $kendo-floating-label-transition | .2s ease-out | ||
Description
The transition of the Floating Label. | |||
| $kendo-floating-label-bg | inherit | ||
Description
The background color of the Floating Label. | |||
| $kendo-floating-label-text | inherit | ||
Description
The text color of the Floating Label. | |||
| $kendo-floating-label-focus-bg | inherit | ||
Description
The background color of the focused Floating Label. | |||
| $kendo-floating-label-focus-text | inherit | ||
Description
The text color of the focused Floating Label. | |||
| $kendo-floating-label-invalid-text | var( --kendo-invalid-text, #{$kendo-invalid-text} ) | ||
Description
The invalid text color of the Floating Label. | |||
