flyonui/components/modal.css

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

/*! 🚀 flyonui 2.2.0 - MIT License */ @layer utilities{.modal{pointer-events:none;z-index:80;opacity:0;width:100%;height:100%;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:.5s;justify-items:center;margin:0;padding:1rem;transition-duration:.5s;display:grid;position:fixed;inset:0}.modal-dialog{opacity:0;width:100%;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:.5s;margin-inline:auto;transition-duration:.5s;@media (width>=40rem){&{max-width:32rem}}}.modal-content{pointer-events:auto;transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);border-radius:var(--radius-lg);background-color:var(--color-base-100);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;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-out);transition-duration:.3s;transition-timing-function:var(--ease-out);overscroll-behavior:contain;flex-direction:column;max-height:calc(100vh - 2rem);display:flex}.modal-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex;position:relative}.modal-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.modal-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.modal-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}:where(.modal-header)+.modal-body,:where(.modal-body)+.modal-footer{padding-top:0}.modal-top{place-items:start}.modal-top-start{justify-content:flex-start}.modal-top-end{justify-content:flex-end}.modal-middle{place-items:center}.modal-middle-start{justify-content:flex-start;place-items:center}.modal-middle-end{justify-content:flex-end;place-items:center}.modal-bottom{place-items:end}.modal-bottom-start{justify-content:flex-start;place-items:end}.modal-bottom-end{justify-content:flex-end;place-items:end}.modal-dialog-sm{max-width:24rem}.modal-dialog-md{max-width:32rem}.modal-dialog-lg{max-width:48rem}.modal-dialog-xl{max-width:64rem}@media (width>=640px){.sm\:modal{pointer-events:none;z-index:80;opacity:0;width:100%;height:100%;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:.5s;justify-items:center;margin:0;padding:1rem;transition-duration:.5s;display:grid;position:fixed;inset:0}.sm\:modal-dialog{opacity:0;width:100%;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:.5s;margin-inline:auto;transition-duration:.5s;@media (width>=40rem){&{max-width:32rem}}}.sm\:modal-content{pointer-events:auto;transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);border-radius:var(--radius-lg);background-color:var(--color-base-100);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;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-out);transition-duration:.3s;transition-timing-function:var(--ease-out);overscroll-behavior:contain;flex-direction:column;max-height:calc(100vh - 2rem);display:flex}.sm\:modal-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex;position:relative}.sm\:modal-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.sm\:modal-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.sm\:modal-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}:where(.modal-header)+.modal-body,:where(.modal-body)+.modal-footer{padding-top:0}.sm\:modal-top{place-items:start}.sm\:modal-top-start{justify-content:flex-start}.sm\:modal-top-end{justify-content:flex-end}.sm\:modal-middle{place-items:center}.sm\:modal-middle-start{justify-content:flex-start;place-items:center}.sm\:modal-middle-end{justify-content:flex-end;place-items:center}.sm\:modal-bottom{place-items:end}.sm\:modal-bottom-start{justify-content:flex-start;place-items:end}.sm\:modal-bottom-end{justify-content:flex-end;place-items:end}.sm\:modal-dialog-sm{max-width:24rem}.sm\:modal-dialog-md{max-width:32rem}.sm\:modal-dialog-lg{max-width:48rem}.sm\:modal-dialog-xl{max-width:64rem}}@media (width>=768px){.md\:modal{pointer-events:none;z-index:80;opacity:0;width:100%;height:100%;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:.5s;justify-items:center;margin:0;padding:1rem;transition-duration:.5s;display:grid;position:fixed;inset:0}.md\:modal-dialog{opacity:0;width:100%;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:.5s;margin-inline:auto;transition-duration:.5s;@media (width>=40rem){&{max-width:32rem}}}.md\:modal-content{pointer-events:auto;transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);border-radius:var(--radius-lg);background-color:var(--color-base-100);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;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-out);transition-duration:.3s;transition-timing-function:var(--ease-out);overscroll-behavior:contain;flex-direction:column;max-height:calc(100vh - 2rem);display:flex}.md\:modal-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex;position:relative}.md\:modal-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.md\:modal-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.md\:modal-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}:where(.modal-header)+.modal-body,:where(.modal-body)+.modal-footer{padding-top:0}.md\:modal-top{place-items:start}.md\:modal-top-start{justify-content:flex-start}.md\:modal-top-end{justify-content:flex-end}.md\:modal-middle{place-items:center}.md\:modal-middle-start{justify-content:flex-start;place-items:center}.md\:modal-middle-end{justify-content:flex-end;place-items:center}.md\:modal-bottom{place-items:end}.md\:modal-bottom-start{justify-content:flex-start;place-items:end}.md\:modal-bottom-end{justify-content:flex-end;place-items:end}.md\:modal-dialog-sm{max-width:24rem}.md\:modal-dialog-md{max-width:32rem}.md\:modal-dialog-lg{max-width:48rem}.md\:modal-dialog-xl{max-width:64rem}}@media (width>=1024px){.lg\:modal{pointer-events:none;z-index:80;opacity:0;width:100%;height:100%;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:.5s;justify-items:center;margin:0;padding:1rem;transition-duration:.5s;display:grid;position:fixed;inset:0}.lg\:modal-dialog{opacity:0;width:100%;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:.5s;margin-inline:auto;transition-duration:.5s;@media (width>=40rem){&{max-width:32rem}}}.lg\:modal-content{pointer-events:auto;transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);border-radius:var(--radius-lg);background-color:var(--color-base-100);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;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-out);transition-duration:.3s;transition-timing-function:var(--ease-out);overscroll-behavior:contain;flex-direction:column;max-height:calc(100vh - 2rem);display:flex}.lg\:modal-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex;position:relative}.lg\:modal-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.lg\:modal-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.lg\:modal-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}:where(.modal-header)+.modal-body,:where(.modal-body)+.modal-footer{padding-top:0}.lg\:modal-top{place-items:start}.lg\:modal-top-start{justify-content:flex-start}.lg\:modal-top-end{justify-content:flex-end}.lg\:modal-middle{place-items:center}.lg\:modal-middle-start{justify-content:flex-start;place-items:center}.lg\:modal-middle-end{justify-content:flex-end;place-items:center}.lg\:modal-bottom{place-items:end}.lg\:modal-bottom-start{justify-content:flex-start;place-items:end}.lg\:modal-bottom-end{justify-content:flex-end;place-items:end}.lg\:modal-dialog-sm{max-width:24rem}.lg\:modal-dialog-md{max-width:32rem}.lg\:modal-dialog-lg{max-width:48rem}.lg\:modal-dialog-xl{max-width:64rem}}@media (width>=1280px){.xl\:modal{pointer-events:none;z-index:80;opacity:0;width:100%;height:100%;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:.5s;justify-items:center;margin:0;padding:1rem;transition-duration:.5s;display:grid;position:fixed;inset:0}.xl\:modal-dialog{opacity:0;width:100%;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:.5s;margin-inline:auto;transition-duration:.5s;@media (width>=40rem){&{max-width:32rem}}}.xl\:modal-content{pointer-events:auto;transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);border-radius:var(--radius-lg);background-color:var(--color-base-100);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;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-out);transition-duration:.3s;transition-timing-function:var(--ease-out);overscroll-behavior:contain;flex-direction:column;max-height:calc(100vh - 2rem);display:flex}.xl\:modal-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex;position:relative}.xl\:modal-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.xl\:modal-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.xl\:modal-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}:where(.modal-header)+.modal-body,:where(.modal-body)+.modal-footer{padding-top:0}.xl\:modal-top{place-items:start}.xl\:modal-top-start{justify-content:flex-start}.xl\:modal-top-end{justify-content:flex-end}.xl\:modal-middle{place-items:center}.xl\:modal-middle-start{justify-content:flex-start;place-items:center}.xl\:modal-middle-end{justify-content:flex-end;place-items:center}.xl\:modal-bottom{place-items:end}.xl\:modal-bottom-start{justify-content:flex-start;place-items:end}.xl\:modal-bottom-end{justify-content:flex-end;place-items:end}.xl\:modal-dialog-sm{max-width:24rem}.xl\:modal-dialog-md{max-width:32rem}.xl\:modal-dialog-lg{max-width:48rem}.xl\:modal-dialog-xl{max-width:64rem}}@media (width>=1536px){.\32 xl\:modal{pointer-events:none;z-index:80;opacity:0;width:100%;height:100%;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:.5s;justify-items:center;margin:0;padding:1rem;transition-duration:.5s;display:grid;position:fixed;inset:0}.\32 xl\:modal-dialog{opacity:0;width:100%;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:.5s;margin-inline:auto;transition-duration:.5s;@media (width>=40rem){&{max-width:32rem}}}.\32 xl\:modal-content{pointer-events:auto;transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y);border-radius:var(--radius-lg);background-color:var(--color-base-100);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;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-out);transition-duration:.3s;transition-timing-function:var(--ease-out);overscroll-behavior:contain;flex-direction:column;max-height:calc(100vh - 2rem);display:flex}.\32 xl\:modal-header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex;position:relative}.\32 xl\:modal-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.\32 xl\:modal-body{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);padding:1.5rem;overflow:hidden auto;&::-webkit-scrollbar{width:.5rem}}.\32 xl\:modal-footer{justify-content:flex-end;align-items:center;gap:.75rem;padding:1.5rem;display:flex}:where(.modal-header)+.modal-body,:where(.modal-body)+.modal-footer{padding-top:0}.\32 xl\:modal-top{place-items:start}.\32 xl\:modal-top-start{justify-content:flex-start}.\32 xl\:modal-top-end{justify-content:flex-end}.\32 xl\:modal-middle{place-items:center}.\32 xl\:modal-middle-start{justify-content:flex-start;place-items:center}.\32 xl\:modal-middle-end{justify-content:flex-end;place-items:center}.\32 xl\:modal-bottom{place-items:end}.\32 xl\:modal-bottom-start{justify-content:flex-start;place-items:end}.\32 xl\:modal-bottom-end{justify-content:flex-end;place-items:end}.\32 xl\:modal-dialog-sm{max-width:24rem}.\32 xl\:modal-dialog-md{max-width:32rem}.\32 xl\:modal-dialog-lg{max-width:48rem}.\32 xl\:modal-dialog-xl{max-width:64rem}}}