react-quick-notify/dist/toast.css

react-quick-notify: A beautiful, customizable toast notification system for React applications with zero CSS dependencies

/* React Quick Notify - Toast Notification Styles */

/* Base toast container positioning */
.rqn-toast-container {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* space-y-3 */
  pointer-events: none;
}

/* Reverse direction for bottom containers */
.rqn-toast-container--reverse {
  flex-direction: column-reverse;
}

/* Container positions */
.rqn-toast-container--top-right {
  top: 1.5rem;
  right: 1.5rem;
}

.rqn-toast-container--top-left {
  top: 1.5rem;
  left: 1.5rem;
}

.rqn-toast-container--bottom-right {
  bottom: 1.5rem;
  right: 1.5rem;
}

.rqn-toast-container--bottom-left {
  bottom: 1.5rem;
  left: 1.5rem;
}

.rqn-toast-container--top-center {
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.rqn-toast-container--bottom-center {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Base toast item styles */
.rqn-toast-item {
  border-radius: 0.375rem; /* rounded-md */
  padding: 0.625rem 0.75rem; /* px-3 py-2.5 - slightly more vertical padding */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 ease-out */
  transform: translateX(100%) scale(0.95);
  opacity: 0;
  max-width: 20rem; /* match button width from demo interface */
  pointer-events: auto;
  border-width: 1px;
  border-style: solid;
}

/* Toast visibility states - default (right position) */
.rqn-toast-item--visible {
  transform: translateX(0) scale(1);
  opacity: 1;
}

.rqn-toast-item--leaving {
  transform: translateX(100%) scale(0.95);
  opacity: 0;
}

/* Left position animations */
.rqn-toast-container--top-left .rqn-toast-item,
.rqn-toast-container--bottom-left .rqn-toast-item {
  transform: translateX(-100%) scale(0.95);
}

.rqn-toast-container--top-left .rqn-toast-item--visible,
.rqn-toast-container--bottom-left .rqn-toast-item--visible {
  transform: translateX(0) scale(1);
}

.rqn-toast-container--top-left .rqn-toast-item--leaving,
.rqn-toast-container--bottom-left .rqn-toast-item--leaving {
  transform: translateX(-100%) scale(0.95);
}

/* Top center position animations */
.rqn-toast-container--top-center .rqn-toast-item {
  transform: translateY(-100%) scale(0.95);
}

.rqn-toast-container--top-center .rqn-toast-item--visible {
  transform: translateY(0) scale(1);
}

.rqn-toast-container--top-center .rqn-toast-item--leaving {
  transform: translateY(-100%) scale(0.95);
}

/* Bottom center position animations */
.rqn-toast-container--bottom-center .rqn-toast-item {
  transform: translateY(100%) scale(0.95);
}

.rqn-toast-container--bottom-center .rqn-toast-item--visible {
  transform: translateY(0) scale(1);
}

.rqn-toast-container--bottom-center .rqn-toast-item--leaving {
  transform: translateY(100%) scale(0.95);
}

/* Toast type variations */
.rqn-toast-item--success {
  background-color: rgb(240 253 244); /* bg-green-100 */
  border-color: rgb(187 247 208); /* border-green-200 */
}

.rqn-toast-item--error {
  background-color: rgb(254 242 242); /* bg-red-100 */
  border-color: rgb(254 202 202); /* border-red-200 */
}

.rqn-toast-item--warning {
  background-color: rgb(254 249 195); /* bg-yellow-100 */
  border-color: rgb(254 240 138); /* border-yellow-200 */
}

.rqn-toast-item--info {
  background-color: rgb(239 246 255); /* bg-blue-100 */
  border-color: rgb(191 219 254); /* border-blue-200 */
}

.rqn-toast-item--default {
  background-color: rgb(249 250 251); /* bg-gray-100 */
  border-color: rgb(229 231 235); /* border-gray-200 */
}

.rqn-toast-item--loading {
  background-color: rgb(248 250 252); /* bg-slate-100 */
  border-color: rgb(203 213 225); /* border-slate-300 */
}

/* Toast content layout */
.rqn-toast-content {
  display: flex;
  align-items: flex-start; /* align to top for better text alignment */
  gap: 0.5rem; /* gap-2 */
  justify-content: space-between; /* ensure consistent spacing */
  width: 100%;
  min-width: 0; /* allow content to shrink */
}

/* Toast message text */
.rqn-toast-message {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  flex: 1; /* flex-1 */
  line-height: 1.25rem; /* improved line height for better readability */
  text-align: left; /* ensure text starts from left */
  word-break: break-word; /* break long words but prefer word boundaries */
  overflow-wrap: break-word; /* wrap at word boundaries when possible */
  white-space: pre-wrap; /* preserve whitespace and wrap */
  hyphens: auto; /* add hyphenation for better line completion */
  margin: 0; /* remove default paragraph margins */
  padding-top: 0.125rem; /* slight top padding to align with icon */
  min-width: 0; /* allow flex item to shrink below content size */
}

/* Text colors for different toast types */
.rqn-toast-message--success {
  color: rgb(21 128 61); /* text-green-700 */
}

.rqn-toast-message--error {
  color: rgb(185 28 28); /* text-red-700 */
}

.rqn-toast-message--warning {
  color: rgb(161 98 7); /* text-yellow-700 */
}

.rqn-toast-message--info {
  color: rgb(29 78 216); /* text-blue-700 */
}

.rqn-toast-message--default {
  color: rgb(55 65 81); /* text-gray-700 */
}

.rqn-toast-message--loading {
  color: rgb(71 85 105); /* text-slate-600 */
}

/* Toast icons */
.rqn-toast-icon {
  height: 1rem; /* h-4 */
  width: 1rem; /* w-4 */
  flex-shrink: 0;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-700 ease-out */
  transform: scale(0) rotate(-90deg);
  opacity: 0;
  margin-top: 0.125rem; /* align with text top padding */
}

.rqn-toast-icon--animated {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  animation: rqn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Icon colors for different toast types */
.rqn-toast-icon--success {
  color: rgb(22 163 74); /* text-green-600 */
}

.rqn-toast-icon--error {
  color: rgb(220 38 38); /* text-red-600 */
}

.rqn-toast-icon--warning {
  color: rgb(217 119 6); /* text-yellow-600 */
}

.rqn-toast-icon--info {
  color: rgb(37 99 235); /* text-blue-600 */
}

.rqn-toast-icon--default {
  color: rgb(75 85 99); /* text-gray-600 */
}

.rqn-toast-icon--loading {
  color: rgb(100 116 139); /* text-slate-500 */
}

.rqn-toast-icon--spinning {
  animation: rqn-spin 1s linear infinite;
}

/* Close button */
.rqn-toast-close {
  flex-shrink: 0;
  padding: 0.125rem; /* p-0.5 */
  border-radius: 0.25rem; /* rounded */
  transition: background-color 0.15s ease-in-out;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start; /* align to top like content */
  justify-content: center;
  margin-top: 0.125rem; /* align with text top padding */
  margin-left: 0.5rem; /* consistent spacing from content */
}

.rqn-toast-close:hover {
  background-color: rgba(255, 255, 255, 0.5); /* hover:bg-white/50 */
}

.rqn-toast-close--success {
  color: rgb(21 128 61); /* text-green-700 */
}

.rqn-toast-close--error {
  color: rgb(185 28 28); /* text-red-700 */
}

.rqn-toast-close--warning {
  color: rgb(161 98 7); /* text-yellow-700 */
}

.rqn-toast-close--info {
  color: rgb(29 78 216); /* text-blue-700 */
}

.rqn-toast-close--default {
  color: rgb(55 65 81); /* text-gray-700 */
}

.rqn-toast-close--loading {
  color: rgb(71 85 105); /* text-slate-600 */
}

.rqn-toast-close-icon {
  height: 0.875rem; /* h-3.5 */
  width: 0.875rem; /* w-3.5 */
}

/* Animations */
@keyframes rqn-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes rqn-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rqn-toast-item {
    max-width: 18rem; /* Match button width for tablets */
  }
}

@media (max-width: 640px) {
  /* Center all containers on mobile for better UX */
  .rqn-toast-container--top-left,
  .rqn-toast-container--bottom-left,
  .rqn-toast-container--top-right,
  .rqn-toast-container--bottom-right {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: calc(100vw - 1rem);
  }
  
  /* Center positioned containers */
  .rqn-toast-container--top-center,
  .rqn-toast-container--bottom-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: calc(100vw - 1rem);
  }
  
  .rqn-toast-item {
    max-width: calc(88vw - 2rem);
    min-width: 200px;
    width: calc(88vw - 2rem);
    box-sizing: border-box;
  }
  
  /* Override animations for mobile - all toasts are centered */
  /* Top containers (all become top-center on mobile) */
  .rqn-toast-container--top-left .rqn-toast-item,
  .rqn-toast-container--top-right .rqn-toast-item,
  .rqn-toast-container--top-center .rqn-toast-item {
    transform: translateY(-100%) scale(0.95);
  }
  
  .rqn-toast-container--top-left .rqn-toast-item--visible,
  .rqn-toast-container--top-right .rqn-toast-item--visible,
  .rqn-toast-container--top-center .rqn-toast-item--visible {
    transform: translateY(0) scale(1);
  }
  
  .rqn-toast-container--top-left .rqn-toast-item--leaving,
  .rqn-toast-container--top-right .rqn-toast-item--leaving,
  .rqn-toast-container--top-center .rqn-toast-item--leaving {
    transform: translateY(-100%) scale(0.95);
  }
  
  /* Bottom containers (all become bottom-center on mobile) */
  .rqn-toast-container--bottom-left .rqn-toast-item,
  .rqn-toast-container--bottom-right .rqn-toast-item,
  .rqn-toast-container--bottom-center .rqn-toast-item {
    transform: translateY(100%) scale(0.95);
  }
  
  .rqn-toast-container--bottom-left .rqn-toast-item--visible,
  .rqn-toast-container--bottom-right .rqn-toast-item--visible,
  .rqn-toast-container--bottom-center .rqn-toast-item--visible {
    transform: translateY(0) scale(1);
  }
  
  .rqn-toast-container--bottom-left .rqn-toast-item--leaving,
  .rqn-toast-container--bottom-right .rqn-toast-item--leaving,
  .rqn-toast-container--bottom-center .rqn-toast-item--leaving {
    transform: translateY(100%) scale(0.95);
  }
  
  /* For very small screens (phones in portrait) */
  @media (max-width: 480px) {
    .rqn-toast-container--top-left,
    .rqn-toast-container--top-right,
    .rqn-toast-container--top-center {
      top: 1rem; /* Reduced top margin for mobile */
    }
    
    .rqn-toast-container--bottom-left,
    .rqn-toast-container--bottom-right,
    .rqn-toast-container--bottom-center {
      bottom: 1rem; /* Reduced bottom margin for mobile */
    }
    
    .rqn-toast-container--top-left,
    .rqn-toast-container--bottom-left,
    .rqn-toast-container--top-right,
    .rqn-toast-container--bottom-right {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
    
    .rqn-toast-container--top-center,
    .rqn-toast-container--bottom-center {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
    
    .rqn-toast-item {
      max-width: calc(88vw - 1rem);
      min-width: auto;
      width: calc(88vw - 1rem);
      font-size: 0.8rem; /* Readable text on mobile */
      padding: 0.5rem 0.625rem; /* Comfortable padding for mobile */
      box-sizing: border-box; /* Ensure padding is included in width */
    }
  }
  
  /* For larger mobile screens */
  @media (min-width: 481px) and (max-width: 640px) {
    .rqn-toast-item {
      max-width: calc(88vw - 2rem);
      min-width: 250px;
      width: calc(88vw - 2rem);
    }
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .rqn-toast-item--success {
    background-color: rgb(20 83 45); /* dark:bg-green-900 */
    border-color: rgb(34 197 94); /* dark:border-green-500 */
  }
  
  .rqn-toast-item--error {
    background-color: rgb(127 29 29); /* dark:bg-red-900 */
    border-color: rgb(239 68 68); /* dark:border-red-500 */
  }
  
  .rqn-toast-item--warning {
    background-color: rgb(120 53 15); /* dark:bg-yellow-900 */
    border-color: rgb(245 158 11); /* dark:border-yellow-500 */
  }
  
  .rqn-toast-item--info {
    background-color: rgb(30 58 138); /* dark:bg-blue-900 */
    border-color: rgb(59 130 246); /* dark:border-blue-500 */
  }
  
  .rqn-toast-item--default {
    background-color: rgb(55 65 81); /* dark:bg-gray-700 */
    border-color: rgb(107 114 128); /* dark:border-gray-500 */
  }
  
  .rqn-toast-item--loading {
    background-color: rgb(51 65 85); /* dark:bg-slate-700 */
    border-color: rgb(100 116 139); /* dark:border-slate-500 */
  }
  
  .rqn-toast-message--success {
    color: rgb(187 247 208); /* dark:text-green-200 */
  }
  
  .rqn-toast-message--error {
    color: rgb(254 202 202); /* dark:text-red-200 */
  }
  
  .rqn-toast-message--warning {
    color: rgb(254 240 138); /* dark:text-yellow-200 */
  }
  
  .rqn-toast-message--info {
    color: rgb(191 219 254); /* dark:text-blue-200 */
  }
  
  .rqn-toast-message--default {
    color: rgb(229 231 235); /* dark:text-gray-200 */
  }
  
  .rqn-toast-message--loading {
    color: rgb(203 213 225); /* dark:text-slate-300 */
  }
}