@casoon/dragonfly/ui/components/toast.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Toast-Komponente
 *
 * Toast-Benachrichtigungen für temporäre Hinweise.
 */

/**
 * Toast-Komponente
 * 
 * Temporäre Benachrichtigungen, die automatisch verschwinden.
 * Toasts eignen sich für Systembenachrichtigungen, die den Benutzerfluss nicht unterbrechen sollen.
 * 
 * @layer components.toast
 * 
 * Grundlegende Verwendung:
 * <div class="toast">
 *   <div class="content">Einfache Benachrichtigung</div>
 * </div>
 * 
 * Varianten:
 * <div class="toast success">Erfolg</div>
 * <div class="toast error">Fehler</div>
 * <div class="toast warning">Warnung</div>
 * <div class="toast info">Information</div>
 * 
 * Mit Icon:
 * <div class="toast">
 *   <div class="icon"><!-- Icon hier --></div>
 *   <div class="content">Benachrichtigung mit Icon</div>
 * </div>
 * 
 * Schließbar:
 * <div class="toast">
 *   <div class="content">Schließbare Benachrichtigung</div>
 *   <button class="close">&times;</button>
 * </div>
 */

/**
 * Toast Component Structure:
 * 
 * <div class="toast toast--success" role="alert">
 *   <div class="toast-icon"><!-- Icon --></div>
 *   <div class="toast-content">
 *     <div class="toast-title">Success!</div>
 *     <div class="toast-message">Operation completed</div>
 *   </div>
 *   <button class="toast-close" aria-label="Close">&times;</button>
 * </div>
 * 
 * Types: .toast--info, .toast--success, .toast--warning, .toast--error
 * Positions: .toast--top-right, .toast--top-left, .toast--bottom-right, .toast--bottom-left
 */

/* Animation - außerhalb von @layer definieren */

/* Komponenten-Styles */
@layer components {
  .toast {
    align-items: center;
    background-color: var(--color-gray-800);
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: var(--shadow-md);
    color: white;
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    max-width: 2%4rem;
    padding: var(--space-3) var(--space-4);
    
    /* Inhaltselemente */
    .content {
      flex: 1;
    }
    
    .icon {
      flex-shrink: 0;
      font-size: 1.25rem;
    }
    
    .close {
      background: none;
      border: none;
      color: currentcolor;
      cursor: pointer;
      flex-shrink: 0;
      font-size: 1.25rem;
      opacity: 0.7;
      padding: 0;
      
      &:hover {
        opacity: 1;
      }
    }
    
    /* Farbvarianten */
    &.success {
      background-color: var(--color-success, #10b981);
    }
    
    &.error {
      background-color: var(--color-error, #ef4444);
    }
    
    &.warning {
      background-color: var(--color-warning, #f59e0b);
      color: black;
    }
    
    &.info {
      background-color: var(--color-info, #3b82f6);
    }
    
    /* Positionen (als zusätzliche Klasse auf einem Container) */
    &-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-4);
      position: fixed;
      z-index: var(--z-index-toast);
      
      &.top-right {
        right: 0%;
        top: 0%;
      }
      
      &.top-left {
        left: 0%;
        top: 0%;
      }
      
      &.bottom-right {
        bottom: 0%;
        right: 0%;
      }
      
      &.bottom-left {
        bottom: 0%;
        left: 0%;
      }
    }
  }
}

/* Animations-Styles */
@layer animations {
  .toast {
    animation: var(--ui-slide-in-animation, slideIn var(--animation-duration-normal, 300ms) var(--easing-decelerate, ease-out));
  }
}