daisyui/components/drawer.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.drawer{@layer daisyui.l1.l2.l3{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}.drawer-content{@layer daisyui.l1.l2.l3{grid-row-start:1;grid-column-start:2;min-width:0}}:where(.drawer-side){@layer daisyui.l1.l2.l3{overflow:hidden}}.drawer-side{@layer daisyui.l1.l2.l3{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-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}&>*{grid-row-start:1;grid-column-start:1}&>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}}}.drawer-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed;:where(&: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(&:checked)){--page-scroll-lock: }}@layer daisyui.l1.l2{:where(&:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}&:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}}}.drawer-end{@layer daisyui.l1.l2{grid-auto-columns:auto max-content;&>.drawer-toggle{&~.drawer-content{grid-column-start:1}&~.drawer-side{grid-column-start:2;justify-items:end}&~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}&:checked~.drawer-side>:not(.drawer-overlay){translate:0%}}}}.drawer-open{@layer daisyui.l1.l2.l3{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-scroll-lock:revert-layer}}}@layer daisyui.l1.l2{&>.drawer-side{overflow-y:auto}&>.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-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}@media (width>=640px){.sm\:drawer{@layer daisyui.l1.l2.l3{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}.sm\:drawer-content{@layer daisyui.l1.l2.l3{grid-row-start:1;grid-column-start:2;min-width:0}}:where(.drawer-side){@layer daisyui.l1.l2.l3{overflow:hidden}}.sm\:drawer-side{@layer daisyui.l1.l2.l3{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-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}&>*{grid-row-start:1;grid-column-start:1}&>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}}}.sm\:drawer-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed;:where(&: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(&:checked)){--page-scroll-lock: }}@layer daisyui.l1.l2{:where(&:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}&:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}}}.sm\:drawer-end{@layer daisyui.l1.l2{grid-auto-columns:auto max-content;&>.drawer-toggle{&~.drawer-content{grid-column-start:1}&~.drawer-side{grid-column-start:2;justify-items:end}&~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}&:checked~.drawer-side>:not(.drawer-overlay){translate:0%}}}}.sm\:drawer-open{@layer daisyui.l1.l2.l3{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-scroll-lock:revert-layer}}}@layer daisyui.l1.l2{&>.drawer-side{overflow-y:auto}&>.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-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}}@media (width>=768px){.md\:drawer{@layer daisyui.l1.l2.l3{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}.md\:drawer-content{@layer daisyui.l1.l2.l3{grid-row-start:1;grid-column-start:2;min-width:0}}:where(.drawer-side){@layer daisyui.l1.l2.l3{overflow:hidden}}.md\:drawer-side{@layer daisyui.l1.l2.l3{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-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}&>*{grid-row-start:1;grid-column-start:1}&>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}}}.md\:drawer-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed;:where(&: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(&:checked)){--page-scroll-lock: }}@layer daisyui.l1.l2{:where(&:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}&:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}}}.md\:drawer-end{@layer daisyui.l1.l2{grid-auto-columns:auto max-content;&>.drawer-toggle{&~.drawer-content{grid-column-start:1}&~.drawer-side{grid-column-start:2;justify-items:end}&~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}&:checked~.drawer-side>:not(.drawer-overlay){translate:0%}}}}.md\:drawer-open{@layer daisyui.l1.l2.l3{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-scroll-lock:revert-layer}}}@layer daisyui.l1.l2{&>.drawer-side{overflow-y:auto}&>.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-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}}@media (width>=1024px){.lg\:drawer{@layer daisyui.l1.l2.l3{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}.lg\:drawer-content{@layer daisyui.l1.l2.l3{grid-row-start:1;grid-column-start:2;min-width:0}}:where(.drawer-side){@layer daisyui.l1.l2.l3{overflow:hidden}}.lg\:drawer-side{@layer daisyui.l1.l2.l3{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-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}&>*{grid-row-start:1;grid-column-start:1}&>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}}}.lg\:drawer-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed;:where(&: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(&:checked)){--page-scroll-lock: }}@layer daisyui.l1.l2{:where(&:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}&:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}}}.lg\:drawer-end{@layer daisyui.l1.l2{grid-auto-columns:auto max-content;&>.drawer-toggle{&~.drawer-content{grid-column-start:1}&~.drawer-side{grid-column-start:2;justify-items:end}&~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}&:checked~.drawer-side>:not(.drawer-overlay){translate:0%}}}}.lg\:drawer-open{@layer daisyui.l1.l2.l3{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-scroll-lock:revert-layer}}}@layer daisyui.l1.l2{&>.drawer-side{overflow-y:auto}&>.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-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}}@media (width>=1280px){.xl\:drawer{@layer daisyui.l1.l2.l3{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}.xl\:drawer-content{@layer daisyui.l1.l2.l3{grid-row-start:1;grid-column-start:2;min-width:0}}:where(.drawer-side){@layer daisyui.l1.l2.l3{overflow:hidden}}.xl\:drawer-side{@layer daisyui.l1.l2.l3{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-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}&>*{grid-row-start:1;grid-column-start:1}&>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%;[dir=rtl] &{translate:100%}}}}.xl\:drawer-toggle{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed;:where(&: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(&:checked)){--page-scroll-lock: }}@layer daisyui.l1.l2{:where(&:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}&:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}}}.xl\:drawer-end{@layer daisyui.l1.l2{grid-auto-columns:auto max-content;&>.drawer-toggle{&~.drawer-content{grid-column-start:1}&~.drawer-side{grid-column-start:2;justify-items:end}&~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}&:checked~.drawer-side>:not(.drawer-overlay){translate:0%}}}}.xl\:drawer-open{@layer daisyui.l1.l2.l3{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-scroll-lock:revert-layer}}}@layer daisyui.l1.l2{&>.drawer-side{overflow-y:auto}&>.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-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}}@media (width>=1536px){.\32 xl\:drawer{@layer daisyui.l1.l2.l3{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}.\32 xl\:drawer-content{@layer daisyui.l1.l2.l3{grid-row-start:1;grid-column-start:2;min-width:0}}:where(.drawer-side){@layer daisyui.l1.l2.l3{overflow:hidden}}.\32 xl\:drawer-side{@layer daisyui.l1.l2.l3{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-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}&>*{grid-row-start:1;grid-column-start:1}&>: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{@layer daisyui.l1.l2.l3{appearance:none;opacity:0;width:0;height:0;position:fixed;:where(&: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(&:checked)){--page-scroll-lock: }}@layer daisyui.l1.l2{:where(&:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto;&>:not(.drawer-overlay){translate:0%}}&:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}}}.\32 xl\:drawer-end{@layer daisyui.l1.l2{grid-auto-columns:auto max-content;&>.drawer-toggle{&~.drawer-content{grid-column-start:1}&~.drawer-side{grid-column-start:2;justify-items:end}&~.drawer-side>:not(.drawer-overlay){translate:100%;[dir=rtl] &{translate:-100%}}&:checked~.drawer-side>:not(.drawer-overlay){translate:0%}}}}.\32 xl\:drawer-open{@layer daisyui.l1.l2.l3{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-scroll-lock:revert-layer}}}@layer daisyui.l1.l2{&>.drawer-side{overflow-y:auto}&>.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-toggle~.drawer-side>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}}}}