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

A Component Library for Vue 3

.vs-notification-enter-active{transition:all .3s ease 50ms,transform .3s ease,margin .25s ease,clip-path 8s ease .8s}.vs-notification-leave-to{max-height:0!important;height:0!important;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;box-shadow:0 0 0 0 transparent;opacity:0!important;clip-path:circle(0 at 80% 35%)!important;transform:translate(0,10px)!important}.vs-notification-enter-from{transform:translate(25%);clip-path:circle(0 at 80% 35%)!important}.vs-notification-enter-from .vs-notification__content{opacity:0;transform:translate(10%)}[id*=notification-container]{position:fixed;right:0;bottom:0;z-index:200000;transition:all 25s ease;padding:10px 0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end}[id*=notification-container].is-top-right{bottom:auto;top:0;display:flex;flex-direction:column-reverse}[id*=notification-container].is-top-center{bottom:auto;top:0;display:flex;flex-direction:column-reverse;left:50%;right:auto;transform:translate(-50%)}[id*=notification-container].is-top-center .vs-notification{clip-path:circle(120% at 50% 0);transition:all .25s ease,transform .3s ease,max-height .25s ease,clip-path .5s ease .1s}[id*=notification-container].is-top-center .vs-notification.is-sticky{margin:3px 20px;border-radius:20px}[id*=notification-container].is-top-center .vs-notification.is-sticky:last-child{border-radius:0 0 20px 20px;margin-top:-10px}[id*=notification-container].is-top-center .vs-notification.is-border{border:3px solid transparent;border-top-color:rgba(var(--vs-border),1)}[id*=notification-container].is-top-center .vs-notification-enter-from{transform:translate(0,-25%);clip-path:circle(0 at 50% 0)!important}[id*=notification-container].is-top-center .vs-notification-enter-from .vs-notification__content{opacity:0;transform:translate(0,-10%)}[id*=notification-container].is-top-left{bottom:auto;top:0;left:0;right:auto;display:flex;justify-content:flex-end;align-items:flex-start;flex-direction:column-reverse}[id*=notification-container].is-top-left .vs-notification{clip-path:circle(145% at 0 50%)}[id*=notification-container].is-top-left .vs-notification.is-sticky{margin-left:0;border-radius:0 20px 20px 0}[id*=notification-container].is-top-left .vs-notification.is-border{border:3px solid transparent;border-left-color:rgba(var(--vs-border),1)}[id*=notification-container].is-top-left .vs-notification-enter-from{transform:translate(-25%);clip-path:circle(0 at 20% 35%)!important}[id*=notification-container].is-top-left .vs-notification-enter-from .vs-notification__content{opacity:0;transform:translate(-10%)}[id*=notification-container].is-bottom-center{left:50%;right:auto;transform:translate(-50%)}[id*=notification-container].is-bottom-center .vs-notification{clip-path:circle(120% at 50% 100%);transition:all .25s ease,transform .3s ease,max-height .25s ease,clip-path .5s ease .1s}[id*=notification-container].is-bottom-center .vs-notification.is-sticky{margin:3px 20px;border-radius:20px}[id*=notification-container].is-bottom-center .vs-notification.is-sticky:last-child{border-radius:20px 20px 0 0;margin-bottom:-10px}[id*=notification-container].is-bottom-center .vs-notification.is-border{border:3px solid transparent;border-bottom-color:rgba(var(--vs-border),1)}[id*=notification-container].is-bottom-center .vs-notification-enter-from{transform:translate(0,25%);clip-path:circle(0 at 50% 100%)!important}[id*=notification-container].is-bottom-center .vs-notification-enter-from .vs-notification__content{opacity:0;transform:translate(0,10%)}[id*=notification-container].is-bottom-left{left:0;right:auto}[id*=notification-container].is-bottom-left .vs-notification{clip-path:circle(145% at 0 50%)}[id*=notification-container].is-bottom-left .vs-notification.is-sticky{margin-left:0;border-radius:0 20px 20px 0}[id*=notification-container].is-bottom-left .vs-notification.is-border{border:3px solid transparent;border-left-color:rgba(var(--vs-border),1)}[id*=notification-container].is-bottom-left .vs-notification-enter-from{transform:translate(-25%);clip-path:circle(0 at 20% 35%)!important}[id*=notification-container].is-bottom-left .vs-notification-enter-from .vs-notification__content{opacity:0;transform:translate(-10%)}.vs-notification{--vs-color:var(--vs-background);--vs-border:var(--vs-background);--vs-opacity:0.6;position:relative;max-width:340px;width:100%;height:auto;border-radius:20px;box-shadow:0 10px 30px -5px rgba(0,0,0,var(--vs-shadow-opacity));overflow:hidden;clip-path:circle(145% at 100% 50%);background:rgba(var(--vs-color),1);color:rgba(var(--vs-text),1);margin:3px 10px;transition:all .25s ease,transform .3s ease .1s,max-height .25s ease,clip-path .5s ease .1s}.vs-notification:hover:not(.is-flat){box-shadow:0 0 0 0 rgba(0,0,0,var(--vs-shadow-opacity));transform:translate(0,3px)}.vs-notification.is-not-padding{padding:0!important}.vs-notification.is-icon{padding-left:50px!important}.vs-notification.is-loading{width:100px!important;max-height:100px!important;min-height:100px!important;padding:0!important;display:flex;justify-content:center;align-items:center}.vs-notification.is-width-auto{width:auto;max-width:none}.vs-notification.is-width-full{max-width:calc(100vw - 50px);width:calc(100vw - 50px)}.vs-notification.is-square{border-radius:0!important}.vs-notification.is-sticky{margin-right:0;margin-bottom:0;border-radius:20px 0 0 20px}.vs-notification.is-flat{box-shadow:0 0 0 0 rgba(0,0,0,var(--vs-shadow-opacity));background:rgba(var(--vs-background),1);color:rgba(var(--vs-color),1)!important}.vs-notification.is-flat:hover::after{background:rgba(var(--vs-color),.15)}.vs-notification.is-flat .vs-notification__progress{background:rgba(var(--vs-color),1)}.vs-notification.is-flat .vs-notification__close{--vs-color:inherit}.vs-notification.is-flat .vs-notification__content{color:rgba(var(--vs-color),1)!important}.vs-notification.is-flat:after{content:"";background:rgba(var(--vs-color),.1);width:100%;height:100%;border-radius:inherit;position:absolute;top:0;left:0;z-index:-1;transition:all .25s ease}.vs-notification.is-on-click{cursor:pointer}.vs-notification.is-color:not(.is-flat){color:#fff}.vs-notification.is-color:not(.is-flat) .vs-notification__progress{background:#fff}.vs-notification.is-color:not(.is-flat) .vs-notification__close{--vs-color:#ffffff}.vs-notification.is-color:not(.is-flat) .vs-notification__loading:after{border:2px solid transparent;border-bottom-color:#fff}.vs-notification.is-color:not(.is-flat) .vs-notification__loading:before{border:2px dashed transparent;border-bottom-color:#fff}.vs-notification.is-border{border:3px solid transparent;border-right-color:rgba(var(--vs-border),1)}.vs-notification__progress{width:0;height:3px;border-radius:4px;background:rgba(var(--vs-text),1);position:absolute;bottom:0;left:0;transition:all .25s ease}.vs-notification__loading{width:50px;height:50px;border-radius:50%;position:absolute}.vs-notification__loading:after{box-sizing:border-box;position:absolute;width:100%;height:100%;border-radius:inherit;border:2px solid transparent;border-bottom-color:rgba(var(--vs-text),1);animation:loading-notification .8s ease infinite;top:0;content:""}.vs-notification__loading:before{box-sizing:border-box;top:0;position:absolute;width:100%;height:100%;border-radius:inherit;border:2px dashed transparent;border-bottom-color:rgba(var(--vs-text),1);animation:loading-notification .8s linear infinite;opacity:.2;content:""}.vs-notification__close{--vs-color:var(--vs-text);position:absolute;border:0;background:0 0;top:2px;right:2px;transform:scale(.75);padding:0}.vs-notification__icon{position:absolute;display:flex;justify-content:center;align-items:center;top:calc(50% - 22px);background:0 0;width:45px;height:45px;left:2px;border-radius:0 35% 35% 0}.vs-notification__content{position:relative;width:auto;height:auto;transition:all .25s ease .2s;opacity:1}.vs-notification__text{width:100%}.vs-notification__text p{margin:0;padding:0;font-size:.75rem;line-height:1rem}.vs-notification__title{width:100%;margin:0;padding:0 0 6px 0}.vs-notification__title h4{width:100%;margin:0;padding:0;font-size:.9rem}.darken .vs-notification--dark{color:#fff!important}.darken .vs-notification--dark .vs-notification__close{--vs-color:#ffffff}.darken .vs-notification--dark h4{color:#fff!important}.darken .vs-notification--dark p{color:#fff!important}@keyframes loading-notification{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes progress-notification{0%{width:0}100%{width:100%}}@media (max-width:600px){.vs-notification{margin:3px 0!important;border-radius:0!important;width:100%!important;max-width:100%!important;min-width:100%!important}.vs-notification:hover{transform:translate(0)!important}.vs-notification:last-child{margin-bottom:0!important}[id*=notification-container]{padding:0;width:100%!important;max-width:100%!important}[id*=notification-container] .vs-notification .is-sticky{margin-bottom:0!important}[id*=notification-container].is-top-center .vs-notification:last-child{margin-bottom:3px;margin-top:0!important}}