flyonui/components/tab/object.js

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

export default {".tabs-lifted > .tab:focus-visible":{"border-end-end-radius":"0","border-end-start-radius":"0"},".tabs":{"display":"flex","--tabs-height":"auto","--tabs-direction":"row","height":"var(--tabs-height)","flex-direction":"var(--tabs-direction)"},".tab":{"position":"relative","display":"inline-flex","cursor":"pointer","appearance":"none","align-items":"center","justify-content":"center","text-align":"center","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)","--size":"calc(var(--size-field, 0.25rem) * 9.5)","--tab-p":"1rem","--tab-bg":"var(--color-base-100)","--tab-border-color":"color-mix(in oklab, var(--color-base-content), #0000 90%)","padding-inline":"var(--tab-p, 1rem)","&:focus, &:focus-visible":{"--tw-outline-style":"none","outline-style":"none"},"&[disabled]":{"pointer-events":"none","opacity":"40%"},"@media (hover: hover)":{"&[disabled]:hover":{"pointer-events":"none","opacity":"40%"}}},".tab-active:not([disabled])":{"border-color":"var(--color-primary)","color":"var(--color-primary)"},".tabs-bordered > .tab":{"border-color":"color-mix(in oklab, var(--color-base-content) 10%, transparent)","@media (hover:hover)":[{"&:hover":{"@media (hover: hover)":{"border-color":"color-mix(in oklab, var(--color-primary) 30%, transparent)"}}},{"&:hover":{"@media (hover: hover)":{"color":"var(--color-primary)"}}}],"border-style":"solid","border-bottom-width":"calc(var(--border, 1px) + 1px)"},".tabs-bordered.tabs-vertical":{"--tabs-direction":"column","& > .tab":{"width":"100%","justify-content":"flex-start","border-bottom-style":"var(--tw-border-style)","border-bottom-width":"0px","border-inline-end-width":"calc(var(--border, 1px) + 1px)"}},".tabs-lifted > .tab":{"@media (hover:hover)":[{"&:hover":{"@media (hover: hover)":{"border-color":"color-mix(in oklab, var(--color-primary) 30%, transparent)"}}},{"&:hover":{"@media (hover: hover)":{"color":"var(--color-primary)"}}}],"border":"var(--tab-border, 1px) solid transparent","border-width":"0 0 var(--tab-border, 1px) 0","border-radius":"var(--radius-field, 0.375rem)","border-bottom-color":"var(--tab-border-color)","padding-inline-start":"var(--tab-p, 1rem)","padding-inline-end":"var(--tab-p, 1rem)","padding-top":"var(--tab-border, 1px)"},".tabs-lifted > .tab.tab-active:not([disabled])":{"background-color":"var(--tab-bg)","border-width":"var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px)","border-color":"var(--tab-border-color)","border-end-start-radius":"0","border-end-end-radius":"0","padding-inline-start":"calc(var(--tab-p, 1rem) - var(--tab-border, 1px))","padding-inline-end":"calc(var(--tab-p, 1rem) - var(--tab-border, 1px))","padding-bottom":"var(--tab-border, 1px)","padding-top":"0"},".tabs-lifted > .tab.tab-active:not([disabled]):before":{"content":"\"\"","display":"block","position":"absolute","z-index":1,"width":"calc(100% + var(--radius-field, 0.375rem) * 2)","height":"var(--radius-field, 0.375rem)","bottom":"0","background-size":"var(--radius-field, 0.375rem)","background-repeat":"no-repeat","background-position":"top left, top right","--tab-grad":"calc(69% - var(--tab-border, 1px))","--radius-start":"radial-gradient(\n    circle at top left,\n    transparent var(--tab-grad),\n    var(--tab-border-color) calc(var(--tab-grad) + 0.25px),\n    var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),\n    var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)\n  )","--radius-end":"radial-gradient(\n    circle at top right,\n    transparent var(--tab-grad),\n    var(--tab-border-color) calc(var(--tab-grad) + 0.25px),\n    var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),\n    var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)\n  )","background-image":"var(--radius-start), var(--radius-end)"},".tabs-lifted > .tab.tab-active:not([disabled]):first-child:before":{"background-image":"var(--radius-end)","background-position":"top right"},".tabs-lifted > .tab.tab-active:not([disabled]):last-child:before":{"background-image":"var(--radius-start)","background-position":"top left"},"[dir=\"rtl\"] .tabs-lifted > .tab.tab-active:not([disabled]):first-child:before":{"background-image":"var(--radius-start)","background-position":"top left"},"[dir=\"rtl\"] .tabs-lifted > .tab.tab-active:not([disabled]):last-child:before":{"background-image":"var(--radius-end)","background-position":"top right"},".tabs-lifted > .tab-active:not([disabled]) + .tabs-lifted .tab-active:not([disabled])":{"&:before":{"background-image":"var(--radius-end)","background-position":"top right"}},".tabs-lifted":{"&:has(.tab-content[class^=\"rounded-\"]) .tab:first-child:not(.tab-active), &:has(.tab-content[class*=\" rounded-\"]) .tab:first-child:not(.tab-active)":{"border-bottom-color":"transparent"}},".tabs-xl :where(.tab)":{"font-size":"var(--text-xl)","line-height":"var(--tw-leading, var(--text-xl--line-height))","--size":"calc(var(--size-field, 0.25rem) * 14)","--tab-p":"1.5rem"},".tabs-lg :where(.tab)":{"font-size":"var(--text-lg)","line-height":"var(--tw-leading, var(--text-lg--line-height))","--size":"calc(var(--size-field, 0.25rem) * 11.5)","--tab-p":"1.25rem"},".tabs-md :where(.tab)":{"font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","--size":"calc(var(--size-field, 0.25rem) * 9.5)","--tab-p":"1rem"},".tabs-sm :where(.tab)":{"font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))","--size":"calc(var(--size-field, 0.25rem) * 7.5)","--tab-p":"0.75rem"},".tabs-xs :where(.tab)":{"font-size":"var(--text-sm)","line-height":"var(--tw-leading, var(--text-sm--line-height))","--size":"calc(var(--size-field, 0.25rem) * 6)","--tab-p":"0.5rem"}};