@inkline/inkline/components/IToastContainer/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Toast Container
 */
.toast-container {
  position: relative;
}
.toast-container .toast-position {
  position: fixed;
  width: 320px;
  max-width: 100%;
  z-index: var(--toast-container--z-index, 2010);
  margin: var(--toast-container--margin, var(--toast-container--margin-top, var(--margin-top)) var(--toast-container--margin-right, var(--margin-right)) var(--toast-container--margin-bottom, var(--margin-bottom)) var(--toast-container--margin-left, var(--margin-left)));
  max-height: 100%;
  overflow: visible;
}
.toast-container .toast-position.-top-left {
  top: var(--toast-container--top, 0);
  left: var(--toast-container--left, 0);
}
.toast-container .toast-position.-top {
  top: var(--toast-container--top, 0);
  left: 50%;
  transform: translateX(-50%);
}
.toast-container .toast-position.-top-right {
  top: var(--toast-container--top, 0);
  right: var(--toast-container--right, 0);
}
.toast-container .toast-position.-right {
  top: 50%;
  right: var(--toast-container--right, 0);
  transform: translateY(-50%);
}
.toast-container .toast-position.-bottom-right {
  bottom: var(--toast-container--bottom, 0);
  right: var(--toast-container--right, 0);
}
.toast-container .toast-position.-bottom {
  bottom: var(--toast-container--bottom, 0);
  left: 50%;
  transform: translateX(-50%);
}
.toast-container .toast-position.-bottom-left {
  bottom: var(--toast-container--bottom, 0);
  left: var(--toast-container--left, 0);
}
.toast-container .toast-position.-left {
  top: 50%;
  left: var(--toast-container--left, 0);
  transform: translateY(-50%);
}
.toast-container .toast-position > .toast {
  width: 320px;
  max-width: 100%;
  margin-bottom: var(--toast-container--toast--margin-bottom, var(--margin-bottom));
}
.toast-container .toast-position > .toast:last-of-type {
  margin-bottom: 0;
}

.toast-transition-move,
.toast-transition-enter-active,
.toast-transition-leave-active {
  transition-property: var(--toast-container--toast--transition-property, transform, opacity);
  transition-duration: var(--toast-container--toast--transition-duration, var(--transition-duration));
  transition-timing-function: var(--toast-container--toast--transition-timing-function, var(--transition-timing-function));
}

.toast-transition-enter-from,
.toast-transition-leave-to {
  opacity: 0;
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.toast-transition-leave-active {
  position: absolute;
}