@casoon/dragonfly/ui/patterns/widget.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.

/*
 * Widget-Komponente
 *
 * Flexible Boxen für Dashboards und Seitenlayouts.
 */

/**
 * Widget-Komponente
 * 
 * Wiederverwendbare UI-Widgets für modulare Benutzeroberflächen.
 * Widgets sind eigenständige Komponenten, die bestimmte Funktionen oder Inhalte kapseln.
 * 
 * @layer components.widget
 * 
 * Grundlegende Verwendung:
 * <div class="widget">
 *   <div class="header">Widget-Titel</div>
 *   <div class="body">Widget-Inhalt</div>
 *   <div class="footer">Widget-Fußzeile</div>
 * </div>
 * 
 * Varianten:
 * <div class="widget primary">Primär-Widget</div>
 * <div class="widget secondary">Sekundär-Widget</div>
 * <div class="widget light">Helles Widget</div>
 * <div class="widget dark">Dunkles Widget</div>
 * 
 * Größen:
 * <div class="widget sm">Klein</div>
 * <div class="widget md">Mittel (Standard)</div>
 * <div class="widget lg">Groß</div>
 * <div class="widget full">Volle Breite</div>
 * 
 * Zustände:
 * <div class="widget loading">Ladend</div>
 * <div class="widget collapsed">Eingeklappt</div>
 * <div class="widget expanded">Ausgeklappt</div>
 * 
 * Widget mit Aktionsbuttons:
 * <div class="widget">
 *   <div class="header">
 *     <h3 class="title">Statistik</h3>
 *     <div class="actions">
 *       <button class="action">Aktualisieren</button>
 *       <button class="action">Einklappen</button>
 *     </div>
 *   </div>
 *   <div class="body">...</div>
 * </div>
 */

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

/* Komponenten-Styles */
@layer components {
  .widget {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    overflow: hidden;
    
    /* Strukturelemente */
    .header {
      align-items: center;
      background-color: var(--color-neutral-50);
      border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
      display: flex;
      justify-content: space-between;
      padding: var(--space-3) var(--space-4);
      
      .title {
        font-size: var(--text-base);
        font-weight: var(--font-medium, 500);
        margin: 0;
      }
      
      .actions {
        display: flex;
        gap: var(--space-2);
        
        .action {
          background: none;
          border: none;
          border-radius: var(--radius-sm, 0.125rem);
          color: var(--color-neutral-600);
          cursor: pointer;
          font-size: var(--text-sm, 0.875rem);
          padding: var(--space-1) var(--space-2);
          
          &:hover {
            background-color: var(--color-neutral-200, #e5e7eb);
            color: var(--color-neutral-800, #1f2937);
          }
        }
      }
    }
    
    .body {
      padding: var(--space-4);
    }
    
    .footer {
      background-color: var(--color-neutral-50);
      border-top: 1px solid var(--color-neutral-200, #e5e7eb);
      color: var(--color-neutral-600);
      font-size: var(--text-sm, 0.875rem);
      padding: var(--space-3) var(--space-4);
    }
    
    /* Farbvarianten */
    &.primary {
      border-color: var(--color-primary, #3b82f6);
      
      .header {
        background-color: var(--color-primary, #3b82f6);
        color: white;
      }
    }
    
    &.secondary {
      border-color: var(--color-secondary);
      
      .header {
        background-color: var(--color-secondary);
        color: white;
      }
    }
    
    &.light {
      background-color: var(--color-white, #fff);
      border-color: var(--color-neutral-100, #f3f4f6);
      
      .header {
        background-color: var(--color-white, #fff);
        border-bottom-color: var(--color-neutral-100, #f3f4f6);
      }
    }
    
    &.dark {
      background-color: var(--color-neutral-800, #1f2937);
      border-color: var(--color-neutral-700, #374151);
      color: white;
      
      .header {
        background-color: var(--color-neutral-900, #111827);
        border-bottom-color: var(--color-neutral-700, #374151);
      }
      
      .footer {
        background-color: var(--color-neutral-900, #111827);
        border-top-color: var(--color-neutral-700, #374151);
        color: var(--color-neutral-300, #d1d5db);
      }
    }
    
    /* Größenvarianten */
    &.sm {
      .header {
        padding: var(--space-2) var(--space-3);
        
        .title {
          font-size: var(--text-sm, 0.875rem);
        }
      }
      
      .body {
        padding: var(--space-3);
      }
      
      .footer {
        font-size: var(--text-xs, 0.75rem);
        padding: var(--space-2) var(--space-3);
      }
    }
    
    &.lg {
      .header {
        padding: var(--space-4) var(--space-5);
        
        .title {
          font-size: var(--text-lg);
        }
      }
      
      .body {
        padding: var(--space-5);
      }
      
      .footer {
        padding: var(--space-4) var(--space-5);
      }
    }
    
    &.full {
      width: 100%;
    }
    
    /* Zustände */
    &.loading {
      opacity: 0.7;
      position: relative;
    }
    
    &.collapsed {
      .body, .footer {
        display: none;
      }
      
      .header {
        border-bottom: none;
      }
    }
    
    &.highlight {
      background-color: color-mix(in oklab, var(--color-primary, #3b82f6), white 90);
      border-color: var(--color-primary, #3b82f6);
    }
  }
}

/* Animations-Styles */
@layer animations {
  .widget {
    &.loading::after {
      animation: var(--ui-loading-animation, loading var(--animation-duration-slowest, 1500ms) infinite);
      background: linear-gradient(90deg, var(--color-primary, #3b82f6), transparent);
      content: "";
      height: 3px;
      left: 0%;
      position: absolute;
      top: 0%;
      width: 100%;
    }
  }
}