123456789101112131415161718192021222324 |
- import type { Classes } from '#shared/form/plugins/utils.ts'
- import { clean, extendClasses } from '#shared/form/plugins/utils.ts'
- export const addAbsoluteFloatingLabel = (classes: Classes = {}) => {
- return extendClasses(classes, {
- outer: clean(`absolute-floating-input relative flex flex-col px-2`),
- wrapper: 'relative flex-1',
- inner: 'flex ltr:pr-2 rtl:pl-2',
- block: 'flex',
-
- input: clean(
- `formkit-populated:pt-8 formkit-label-hidden:pt-2 h-14 w-full border-none bg-transparent text-base placeholder:text-transparent focus-within:pt-8 focus:outline-none`,
- ),
- label: clean(
- `pointer-events-none absolute top-0 h-14 origin-left px-2 py-4 text-base transition-all duration-100 ease-in-out ltr:left-0 rtl:right-0`,
- ),
- })
- }
|