Learn how to customize the Vue Floating labels component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
On this page
SASS variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: .625rem !default;
$form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-label-disabled-color: $gray-600 !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;