Sass Variables
The Telerik and Kendo UI FloatingLabel enables you to configure and customize its appearance through the available Sass variables.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-floating-label-scale | 1 | 1 | Default: 1Computed: 1 |
| Description: The transformation scale of the Floating Label. | |||
kendo-floating-label-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 Floating Label. | |||
kendo-floating-label-max-width | 90% | 90% | Default: 90%Computed: 90% |
| Description: The maximum width of the Floating Label. | |||
kendo-floating-label-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 Floating Label. | |||
kendo-floating-label-height | calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) | calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) | Default: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )Computed: calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) |
| Description: The height of the Floating Label. | |||
kendo-floating-label-offset-x | calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) | calc(var(--kendo-spacing-2, 0.5rem) + 1px) | Default: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )Computed: calc(var(--kendo-spacing-2, 0.5rem) + 1px) |
| Description: The horizontal offset of the Floating Label. | |||
kendo-floating-label-offset-y | calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) | calc(calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1, 0.25rem)) | Default: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )Computed: calc(calc(var(--kendo-line-height, normal) * var(--kendo-font-size, inherit)) + 1px + var(--kendo-spacing-1, 0.25rem)) |
| Description: The vertical offset of the Floating Label. | |||
kendo-floating-label-focus-scale | 1 | 1 | Default: 1Computed: 1 |
| Description: The transformation scale of the focused Floating Label. | |||
kendo-floating-label-focus-offset-x | 0 | 0 | Default: 0Computed: 0 |
| Description: The horizontal offset of the focused Floating Label. | |||
kendo-floating-label-focus-offset-y | 0 | 0 | Default: 0Computed: 0 |
| Description: The vertical offset of the focused Floating Label. | |||
kendo-floating-label-transition | .2s ease-out | (0.2s ease-out) | Default: .2s ease-outComputed: (0.2s ease-out) |
| Description: The transition of the Floating Label. | |||
kendo-floating-label-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Floating Label. | |||
kendo-floating-label-text | null | null | Default: nullComputed: null |
| Description: The text color of the Floating Label. | |||
kendo-floating-label-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused Floating Label. | |||
kendo-floating-label-focus-text | null | null | Default: nullComputed: null |
| Description: The text color of the focused Floating Label. | |||
