flyonui/components/button/object.js

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

export default {".btn":{"display":"inline-flex","flex-shrink":0,"cursor":"pointer","flex-wrap":"nowrap","align-items":"center","justify-content":"center","gap":"calc(0.25rem * 2)","text-align":"center","vertical-align":"middle","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-decoration-line":"none","webkit-user-select":"none","user-select":"none","@media (prefers-reduced-motion: reduce)":{"transition-property":"none"},"padding-inline":"var(--btn-p)","color":"var(--btn-fg)","height":"var(--size)","outline-color":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, var(--color-base-100))","transition-property":"color, background-color, border-color, box-shadow","transition-timing-function":"cubic-bezier(0, 0, 0.96, 1.03)","transition-duration":"0.25s","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-color":"var(--btn-bg)","background-size":"auto, calc(var(--noise) * 100%)","background-image":"none, var(--btn-noise)","border":"var(--border) solid var(--btn-border)","box-shadow":"0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 8%)) inset, var(--btn-shadow)","--size":"calc(var(--size-field, 0.25rem) * 9.5)","--btn-bg":"var(--btn-color, var(--color-neutral))","--btn-fg":"var(--color-neutral-content)","--btn-p":"1rem","--btn-border":"color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%))","--btn-shadow":"0px 1px 3px 0px color-mix(in oklab, var(--color-base-300) 40%, #0000),\n    0px 1px 2px -1px color-mix(in oklab, var(--color-base-300) 40%, #0000)","--btn-noise":"var(--fx-noise)","@media (hover: hover)":{"&:hover":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000)"}},"&:active:hover:not(.btn-active), &:active:focus:not(.btn-active)":{"--tw-scale-x":"95%","--tw-scale-y":"95%","--tw-scale-z":"95%","scale":"var(--tw-scale-x) var(--tw-scale-y)","transition-property":"transform, translate, scale, rotate","transition-timing-function":["var(--tw-ease, var(--default-transition-timing-function))","ease-out"],"transition-duration":["var(--tw-duration, var(--default-transition-duration))","300ms"],"--tw-duration":"300ms"},"&:focus-visible":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)), #000 10%)","outline-width":"2px","outline-style":"solid"},"&:is(:disabled, [disabled], .btn-disabled)":{"pointer-events":"none","opacity":"50%","--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)"},"&:is(input[type=\"checkbox\"], input[type=\"radio\"])":{"appearance":"none","&::after":{"content":"attr(aria-label)"},"&:checked":{"background":"var(--color-primary)","color":"var(--color-primary-content)","outline-color":"var(--color-primary)","--btn-shadow":"0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)","isolation":"isolate"}}},".btn-active":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000)","isolation":"isolate"},".btn-primary":{"--btn-color":"var(--color-primary)","--btn-fg":"var(--color-primary-content)"},".btn-secondary":{"--btn-color":"var(--color-secondary)","--btn-fg":"var(--color-secondary-content)"},".btn-accent":{"--btn-color":"var(--color-accent)","--btn-fg":"var(--color-accent-content)"},".btn-neutral":{"--btn-color":"var(--color-neutral)","--btn-fg":"var(--color-neutral-content)"},".btn-info":{"--btn-color":"var(--color-info)","--btn-fg":"var(--color-info-content)"},".btn-success":{"--btn-color":"var(--color-success)","--btn-fg":"var(--color-success-content)"},".btn-warning":{"--btn-color":"var(--color-warning)","--btn-fg":"var(--color-warning-content)"},".btn-error":{"--btn-color":"var(--color-error)","--btn-fg":"var(--color-error-content)"},".btn-soft":{"--btn-shadow":"\"\"","color":"var(--btn-color, var(--color-neutral))","--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, var(--color-base-100))","border-width":"0","--btn-noise":"none","&:focus-visible":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100))"},"@media (hover: hover)":{"&:hover":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100))"}}},".btn-soft.btn-active":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100))"},".btn-outline":{"--btn-shadow":"\"\"","--btn-bg":"\"\"","color":"var(--btn-color, var(--color-neutral))","--btn-border":"var(--btn-color, var(--color-neutral))","--btn-noise":"none","outline-color":"var(--btn-color, var(--color-neutral))","@media (hover: hover)":{"&:hover":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000)"}},"&:focus-visible":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000)","outline-width":"1px"}},".btn-outline.btn-active":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000)"},".btn-text":{"--btn-shadow":"\"\"","color":"var(--btn-color, var(--color-neutral))","--btn-bg":"\"\"","--btn-border":"\"\"","--btn-noise":"none","border-width":"0","outline-color":"var(--btn-color, var(--color-neutral))","@media (hover: hover)":{"&:hover":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000)"}},"&:focus-visible":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000)"}},".btn-text.btn-active":{"--btn-bg":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000)"},".btn-gradient":{"border-width":"2px","transition-property":"background-position, box-shadow","transition-timing-function":"ease-in-out","transition-duration":"0.4s","background-color":"transparent","--btn-shadow":"0px 1px 3px 0px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000),\n    0px 1px 2px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000)","--btn-border":"var(--btn-color, var(--color-neutral))","--dark-shade":"color-mix(in oklab, var(--btn-color, var(--color-neutral)) 80%, black)","background-size":"200% auto","background-image":"linear-gradient( 102deg, var(--btn-color, var(--color-neutral)) 0%, var(--dark-shade) 51%, var(--btn-color, var(--color-neutral)) 100% )","@media (hover: hover)":{"&:hover":{"--btn-shadow":"0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000),\n        0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000)","background-position":"99% center"}},"&:focus-visible":{"--btn-shadow":"0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000),\n      0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000)","background-position":"99% center"}},".btn-gradient.btn-active":{"--btn-shadow":"0px 4px 6px -1px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000),\n    0px 2px 4px -2px color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, #0000)","background-position":"99% center"},".btn-xs":{"font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))","--btn-p":"0.5rem","--size":"calc(var(--size-field, 0.25rem) * 6)"},".btn-sm":{"font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))","--btn-p":"0.75rem","--size":"calc(var(--size-field, 0.25rem) * 7.5)"},".btn-md":{"font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","--btn-p":"1rem","--size":"calc(var(--size-field, 0.25rem) * 9.5)"},".btn-lg":{"font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))","--btn-p":"1.25rem","--size":"calc(var(--size-field, 0.25rem) * 11.5)"},".btn-xl":{"font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))","--btn-p":"1.5rem","--size":"calc(var(--size-field, 0.25rem) * 14)"},".btn-square":{"padding-inline":"calc(0.25rem * 0)","width":"var(--size)","height":"var(--size)"},".btn-circle":{"border-radius":"calc(infinity * 1px)","padding-inline":"calc(0.25rem * 0)","width":"var(--size)","height":"var(--size)"},".btn-wide":{"width":"100%","max-width":"calc(0.25rem * 64)"},".btn-block":{"width":"100%"}};