@vuesax-alpha/nightly/theme-chalk/vs-dialog.css

A Component Library for Vue 3

.vs-dialog-enter-active{transition:var(--vs-transition-ease)}.vs-dialog-enter-active .vs-dialog-original:not(.vs-dialog--full-screen){animation:rebound .43s}.vs-dialog-leave-active{transition:all .15s ease}.vs-dialog-leave-active .vs-dialog-original{transition:all .15s ease}.vs-dialog-enter-from,.vs-dialog-leave-to{opacity:0}.vs-dialog-enter-from.is-full-screen .vs-dialog-original,.vs-dialog-leave-to.is-full-screen .vs-dialog-original{transform:translate(0,8%)!important}.vs-dialog-enter-from .vs-dialog-original,.vs-dialog-leave-to .vs-dialog-original{transform:scale(.7);box-shadow:0 0 0 0 rgba(0,0,0,var(--vs-shadow-opacity))}@keyframes rebound{0%{transform:scale(2)}40%{transform:scale(1.02)}80%{transform:scale(.981)}100%{transform:scale(1)}}@keyframes reboundClick{0%{transform:scale(.99)}40%{transform:scale(1.02)}80%{transform:scale(.981)}100%{transform:scale(1)}}@keyframes loadingDialog{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.vs-dialog{background:rgba(0,0,0,var(--vs-background-opacity));position:fixed;left:0;top:0;display:flex;justify-content:center;align-items:flex-start;width:100%;height:100%;max-height:100vh;overflow-y:auto;overflow-x:hidden;padding-top:80px;padding-bottom:80px}.vs-dialog.is-full-screen{padding:0;overflow:hidden}.vs-dialog.is-full-screen .vs-dialog-original{width:calc(100% - 30px)!important;height:calc(100% - 30px)!important;max-width:none!important;max-height:none!important}.vs-dialog.is-blur{-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}.vs-dialog-original{background:rgba(var(--vs-background),1);color:rgba(var(--vs-text),1);position:relative;min-width:400px;border-radius:var(--vs-radius);transition:var(--vs-transition-ease);box-shadow:0 5px 30px 0 rgba(0,0,0,var(--vs-shadow-opacity));max-width:800px;margin:auto}.vs-dialog--not-center .vs-dialog__header{display:block}.vs-dialog--scroll .vs-dialog__content{max-height:calc(80vh - 200px);overflow:auto}.vs-dialog--auto-width{width:auto!important;min-width:auto!important;max-width:auto!important}.vs-dialog--square{border-radius:0}.vs-dialog--square .vs-dialog__close{border-radius:0}.vs-dialog--not-padding .vs-dialog__footer{padding:0}.vs-dialog--not-padding .vs-dialog__content{padding:0;margin-bottom:0!important}.vs-dialog--not-padding .vs-dialog__header{padding:0}.vs-dialog--rebound{animation:reboundClick .43s!important}.vs-dialog__loading{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:inherit;background:rgba(var(--vs-background),.8);z-index:100;display:flex;justify-content:center;align-items:center}.vs-dialog__footer{padding:10px 16px;padding-top:0}.vs-dialog__header{display:flex;justify-content:center;align-items:center;padding:10px 16px}.vs-dialog__content{padding:10px 16px;width:100%;position:relative;border-radius:inherit}.vs-dialog__content.notFooter{margin-bottom:20px}.vs-dialog__close{--vs-color:var(--vs-text);position:absolute;top:-6px;right:-6px;padding:0;margin:0;display:flex;justify-content:center;align-items:center;background:inherit;border-radius:12px;box-shadow:0 5px 20px 0 rgba(0,0,0,var(--vs-shadow-opacity));transition:var(--vs-transition-ease);z-index:200;border:0}.vs-dialog__close i{width:34px;height:34px;opacity:.7}.vs-dialog__close i:after{width:14px}.vs-dialog__close i:before{width:14px}.vs-dialog__close:hover{box-shadow:0 0 4px 0 rgba(0,0,0,var(--vs-shadow-opacity));transform:translate(-2px,2px)}.vs-dialog__close:hover i{opacity:1}@media (max-width:600px){.vs-dialog-original{min-width:calc(100vw - 20px);max-width:calc(100vw - 20px);margin:auto 10px}}