vue-toastfic/dist/style.css

**vue-toastfic** is a simple and customizable toast notification library for Vue.js and Nuxt.js projects. Follow the instructions below to integrate and use it in your application.

@import"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";[toastfic-theme=dark][data-v-0bd71293]{--toastfic-bg: #171b22;--toastfic-icon: #ffffff;--toastfic-text: #ffffff;--toastfic-success-icon: #388e3c;--toastfic-info-icon: #1976d2;--toastfic-warning-icon: #f57c00;--toastfic-error-icon: #d32f2f}[toastfic-theme=light][data-v-0bd71293]{--toastfic-bg: #ffffff;--toastfic-icon: #171b22;--toastfic-text: #171b22;--toastfic-success-icon: #388e3c;--toastfic-info-icon: #1976d2;--toastfic-warning-icon: #f57c00;--toastfic-error-icon: #d32f2f}[data-v-0bd71293]{font-family:Nunito,sans-serif;padding:0;box-sizing:border-box;margin:0}.toastfic[data-v-0bd71293]{border-radius:10px;width:300px;height:min-content;background-color:var(--toastfic-bg);box-shadow:3px 3px 12px #35353523;padding:10px;-webkit-user-select:none;user-select:none;transition:all .5s ease;position:fixed;z-index:999;overflow:hidden;display:flex;gap:8px}.toastfic section[data-v-0bd71293]{display:flex;flex-direction:column;height:100%}.toastfic section div[data-v-0bd71293]{display:flex;flex-direction:column}.toastfic.toastfic-description[data-v-0bd71293]{height:90px}.progress-bar[data-v-0bd71293]{height:15px;transition:width .1s linear;position:absolute;bottom:0;right:0;border-radius:5px;background-color:var(--toastfic-success-icon);height:2.2px}.toastfic.toastfic-position-top-right[data-v-0bd71293]{top:10px;right:10px;margin-top:10px}.toastfic.toastfic-position-top-left[data-v-0bd71293]{top:10px;left:10px;margin-top:10px}.toastfic.toastfic-position-top-center[data-v-0bd71293]{top:10px;left:50%;transform:translate(-50%);margin-top:10px}.toastfic.toastfic-position-bottom-right[data-v-0bd71293]{bottom:10px;right:10px;margin-bottom:10px}.toastfic.toastfic-position-bottom-left[data-v-0bd71293]{bottom:10px;left:10px;margin-bottom:10px}.toastfic.toastfic-position-bottom-center[data-v-0bd71293]{bottom:10px;left:50%;transform:translate(-50%);margin-bottom:10px}@media (max-width: 600px){.toastfic.toastfic-position-top-right[data-v-0bd71293],.toastfic.toastfic-position-top-left[data-v-0bd71293],.toastfic.toastfic-position-top-center[data-v-0bd71293]{top:0;left:50%;transform:translate(-50%);right:auto}.toastfic.toastfic-position-bottom-right[data-v-0bd71293],.toastfic.toastfic-position-bottom-left[data-v-0bd71293],.toastfic.toastfic-position-bottom-center[data-v-0bd71293]{bottom:0;left:50%;transform:translate(-50%);right:auto}}.toastfic-bottom-enter-active[data-v-0bd71293],.toastfic-bottom-leave-active[data-v-0bd71293],.toastfic-top-enter-active[data-v-0bd71293],.toastfic-top-leave-active[data-v-0bd71293],.toastfic-top-center-enter-active[data-v-0bd71293],.toastfic-top-center-leave-active[data-v-0bd71293],.toastfic-bottom-center-enter-active[data-v-0bd71293],.toastfic-bottom-center-leave-active[data-v-0bd71293],.toastfic-top-left-enter-active[data-v-0bd71293],.toastfic-top-left-leave-active[data-v-0bd71293],.toastfic-top-right-enter-active[data-v-0bd71293],.toastfic-top-right-leave-active[data-v-0bd71293],.toastfic-bottom-left-enter-active[data-v-0bd71293],.toastfic-bottom-left-leave-active[data-v-0bd71293],.toastfic-bottom-right-enter-active[data-v-0bd71293],.toastfic-bottom-right-leave-active[data-v-0bd71293]{transition:all .5s ease}.toastfic-bottom-enter-from[data-v-0bd71293],.toastfic-bottom-leave-to[data-v-0bd71293],.toastfic-top-enter-from[data-v-0bd71293],.toastfic-top-leave-to[data-v-0bd71293],.toastfic-top-center-enter-from[data-v-0bd71293],.toastfic-top-center-leave-to[data-v-0bd71293],.toastfic-bottom-center-enter-from[data-v-0bd71293],.toastfic-bottom-center-leave-to[data-v-0bd71293],.toastfic-top-left-enter-from[data-v-0bd71293],.toastfic-top-left-leave-to[data-v-0bd71293],.toastfic-top-right-enter-from[data-v-0bd71293],.toastfic-top-right-leave-to[data-v-0bd71293],.toastfic-bottom-left-enter-from[data-v-0bd71293],.toastfic-bottom-left-leave-to[data-v-0bd71293],.toastfic-bottom-right-enter-from[data-v-0bd71293],.toastfic-bottom-right-leave-to[data-v-0bd71293]{opacity:0;z-index:998!important}.toastfic-bottom-enter-to[data-v-0bd71293],.toastfic-bottom-leave-from[data-v-0bd71293],.toastfic-top-enter-to[data-v-0bd71293],.toastfic-top-leave-from[data-v-0bd71293],.toastfic-top-center-enter-to[data-v-0bd71293],.toastfic-top-center-leave-from[data-v-0bd71293],.toastfic-bottom-center-enter-to[data-v-0bd71293],.toastfic-bottom-center-leave-from[data-v-0bd71293],.toastfic-top-left-enter-to[data-v-0bd71293],.toastfic-top-left-leave-from[data-v-0bd71293],.toastfic-top-right-enter-to[data-v-0bd71293],.toastfic-top-right-leave-from[data-v-0bd71293],.toastfic-bottom-left-enter-to[data-v-0bd71293],.toastfic-bottom-left-leave-from[data-v-0bd71293],.toastfic-bottom-right-enter-to[data-v-0bd71293],.toastfic-bottom-right-leave-from[data-v-0bd71293]{opacity:1}.toastfic-bottom-enter-from[data-v-0bd71293]{transform:translateY(100%)!important}.toastfic-bottom-leave-to[data-v-0bd71293],.toastfic-top-enter-from[data-v-0bd71293]{transform:translateY(-100%)!important}.toastfic-top-leave-to[data-v-0bd71293]{transform:translateY(100%)!important}.toastfic-top-center-enter-from[data-v-0bd71293],.toastfic-top-center-leave-to[data-v-0bd71293]{transform:translate(-50%,-100%)!important}.toastfic-bottom-center-leave-to[data-v-0bd71293],.toastfic-bottom-center-enter-from[data-v-0bd71293]{transform:translate(-50%,100%)!important}.toastfic-top-left-enter-from[data-v-0bd71293],.toastfic-top-left-leave-to[data-v-0bd71293],.toastfic-top-right-enter-from[data-v-0bd71293],.toastfic-top-right-leave-to[data-v-0bd71293]{transform:translateY(-100%)!important}.toastfic-bottom-left-enter-from[data-v-0bd71293],.toastfic-bottom-left-leave-to[data-v-0bd71293],.toastfic-bottom-right-enter-from[data-v-0bd71293],.toastfic-bottom-right-leave-to[data-v-0bd71293]{transform:translateY(100%)!important}@media (max-width: 600px){.toastfic-bottom-enter-from[data-v-0bd71293],.toastfic-bottom-leave-to[data-v-0bd71293],.toastfic-top-enter-from[data-v-0bd71293],.toastfic-top-leave-to[data-v-0bd71293],.toastfic-top-center-enter-from[data-v-0bd71293],.toastfic-top-center-leave-to[data-v-0bd71293],.toastfic-top-left-enter-from[data-v-0bd71293],.toastfic-top-left-leave-to[data-v-0bd71293],.toastfic-top-right-enter-from[data-v-0bd71293],.toastfic-top-right-leave-to[data-v-0bd71293],.toastfic-bottom-left-leave-to[data-v-0bd71293]{transform:translate(-50%,-100%) scale(.9)!important}.toastfic-bottom-left-enter-from[data-v-0bd71293],.toastfic-bottom-right-enter-from[data-v-0bd71293],.toastfic-bottom-left-leave-to[data-v-0bd71293],.toastfic-bottom-right-leave-to[data-v-0bd71293]{transform:translate(-50%,100%) scale(.9)!important}.toastfic-bottom-enter-to[data-v-0bd71293],.toastfic-bottom-leave-from[data-v-0bd71293],.toastfic-top-enter-to[data-v-0bd71293],.toastfic-top-leave-from[data-v-0bd71293],.toastfic-top-center-enter-to[data-v-0bd71293],.toastfic-top-center-leave-from[data-v-0bd71293],.toastfic-bottom-center-enter-to[data-v-0bd71293],.toastfic-bottom-center-leave-from[data-v-0bd71293],.toastfic-top-left-enter-to[data-v-0bd71293],.toastfic-top-left-leave-from[data-v-0bd71293],.toastfic-top-right-enter-to[data-v-0bd71293],.toastfic-top-right-leave-from[data-v-0bd71293],.toastfic-bottom-left-enter-to[data-v-0bd71293],.toastfic-bottom-left-leave-from[data-v-0bd71293],.toastfic-bottom-right-enter-to[data-v-0bd71293],.toastfic-bottom-right-leave-from[data-v-0bd71293]{transform:translate(-50%) scale(1)!important}}@media (max-width: 600px){.toastfic[data-v-0bd71293]{width:95%;left:50%;transform:translate(-50%)}.toastfic section[data-v-0bd71293]{max-width:100%}}h1[data-v-b0f678f5]{font-size:14px;font-weight:700;color:var(--toastfic-text);margin-top:2px;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}@media (max-width: 600px){h1[data-v-b0f678f5]{max-width:85%}}span[data-v-0f8bfdba]{font-size:14px;font-weight:400;color:var(--toastfic-text);opacity:.8;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-width:100%}.icon[data-v-fa13e8fb]{animation:show-icon-fa13e8fb .7s both;height:19px;width:19px;fill:var(--toastfic-icon);display:flex;align-items:center;justify-content:center;margin-top:2px}@keyframes show-icon-fa13e8fb{0%{transform:scale(.7)}50%{transform:scale(1.3)}to{transform:scale(1)}}.icon-success[data-v-fa13e8fb]{fill:var(--toastfic-success-icon)}.icon-error[data-v-fa13e8fb]{fill:var(--toastfic-error-icon)}.icon-info[data-v-fa13e8fb]{fill:var(--toastfic-info-icon)}.icon-warning[data-v-fa13e8fb]{fill:var(--toastfic-warning-icon)}.toastfic-close[data-v-e7467c53]{position:absolute;right:8px;width:18px;height:18px;border-radius:999px;opacity:.8;transition:all .3s;outline:none;background-color:transparent;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center}.toastfic-close[data-v-e7467c53]:hover{opacity:1}.toastific-action[data-v-b4f72e47]{font-weight:600;font-size:12px;color:var(--toastfic-text);width:min-content;cursor:pointer;text-decoration-line:underline}