flyonui/components/select/object.js

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

export default {".select":{"position":"relative","display":"inline-flex","width":"100%","flex-shrink":1,"cursor":"pointer","appearance":"none","background-color":"var(--color-base-100)","padding-inline-start":"calc(0.25rem * 3)","padding-inline-end":"calc(0.25rem * 10)","vertical-align":"middle","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","color":"var(--color-base-content)","webkit-user-select":"none","user-select":"none","height":"var(--size)","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))","background-image":"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>\")","background-size":"1.3em","background-position":"calc(100% - 0.5rem) center","background-repeat":"no-repeat","touch-action":"manipulation","text-overflow":"ellipsis","border":"var(--border) solid #0000","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)"},"[dir=\"rtl\"] &":{"background-position":"calc(0% + 1.3em) center"},"select":{"margin-inline-end":"calc(0.25rem * -10)","height":"100%","width":"calc(100% + 2.75rem)","appearance":"none","padding-inline-start":"calc(0.25rem * 3)","padding-inline-end":"calc(0.25rem * 10)","background-color":"transparent","border-style":"none","&:focus, &:focus-within":{"--tw-outline-style":"none","outline-style":"none"}},"&[multiple]":{"background-image":"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(> select[disabled]), &:is(:disabled, [disabled])":{"cursor":"not-allowed","border-style":"var(--tw-border-style)","border-width":"0px","border-color":"color-mix(in oklab, var(--color-base-content) 10%, transparent)","background-color":"color-mix(in oklab, var(--color-neutral) 10%, transparent)","color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)","&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"}},"&:has(> select[disabled]) > select[disabled]":{"cursor":"not-allowed"}},".input > .select":{"height":"auto","border-style":"var(--tw-border-style)","border-width":"0px","&:focus, &:focus-within":{"--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)","outline-style":"var(--tw-outline-style)","outline-width":"0px"}},".select:has(> .select-floating) select":{"&::placeholder":{"color":"transparent"},"&:focus":{"&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"}}},".select-floating-label":{"position":"absolute","inset-inline-start":"calc(0.25rem * 0)","top":"calc(0.25rem * 0)","margin-inline-start":"calc(0.25rem * 3)","width":"fit-content","overflow":"hidden","background-color":"var(--color-base-100)","padding-inline":"calc(0.25rem * 1)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","--tw-font-weight":"var(--font-weight-medium)","font-weight":"var(--font-weight-medium)","text-overflow":"ellipsis","color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)","scale":"0.75","translate":"-12.5% calc(-50% - 0.125em)"},".select-floating":{"position":"relative","display":"block","width":"100%",".select":{"&::placeholder":{"color":"transparent"},"&:focus":{"&::placeholder":{"color":"color-mix(in oklab, var(--color-base-content) 50%, transparent)"}},"&:has(> select[disabled]), &:is(:disabled, [disabled])":{"border-style":"var(--tw-border-style)","border-width":"1px","background-color":"transparent","opacity":"50%","& ~ .select-floating-label":{"color":"color-mix(in oklab, var(--color-base-content) 30%, transparent)"}}},"&:focus-within, &:has(.select:focus)":{".select-floating-label":{"--input-color":"var(--color-primary)","color":"var(--input-color)"}},"&:has(.select-xs) .select-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))"},"&:has(.select-sm) .select-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))"},"&:has(.select-md) .select-floating-label":{"margin-inline-start":"calc(0.25rem * 3)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))"},"&:has(.select-lg) .select-floating-label":{"margin-inline-start":"calc(0.25rem * 4)","font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))"},"&:has(.select-xl) .select-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))"}},".select-xs":{"--size":"calc(var(--size-field, 0.25rem) * 6)","padding-inline-start":"calc(0.25rem * 2.5)","padding-inline-end":"calc(0.25rem * 8)","font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))","select":{"margin-inline-end":"calc(0.25rem * -8)","padding-inline-start":"calc(0.25rem * 2.5)","padding-inline-end":"calc(0.25rem * 8)"}},".select-sm":{"--size":"calc(var(--size-field, 0.25rem) * 7.5)","padding-inline-start":"calc(0.25rem * 2.5)","padding-inline-end":"calc(0.25rem * 8)","font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))","select":{"margin-inline-end":"calc(0.25rem * -8)","padding-inline-start":"calc(0.25rem * 2.5)","padding-inline-end":"calc(0.25rem * 8)"}},".select-md":{"--size":"calc(var(--size-field, 0.25rem) * 9.5)","padding-inline-start":"calc(0.25rem * 3)","padding-inline-end":"calc(0.25rem * 10)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","select":{"margin-inline-end":"calc(0.25rem * -10)","padding-inline-start":"calc(0.25rem * 3)","padding-inline-end":"calc(0.25rem * 10)"}},".select-lg":{"--size":"calc(var(--size-field, 0.25rem) * 11.5)","padding-inline":"calc(0.25rem * 4)","padding-inline-end":"calc(0.25rem * 10)","font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))","select":{"margin-inline-end":"calc(0.25rem * -10)","padding-inline-start":"calc(0.25rem * 4)","padding-inline-end":"calc(0.25rem * 10)"}},".select-xl":{"--size":"calc(var(--size-field, 0.25rem) * 14)","padding-inline":"calc(0.25rem * 4.5)","padding-inline-end":"calc(0.25rem * 10)","font-size":"var(--text-xl)","line-height":"var(--tw-leading, var(--text-xl--line-height))","select":{"margin-inline-end":"calc(0.25rem * -10)","padding-inline-start":"calc(0.25rem * 4.5)","padding-inline-end":"calc(0.25rem * 10)"}}};