Styling

Most of Floatl’s functionality is based on toggling CSS classes at specific moments. The toggling of the classes is what makes the label appear, disappear and float to its new position.

A good implementation of the Floating Label pattern relies on the styling of the app. This includes using the correct fonts, letter spacing, responsive styling etc. Instead of relying on CSS overrides or bulky JS theming implementation, Floatl simply expects you to bring your own styling.

The following SCSS styling is used for the example page (view the compiled CSS). Copy and modify this to your liking.

$font-size: 16px;
$vpadding: 7px;
$hpadding: 11px;

$label-font-size: 11px;

$duration: 200ms;
$border-color: hsl(0, 0%, 90%);
$text-color: hsl(0, 0%, 40%);
$background-color: white;
$active-color: hsl(209, 82%, 54%);

.floatl {
  position: relative;
}

.floatl--focused .floatl__label {
  color: $active-color;
}

.floatl--active {
  .floatl__label {
    visibility: visible;
    opacity: 1;
    top: 1px;
  }

  .floatl__input {
    padding: ($vpadding * 3) $hpadding $vpadding;
  }

  &.floatl--multiline .floatl__label {
    background: linear-gradient(
      to bottom,
      rgba(white, 0.95) 0%,
      rgba(white, 0.95) 80%,
      rgba(white, 0) 100%
    );
    background-color: $background-color;
  }
}

.floatl__label {
  transition: all $duration ease;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 3px;
  left: $hpadding - 3px + 1px;
  display: inline-block;
  padding: 6px 3px 3px;
  font-weight: bold;
  font-size: $label-font-size;
  line-height: 1em;
  color: $text-color;
}

.floatl__input {
  transition: all $duration ease;
  padding: ($vpadding * 2) $hpadding;
  background-color: hsl(0, 0%, 98%);
  font-size: $font-size;
  border: 1px solid $border-color;
  border-radius: 5px;
  appearance: none;
  outline: none;

  &::selection {
    background-color: $active-color;
    color: white;
  }

  &:focus {
    border-color: $active-color;
  }
}

input.floatl__input {
  height: 47px;
}