frutjam
Version:
A utility-first CSS UI Library for Tailwind CSS
2 lines (1 loc) • 2.41 kB
JavaScript
export default {".drawer":{"border":"none","pointer-events":"none","visibility":"hidden","position":"fixed","inset":"0rem","margin":"0rem","padding":"0rem","display":"grid","width":"100%","height":"100%","max-width":"none","max-height":"none","place-items":"start","color":"inherit","z-index":999,"overflow":"hidden","overscroll-behavior":"contain","&:not(drawer:not([open]):not(.drawer-open)),\n &::backdrop":{"@starting-style":{"visibility":"hidden"},"opacity":1,"background-color":"light-dark(black, black)","@supports (color: color-mix(in lab, red, red))":{"background-color":"light-dark(color-mix(in oklch, black 10%, var(--color-base-600) 40%), color-mix(in oklch, black 10%, var(--color-base-400) 40%))"}},"&[open],\n &.drawer-open":{"@starting-style":{"visibility":"hidden"},"pointer-events":"auto","visibility":"visible",".drawer-content":{"translate":"0 0","scale":"1"}}},".drawer-backdrop":{"display":"grid","grid-column-start":"1","grid-row-start":"1","align-self":"stretch","justify-self":"stretch","color":"transparent","z-index":-1,":where(&) :where(button)":{"cursor":"pointer"}},".drawer-content":{"--radius-drawer":"calc(var(--border-radius) * 2)","border-radius":"0","translate":"-100% 0","scale":"1","grid-column-start":"1","grid-row-start":"1","height":"100vh","max-height":"none","padding":"0.25rem","overflow-y":"auto","overscroll-behavior":"contain","flex":"1 1 auto","@media (forced-colors: active)":{"outline-style":"solid","outline-width":"1px"},"background-color":"var(--color-base)","transition":"translate 0.3s ease-out,\n visibility 0.3s allow-discrete,\n background-color 0.3s ease-out,\n opacity 0.1s ease-out"},".drawer-bottom":{"place-items":"end",":where(.drawer-content)":{"height":"auto","width":"100%","max-height":"80vh","margin-block-start":"calc(var(--spacing)*24)","translate":"0 100%","border-start-end-radius":"var(--radius-drawer)","border-start-start-radius":"var(--radius-drawer)"}},".drawer-top":{"place-items":"start",":where(.drawer-content)":{"height":"auto","width":"100%","max-height":"80vh","margin-block-end":"calc(var(--spacing)*24)","translate":"0 -100%"}},".drawer-end":{"place-items":"end",":where(.drawer-content)":{"height":"100vh","max-height":"none","width":"auto","translate":"100% 0"}},".drawer-start":{"place-items":"start",":where(.drawer-content)":{"height":"100vh","width":"auto","max-height":"none","translate":"-100% 0"}}};