daisyui/components/drawer.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}:where(.drawer-side){overflow:hidden}.drawer-side{pointer-events:none;visibility:hidden;inset-inline-start:0;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.drawer-side>*{grid-row-start:1;grid-column-start:1}.drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}.drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4));&>:not(.drawer-overlay){will-change:auto;transform:none}}:where(:root:has(.drawer-toggle:checked)){--page-scroll-lock: }.drawer-open>.drawer-toggle:checked~.drawer-side{scrollbar-color:revert-layer}:root:has(.drawer-open>.drawer-toggle:checked){--page-scroll-lock:revert-layer}}@layer daisyui.l1.l2{:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}.drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.drawer-end{grid-auto-columns:auto max-content}.drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}.drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.drawer-open>.drawer-side{overflow-y:auto}.drawer-open>.drawer-toggle{display:none;&~.drawer-side{pointer-events:auto;visibility:visible;overscroll-behavior:auto;opacity:1;width:auto;display:block;position:sticky;&>.drawer-overlay{cursor:default;background-color:#0000}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}@layer daisyui.l1{.drawer-open>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.sm\:drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}:where(.drawer-side){overflow:hidden}.sm\:drawer-side{pointer-events:none;visibility:hidden;inset-inline-start:0;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.sm\:drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.sm\:drawer-side>*{grid-row-start:1;grid-column-start:1}.sm\:drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}.sm\:drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4));&>:not(.drawer-overlay){will-change:auto;transform:none}}:where(:root:has(.drawer-toggle:checked)){--page-scroll-lock: }.sm\:drawer-open>.drawer-toggle:checked~.drawer-side{scrollbar-color:revert-layer}:root:has(.drawer-open>.drawer-toggle:checked){--page-scroll-lock:revert-layer}}@layer daisyui.l1.l2{:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}.sm\:drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.sm\:drawer-end{grid-auto-columns:auto max-content}.sm\:drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.sm\:drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.sm\:drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}.sm\:drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.sm\:drawer-open>.drawer-side{overflow-y:auto}.sm\:drawer-open>.drawer-toggle{display:none;&~.drawer-side{pointer-events:auto;visibility:visible;overscroll-behavior:auto;opacity:1;width:auto;display:block;position:sticky;&>.drawer-overlay{cursor:default;background-color:#0000}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}@layer daisyui.l1{.sm\:drawer-open>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.md\:drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}:where(.drawer-side){overflow:hidden}.md\:drawer-side{pointer-events:none;visibility:hidden;inset-inline-start:0;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.md\:drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.md\:drawer-side>*{grid-row-start:1;grid-column-start:1}.md\:drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}.md\:drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4));&>:not(.drawer-overlay){will-change:auto;transform:none}}:where(:root:has(.drawer-toggle:checked)){--page-scroll-lock: }.md\:drawer-open>.drawer-toggle:checked~.drawer-side{scrollbar-color:revert-layer}:root:has(.drawer-open>.drawer-toggle:checked){--page-scroll-lock:revert-layer}}@layer daisyui.l1.l2{:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}.md\:drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.md\:drawer-end{grid-auto-columns:auto max-content}.md\:drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.md\:drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.md\:drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}.md\:drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.md\:drawer-open>.drawer-side{overflow-y:auto}.md\:drawer-open>.drawer-toggle{display:none;&~.drawer-side{pointer-events:auto;visibility:visible;overscroll-behavior:auto;opacity:1;width:auto;display:block;position:sticky;&>.drawer-overlay{cursor:default;background-color:#0000}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}@layer daisyui.l1{.md\:drawer-open>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.lg\:drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}:where(.drawer-side){overflow:hidden}.lg\:drawer-side{pointer-events:none;visibility:hidden;inset-inline-start:0;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.lg\:drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.lg\:drawer-side>*{grid-row-start:1;grid-column-start:1}.lg\:drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}.lg\:drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4));&>:not(.drawer-overlay){will-change:auto;transform:none}}:where(:root:has(.drawer-toggle:checked)){--page-scroll-lock: }.lg\:drawer-open>.drawer-toggle:checked~.drawer-side{scrollbar-color:revert-layer}:root:has(.drawer-open>.drawer-toggle:checked){--page-scroll-lock:revert-layer}}@layer daisyui.l1.l2{:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}.lg\:drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.lg\:drawer-end{grid-auto-columns:auto max-content}.lg\:drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.lg\:drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.lg\:drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}.lg\:drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.lg\:drawer-open>.drawer-side{overflow-y:auto}.lg\:drawer-open>.drawer-toggle{display:none;&~.drawer-side{pointer-events:auto;visibility:visible;overscroll-behavior:auto;opacity:1;width:auto;display:block;position:sticky;&>.drawer-overlay{cursor:default;background-color:#0000}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}@layer daisyui.l1{.lg\:drawer-open>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.xl\:drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}:where(.drawer-side){overflow:hidden}.xl\:drawer-side{pointer-events:none;visibility:hidden;inset-inline-start:0;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.xl\:drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.xl\:drawer-side>*{grid-row-start:1;grid-column-start:1}.xl\:drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}.xl\:drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4));&>:not(.drawer-overlay){will-change:auto;transform:none}}:where(:root:has(.drawer-toggle:checked)){--page-scroll-lock: }.xl\:drawer-open>.drawer-toggle:checked~.drawer-side{scrollbar-color:revert-layer}:root:has(.drawer-open>.drawer-toggle:checked){--page-scroll-lock:revert-layer}}@layer daisyui.l1.l2{:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}.xl\:drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.xl\:drawer-end{grid-auto-columns:auto max-content}.xl\:drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.xl\:drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.xl\:drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}.xl\:drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.xl\:drawer-open>.drawer-side{overflow-y:auto}.xl\:drawer-open>.drawer-toggle{display:none;&~.drawer-side{pointer-events:auto;visibility:visible;overscroll-behavior:auto;opacity:1;width:auto;display:block;position:sticky;&>.drawer-overlay{cursor:default;background-color:#0000}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}@layer daisyui.l1{.xl\:drawer-open>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.\32 xl\:drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}:where(.drawer-side){overflow:hidden}.\32 xl\:drawer-side{pointer-events:none;visibility:hidden;inset-inline-start:0;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.\32 xl\:drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.\32 xl\:drawer-side>*{grid-row-start:1;grid-column-start:1}.\32 xl\:drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}.\32 xl\:drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4));&>:not(.drawer-overlay){will-change:auto;transform:none}}:where(:root:has(.drawer-toggle:checked)){--page-scroll-lock: }.\32 xl\:drawer-open>.drawer-toggle:checked~.drawer-side{scrollbar-color:revert-layer}:root:has(.drawer-open>.drawer-toggle:checked){--page-scroll-lock:revert-layer}}@layer daisyui.l1.l2{:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}.\32 xl\:drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.\32 xl\:drawer-end{grid-auto-columns:auto max-content}.\32 xl\:drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.\32 xl\:drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.\32 xl\:drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}.\32 xl\:drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.\32 xl\:drawer-open>.drawer-side{overflow-y:auto}.\32 xl\:drawer-open>.drawer-toggle{display:none;&~.drawer-side{pointer-events:auto;visibility:visible;overscroll-behavior:auto;opacity:1;width:auto;display:block;position:sticky;&>.drawer-overlay{cursor:default;background-color:#0000}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}@layer daisyui.l1{.\32 xl\:drawer-open>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}}