frutjam/dist/components/drawer.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.drawer{border:none;pointer-events:none;visibility:hidden;position:fixed;inset:0;margin:0;padding:0;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;&::backdrop,&:not(drawer:not([open]):not(.drawer-open)){@starting-style{visibility:hidden}opacity:1;background-color:light-dark(#000,#000);@supports (color:color-mix(in lab,red,red)){background-color:light-dark(color-mix(in oklch,#000 10%,var(--color-base-600) 40%),color-mix(in oklch,#000 10%,var(--color-base-400) 40%))}}&.drawer-open,&[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:.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 .3s ease-out,visibility allow-discrete .3s,background-color .3s ease-out,opacity .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}}