welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
2 lines (1 loc) • 1.4 kB
CSS
@layer components{._root_13hug_2{display:grid;grid-template-areas:"label" "input";width:100%;height:fit-content}._root_13hug_2:has(._label_13hug_8):has(._hint_13hug_8){grid-template-areas:"label" "input" "hint"}._root_13hug_2:not(:has(._label_13hug_8)):has(._hint_13hug_8){grid-template-areas:"input" "hint"}._root_13hug_2:not(._inline_13hug_14) ._hint_13hug_8{margin-top:var(--field-gap-assistive)}._root_13hug_2:not(._inline_13hug_14) ._label_13hug_8{margin-bottom:var(--field-gap-label)}._root_13hug_2 .field-input{align-self:center;grid-area:input}._root_13hug_2 .field-input.date-picker-wrapper{justify-self:start}._inline_13hug_14{grid-template-areas:"input label";grid-template-columns:min-content 1fr;height:fit-content;grid-row-gap:var(--field-gap-assistive);grid-column-gap:var(--field-gap-label)}._inline_13hug_14:has(._label_13hug_8):has(._hint_13hug_8){grid-template-areas:"input label" ". hint"}._inline_13hug_14:not(:has(._label_13hug_8)):has(._hint_13hug_8){grid-template-areas:"input ." ". hint"}._label_13hug_8{grid-area:label}._hint_13hug_8{grid-area:hint;display:flex;gap:var(--field-gap-label)}._hint-max-length_13hug_48{margin-left:auto}._visuallyHidden_13hug_51{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}}