ayovue/themes/base/toasts.css

A progressive vue components library designed to simplify and accelerate your web development process.

.a-toasts {
  /* &.a-toasts-top-right {} */
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999999;
}

.a-toasts.a-toasts-bottom-right {
    position: fixed;
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
    z-index: 999999;
  }

.a-toasts.a-toasts-top-left {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 999999;
  }

.a-toasts.a-toasts-bottom-left {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    z-index: 999999;
  }

.a-toasts.a-toasts-top-center {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 50%;
    right: auto;
    z-index: 999999;
    transform: translateX(-50%);
  }

.a-toasts.a-toasts-bottom-center {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    z-index: 999999;
    transform: translateX(-50%);
  }

.a-toasts .a-toast-progress {
    min-height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    animation: var(--animation);
    animation-timing-function: linear;
    animation-play-state: running;
    z-index: 9999;
  }

.a-toasts .a-toast-type:hover .a-toast-progress {
    animation-play-state: paused;
  }

@keyframes toastprogress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.a-toast {
  display: flex;
  align-items: flex-start;
  width: 333px;
  position: relative;
}

.a-toast .a-toast-content {
    flex: 1;
  }

.a-toast .a-toast-close {
    cursor: pointer;
  }