@roadtrip/css/styles/components/_toast.css

CSS framework for Roadtrip Design System

/*
 * Toast
 *
 * Index
 * - Toast
 * - Toast feedback
 * - Toast icon
 * - Toast close
 *
 */


.toast-container {
  position: fixed;
  right: 0;
  bottom: 1rem;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 328px;
  margin: 0 auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.15s, transform 0.3s ease-in-out;
  transform: translateY(-100%);
}

@media (min-width: 1200px) {

  .toast-container {
    right: 1.5rem;
    bottom: 3rem;
    left: auto;
    width: auto;
  }
}

/**
 * Open state
 */

.toast-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* TOAST
 -------------------- */

.toast {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 100%;
  flex-flow: wrap;
  align-items: flex-start;
  width: 328px;
  padding: 0.75rem 2rem 0.6rem 1rem;
  margin-right: 0.5rem;
  font-family: var(--road-font);
  font-size: var(--road-body-medium);
  line-height: 1.4;
  color: var(--road-on-info-surface-inverse);
  text-align: left;
  pointer-events: none;
  background: var(--road-info-surface-inverse);
  border-radius: 0.25rem;
}

.toast-top .toast {
  border-radius: 0 0 0.25rem 0.25rem;
}

@media (min-width: 575px) {

  .toast {
    padding: 1rem;
    margin-right: auto;
    margin-left: auto;
  }
}

/* TOAST FEEDBACK
 -------------------- */

/**
 * Success
 */

.toast-success {
  color: var(--road-on-success-surface-inverse);
  background: var(--road-success-surface-inverse);
}

/**
 * Warning
 */

.toast-warning {
  color: var(--road-on-warning-surface-inverse);
  background: var(--road-warning-surface-inverse);
}

/**
 * Danger
 */

.toast-danger {
  color: var(--road-on-danger-surface-inverse);
  pointer-events: all;
  background: var(--road-danger-surface-inverse);
}

/* TOAST ICON
 -------------------- */

.toast-icon {
  top: auto;
  left: 0.5rem;
  height: auto;
  margin-top: -5px;
  margin-right: 0.5rem;
  fill: var(--road-info-icon-inverse);
}

.toast-warning .toast-icon {
  fill: var(--road-warning-icon-inverse);
}

@media (min-width: 575px) {

  .toast-icon {
    position: relative;
    top: auto;
    left: auto;
    margin-right: 0.5rem;
  }
}

/* TOAST CLOSE
 -------------------- */

.toast-close {
  position: absolute;
  right: 0.5rem;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  fill: var(--road-info-icon-inverse);
}

.toast-warning .toast-close {
  fill: var(--road-warning-icon-inverse);
}

.toast-close:focus {
  outline: none;
}

.toast-close-icon {
  display: block;
  width: 24px;
}

/* TOAST LABEL
 -------------------- */

.toast-label{
  width: 240px;
  margin: 0;
}

/* TOAST PROGRESS
 -------------------- */

.toast .progress{
  position: absolute;
  bottom: 0;
  left: 0;
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.5rem;
}

.toast .progress .progress-bar{
  animation: load 5s normal forwards;
}


/* ANIMATION
 -------------------- */


@keyframes load {

  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}