@keenmate/pure-admin-core 2.3.1 → 2.3.2

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

@@ -1,425 +1,425 @@
-/* ========================================
-   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 - using logical properties for RTL support
-  &--top-end {
-    top: $spacing-lg;
-    inset-inline-end: $spacing-lg; // RTL: flips to left
-  }
-
-  &--top-start {
-    top: $spacing-lg;
-    inset-inline-start: $spacing-lg; // RTL: flips to right
-  }
-
-  &--bottom-end {
-    bottom: $spacing-lg;
-    inset-inline-end: $spacing-lg; // RTL: flips to left
-  }
-
-  &--bottom-start {
-    bottom: $spacing-lg;
-    inset-inline-start: $spacing-lg; // RTL: flips to right
-  }
-
-  &--top-center {
-    top: $spacing-lg;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
-
-    [dir="rtl"] & {
-      transform: translateX(50%);
-    }
-  }
-
-  &--bottom-center {
-    bottom: $spacing-lg;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
-
-    [dir="rtl"] & {
-      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%);
-  }
-
-  // Start position animations (left in LTR, right in RTL)
-  .pa-toast-container--top-start &,
-  .pa-toast-container--bottom-start & {
-    transform: translateX(-100%);
-
-    &.pa-toast--show {
-      transform: translateX(0);
-    }
-
-    &.pa-toast--hide {
-      transform: translateX(-100%);
-    }
-  }
-
-  // RTL: reverse animation direction for start positions
-  [dir="rtl"] .pa-toast-container--top-start &,
-  [dir="rtl"] .pa-toast-container--bottom-start & {
-    transform: translateX(100%);
-
-    &.pa-toast--show {
-      transform: translateX(0);
-    }
-
-    &.pa-toast--hide {
-      transform: translateX(100%);
-    }
-  }
-
-  // RTL: reverse animation direction for end positions
-  [dir="rtl"] .pa-toast-container--top-end &,
-  [dir="rtl"] .pa-toast-container--bottom-end & {
-    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-color-1);
-  font-size: $font-size-sm;
-}
-
-.pa-toast__message {
-  margin: 0;
-  color: var(--pa-text-color-2);
-  font-size: $font-size-sm;
-  line-height: $line-height-base;
-}
-
-// Toast actions (buttons under a separator)
-.pa-toast__actions {
-  margin-top: $spacing-base;
-  padding-top: $spacing-base;
-  border-top: $border-width-base solid var(--pa-border-color);
-  display: flex;
-  gap: $spacing-sm;
-  flex-wrap: wrap;
-}
-
-// Toast close button
-.pa-toast__close {
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  color: var(--pa-text-color-2);
-  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-color-1);
-  }
-
-  &:focus {
-    outline: $focus-outline-width solid var(--pa-accent);
-    outline-offset: $focus-outline-offset;
-  }
-}
-
-// Toast progress bar
-.pa-toast__progress {
-  position: absolute;
-  bottom: 0;
-  inset-inline-start: 0; // RTL: flips to right
-  height: $toast-progress-height;
-  background-color: currentColor;
-  opacity: 0.6;
-  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);
-  }
-}
-
-// Theme color slot variants (color-1 through color-9)
-@for $i from 1 through 9 {
-  .pa-toast--color-#{$i} {
-    border-color: var(--pa-color-#{$i});
-
-    .pa-toast__icon {
-      background-color: color-mix(in srgb, var(--pa-color-#{$i}) 15%, transparent);
-      color: var(--pa-color-#{$i});
-    }
-
-    .pa-toast__progress {
-      color: var(--pa-color-#{$i});
-    }
-  }
-}
-
-// ===== FILLED TOAST VARIANTS =====
-
-// Filled toast actions: separator color + reset button colors from toast inheritance
-[class*="pa-toast--filled"] .pa-toast__actions {
-  border-top-color: rgba(255, 255, 255, 0.25);
-}
-
-.pa-toast--filled-primary {
-  background-color: var(--pa-btn-primary-bg);
-  border-color: var(--pa-btn-primary-bg);
-  color: var(--pa-btn-primary-text);
-
-  .pa-toast__title,
-  .pa-toast__message { color: inherit; }
-  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
-  .pa-toast__close { color: inherit; }
-  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
-}
-
-.pa-toast--filled-success {
-  background-color: var(--pa-btn-success-bg);
-  border-color: var(--pa-btn-success-bg);
-  color: var(--pa-btn-success-text);
-
-  .pa-toast__title,
-  .pa-toast__message { color: inherit; }
-  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
-  .pa-toast__close { color: inherit; }
-  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
-}
-
-.pa-toast--filled-danger {
-  background-color: var(--pa-btn-danger-bg);
-  border-color: var(--pa-btn-danger-bg);
-  color: var(--pa-btn-danger-text);
-
-  .pa-toast__title,
-  .pa-toast__message { color: inherit; }
-  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
-  .pa-toast__close { color: inherit; }
-  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
-}
-
-.pa-toast--filled-warning {
-  background-color: var(--pa-btn-warning-bg);
-  border-color: var(--pa-btn-warning-bg);
-  color: var(--pa-btn-warning-text);
-
-  .pa-toast__title,
-  .pa-toast__message { color: inherit; }
-  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
-  .pa-toast__close { color: inherit; }
-  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
-}
-
-.pa-toast--filled-info {
-  background-color: var(--pa-btn-info-bg);
-  border-color: var(--pa-btn-info-bg);
-  color: var(--pa-btn-info-text);
-
-  .pa-toast__title,
-  .pa-toast__message { color: inherit; }
-  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
-  .pa-toast__close { color: inherit; }
-  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
-}
-
-// Filled theme color slot variants (color-1 through color-9)
-@for $i from 1 through 9 {
-  .pa-toast--filled-color-#{$i} {
-    background-color: var(--pa-color-#{$i});
-    border-color: var(--pa-color-#{$i});
-    color: var(--pa-color-#{$i}-text);
-
-    .pa-toast__title,
-    .pa-toast__message { color: inherit; }
-    .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
-    .pa-toast__close { color: inherit; }
-    .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
-  }
-}
-
-// ===== RESPONSIVE =====
-
-@media (max-width: $mobile-breakpoint) {
-  .pa-toast-container {
-    inset-inline: $spacing-md !important; // RTL: full width on mobile
-    transform: none !important;
-
-    &--top-end,
-    &--top-start,
-    &--top-center {
-      top: $spacing-md;
-    }
-
-    &--bottom-end,
-    &--bottom-start,
-    &--bottom-center {
-      bottom: $spacing-md;
-    }
-  }
-
-  .pa-toast {
-    max-width: 100%;
-  }
-}
+/* ========================================
+   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 - using logical properties for RTL support
+  &--top-end {
+    top: $spacing-lg;
+    inset-inline-end: $spacing-lg; // RTL: flips to left
+  }
+
+  &--top-start {
+    top: $spacing-lg;
+    inset-inline-start: $spacing-lg; // RTL: flips to right
+  }
+
+  &--bottom-end {
+    bottom: $spacing-lg;
+    inset-inline-end: $spacing-lg; // RTL: flips to left
+  }
+
+  &--bottom-start {
+    bottom: $spacing-lg;
+    inset-inline-start: $spacing-lg; // RTL: flips to right
+  }
+
+  &--top-center {
+    top: $spacing-lg;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    [dir="rtl"] & {
+      transform: translateX(50%);
+    }
+  }
+
+  &--bottom-center {
+    bottom: $spacing-lg;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    [dir="rtl"] & {
+      transform: translateX(50%);
+    }
+  }
+
+}
+
+// ===== TOAST ITEM =====
+
+.pa-toast {
+  background-color: var(--pa-card-bg);
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: var(--pa-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%);
+  }
+
+  // Start position animations (left in LTR, right in RTL)
+  .pa-toast-container--top-start &,
+  .pa-toast-container--bottom-start & {
+    transform: translateX(-100%);
+
+    &.pa-toast--show {
+      transform: translateX(0);
+    }
+
+    &.pa-toast--hide {
+      transform: translateX(-100%);
+    }
+  }
+
+  // RTL: reverse animation direction for start positions
+  [dir="rtl"] .pa-toast-container--top-start &,
+  [dir="rtl"] .pa-toast-container--bottom-start & {
+    transform: translateX(100%);
+
+    &.pa-toast--show {
+      transform: translateX(0);
+    }
+
+    &.pa-toast--hide {
+      transform: translateX(100%);
+    }
+  }
+
+  // RTL: reverse animation direction for end positions
+  [dir="rtl"] .pa-toast-container--top-end &,
+  [dir="rtl"] .pa-toast-container--bottom-end & {
+    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: var(--pa-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-color-1);
+  font-size: $font-size-sm;
+}
+
+.pa-toast__message {
+  margin: 0;
+  color: var(--pa-text-color-2);
+  font-size: $font-size-sm;
+  line-height: $line-height-base;
+}
+
+// Toast actions (buttons under a separator)
+.pa-toast__actions {
+  margin-top: $spacing-base;
+  padding-top: $spacing-base;
+  border-top: $border-width-base solid var(--pa-border-color);
+  display: flex;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
+// Toast close button
+.pa-toast__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--pa-text-color-2);
+  cursor: pointer;
+  padding: 0;
+  width: $toast-close-size;
+  height: $toast-close-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--pa-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-color-1);
+  }
+
+  &:focus {
+    outline: $focus-outline-width solid var(--pa-accent);
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+// Toast progress bar
+.pa-toast__progress {
+  position: absolute;
+  bottom: 0;
+  inset-inline-start: 0; // RTL: flips to right
+  height: $toast-progress-height;
+  background-color: currentColor;
+  opacity: 0.6;
+  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);
+  }
+}
+
+// Theme color slot variants (color-1 through color-9)
+@for $i from 1 through 9 {
+  .pa-toast--color-#{$i} {
+    border-color: var(--pa-color-#{$i});
+
+    .pa-toast__icon {
+      background-color: color-mix(in srgb, var(--pa-color-#{$i}) 15%, transparent);
+      color: var(--pa-color-#{$i});
+    }
+
+    .pa-toast__progress {
+      color: var(--pa-color-#{$i});
+    }
+  }
+}
+
+// ===== FILLED TOAST VARIANTS =====
+
+// Filled toast actions: separator color + reset button colors from toast inheritance
+[class*="pa-toast--filled"] .pa-toast__actions {
+  border-top-color: rgba(255, 255, 255, 0.25);
+}
+
+.pa-toast--filled-primary {
+  background-color: var(--pa-btn-primary-bg);
+  border-color: var(--pa-btn-primary-bg);
+  color: var(--pa-btn-primary-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-success {
+  background-color: var(--pa-btn-success-bg);
+  border-color: var(--pa-btn-success-bg);
+  color: var(--pa-btn-success-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-danger {
+  background-color: var(--pa-btn-danger-bg);
+  border-color: var(--pa-btn-danger-bg);
+  color: var(--pa-btn-danger-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-warning {
+  background-color: var(--pa-btn-warning-bg);
+  border-color: var(--pa-btn-warning-bg);
+  color: var(--pa-btn-warning-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+.pa-toast--filled-info {
+  background-color: var(--pa-btn-info-bg);
+  border-color: var(--pa-btn-info-bg);
+  color: var(--pa-btn-info-text);
+
+  .pa-toast__title,
+  .pa-toast__message { color: inherit; }
+  .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+  .pa-toast__close { color: inherit; }
+  .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+}
+
+// Filled theme color slot variants (color-1 through color-9)
+@for $i from 1 through 9 {
+  .pa-toast--filled-color-#{$i} {
+    background-color: var(--pa-color-#{$i});
+    border-color: var(--pa-color-#{$i});
+    color: var(--pa-color-#{$i}-text);
+
+    .pa-toast__title,
+    .pa-toast__message { color: inherit; }
+    .pa-toast__icon { background-color: rgba(255, 255, 255, 0.2); color: inherit; }
+    .pa-toast__close { color: inherit; }
+    .pa-toast__progress { color: rgba(255, 255, 255, 0.5); }
+  }
+}
+
+// ===== RESPONSIVE =====
+
+@media (max-width: $mobile-breakpoint) {
+  .pa-toast-container {
+    inset-inline: $spacing-md !important; // RTL: full width on mobile
+    transform: none !important;
+
+    &--top-end,
+    &--top-start,
+    &--top-center {
+      top: $spacing-md;
+    }
+
+    &--bottom-end,
+    &--bottom-start,
+    &--bottom-center {
+      bottom: $spacing-md;
+    }
+  }
+
+  .pa-toast {
+    max-width: 100%;
+  }
+}