@hummingbirdui/hummingbird/src/components/floating-labels.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility form-floating {
  @layer base {
    @apply relative;
    > .form-label {
      --input-label-font-weight: 400;
      --input-label-font-size: var(--text-sm);

      @apply absolute top-0
      inline-block 
      transition-transform duration-200
      cursor-text
      leading-[1.5]
      translate-x-[16px] translate-y-[13px] scale-[1];
    }

    /* Form control */
    .form-control-fill {
      --floating-label-padding-top: --spacing(5.25);
      --floating-label-padding-bottom: --spacing(1);

      @apply pt-[var(--floating-label-padding-top)] pb-[var(--floating-label-padding-bottom)];

      &::placeholder {
        @apply text-transparent;
      }

      &.form-control-sm {
        --floating-label-padding-top: --spacing(4.25);
        --floating-label-padding-bottom: --spacing(0.5);
        --input-line-height: 1.5;
      }
      &.form-control-lg {
        --floating-label-padding-top: --spacing(5.5);
        --floating-label-padding-bottom: --spacing(1.5);
      }
      &:focus-within,
      &:focus,
      &:not(:placeholder-shown) {
        & ~ .form-label {
          @apply translate-x-[10px] translate-y-[4px] scale-[0.85];
        }
        &.form-control-sm ~ .form-label {
          @apply translate-x-[6px] translate-y-[2px] scale-[0.85];
        }
        &.form-control-lg ~ .form-label {
          @apply translate-x-[10px] translate-y-[4px] scale-[0.75];
        }
      }
    }

    .form-control {
      --input-padding-y: --spacing(2.25);
      --input-line-height: 2;

      & ~ .form-label {
        --input-label-bg: var(--background-color-default);
        @apply -ms-2 px-2;
      }

      &::placeholder {
        @apply text-transparent;
      }
      &:focus-within,
      &:focus,
      &:not(:placeholder-shown) {
        & ~ .form-label {
          @apply translate-x-[10px] translate-y-[-10px] scale-[0.85];
        }
        &.form-control-sm ~ .form-label {
          @apply translate-x-[7px] translate-y-[-10px] scale-[0.85];
        }
        &.form-control-lg ~ .form-label {
          @apply translate-x-[10px] translate-y-[-12px] scale-[0.75];
        }
      }
    }

    .form-control-sm {
      --input-padding-y: --spacing(1.5);
      & ~ .form-label {
        @apply translate-x-[12px] translate-y-[10px] scale-[1];
      }
    }
    .form-control-lg {
      --input-padding-y: --spacing(2.5);
      --input-padding-x: --spacing(5);
      & ~ .form-label {
        @apply text-base translate-x-[20px] translate-y-[14px] scale-[1];
      }
    }

    /* Form select */
    .form-select-fill {
      --floating-label-padding-top: --spacing(5.25);
      --floating-label-padding-bottom: --spacing(1);

      @apply pt-[var(--floating-label-padding-top)] pb-[var(--floating-label-padding-bottom)];

      &::placeholder {
        @apply text-transparent;
      }

      &.form-select-sm {
        --floating-label-padding-top: --spacing(4.25);
        --floating-label-padding-bottom: --spacing(0.5);
        --form-select-line-height: 1.5;
      }
      &.form-select-lg {
        --floating-label-padding-top: --spacing(5.5);
        --floating-label-padding-bottom: --spacing(1.5);
      }
      &:focus-within,
      &:focus,
      &:not(:placeholder-shown) {
        & + .form-label {
          @apply translate-x-[12px] translate-y-[4px] scale-[0.85];
        }
        &.form-select-sm + .form-label {
          @apply translate-x-[6px] translate-y-[2px] scale-[0.85];
        }
        &.form-select-lg + .form-label {
          @apply translate-x-[9px] translate-y-[4px] scale-[0.75];
        }
      }
    }

    .form-select {
      --form-select-padding-y: --spacing(2.25);
      --form-select-line-height: 2;

      & ~ .form-label {
        --input-label-bg: var(--background-color-default);
        @apply -ms-2 px-2;
      }

      &::placeholder {
        @apply text-transparent;
      }

      &:focus-within,
      &:focus,
      &:not(:placeholder-shown) {
        & + .form-label {
          @apply translate-x-[12px] translate-y-[-10px] scale-[0.85];
        }
        &.form-select-sm + .form-label {
          @apply translate-x-[6px] translate-y-[-10px] scale-[0.85];
        }
        &.form-select-lg + .form-label {
          @apply translate-x-[9px] translate-y-[-12px] scale-[0.75];
        }
      }
    }

    .form-select-sm {
      --form-select-padding-y: --spacing(1.5);
      & + .form-label {
        @apply translate-x-[12px] translate-y-[10px] scale-[1];
      }
    }
    .form-select-lg {
      --form-select-padding-y: --spacing(2.5);
      --form-select-padding-x: --spacing(5);
      & + .form-label {
        @apply text-base translate-x-[20px] translate-y-[14px] scale-[1];
      }
    }
  }
}

@utility input-group-icon {
  @layer base {
    .form-control-icon-start {
      ~ .form-floating {
        .form-control-fill {
          ~ .form-label {
            @apply translate-x-[43px] translate-y-[13px] scale-[1];
          }
          &.form-control-sm ~ .form-label {
            @apply translate-x-[34px] translate-y-[10px] scale-[1];
          }
          &.form-control-lg ~ .form-label {
            @apply translate-x-[52px] translate-y-[15px] scale-[1];
          }
          &:focus-within,
          &:focus,
          &:not(:placeholder-shown) {
            ~ .form-label {
              @apply translate-x-[37px] translate-y-[4px] scale-[0.85];
            }
            &.form-control-sm ~ .form-label {
              @apply translate-x-[28px] translate-y-[2px] scale-[0.85];
            }
            &.form-control-lg ~ .form-label {
              @apply translate-x-[38px] translate-y-[4px] scale-[0.75];
            }
          }
        }
      }
    }
  }
}