@casoon/dragonfly/utilities/helpers/spacing.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.

/*
 * Spacing Utilities
 *
 * Atomare CSS-Klassen für Padding und Margin.
 * Basiert auf den Design-Tokens aus :root für volle Konsistenz.
 */

@layer utilities.helpers {
  /* ================= PADDING ================= */
  
  /* Padding - All sides */
  .p-0  { padding: var(--space-0); }

  .p-px { padding: var(--space-px); }

  .p-1  { padding: var(--space-1); }

  .p-2  { padding: var(--space-2); }

  .p-3  { padding: var(--space-3); }

  .p-4  { padding: var(--space-4); }

  .p-5  { padding: var(--space-5); }

  .p-6  { padding: var(--space-6); }

  .p-8  { padding: var(--space-8); }

  .p-10 { padding: var(--space-10); }

  .p-12 { padding: var(--space-12); }

  .p-16 { padding: var(--space-16); }

  .p-20 { padding: var(--space-20); }

  .p-24 { padding: var(--space-24); }

  .p-32 { padding: var(--space-32); }

  .p-40 { padding: var(--space-40); }

  .p-48 { padding: var(--space-48); }

  .p-56 { padding: var(--space-56); }

  .p-64 { padding: var(--space-64); }

  /* Padding - Directions (top, right, bottom, left) */
  .pt-0  { padding-top: var(--space-0); }

  .pt-px { padding-top: var(--space-px); }

  .pt-1  { padding-top: var(--space-1); }

  .pt-2  { padding-top: var(--space-2); }

  .pt-3  { padding-top: var(--space-3); }

  .pt-4  { padding-top: var(--space-4); }

  .pt-5  { padding-top: var(--space-5); }

  .pt-6  { padding-top: var(--space-6); }

  .pt-8  { padding-top: var(--space-8); }

  .pt-10 { padding-top: var(--space-10); }

  .pt-12 { padding-top: var(--space-12); }

  .pt-16 { padding-top: var(--space-16); }

  .pt-20 { padding-top: var(--space-20); }

  .pt-24 { padding-top: var(--space-24); }

  .pt-32 { padding-top: var(--space-32); }

  .pt-40 { padding-top: var(--space-40); }

  .pt-48 { padding-top: var(--space-48); }

  .pt-56 { padding-top: var(--space-56); }

  .pt-64 { padding-top: var(--space-64); }

  /* Padding rechts, unten, links ähnlich definiert... */
  .pr-0  { padding-right: var(--space-0); }

  .pr-px { padding-right: var(--space-px); }

  /* ... weitere pr-Klassen ... */

  .pb-0  { padding-bottom: var(--space-0); }

  .pb-px { padding-bottom: var(--space-px); }

  /* ... weitere pb-Klassen ... */

  .pl-0  { padding-left: var(--space-0); }

  .pl-px { padding-left: var(--space-px); }

  /* ... weitere pl-Klassen ... */

  /* Padding - X-Achse (links und rechts) */
  .px-0  { padding-left: var(--space-0); padding-right: var(--space-0); }

  .px-px { padding-left: var(--space-px); padding-right: var(--space-px); }

  .px-1  { padding-left: var(--space-1); padding-right: var(--space-1); }

  /* ... weitere px-Klassen ... */

  /* Padding - Y-Achse (oben und unten) */
  .py-0  { padding-bottom: var(--space-0); padding-top: var(--space-0); }

  .py-px { padding-bottom: var(--space-px); padding-top: var(--space-px); }

  .py-1  { padding-bottom: var(--space-1); padding-top: var(--space-1); }

  /* ... weitere py-Klassen ... */

  /* ================= MARGIN ================= */
  
  /* Margin - All sides */
  .m-0  { margin: var(--space-0); }

  .m-px { margin: var(--space-px); }

  .m-1  { margin: var(--space-1); }

  .m-2  { margin: var(--space-2); }

  .m-3  { margin: var(--space-3); }

  .m-4  { margin: var(--space-4); }

  .m-5  { margin: var(--space-5); }

  .m-6  { margin: var(--space-6); }

  .m-8  { margin: var(--space-8); }

  .m-10 { margin: var(--space-10); }

  .m-12 { margin: var(--space-12); }

  .m-16 { margin: var(--space-16); }

  .m-20 { margin: var(--space-20); }

  .m-24 { margin: var(--space-24); }

  .m-32 { margin: var(--space-32); }

  .m-40 { margin: var(--space-40); }

  .m-48 { margin: var(--space-48); }

  .m-56 { margin: var(--space-56); }

  .m-64 { margin: var(--space-64); }

  /* Margin - Directions (top, right, bottom, left) */
  .mt-0  { margin-top: var(--space-0); }

  .mt-px { margin-top: var(--space-px); }

  /* ... weitere mt-Klassen ... */

  .mr-0  { margin-right: var(--space-0); }

  .mr-px { margin-right: var(--space-px); }

  /* ... weitere mr-Klassen ... */

  .mb-0  { margin-bottom: var(--space-0); }

  .mb-px { margin-bottom: var(--space-px); }

  /* ... weitere mb-Klassen ... */

  .ml-0  { margin-left: var(--space-0); }

  .ml-px { margin-left: var(--space-px); }

  /* ... weitere ml-Klassen ... */

  /* Margin - X-Achse (links und rechts) */
  .mx-0  { margin-left: var(--space-0); margin-right: var(--space-0); }

  .mx-px { margin-left: var(--space-px); margin-right: var(--space-px); }

  /* ... weitere mx-Klassen ... */
  .mx-auto { margin-left: auto; margin-right: auto; }

  /* Margin - Y-Achse (oben und unten) */
  .my-0  { margin-bottom: var(--space-0); margin-top: var(--space-0); }

  .my-px { margin-bottom: var(--space-px); margin-top: var(--space-px); }

  /* ... weitere my-Klassen ... */
  .my-auto { margin-bottom: auto; margin-top: auto; }

  /* Negative Margins */
  .m-n1  { margin: calc(var(--space-1) * -1); }

  .m-n2  { margin: calc(var(--space-2) * -1); }

  /* ... weitere negative margin-Klassen ... */
}