vue-toastify
Version:
<p align="center">Simple and dependency-free notification plugin.</p>
2 lines (1 loc) • 3.62 kB
CSS
.vt-notification-container{pointer-events:none;box-sizing:border-box;position:fixed;display:flex;gap:10px;width:auto;height:auto;z-index:9999}.vt-backdrop-hidden{transition:all .15s ease-out;opacity:0;visibility:hidden;z-index:50;top:0;left:0;right:0;bottom:0;position:fixed}.vt-backdrop-visible{opacity:1;visibility:visible}.vt-top{top:10px}.vt-centerY{top:50%;transform:translateY(-50%)}.vt-bottom{bottom:10px}.vt-left{left:10px}.vt-centerX{left:50%;transform:translate(-50%)}.vt-right{right:10px}.vt-center-center{top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width: 268px){.vt-notification-container{width:100%;margin:0;right:0}.vt-notification-container:not(.vt-centerX){left:0}}.vt-success>.vt-icon>svg{fill:#199919}.vt-success{border-color:#199919}.vt-info>.vt-icon>svg{fill:#003bc8}.vt-info{border-color:#003bc8}.vt-warning>.vt-icon>svg{fill:#ffb300}.vt-warning{border-color:#ffb300}.vt-error>.vt-icon>svg{fill:#b11414}.vt-error{border-color:#b11414}.vt-notification{transition:transform .1s ease;box-sizing:border-box;pointer-events:auto;box-shadow:0 0 10px .5px #00000059;padding:10px 20px;min-height:100px;min-width:250px;border-radius:5px;margin-left:auto;margin-right:auto;z-index:9999;display:flex;justify-content:space-around;align-items:center;flex-flow:wrap row;align-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vt-notification>.vt-progress-bar{height:3px;width:100%;margin-bottom:5px}.vt-notification>.vt-progress-bar>.vt-progress{max-width:100%;height:3px;overflow:hidden;transition:max-width 1ms ease-in-out}.vt-notification>.vt-content{width:auto;height:100%;max-width:250px;word-break:break-word}.vt-notification>.vt-content>.vt-title{font-size:1.4rem;margin:0}.vt-notification>.vt-content>.vt-paragraph{font-size:1rem;margin:.5rem 0}.vt-notification>.vt-circle{border-style:solid;border-width:2px;width:65px;height:65px;border-radius:50%;margin:5px}.vt-notification>.vt-icon-container{margin:0 20px;position:relative}.vt-notification>.vt-icon-container>.vt-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vt-notification>.vt-buttons{flex-basis:100%;display:flex;flex-flow:row wrap;align-content:center;align-items:center;justify-content:space-evenly;margin:5px -23px 0}.vt-notification>.vt-buttons>button{flex-basis:48%;width:auto;margin-bottom:4px;border-radius:4px}@media (max-width: 268px){.vt-notification{min-height:auto;min-width:100%;border-radius:0}.vt-notification>.vt-content{text-align:center}}.vt-will-change{will-change:transform,opacity}.vt-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.2s}.vt-move[data-delayed=true]{transition-delay:.2s}.vt-spinner{width:60px;height:60px;border-radius:50%;background-color:transparent;animation:1s spin linear infinite}.vt-cursor-wait{cursor:wait}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vt-right-enter-active,.vt-left-enter-active,.vt-bottom-enter-active,.vt-top-enter-active,.vt-center-enter-active{transition:transform .2s ease-out,opacity .2s ease-out}.vt-right-leave-active,.vt-left-leave-active,.vt-bottom-leave-active,.vt-top-leave-active,.vt-center-leave-active{transition:transform .2s ease-in,opacity .2s ease-in}.vt-right-enter-from,.vt-right-leave-to{transform:translate(50px);opacity:0}.vt-left-enter-from,.vt-left-leave-to{transform:translate(-50px);opacity:0}.vt-bottom-enter-from,.vt-bottom-leave-to{transform:translateY(50px);opacity:0}.vt-top-enter-from,.vt-top-leave-to{transform:translateY(-50px);opacity:0}.vt-center-enter-from,.vt-center-leave-to{opacity:0}