flyonui/components/drawer.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.2.0 - MIT License */ @layer utilities{.drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);flex-direction:column;justify-content:space-between;display:flex;position:fixed;& .drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}& .drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}& .drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}&:last-child{padding-bottom:1.5rem}}& .drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}}.drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}@media (width>=640px){.sm\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);flex-direction:column;justify-content:space-between;display:flex;position:fixed;& .drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}& .drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}& .drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}&:last-child{padding-bottom:1.5rem}}& .drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}}.sm\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.sm\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.sm\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.sm\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=768px){.md\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);flex-direction:column;justify-content:space-between;display:flex;position:fixed;& .drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}& .drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}& .drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}&:last-child{padding-bottom:1.5rem}}& .drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}}.md\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.md\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.md\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.md\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=1024px){.lg\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);flex-direction:column;justify-content:space-between;display:flex;position:fixed;& .drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}& .drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}& .drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}&:last-child{padding-bottom:1.5rem}}& .drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}}.lg\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.lg\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.lg\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.lg\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=1280px){.xl\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);flex-direction:column;justify-content:space-between;display:flex;position:fixed;& .drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}& .drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}& .drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}&:last-child{padding-bottom:1.5rem}}& .drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}}.xl\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.xl\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.xl\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.xl\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}@media (width>=1536px){.\32 xl\:drawer{z-index:80;background-color:var(--color-base-100);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);width:100%;max-width:24rem;height:100%;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);flex-direction:column;justify-content:space-between;display:flex;position:fixed;& .drawer-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}& .drawer-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}& .drawer-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));flex-grow:1;padding-inline:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}&:last-child{padding-bottom:1.5rem}}& .drawer-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}}.\32 xl\:drawer-start{inset-inline:0 auto;--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.\32 xl\:drawer-end{inset-inline:auto 0;--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0;&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.\32 xl\:drawer-top{inset-inline:0;--tw-translate-y:-100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);top:0}.\32 xl\:drawer-bottom{inset-inline:0;--tw-translate-y:100%;max-width:none;max-height:15rem;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);bottom:0}}}