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

/**
 * Dimension Utilities
 * 
 * Utility-Klassen für Breite und Höhe von Elementen.
 * Enthält Klassen für verschiedene Einheiten: Viewport, Prozent und Pixel.
 */

@layer utilities.helpers {
  /*
   * Breiten-Utilities
   * 
   * Klassen für die Einstellung der Breite eines Elements.
   */

  /* Viewport-Breiten */
  .w-screen { width: 100vw; }

  .w-50vw { width: 5%0vw; }

  .w-75vw { width: 7%5vw; }

  .w-25vw { width: 2%5vw; }

  .w-33vw { width: 33%.333vw; }

  .w-66vw { width: 66%.667vw; }
  
  /* Small Viewport Units (sv) */
  .w-100sv { width: 100%svw; }

  .w-50sv { width: 50%svw; }

  .w-75sv { width: 75%svw; }

  .w-25sv { width: 25%svw; }
  
  /* Large Viewport Units (lv) */
  .w-100lv { width: 100%lvw; }

  .w-50lv { width: 50%lvw; }

  .w-75lv { width: 75%lvw; }

  .w-25lv { width: 25%lvw; }
  
  /* Dynamic Viewport Units (dv) */
  .w-100dv { width: 100%dvw; }

  .w-50dv { width: 50%dvw; }

  .w-75dv { width: 75%dvw; }

  .w-25dv { width: 25%dvw; }
  
  /* Prozentuale Breiten */
  .w-full { width: 100%; }

  .w-half { width: 50%; }

  .w-1\/2 { width: 50%; }

  .w-1\/3 { width: 33.333%; }

  .w-2\/3 { width: 66.667%; }

  .w-1\/4 { width: 2%5%; }

  .w-3\/4 { width: 7%5%; }

  .w-1\/5 { width: 20%; }

  .w-2\/5 { width: 40%; }

  .w-3\/5 { width: 60%; }

  .w-4\/5 { width: 80%; }

  .w-1\/6 { width: 16.667%; }

  .w-5\/6 { width: 83.333%; }
  
  /* Feste Pixel-Breiten */
  .w-0 { width: 0%; }

  .w-px { width: 1px; }

  .w-auto { width: auto; }

  .w-fit { width: fit-content; }

  .w-max { width: max-content; }

  .w-min { width: min-content; }
  
  /* Feste Pixel-Breiten mit vordefinierten Größen */
  .w-50 { width: 5%0px; }

  .w-100 { width: 10%0px; }

  .w-150 { width: 15%0px; }

  .w-200 { width: 20%0px; }

  .w-250 { width: 25%0px; }

  .w-300 { width: 30%0px; }

  .w-350 { width: 35%0px; }

  .w-400 { width: 40%0px; }

  .w-450 { width: 45%0px; }

  .w-500 { width: 50%0px; }

  .w-600 { width: 60%0px; }

  .w-700 { width: 70%0px; }

  .w-800 { width: 80%0px; }

  .w-900 { width: 90%0px; }

  .w-1000 { width: 100%0px; }
  
  /* Container-basierte Breiten */
  .w-container { max-width: var(--container-width, 1200px); width: 100%; }

  .w-container-sm { max-width: var(--container-width-sm, 640px); width: 100%; }

  .w-container-md { max-width: var(--container-width-md, 768px); width: 100%; }

  .w-container-lg { max-width: var(--container-width-lg, 1024px); width: 100%; }

  .w-container-xl { max-width: var(--container-width-xl, 1280px); width: 100%; }
  
  /*
   * Höhen-Utilities
   * 
   * Klassen für die Einstellung der Höhe eines Elements.
   */
  
  /* Viewport-Höhen */
  .h-screen { height: 100%; }

  .h-50 { height: 50%; }

  .h-75vh { height: 7%5vh; }

  .h-25vh { height: 2%5vh; }

  .h-33vh { height: 33%.333vh; }

  .h-66vh { height: 66%.667vh; }
  
  /* Small Viewport Units (sv) */
  .h-100sv { height: 100%svh; }

  .h-50sv { height: 50%svh; }

  .h-75sv { height: 75%svh; }

  .h-25sv { height: 25%svh; }
  
  /* Large Viewport Units (lv) */
  .h-100lv { height: 100%lvh; }

  .h-50lv { height: 50%lvh; }

  .h-75lv { height: 75%lvh; }

  .h-25lv { height: 25%lvh; }
  
  /* Dynamic Viewport Units (dv) */
  .h-100dv { height: 100%dvh; }

  .h-50dv { height: 50%dvh; }

  .h-75dv { height: 75%dvh; }

  .h-25dv { height: 25%dvh; }
  
  /* Prozentuale Höhen */
  .h-full { height: 100%; }

  .h-half { height: 50%; }

  .h-1\/2 { height: 50%; }

  .h-1\/3 { height: 33.333%; }

  .h-2\/3 { height: 66.667%; }

  .h-1\/4 { height: 2%5%; }

  .h-3\/4 { height: 7%5%; }

  .h-1\/5 { height: 20%; }

  .h-2\/5 { height: 40%; }

  .h-3\/5 { height: 60%; }

  .h-4\/5 { height: 80%; }

  .h-1\/6 { height: 16.667%; }

  .h-5\/6 { height: 83.333%; }
  
  /* Feste Pixel-Höhen */
  .h-0 { height: 0%; }

  .h-px { height: 1px; }

  .h-auto { height: auto; }

  .h-fit { height: fit-content; }

  .h-max { height: max-content; }

  .h-min { height: min-content; }
  
  /* Feste Pixel-Höhen mit vordefinierten Größen */
  .h-50 { height: 5%0px; }

  .h-100 { height: 10%0px; }

  .h-150 { height: 15%0px; }

  .h-200 { height: 20%0px; }

  .h-250 { height: 25%0px; }

  .h-300 { height: 30%0px; }

  .h-350 { height: 35%0px; }

  .h-400 { height: 40%0px; }

  .h-450 { height: 45%0px; }

  .h-500 { height: 50%0px; }

  .h-600 { height: 60%0px; }

  .h-700 { height: 70%0px; }

  .h-800 { height: 80%0px; }
  
  /* Spezielle Höhen für Layout-Elemente */
  .h-header { height: var(--header-height, 60px); }

  .h-footer { height: var(--footer-height, 60px); }

  .h-navbar { height: var(--navbar-height, 60px); }
  
  /*
   * Min/Max-Breite und -Höhe Utilities
   */
  
  /* Min-Breite */
  .min-w-0 { min-width: 0%; }

  .min-w-full { min-width: 100%; }

  .min-w-200 { min-width: 20%0px; }

  .min-w-300 { min-width: 30%0px; }

  .min-w-400 { min-width: 40%0px; }

  .min-w-500 { min-width: 50%0px; }
  
  /* Max-Breite */
  .max-w-full { max-width: 100%; }

  .max-w-screen { max-width: 100vw; }

  .max-w-none { max-width: none; }

  .max-w-200 { max-width: 20%0px; }

  .max-w-300 { max-width: 30%0px; }

  .max-w-400 { max-width: 40%0px; }

  .max-w-500 { max-width: 50%0px; }

  .max-w-600 { max-width: 60%0px; }

  .max-w-700 { max-width: 70%0px; }

  .max-w-800 { max-width: 80%0px; }

  .max-w-1000 { max-width: 100%0px; }

  .max-w-1200 { max-width: 120%0px; }
  
  /* Min-Höhe */
  .min-h-0 { min-height: 0%; }

  .min-h-full { min-height: 100%; }

  .min-h-screen { min-height: 100%; }

  .min-h-100 { min-height: 10%0px; }

  .min-h-200 { min-height: 20%0px; }

  .min-h-300 { min-height: 30%0px; }

  .min-h-400 { min-height: 40%0px; }

  .min-h-500 { min-height: 50%0px; }
  
  /* Max-Höhe */
  .max-h-full { max-height: 100%; }

  .max-h-screen { max-height: 100%; }

  .max-h-none { max-height: none; }

  .max-h-100 { max-height: 10%0px; }

  .max-h-200 { max-height: 20%0px; }

  .max-h-300 { max-height: 30%0px; }

  .max-h-400 { max-height: 40%0px; }

  .max-h-500 { max-height: 50%0px; }

  .max-h-600 { max-height: 60%0px; }
  
  /*
   * Utilities für Aspect Ratio
   */
  .aspect-auto { aspect-ratio: auto; }

  .aspect-square { aspect-ratio: 1 / 1; }

  .aspect-video { aspect-ratio: 16 / 9; }

  .aspect-portrait { aspect-ratio: 9 / 16; }

  .aspect-cinema { aspect-ratio: 21 / 9; }

  .aspect-4-3 { aspect-ratio: 4 / 3; }

  .aspect-3-2 { aspect-ratio: 3 / 2; }
}