daisyui/components/drawer/object.js

daisyUI 5 - The Tailwind CSS Component Library

export default {".drawer":{"@layer daisyui.component":{"position":"relative","display":"grid","width":"100%","grid-auto-columns":"max-content auto"}},".drawer-content":{"@layer daisyui.component":{"grid-column-start":"2","grid-row-start":"1","min-width":"calc(0.25rem * 0)"}},":where(.drawer-side)":{"@layer daisyui.component":{"overflow-x":"hidden","overflow-y":"hidden"}},".drawer-side":{"@layer daisyui.component":{"pointer-events":"none","visibility":"hidden","position":"fixed","inset-inline-start":"calc(0.25rem * 0)","top":"calc(0.25rem * 0)","z-index":10,"grid-column-start":"1","grid-row-start":"1","display":"grid","width":"100%","grid-template-columns":"repeat(1, minmax(0, 1fr))","grid-template-rows":"repeat(1, minmax(0, 1fr))","align-items":"flex-start","justify-items":"start","overscroll-behavior":"contain","background-color":"transparent","opacity":"0%","transition":"opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete","height":["100vh","100dvh"],"> .drawer-overlay":{"position":"sticky","top":"calc(0.25rem * 0)","cursor":"pointer","place-self":"stretch","background-color":"oklch(0% 0 0 / 40%)"},"> *":{"grid-column-start":"1","grid-row-start":"1"},"> *:not(.drawer-overlay)":{"will-change":"transform","transition":"translate 0.3s ease-out, width 0.2s ease-out","translate":"-100%","[dir=\"rtl\"] &":{"translate":"100%"}}}},".drawer-toggle":{"@layer daisyui.component":{"position":"fixed","height":"calc(0.25rem * 0)","width":"calc(0.25rem * 0)","appearance":"none","opacity":"0%"},"@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) * 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":"set-page-has-scroll forwards","animation-timeline":"scroll()"}},"@layer daisyui.modifier":{":where(&:checked ~ .drawer-side)":{"pointer-events":"auto","visibility":"visible","overflow-y":"auto","opacity":"100%","& > *:not(.drawer-overlay)":{"translate":"0%"}},"&:focus-visible ~ .drawer-content label.drawer-button":{"outline":"2px solid","outline-offset":"2px"}}},".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","position":"sticky","display":"block","width":"auto","overscroll-behavior":"auto","opacity":"100%","& > .drawer-overlay":{"cursor":"default","background-color":"transparent"},"& > *:not(.drawer-overlay)":{"translate":"0%","[dir=\"rtl\"] &":{"translate":"0%"}}},"&:checked ~ .drawer-side":{"pointer-events":"auto","visibility":"visible"}}}}};