@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/core-components/_toasts.scss

@@ -0,0 +1,281 @@
+/* ========================================
+   Toast Notifications
+   Temporary notification messages that auto-dismiss
+   ======================================== */
+@use '../variables' as *;
+
+// ===== TOAST CONTAINER =====
+
+// Fixed container for toast notifications
+.pa-toast-container {
+  position: fixed;
+  z-index: $z-index-toast;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+
+  // Position variations
+  &--top-right {
+    top: $spacing-lg;
+    right: $spacing-lg;
+  }
+
+  &--top-left {
+    top: $spacing-lg;
+    left: $spacing-lg;
+  }
+
+  &--bottom-right {
+    bottom: $spacing-lg;
+    right: $spacing-lg;
+  }
+
+  &--bottom-left {
+    bottom: $spacing-lg;
+    left: $spacing-lg;
+  }
+
+  &--top-center {
+    top: $spacing-lg;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &--bottom-center {
+    bottom: $spacing-lg;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+// ===== TOAST ITEM =====
+
+.pa-toast {
+  background-color: var(--pa-card-bg);
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: $border-radius;
+  box-shadow: $shadow-lg;
+  min-width: $toast-min-width;
+  max-width: $toast-max-width;
+  padding: $toast-padding-v $toast-padding-h;
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-md;
+  position: relative;
+  overflow: hidden;
+
+  // Animation states
+  opacity: 0;
+  transform: translateX(100%);
+  transition: opacity $transition-normal ease, transform $transition-normal ease;
+
+  &.pa-toast--show {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &.pa-toast--hide {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  // Left position animations
+  .pa-toast-container--top-left &,
+  .pa-toast-container--bottom-left & {
+    transform: translateX(-100%);
+
+    &.pa-toast--show {
+      transform: translateX(0);
+    }
+
+    &.pa-toast--hide {
+      transform: translateX(-100%);
+    }
+  }
+
+  // Center position animations
+  .pa-toast-container--top-center &,
+  .pa-toast-container--bottom-center & {
+    transform: translateY(-100%);
+
+    &.pa-toast--show {
+      transform: translateY(0);
+    }
+
+    &.pa-toast--hide {
+      transform: translateY(-100%);
+    }
+  }
+}
+
+// Toast icon
+.pa-toast__icon {
+  flex-shrink: 0;
+  width: $toast-icon-size;
+  height: $toast-icon-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $font-size-lg;
+  border-radius: $border-radius;
+}
+
+// Toast content
+.pa-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.pa-toast__title {
+  font-weight: $font-weight-semibold;
+  margin: 0 0 $spacing-xs 0;
+  color: var(--pa-text-primary);
+  font-size: $font-size-sm;
+}
+
+.pa-toast__message {
+  margin: 0;
+  color: var(--pa-text-secondary);
+  font-size: $font-size-sm;
+  line-height: $line-height-base;
+}
+
+// Toast close button
+.pa-toast__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--pa-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: $toast-close-size;
+  height: $toast-close-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius;
+  font-size: $font-size-lg;
+  line-height: 1;
+  transition: background-color $transition-fast ease, color $transition-fast ease;
+
+  &:hover {
+    background-color: var(--pa-accent-hover);
+    color: var(--pa-text-primary);
+  }
+
+  &:focus {
+    outline: $focus-outline-width solid var(--pa-accent);
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+// Toast progress bar
+.pa-toast__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: $toast-progress-height;
+  background-color: currentColor;
+  opacity: 0.3;
+  transition: width linear;
+}
+
+// ===== TOAST VARIANTS =====
+
+// Primary toast
+.pa-toast--primary {
+  border-color: var(--pa-btn-primary-bg);
+
+  .pa-toast__icon {
+    background-color: var(--pa-btn-primary-bg-light);
+    color: var(--pa-btn-primary-bg);
+  }
+
+  .pa-toast__progress {
+    color: var(--pa-btn-primary-bg);
+  }
+}
+
+// Success toast
+.pa-toast--success {
+  border-color: var(--pa-btn-success-bg);
+
+  .pa-toast__icon {
+    background-color: var(--pa-success-bg-light);
+    color: var(--pa-btn-success-bg);
+  }
+
+  .pa-toast__progress {
+    color: var(--pa-btn-success-bg);
+  }
+}
+
+// Danger toast
+.pa-toast--danger {
+  border-color: var(--pa-btn-danger-bg);
+
+  .pa-toast__icon {
+    background-color: var(--pa-danger-bg-light);
+    color: var(--pa-btn-danger-bg);
+  }
+
+  .pa-toast__progress {
+    color: var(--pa-btn-danger-bg);
+  }
+}
+
+// Warning toast
+.pa-toast--warning {
+  border-color: var(--pa-btn-warning-bg);
+
+  .pa-toast__icon {
+    background-color: var(--pa-warning-bg-light);
+    color: var(--pa-btn-warning-bg);
+  }
+
+  .pa-toast__progress {
+    color: var(--pa-btn-warning-bg);
+  }
+}
+
+// Info toast
+.pa-toast--info {
+  border-color: var(--pa-btn-info-bg);
+
+  .pa-toast__icon {
+    background-color: var(--pa-info-bg-light);
+    color: var(--pa-btn-info-bg);
+  }
+
+  .pa-toast__progress {
+    color: var(--pa-btn-info-bg);
+  }
+}
+
+// ===== RESPONSIVE =====
+
+@media (max-width: $mobile-breakpoint) {
+  .pa-toast-container {
+    left: $spacing-md !important;
+    right: $spacing-md !important;
+    transform: none !important;
+
+    &--top-right,
+    &--top-left,
+    &--top-center {
+      top: $spacing-md;
+    }
+
+    &--bottom-right,
+    &--bottom-left,
+    &--bottom-center {
+      bottom: $spacing-md;
+    }
+  }
+
+  .pa-toast {
+    max-width: 100%;
+  }
+}