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

/**
 * Listen-Element Styles
 */

@layer elements {
  /* Listen */
  ul, ol {
    color: var(--color-text, var(--color-neutral-900, #111827));
    margin: var(--space-4, 1rem) 0;
    padding-left: var(--space-8, 2rem);
  }

  li {
    color: var(--color-text, var(--color-neutral-900, #111827));
    line-height: var(--line-height-relaxed, 1.625);
    margin: var(--space-2, 0.5rem) 0;
  }

  /* Beschreibungslisten */
  dl {
    margin: var(--space-4, 1rem) 0;
  }

  dt {
    color: var(--color-text, var(--color-neutral-900, #111827));
    font-weight: var(--font-semibold, var(--font-weight-semibold, 600));
    margin-top: var(--space-4, 1rem);
  }

  dd {
    color: var(--color-text-muted, var(--color-neutral-700, #374151));
    margin-left: var(--space-4, 1rem);
    margin-top: var(--space-2, 0.5rem);
  }
  
  /* List Variants */
  .list--unstyled {
    list-style: none;
    padding-left: 0%;
  }
  
  .list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    list-style: none;
    padding-left: 0%;
  }
  
  .list--spaced li {
    margin: var(--space-3, 0.75rem) 0;
  }
  
  .list--compact li {
    margin: var(--space-1, 0.25rem) 0;
  }
}