@casoon/dragonfly/ui/components/alert.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.

/*
 * Alert Component
 *
 * Visual cues for success, warning, error, or information messages.
 */

/**
 * Alert Component
 * 
 * Information and warning messages for important notifications to users.
 * Alerts can be used to display success, error, warning, or informative messages.
 * 
 * @layer: components
 * 
 * Compatibility:
 * - Full support in modern browsers
 * - Fallbacks for CSS variables
 * - Uses CSS animation with standard keyframes
 * 
 * Usage:
 * <div class="alert">Standard alert</div>
 * 
 * Variants:
 * <div class="alert-info">Info alert</div>
 * <div class="alert-success">Success alert</div>
 * <div class="alert-warning">Warning alert</div>
 * <div class="alert-error">Error alert</div>
 * 
 * Sizes:
 * <div class="alert-info alert--sm">Small alert</div>
 * <div class="alert-info">Default size alert</div>
 * <div class="alert-info alert--lg">Large alert</div>
 * 
 * With Icon:
 * <div class="alert-info alert--with-icon">
 *   <span class="icon"><!-- Icon here --></span>
 *   <div class="alert-content">Alert with icon</div>
 * </div>
 * 
 * Dismissible:
 * <div class="alert-info alert--dismissible">
 *   <div class="alert-content">Dismissible alert</div>
 *   <button class="alert-close">×</button>
 * </div>
 */

/**
 * Alert Component Structure:
 * 
 * <div class="alert alert--info" role="alert">
 *   <div class="alert-icon"><!-- Icon --></div>
 *   <div class="alert-content">
 *     <div class="alert-title">Alert Title</div>
 *     <div class="alert-message">Alert message content</div>
 *   </div>
 *   <button class="alert-close" aria-label="Close">&times;</button>
 * </div>
 * 
 * Types: .alert--info, .alert--success, .alert--warning, .alert--error
 * Modifiers: .alert--dismissible, .alert--compact
 */

/* Animations - defined outside of @layer */

/* Component styles */
@layer components {
  /* Base component style */
  .alert {
    align-items: start;
    background-color: var(--color-neutral-100, #f3f4f6);
    border-radius: var(--alert-border-radius, var(--radius-md, 0.5rem));
    display: flex;
    font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
    gap: var(--alert-gap, var(--space-3, 0.75rem));
    padding: var(--alert-padding, var(--space-4, 1rem));
  }

  /* Variants */
  .alert-info {
    background-color: var(--color-info-100, #e0f2fe);
    color: var(--color-info-800, #1e40af);
    composes: alert;
  }
  
  .alert-success {
    background-color: var(--color-success-100, #dcfce7);
    color: var(--color-success-800, #166534);
    composes: alert;
  }
  
  .alert-warning {
    background-color: var(--color-warning-100, #fef3c7);
    color: var(--color-warning-800, #854d0e);
    composes: alert;
  }
  
  .alert-error {
    background-color: var(--color-error-100, #fee2e2);
    color: var(--color-error-800, #991b1b);
    composes: alert;
  }

  /* Sizes */
  .alert--sm {
    font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
    padding: var(--alert-padding-sm, var(--space-2, 0.5rem));
  }
  
  .alert--lg {
    font-size: var(--text-base, var(--font-size-base, 1rem));
    padding: var(--alert-padding-lg, var(--space-5, 1.25rem));
  }
  
  /* Icon integration */
  .alert--with-icon {
    padding-left: var(--space-3, 0.75rem);
  }
  
  .alert--with-icon .icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1%;
  }
  
  /* Dismissible state */
  .alert--dismissible {
    padding-right: var(--space-3, 0.75rem);
  }
  
  /* Internal elements */
  .alert-content {
    flex: 1;
  }
  
  .alert-close {
    background: none;
    border: none;
    color: currentcolor;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1%;
    margin-left: auto;
    opacity: 5000%;
    transition: opacity var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
  }
  
  .alert-close:hover {
    opacity: 75%;
  }
}

/* Animation styles */
@layer animations {
  .alert--animate {
    animation-duration: 0.3s;
    animation-name: fadeIn;
    animation-timing-function: ease-out;
  }
}