daisyui/components/drawer.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.4.1 - MIT License */ @layer utilities{.drawer{@layer daisyui.component{&{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}}.drawer-content{@layer daisyui.component{&{grid-row-start:1;grid-column-start:2;min-width:0}}}:where(.drawer-side){@layer daisyui.component{&{overflow:hidden}}}.drawer-side{@layer daisyui.component{&{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.component{&{appearance:none;opacity:0;width:0;height:0;position:fixed}}@layer daisyui.modifier.drawer{:where(&:checked~.drawer-side){scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)oklch(0 0 0/calc(var(--page-has-backdrop,0)*.4))}:where(:root:has(&:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll scroll()}}@layer daisyui.modifier{: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.modifier.placement{&{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.modifier.drawer{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-overflow:revert-layer;--page-scroll-gutter:revert-layer;--page-scroll-bg:revert-layer;--page-scroll-transition:revert-layer;--page-has-backdrop:revert-layer;animation:revert-layer;animation-timeline:revert-layer}}}@layer daisyui.modifier{&>.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}&>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}}@media (width>=640px){.sm\:drawer{@layer daisyui.component{&{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}}.sm\:drawer-content{@layer daisyui.component{&{grid-row-start:1;grid-column-start:2;min-width:0}}}:where(.drawer-side){@layer daisyui.component{&{overflow:hidden}}}.sm\:drawer-side{@layer daisyui.component{&{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.component{&{appearance:none;opacity:0;width:0;height:0;position:fixed}}@layer daisyui.modifier.drawer{:where(&:checked~.drawer-side){scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)oklch(0 0 0/calc(var(--page-has-backdrop,0)*.4))}:where(:root:has(&:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll scroll()}}@layer daisyui.modifier{: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.modifier.placement{&{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.modifier.drawer{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-overflow:revert-layer;--page-scroll-gutter:revert-layer;--page-scroll-bg:revert-layer;--page-scroll-transition:revert-layer;--page-has-backdrop:revert-layer;animation:revert-layer;animation-timeline:revert-layer}}}@layer daisyui.modifier{&>.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}&>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}}}@media (width>=768px){.md\:drawer{@layer daisyui.component{&{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}}.md\:drawer-content{@layer daisyui.component{&{grid-row-start:1;grid-column-start:2;min-width:0}}}:where(.drawer-side){@layer daisyui.component{&{overflow:hidden}}}.md\:drawer-side{@layer daisyui.component{&{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.component{&{appearance:none;opacity:0;width:0;height:0;position:fixed}}@layer daisyui.modifier.drawer{:where(&:checked~.drawer-side){scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)oklch(0 0 0/calc(var(--page-has-backdrop,0)*.4))}:where(:root:has(&:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll scroll()}}@layer daisyui.modifier{: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.modifier.placement{&{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.modifier.drawer{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-overflow:revert-layer;--page-scroll-gutter:revert-layer;--page-scroll-bg:revert-layer;--page-scroll-transition:revert-layer;--page-has-backdrop:revert-layer;animation:revert-layer;animation-timeline:revert-layer}}}@layer daisyui.modifier{&>.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}&>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}}}@media (width>=1024px){.lg\:drawer{@layer daisyui.component{&{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}}.lg\:drawer-content{@layer daisyui.component{&{grid-row-start:1;grid-column-start:2;min-width:0}}}:where(.drawer-side){@layer daisyui.component{&{overflow:hidden}}}.lg\:drawer-side{@layer daisyui.component{&{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.component{&{appearance:none;opacity:0;width:0;height:0;position:fixed}}@layer daisyui.modifier.drawer{:where(&:checked~.drawer-side){scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)oklch(0 0 0/calc(var(--page-has-backdrop,0)*.4))}:where(:root:has(&:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll scroll()}}@layer daisyui.modifier{: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.modifier.placement{&{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.modifier.drawer{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-overflow:revert-layer;--page-scroll-gutter:revert-layer;--page-scroll-bg:revert-layer;--page-scroll-transition:revert-layer;--page-has-backdrop:revert-layer;animation:revert-layer;animation-timeline:revert-layer}}}@layer daisyui.modifier{&>.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}&>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}}}@media (width>=1280px){.xl\:drawer{@layer daisyui.component{&{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}}.xl\:drawer-content{@layer daisyui.component{&{grid-row-start:1;grid-column-start:2;min-width:0}}}:where(.drawer-side){@layer daisyui.component{&{overflow:hidden}}}.xl\:drawer-side{@layer daisyui.component{&{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.component{&{appearance:none;opacity:0;width:0;height:0;position:fixed}}@layer daisyui.modifier.drawer{:where(&:checked~.drawer-side){scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)oklch(0 0 0/calc(var(--page-has-backdrop,0)*.4))}:where(:root:has(&:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll scroll()}}@layer daisyui.modifier{: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.modifier.placement{&{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.modifier.drawer{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-overflow:revert-layer;--page-scroll-gutter:revert-layer;--page-scroll-bg:revert-layer;--page-scroll-transition:revert-layer;--page-has-backdrop:revert-layer;animation:revert-layer;animation-timeline:revert-layer}}}@layer daisyui.modifier{&>.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}&>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}}}@media (width>=1536px){.\32 xl\:drawer{@layer daisyui.component{&{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}}}.\32 xl\:drawer-content{@layer daisyui.component{&{grid-row-start:1;grid-column-start:2;min-width:0}}}:where(.drawer-side){@layer daisyui.component{&{overflow:hidden}}}.\32 xl\:drawer-side{@layer daisyui.component{&{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.component{&{appearance:none;opacity:0;width:0;height:0;position:fixed}}@layer daisyui.modifier.drawer{:where(&:checked~.drawer-side){scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)oklch(0 0 0/calc(var(--page-has-backdrop,0)*.4))}:where(:root:has(&:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll scroll()}}@layer daisyui.modifier{: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.modifier.placement{&{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.modifier.drawer{&>.drawer-toggle:checked{&~.drawer-side{scrollbar-color:revert-layer}:root:has(&){--page-overflow:revert-layer;--page-scroll-gutter:revert-layer;--page-scroll-bg:revert-layer;--page-scroll-transition:revert-layer;--page-has-backdrop:revert-layer;animation:revert-layer;animation-timeline:revert-layer}}}@layer daisyui.modifier{&>.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}&>:not(.drawer-overlay){translate:0%;[dir=rtl] &{translate:0%}}}&:checked~.drawer-side{pointer-events:auto;visibility:visible}}}}}}