flyonui/components/textarea/object.js

The easiest, free and open-source Tailwind CSS component library with semantic classes.

export default {".textarea":{"display":"inline-flex","min-height":"calc(0.25rem * 20)","width":"100%","flex-shrink":1,"appearance":"none","border-radius":"var(--radius-field)","background-color":"var(--color-base-100)","padding-inline":"calc(0.25rem * 4)","padding-block":"calc(0.25rem * 2)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","color":"var(--color-base-content)","&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"},"&:hover":{"@media (hover: hover)":{"border-color":"color-mix(in oklab, var(--color-base-content) 60%, transparent)"}},"&:focus-visible":{"--tw-outline-style":"none","outline-style":"none"},"border":"var(--border) solid #0000","border-color":"var(--input-color)","touch-action":"manipulation","--input-color":"color-mix(in oklab, var(--color-base-content) 40%, #0000)",":where(textarea)":{"appearance":"none","background-color":"transparent","border":"none","&:focus, &:focus-within":{"--tw-outline-style":"none","outline-style":"none"}},"&:focus, &:focus-within":{"--tw-shadow":"0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05))","box-shadow":"var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)","--input-color":"var(--color-primary)","--tw-shadow-color":"color-mix(in oklab, var(--input-color) 30%, #0000)","outline":"1px solid var(--input-color)","border-color":"var(--input-color)","isolation":"isolate"},"&:has(> textarea[disabled]), &:is(:disabled, [disabled])":{"cursor":"not-allowed","border-color":"var(--color-base-200)","background-color":"var(--color-base-200)","color":"color-mix(in oklab, var(--color-base-content) 40%, transparent)","&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 20%, transparent)"}},"&:has(> textarea[disabled]) > textarea[disabled]":{"cursor":"not-allowed"}},".textarea:has(> textarea)":{"padding":"calc(0.25rem * 0)","textarea":{"height":"auto","min-height":"calc(0.25rem * 20)","width":"100%","&:first-child":{"padding-block":"calc(0.25rem * 2)","padding-inline-start":"calc(0.25rem * 4)"},"&:nth-child(2)":{"padding-block":"calc(0.25rem * 2)"},"&:last-child":{"padding-block":"calc(0.25rem * 2)","padding-inline-end":"calc(0.25rem * 4)"}}},".textarea:has(> .textarea-floating)":{"padding":"calc(0.25rem * 0)",":where(.textarea-floating:first-child) > textarea":{"padding-block":"calc(0.25rem * 2)","padding-inline-start":"calc(0.25rem * 4)"},":where(.textarea-floating:nth-child(2)) > textarea":{"padding-block":"calc(0.25rem * 2)"},":where(.textarea-floating:last-child) > textarea":{"padding-block":"calc(0.25rem * 2)","padding-inline-end":"calc(0.25rem * 4)"},":where(.textarea-floating:nth-child(2)) .textarea-floating-label, :where(.textarea-floating:last-child) .textarea-floating-label":{"margin-inline-start":"calc(0.25rem * 0)"},"& * > textarea":{"width":"100%","height":"100%","min-height":"calc(0.25rem * 20)"}},".textarea:has(> .textarea-floating) textarea":{"&::placeholder":{"color":"transparent"},"&:focus":{"&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"}}},".textarea-floating-label":{"pointer-events":"none","position":"absolute","inset-inline-start":["calc(0.25rem * 0)","1px"],"margin-inline-start":"calc(0.25rem * 4)","width":"fit-content","overflow":"hidden","background-color":"transparent","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","text-overflow":"ellipsis","color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)","top":"9px","transition":"top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out"},".textarea-floating":{"position":"relative","display":"block","width":"100%",".textarea":{"&::placeholder":{"color":"transparent"},"&:focus":{"&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"}},"field-sizing":"content","&:has(> textarea[disabled]), &:is(:disabled, [disabled])":{"border-style":"var(--tw-border-style)","border-width":"1px","border-color":"color-mix(in oklab, var(--color-base-content) 40%, transparent)","background-color":"transparent","opacity":"50%","&::placeholder":{"color":"transparent"},"& ~ .textarea-floating-label":{"color":"color-mix(in oklab, var(--color-base-content) 30%, transparent)"}}},"&:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus)":{".textarea-floating-label":{"pointer-events":"auto","top":"calc(0.25rem * 0)","background-color":"var(--color-base-100)","padding-inline":"calc(0.25rem * 1)","--tw-font-weight":"var(--font-weight-medium)","font-weight":"var(--font-weight-medium)","color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)","translate":"-12.5% calc(-50% - 0.125em)","scale":"0.75"}},"&:focus-within, &:has(.textarea:focus)":{".textarea-floating-label":{"--input-color":"var(--color-primary)","color":"var(--input-color)"}},"&:has(.textarea-xs) .textarea-floating-label":{"font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))"},"&:has(.textarea-sm) .textarea-floating-label":{"font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))"},"&:has(.textarea-md) .textarea-floating-label":{"font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))"},"&:has(.textarea-lg) .textarea-floating-label":{"font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))"},"&:has(.textarea-xl) .textarea-floating-label":{"font-size":"var(--text-xl)","line-height":"var(--tw-leading, var(--text-xl--line-height))"}},".textarea-xs":{"font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))"},".textarea-sm":{"font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))"},".textarea-md":{"font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))"},".textarea-lg":{"font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))"},".textarea-xl":{"font-size":"var(--text-xl)","line-height":"var(--tw-leading, var(--text-xl--line-height))"}};