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

/*
 * Display Utilities
 *
 * Atomare CSS-Klassen für Display-Eigenschaften und Positionierung.
 */

@layer utilities.helpers {
  /* ================= DISPLAY ================= */
  .block        { display: block; }

  .inline       { display: inline; }

  .inline-block { display: inline-block; }

  .hidden       { display: none; }

  .flex         { display: flex; }

  .inline-flex  { display: inline-flex; }

  .grid         { display: grid; }

  .inline-grid  { display: inline-grid; }
  
  /* ================= VISIBILITY ================= */
  .visible      { visibility: visible; }

  .invisible    { visibility: hidden; }
  
  /* ================= POSITION ================= */
  .static       { position: static; }

  .relative     { position: relative; }

  .absolute     { position: absolute; }

  .fixed        { position: fixed; }

  .sticky       { position: sticky; }
  
  /* ================= Z-INDEX ================= */
  .z-0          { z-index: 0; }

  .z-10         { z-index: 10; }

  .z-20         { z-index: 20; }

  .z-30         { z-index: 30; }

  .z-40         { z-index: 40; }

  .z-50         { z-index: 50; }

  .z-auto       { z-index: auto; }
  
  /* ================= OVERFLOW ================= */
  .overflow-auto    { overflow: auto; }

  .overflow-hidden  { overflow: hidden; }

  .overflow-visible { overflow: visible; }

  .overflow-scroll  { overflow: scroll; }

  .overflow-x-auto    { overflow-x: auto; }

  .overflow-x-hidden  { overflow-x: hidden; }

  .overflow-x-visible { overflow-x: visible; }

  .overflow-x-scroll  { overflow-x: scroll; }

  .overflow-y-auto    { overflow-y: auto; }

  .overflow-y-hidden  { overflow-y: hidden; }

  .overflow-y-visible { overflow-y: visible; }

  .overflow-y-scroll  { overflow-y: scroll; }
  
  /* ================= ACCESSIBILITY ================= */
  .sr-only {
    border-width: 0%;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  
  .not-sr-only {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: static;
    white-space: normal;
    width: auto;
  }
}