flyonui/components/input/object.js

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

export default {".input":{"display":"inline-flex","width":"100%","flex-shrink":1,"cursor":"text","appearance":"none","background-color":"var(--color-base-100)","padding-inline":"calc(0.25rem * 3)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","--tw-font-weight":"var(--font-weight-normal)","font-weight":"var(--font-weight-normal)","color":"var(--color-base-content)","&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"},"&:focus-visible":{"--tw-outline-style":"none","outline-style":"none"},"border":"var(--border) solid #0000","height":"var(--size)","touch-action":"manipulation","border-start-start-radius":"var(--join-ss, var(--radius-field))","border-start-end-radius":"var(--join-se, var(--radius-field))","border-end-start-radius":"var(--join-es, var(--radius-field))","border-end-end-radius":"var(--join-ee, var(--radius-field))","border-color":"var(--input-color)","--input-color":"color-mix(in oklab, var(--color-base-content) 40%, #0000)","--size":"calc(var(--size-field, 0.25rem) * 9.5)","&:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within)":{"border-color":"color-mix(in oklab, var(--color-base-content) 60%, transparent)"},"&:where(input)":{"display":"inline-block"},":where(input:not([type=\"checkbox\"]):not([type=\"radio\"]))":{"display":"inline-block","height":"100%","width":"100%","appearance":"none","background-color":"transparent","border":"none","&:focus, &:focus-within, &:focus-visible":{"--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)","isolation":"isolate"},"&:has(> input[disabled]), &:is(:disabled, [disabled])":{"cursor":"not-allowed","border-style":"var(--tw-border-style)","border-width":"0px","background-color":"color-mix(in oklab, var(--color-neutral) 10%, transparent)","color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)","box-shadow":"none"},"&:has(> input[disabled]) > input[disabled]":{"cursor":"not-allowed"},"&::-webkit-date-and-time-value":{"text-align":"inherit"},"&[type=\"number\"]":{"&::-webkit-inner-spin-button":{"margin-block":"calc(0.25rem * -3)","margin-inline-end":"calc(0.25rem * -3)"}}},".input:has(> .input-floating) input":{"&::placeholder":{"color":"transparent"},"&:focus":{"&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"}}},".input-floating-label":{"pointer-events":"none","position":"absolute","inset-inline-start":"calc(0.25rem * 0)","margin-inline-start":"calc(0.25rem * 3)","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":"calc(var(--size-field, 0.25rem) * 9.5 / 2)","translate":"0 -50%","transition":"top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out"},".input-floating":{"position":"relative","display":"block","width":"100%",".input":{"&::placeholder":{"color":"transparent"},"&:focus":{"&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"}},"&:has(> input[disabled]), &:is(:disabled, [disabled])":{"border-style":"var(--tw-border-style)","border-width":"1px","background-color":"transparent","opacity":"50%","& ~ .input-floating-label":{"color":"color-mix(in oklab, var(--color-base-content) 30%, transparent)"}}},"&:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus)":{".input-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(.input:focus)":{".input-floating-label":{"--input-color":"var(--color-primary)","color":"var(--input-color)"}},"&:has(.input-xs) .input-floating-label":{"margin-inline-start":"calc(0.25rem * 2.5)","font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))","top":"calc(var(--size-field, 0.25rem) * 6 / 2)"},"&:has(.input-sm) .input-floating-label":{"margin-inline-start":"calc(0.25rem * 2.5)","font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))","top":"calc(var(--size-field, 0.25rem) * 7.5 / 2)"},"&:has(.input-md) .input-floating-label":{"margin-inline-start":"calc(0.25rem * 3)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","top":"calc(var(--size-field, 0.25rem) * 9.5 / 2)"},"&:has(.input-lg) .input-floating-label":{"margin-inline-start":"calc(0.25rem * 4)","font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))","top":"calc(var(--size-field, 0.25rem) * 11.5 / 2)"},"&:has(.input-xl) .input-floating-label":{"margin-inline-start":"calc(0.25rem * 4.5)","font-size":"var(--text-xl)","line-height":"var(--tw-leading, var(--text-xl--line-height))","top":"calc(var(--size-field, 0.25rem) * 14 / 2)"}},".input-xs":{"padding-inline":"calc(0.25rem * 2.5)","font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))","--size":"calc(var(--size-field, 0.25rem) * 6)","&[type=\"number\"]":{"&::-webkit-inner-spin-button":{"margin-block":"calc(0.25rem * -1)","margin-inline-end":"calc(0.25rem * -3)"}}},".input-sm":{"padding-inline":"calc(0.25rem * 2.5)","font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))","--size":"calc(var(--size-field, 0.25rem) * 7.5)","&[type=\"number\"]":{"&::-webkit-inner-spin-button":{"margin-block":"calc(0.25rem * -2)","margin-inline-end":"calc(0.25rem * -3)"}}},".input-md":{"padding-inline":"calc(0.25rem * 3)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","--size":"calc(var(--size-field, 0.25rem) * 9.5)","&[type=\"number\"]":{"&::-webkit-inner-spin-button":{"margin-block":"calc(0.25rem * -3)","margin-inline-end":"calc(0.25rem * -3)"}}},".input-lg":{"padding-inline":"calc(0.25rem * 4)","font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))","--size":"calc(var(--size-field, 0.25rem) * 11.5)","&[type=\"number\"]":{"&::-webkit-inner-spin-button":{"margin-block":"calc(0.25rem * -3)","margin-inline-end":"calc(0.25rem * -3)"}}},".input-xl":{"padding-inline":"calc(0.25rem * 4.5)","font-size":"var(--text-xl)","line-height":"var(--tw-leading, var(--text-xl--line-height))","--size":"calc(var(--size-field, 0.25rem) * 14)","&[type=\"number\"]":{"&::-webkit-inner-spin-button":{"margin-block":"calc(0.25rem * -4)","margin-inline-end":"calc(0.25rem * -3)"}}},".no-focus":{"&:focus, &:focus-within":{"--tw-border-style":"none","border-style":"none","--tw-shadow":"0 0 #0000","box-shadow":"var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)","--tw-outline-style":"none","outline-style":"none"}}};