frutjam
Version:
A utility-first CSS UI Library for Tailwind CSS
2 lines (1 loc) • 4.78 kB
JavaScript
export default {".tabs-vertical":{"--tabs--display":"grid","display":"grid","grid-template-columns":"max-content 1fr","align-items":"start","&::after":{"display":"none"},"&::before":{"content":"\"\"","grid-column":"2","grid-row":"1 / span 999","align-self":"stretch","border-inline-start":"1px solid var(--color-base-soft)","pointer-events":"none"},"& > .tab":{"grid-column":"1","width":"100%","justify-content":"flex-start","border-inline-end":"2px solid transparent","margin-inline-end":"-2px","border-radius":"0"},"& > .tab-active,\n & > .tab:checked":{"border-inline-end-color":"var(--color-tab-active)","position":"relative","z-index":1},"& > .tab-content":{"grid-column":"2","grid-row":"1 / span 999"}},".tab-disabled":{"cursor":"not-allowed","opacity":0.4,"pointer-events":"none"},".tabs-lifted":{"align-items":"flex-end","gap":"0","&::after":{"content":"\"\"","width":"100%","order":1,"border-block-start":"1px solid var(--color-base-soft)"},"& > .tab":{"border":"1px solid transparent","border-block-end":"none","&:not(.btn)":{"border-radius":"calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) 0 0"}},"& > .tab-active,\n & > .tab:checked":{"color":"var(--color-on-base)","border-color":"var(--color-base-soft)","background-color":"var(--color-base)","position":"relative","z-index":1,"margin-block-end":"-1px"},"& > .tab-content":{"border":"1px solid var(--color-base-soft)","margin-block-start":"-1px","border-radius":"0 calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) calc(var(--border-radius) * 2)"}},".tabs-bottom":{"align-items":"flex-start","&::after":{"display":"none"},"&::before":{"content":"\"\"","width":"100%","order":-1,"border-block-end":"1px solid var(--color-base-soft)"},"& > .tab":{"border-block-start":"2px solid transparent","margin-block-start":"-2px"},"& > .tab-active,\n & > .tab:checked":{"border-block-start-color":"var(--color-tab-active)","position":"relative","z-index":1},"& > .tab-content":{"order":-2}},".tabs-underline":{"align-items":"flex-end","&::after":{"content":"\"\"","width":"100%","order":1,"border-block-start":"1px solid var(--color-base-soft)"},"& > .tab":{"border-block-end":"2px solid transparent","margin-block-end":"-2px"},"& > .tab-active,\n & > .tab:checked":{"border-block-end-color":"var(--color-tab-active)","position":"relative","z-index":1}},".tab-content":{"display":"none","width":"100%","order":9999,".tab:checked + &":{"display":"block"},".tab-active + &":{"display":"block"}},".tab":{"--color-tab":"currentColor","--color-tab-active":"var(--color-primary)","--tab--padding-inline":"1rem","--tab--padding-block":"0.625rem","--tab--font-size":"0.875rem","-webkit-appearance":"none","-moz-appearance":"none","appearance":"none","border":"none","text-decoration":"none","display":"inline-flex","align-items":"center","justify-content":"center","gap":"0.5rem","padding-inline":"var(--tab--padding-inline)","padding-block":"var(--tab--padding-block)","font-size":"var(--tab--font-size)","font-weight":500,"cursor":"pointer","transition":"color 200ms ease-in-out, border-color 200ms ease-in-out","white-space":"nowrap","-webkit-user-select":"none","-moz-user-select":"none","user-select":"none","background":"transparent","&::after":{"content":"attr(aria-label)"},"&:not(.btn)":{"border-radius":"0","color":"var(--color-tab)","@supports (color: color-mix(in lab, red, red))":{"color":"color-mix(in oklab, var(--color-tab) 60%, transparent)"},"&:hover":{"@media (hover: hover)":{"color":"var(--color-tab)"}},"&:checked":{"color":"var(--color-tab-active)"}}},".tabs":{"display":"var(--tabs--display, flex)","flex-wrap":"wrap","gap":"0"},".tabs-box":{"background-color":"var(--color-base-soft)","border-radius":"calc(var(--border-radius) * 2)","padding":"0.25rem","gap":"0.25rem","align-items":"center","&::after":{"display":"none"},"& > .tab":{"border-radius":"calc(var(--border-radius) * 1.5)"},"& > .tab-active,\n & > .tab:checked":{"background-color":"var(--color-base)","color":"var(--color-on-base)","box-shadow":"0 1px 3px color-mix(in oklab, oklch(0% 0 0) 10%, transparent)"}},".tabs-end":{"justify-content":"flex-end"},".tab-active":{"color":"var(--color-tab-active)"},".tabs-lg":{"& > .tab":{"--tab--padding-inline":"1.25rem","--tab--padding-block":"0.75rem","--tab--font-size":"1rem"}},".tabs-md":{"& > .tab":{"--tab--padding-inline":"1rem","--tab--padding-block":"0.625rem","--tab--font-size":"0.875rem"}},".tabs-sm":{"& > .tab":{"--tab--padding-inline":"0.75rem","--tab--padding-block":"0.5rem","--tab--font-size":"0.8125rem"}},".tabs-xl":{"& > .tab":{"--tab--padding-inline":"1.5rem","--tab--padding-block":"0.875rem","--tab--font-size":"1.125rem"}},".tabs-xs":{"& > .tab":{"--tab--padding-inline":"0.625rem","--tab--padding-block":"0.375rem","--tab--font-size":"0.75rem"}}};