nitropage/src/components/toast/index.module.css

A free and open source, extensible visual page builder based on SolidStart.

.toast__list {
  --viewport-padding: 16px;
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: var(--viewport-padding);
  gap: 8px;
  width: 400px;
  max-width: 100vw;
  margin: 0;
  list-style: none;
  z-index: 9999;
  outline: none;
}
.toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 6px;
  padding: 12px;
  background-color: white;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.15),
    0 4px 6px -4px rgb(0 0 0 / 0.15);
}
.toast[data-opened] {
  animation: slideIn 150ms var(--np-ease-out-expo);
}
.toast[data-closed] {
  animation: hide 100ms var(--np-ease-in-out-cubic);
}
.toast[data-swipe="move"] {
  transform: translateX(var(--kb-toast-swipe-move-x));
}
.toast[data-swipe="cancel"] {
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.toast[data-swipe="end"] {
  animation: swipeOut 100ms ease-out;
}
.toast__content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.toast__close-button {
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  margin-left: auto;
  color: hsl(240 5% 34%);
}
.toast__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  font-weight: 500;
  color: hsl(240 6% 10%);
  line-height: 1.25;
}
.toast__description {
  font-size: 14px;
  color: hsl(240 5% 26%);
}
.toast__progress-track {
  height: 8px;
  width: 100%;
  background-color: hsl(240 6% 90%);
  border-radius: 3px;
}
.toast__progress-fill {
  background-color: var(--np-accent-300);
  border-radius: 3px;
  height: 100%;
  width: var(--kb-toast-progress-fill-width);
  transition: width 250ms linear;
}
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slideIn {
  from {
    transform: translateX(calc(100% + var(--viewport-padding)));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes swipeOut {
  from {
    transform: translateX(var(--kb-toast-swipe-end-x));
  }
  to {
    transform: translateX(calc(100% + var(--viewport-padding)));
  }
}