frutjam
Version:
A utility-first CSS UI Library for Tailwind CSS
2 lines (1 loc) • 2.13 kB
JavaScript
export default {".header-fixed":{"position":"fixed","inset-inline":"0"},".header":{"--header-bg":"var(--color-base)","--header-border-color":"var(--color-base-soft)","--header-shadow":"none","--header-blur":"0px","--header-height":"3.5rem","--header-padding-block":"0.5rem","position":"relative","inset-block-start":"0","z-index":999,"width":"100%","height":"var(--header-height)","background-color":"var(--header-bg)","border-block-end":"1px solid var(--header-border-color)","box-shadow":"var(--header-shadow)","backdrop-filter":"blur(var(--header-blur))","-webkit-backdrop-filter":"blur(var(--header-blur))","transition":"background-color 200ms ease,\n box-shadow 200ms ease,\n border-color 200ms ease"},".header-sticky":{"position":"sticky"},".header-center":{"grid-column":"2","display":"flex","align-items":"center","justify-content":"center","gap":"0.75rem"},".header-end":{"grid-column":"3","display":"flex","align-items":"center","justify-content":"flex-end","gap":"0.75rem"},".header-start":{"grid-column":"1","display":"flex","align-items":"center","gap":"0.75rem"},".header-content":{"display":"grid","grid-template-columns":"1fr auto 1fr","align-items":"center","gap":"0.75rem","width":"100%","height":"100%","padding-inline":"1rem","padding-block":"var(--header-padding-block, 0.5rem)","margin-inline":"auto","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".header-solid":{"--header-bg":"var(--color-base)","--header-border-color":"var(--color-base-soft)","--header-shadow":"0 1px 8px oklch(0% 0 0 / 8%)"},".header-blur":{"--header-blur":"12px","--header-bg":"var(--color-base)","@supports (color: color-mix(in lab, red, red))":{"--header-bg":"color-mix(in oklch, var(--color-base) 80%, transparent)"}},".header-lg":{"--header-height":"4.5rem","--header-padding-block":"0.75rem"},".header-shadow":{"--header-shadow":"0 1px 8px oklch(0% 0 0 / 8%)","--header-border-color":"transparent"},".header-sm":{"--header-height":"2.75rem","--header-padding-block":"0.375rem"},".header-transparent":{"--header-bg":"transparent","--header-border-color":"transparent"}};