@casoon/dragonfly/core/logical-properties.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.

/**
 * Logische CSS-Eigenschaften für Internationalisierung
 * 
 * Diese Datei implementiert logische CSS-Eigenschaften, die eine richtungsunabhängige
 * Gestaltung von Layouts ermöglichen. Sie unterstützt mehrsprachige Anwendungen durch
 * Vermeidung von richtungsspezifischen Eigenschaften wie left/right und top/bottom.
 * 
 * Stattdessen werden Eigenschaften verwendet, die unabhängig von der Schreibrichtung (RTL/LTR) sind:
 * - block-start/block-end (ersetzt top/bottom)
 * - inline-start/inline-end (ersetzt left/right)
 * - margin-inline, padding-block usw.
 * 
 * Hauptvorteile:
 * - Unterstützung für bidirektionale (RTL/LTR) Layouts ohne Codeänderungen
 * - Bessere Wartbarkeit durch eine einzige Codebasis für alle Sprachen
 * - Verbesserte Barrierefreiheit und Unterstützung für internationale Standards
 * 
 * @hinweis Diese Datei sollte früh im Stylesheet-Laden eingebunden werden.
 * @wichtig Beim Erstellen neuer Komponenten immer logische Eigenschaften verwenden.
 */

/* 
 * Logische CSS Properties für Internationalisierung
 */

@layer logical-properties {
  /* Basisklassen für Schreibrichtung */
  :root {
    --text-direction: ltr;
  }

  :root[dir="rtl"] {
    --text-direction: rtl;
  }

  html {
    text-align: start;
  }

  /* Standardabstände nutzen logische Properties */
  .spacing {
    margin-block: var(--spacing-4);
    margin-inline: var(--spacing-2);
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-2);
  }

  /* Überschriften verwenden logische Properties */
  h1, h2, h3, h4, h5, h6 {
    border-block-end: var(--border-width) solid var(--color-surface-300);
    margin-block: var(--spacing-6) var(--spacing-4);
    padding-block-end: var(--spacing-2);
  }

  /* Textausrichtung für RTL/LTR Support */
  .text-start {
    text-align: start;
  }

  .text-end {
    text-align: end;
  }

  /* Flexbox mit logischen Properties */
  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .flex-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-end {
    justify-content: flex-end;
  }

  /* Container-Abstände */
  .container {
    margin-inline: auto;
    max-inline-size: var(--space-large-80rem);
    padding-inline: var(--spacing-4);
  }

  /* Ränder mit logischen Properties */
  .border-start {
    border-inline-start: var(--border-width) solid var(--color-surface-300);
  }

  .border-end {
    border-inline-end: var(--border-width) solid var(--color-surface-300);
  }

  .border-block {
    border-block: var(--border-width) solid var(--color-surface-300);
  }

  .border-inline {
    border-inline: var(--border-width) solid var(--color-surface-300);
  }

  /* Abgerundete Ecken mit logischen Properties */
  .rounded {
    border-radius: var(--spacing-1);
  }

  .rounded-start {
    border-end-start-radius: var(--spacing-1);
    border-start-start-radius: var(--spacing-1);
  }

  .rounded-end {
    border-end-end-radius: var(--spacing-1);
    border-start-end-radius: var(--spacing-1);
  }

  .rounded-top {
    border-start-end-radius: var(--spacing-1);
    border-start-start-radius: var(--spacing-1);
  }

  .rounded-bottom {
    border-end-end-radius: var(--spacing-1);
    border-end-start-radius: var(--spacing-1);
  }

  /* Positionierung mit logischen Properties */
  .position-start {
    inset-inline-start: 0;
  }
  
  .position-end {
    inset-inline-end: 0;
  }

  .position-top {
    inset-block-start: 0;
  }

  .position-bottom {
    inset-block-end: 0;
  }

  /* Float mit logischen Properties */
  .float-start {
    float: inline-start;
  }

  .float-end {
    float: inline-end;
  }

  .clear-start {
    clear: inline-start;
  }

  .clear-end {
    clear: inline-end;
  }

  /* Größen mit logischen Properties */
  .inline-size-full {
    inline-size: 100%;
  }

  .block-size-full {
    block-size: 100%;
  }

  .inline-size-half {
    inline-size: 50%;
  }

  .block-size-half {
    block-size: 50%;
  }

  /* Grid mit logischen Properties */
  .grid-cols-2 {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-4 {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: repeat(4, 1fr);
  }

  /* Abstände Utility-Klassen */
  .m-block-1 {
    margin-block: var(--spacing-1);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Richtungsspezifische Abstände */
  .m-block-start-1 {
    margin-block-start: var(--spacing-1);
  }

  .m-block-start-2 {
    margin-block-start: var(--spacing-2);
  }

  .m-block-start-3 {
    margin-block-start: var(--spacing-3);
  }

  .m-block-start-4 {
    margin-block-start: var(--spacing-4);
  }

  .m-block-end-1 {
    margin-block-end: var(--spacing-1);
  }

  .m-block-end-2 {
    margin-block-end: var(--spacing-2);
  }

  .m-block-end-3 {
    margin-block-end: var(--spacing-3);
  }

  .m-block-end-4 {
    margin-block-end: var(--spacing-4);
  }

  .m-inline-start-1 {
    margin-inline-start: var(--spacing-1);
  }

  .m-inline-start-2 {
    margin-inline-start: var(--spacing-2);
  }

  .m-inline-start-3 {
    margin-inline-start: var(--spacing-3);
  }

  .m-inline-start-4 {
    margin-inline-start: var(--spacing-4);
  }

  .m-inline-end-1 {
    margin-inline-end: var(--spacing-1);
  }

  .m-inline-end-2 {
    margin-inline-end: var(--spacing-2);
  }

  .m-inline-end-3 {
    margin-inline-end: var(--spacing-3);
  }

  .m-inline-end-4 {
    margin-inline-end: var(--spacing-4);
  }

  .p-block-start-1 {
    padding-block-start: var(--spacing-1);
  }

  .p-block-start-2 {
    padding-block-start: var(--spacing-2);
  }

  .p-block-start-3 {
    padding-block-start: var(--spacing-3);
  }

  .p-block-start-4 {
    padding-block-start: var(--spacing-4);
  }

  .p-block-end-1 {
    padding-block-end: var(--spacing-1);
  }

  .p-block-end-2 {
    padding-block-end: var(--spacing-2);
  }

  .p-block-end-3 {
    padding-block-end: var(--spacing-3);
  }

  .p-block-end-4 {
    padding-block-end: var(--spacing-4);
  }

  .p-inline-start-1 {
    padding-inline-start: var(--spacing-1);
  }

  .p-inline-start-2 {
    padding-inline-start: var(--spacing-2);
  }

  .p-inline-start-3 {
    padding-inline-start: var(--spacing-3);
  }

  .p-inline-start-4 {
    padding-inline-start: var(--spacing-4);
  }

  .p-inline-end-1 {
    padding-inline-end: var(--spacing-1);
  }

  .p-inline-end-2 {
    padding-inline-end: var(--spacing-2);
  }

  .p-inline-end-3 {
    padding-inline-end: var(--spacing-3);
  }

  .p-inline-end-4 {
    padding-inline-end: var(--spacing-4);
  }

  /* Scrollen mit logischen Properties */
  .overflow-inline {
    overflow-inline: auto;
  }

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

  /* Übersetzte Layouts unterstützen */
  [lang="ar"],
  [lang="he"],
  [lang="fa"],
  [lang="ur"] {
    direction: rtl;
  }

  /* Komponenten für internationalisierte UIs */
  .navbar {
    border-block-end: var(--border-width) solid var(--color-surface-300);
    display: flex;
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
  }

  .navbar-brand {
    margin-inline-end: var(--spacing-4);
  }

  .navbar-nav {
    display: flex;
    gap: var(--spacing-4);
    margin-inline-start: auto;
  }

  .dropdown-menu {
    border: var(--border-width) solid var(--color-surface-300);
    border-radius: var(--spacing-1);
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-inline-size: var(--spacing-40);
    padding-block: var(--spacing-2);
    padding-inline: 0;
    position: absolute;
  }

  .dropdown-item {
    padding-block: var(--spacing-1);
    padding-inline: var(--spacing-3);
    text-align: start;
  }

  /* Karten-Komponente mit logischen Properties */
  .card {
    border: var(--border-width) solid var(--color-surface-300);
    border-radius: var(--spacing-2);
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-4);
  }

  .card-header {
    border-block-end: var(--border-width) solid var(--color-surface-200);
    margin-block-end: var(--spacing-3);
    padding-block-end: var(--spacing-2);
  }

  .card-footer {
    border-block-start: var(--border-width) solid var(--color-surface-200);
    margin-block-start: var(--spacing-3);
    padding-block-start: var(--spacing-2);
  }

  /* Listen mit logischen Properties */
  .list {
    padding-inline-start: var(--spacing-4);
  }

  .list-item {
    margin-block-end: var(--spacing-2);
  }

  /* Formular-Elemente mit logischen Properties */
  .form-group {
    margin-block-end: var(--spacing-3);
  }

  .form-label {
    display: block;
    margin-block-end: var(--spacing-1);
  }

  .form-control {
    border: var(--border-width) solid var(--color-surface-300);
    border-radius: var(--spacing-1);
    inline-size: 100%;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
  }

  /* Buttons mit logischen Properties */
  .btn {
    border: var(--border-width) solid transparent;
    border-radius: var(--spacing-1);
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4);
  }

  .btn-icon {
    margin-inline-end: var(--spacing-2);
  }

  /* Tabellen mit logischen Properties */
  .table {
    border-collapse: collapse;
    inline-size: 100%;
  }

  .table th,
  .table td {
    border-block-end: var(--border-width) solid var(--color-surface-300);
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-3);
    text-align: start;
  }

  /* Navigations-Tabs mit logischen Properties */
  .tabs {
    border-block-end: var(--border-width) solid var(--color-surface-300);
    display: flex;
  }

  .tab {
    border-block-end: var(--border-width-thick) solid transparent;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4);
  }

  .tab.active {
    border-block-end-color: var(--color-primary-500);
  }

  /* Alert-Komponente mit logischen Properties */
  .alert {
    border-inline-start: var(--spacing-1) solid var(--color-primary-500);
    border-radius: var(--spacing-1);
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
  }

  .alert-danger {
    border-inline-start-color: var(--color-error-500);
  }

  .alert-success {
    border-inline-start-color: var(--color-success-500);
  }

  /* Abstand-Automatisierung */
  .text-flow > * + * {
    margin-block-start: var(--spacing-3);
  }

  /* Benutzeroberflächenführungen */
  .steps {
    display: flex;
    margin-block: var(--spacing-4);
  }

  .step {
    border-block-end: var(--border-width-thick) solid var(--color-surface-300);
    flex: 1;
    padding-block: var(--spacing-2);
    text-align: center;
  }

  .step.active {
    border-block-end-color: var(--color-primary-500);
  }

  /* Dialog/Modal */
  .modal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
  }

  .modal-dialog {
    background: var(--color-white);
    border-radius: var(--spacing-2);
    max-block-size: 90%;
    max-inline-size: 90%;
    min-inline-size: var(--space-large-30rem);
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-4);
  }

  .modal-header {
    border-block-end: var(--border-width) solid var(--color-surface-300);
    margin-block-end: var(--spacing-3);
    padding-block-end: var(--spacing-2);
  }

  .modal-footer {
    border-block-start: var(--border-width) solid var(--color-surface-300);
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
    margin-block-start: var(--spacing-3);
    padding-block-start: var(--spacing-2);
  }

  /* Responsives Layout mit logischen Properties */
  @media (max-width: 768px) {
    .navbar {
      align-items: flex-start;
      flex-direction: column;
    }

    .navbar-nav {
      flex-direction: column;
      margin-block-start: var(--spacing-3);
      margin-inline-start: 0;
    }

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
      grid-template-columns: 1fr;
    }
  }

  /* RTL spezifische Anpassungen */
  [dir="rtl"] .btn-icon {
    transform: scaleX(-1);
  }

  [dir="rtl"] .dropdown-menu {
    text-align: right;
  }

  /* Lang-spezifische Anpassungen */
  [lang="ja"],
  [lang="zh"],
  [lang="ko"] {
    font-feature-settings: "palt";
    line-break: strict;
    word-break: normal;
  }

  [lang="th"],
  [lang="my"] {
    line-height: 1.8;
  }

  /* Komplette Layout-Anordnung, unabhängig von der Schreibrichtung */
  .layout {
    display: grid;
    grid-template:
      "header header header" auto "sidebar main aside" 1fr "footer footer footer" auto / 200px 1fr 200px;
    min-block-size: 100%;
  }

  .layout-header {
    border-block-end: var(--border-width) solid var(--color-surface-300);
    grid-area: header;
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
  }

  .layout-sidebar {
    border-inline-end: var(--border-width) solid var(--color-surface-300);
    grid-area: sidebar;
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-3);
  }

  .layout-main {
    grid-area: main;
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-4);
  }

  .layout-aside {
    border-inline-start: var(--border-width) solid var(--color-surface-300);
    grid-area: aside;
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-3);
  }

  .layout-footer {
    border-block-start: var(--border-width) solid var(--color-surface-300);
    grid-area: footer;
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
  }

  /* Responsives Layout */
  @media (max-width: 990px) {
    .layout {
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
      grid-template-columns: var(--space-large-200) 1fr;
    }

    .layout-aside {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .layout {
      grid-template-areas:
        "header"
        "main"
        "footer";
      grid-template-columns: 1fr;
    }

    .layout-sidebar {
      display: none;
    }
  }

  /* Responsive Anpassungen für logische Eigenschaften */
  @media (max-width: 768px) {
    /* Anpassungen für kleinere Bildschirme */
    .block-spacer {
      margin-block: var(--spacing-4);
    }
    
    .inline-spacer {
      margin-inline: 0.5rem;
    }
    
    .flow-spacing > * + * {
      margin-block-start: 0.75rem;
    }
    
    .center-content {
      align-items: center;
      justify-content: center;
    }
  }
  
  /* Tablet-Anpassungen */
  @media (max-width: 990px) {
    .tablet-padding {
      padding-block: var(--spacing-4);
      padding-inline: var(--spacing-6);
    }
    
    .tablet-margin {
      margin-block: var(--spacing-4);
      margin-inline: var(--spacing-6);
    }
    
    .tablet-spacing > * + * {
      margin-inline-start: var(--spacing-4);
    }
  }
  
  /* Mobile vertikale Ausrichtung */
  @media (max-width: 768px) {
    .logical-stack {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    
    .logical-stack > * {
      margin-block-start: var(--space-0);
      margin-inline-start: var(--space-0);
    }
  }
}