@letsprogram/ng-oat 0.1.7 → 0.1.8

package/assets/oat/css/grid.css

@@ -22,28 +22,83 @@
   }
 
   /* Column spans using CSS custom property */
-  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
-  
-  .col-1  { --span: 1; }
-  .col-2  { --span: 2; }
-  .col-3  { --span: 3; }
-  .col-4  { --span: 4; }
-  .col-5  { --span: 5; }
-  .col-6  { --span: 6; }
-  .col-7  { --span: 7; }
-  .col-8  { --span: 8; }
-  .col-9  { --span: 9; }
-  .col-10 { --span: 10; }
-  .col-11 { --span: 11; }
-  .col-12 { --span: 12; }
+  .col,
+  [class*="col-"] {
+    grid-column-end: span var(--span, var(--grid-cols));
+  }
+
+  .col-1 {
+    --span: 1;
+  }
+
+  .col-2 {
+    --span: 2;
+  }
+
+  .col-3 {
+    --span: 3;
+  }
+
+  .col-4 {
+    --span: 4;
+  }
+
+  .col-5 {
+    --span: 5;
+  }
+
+  .col-6 {
+    --span: 6;
+  }
+
+  .col-7 {
+    --span: 7;
+  }
+
+  .col-8 {
+    --span: 8;
+  }
+
+  .col-9 {
+    --span: 9;
+  }
+
+  .col-10 {
+    --span: 10;
+  }
+
+  .col-11 {
+    --span: 11;
+  }
+
+  .col-12 {
+    --span: 12;
+  }
 
   /* Offsets via grid-column-start */
-  .offset-1  { grid-column-start: 2; }
-  .offset-2  { grid-column-start: 3; }
-  .offset-3  { grid-column-start: 4; }
-  .offset-4  { grid-column-start: 5; }
-  .offset-5  { grid-column-start: 6; }
-  .offset-6  { grid-column-start: 7; }
+  .offset-1 {
+    grid-column-start: 2;
+  }
+
+  .offset-2 {
+    grid-column-start: 3;
+  }
+
+  .offset-3 {
+    grid-column-start: 4;
+  }
+
+  .offset-4 {
+    grid-column-start: 5;
+  }
+
+  .offset-5 {
+    grid-column-start: 6;
+  }
+
+  .offset-6 {
+    grid-column-start: 7;
+  }
 
   .col-end {
     grid-column-start: span var(--span, 1);
@@ -68,29 +123,65 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
   }
 
-  /* Container-query breakpoints for .grid children */
-  @container (min-width: 640px) {
-    .grid { grid-template-columns: repeat(2, 1fr); }
+  /*
+   * .grid template-columns use @media (viewport-based) because a container
+   * element cannot query its own size — @container here would query the
+   * *parent* container, not .grid itself, leading to mismatched breakpoints
+   * when a sidebar or other layout shrinks the content area below 1024px.
+   */
+  @media (min-width: 640px) {
+    .grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .grid {
+      grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
+    }
   }
-  @container (min-width: 1024px) {
-    .grid { grid-template-columns: repeat(var(--grid-cols, 12), 1fr); }
-    .grid > * { grid-column: span var(--span, 1); }
+
+  /* Children's column span responds to the .grid container's own width */
+  @container (min-width: 640px) {
+    .grid>* {
+      grid-column: span var(--span, 1);
+    }
   }
 
   /* Allow explicit column count override on .grid: .grid.cols-2, .grid.cols-3, etc. */
-  .grid.cols-2 { --grid-cols: 2; }
-  .grid.cols-3 { --grid-cols: 3; }
-  .grid.cols-4 { --grid-cols: 4; }
+  .grid.cols-2 {
+    --grid-cols: 2;
+  }
 
-  @container (min-width: 640px) {
-    .grid.cols-2, .grid.cols-3, .grid.cols-4 {
+  .grid.cols-3 {
+    --grid-cols: 3;
+  }
+
+  .grid.cols-4 {
+    --grid-cols: 4;
+  }
+
+  @media (min-width: 640px) {
+
+    .grid.cols-2,
+    .grid.cols-3,
+    .grid.cols-4 {
       grid-template-columns: repeat(2, 1fr);
     }
   }
-  @container (min-width: 1024px) {
-    .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
-    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
-    .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+  @media (min-width: 1024px) {
+    .grid.cols-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .grid.cols-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .grid.cols-4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
   /* ── Responsive .row breakpoints (media queries) ───────────────────────── */
@@ -100,9 +191,12 @@
       --grid-cols: 1;
       --grid-gap: 1rem;
     }
-    .col, [class*="col-"] {
+
+    .col,
+    [class*="col-"] {
       --span: 1;
     }
+
     [class*="offset-"] {
       grid-column-start: auto;
     }
@@ -114,9 +208,12 @@
       --grid-cols: 4;
       --grid-gap: 1rem;
     }
-    .col, [class*="col-"] {
+
+    .col,
+    [class*="col-"] {
       --span: 4;
     }
+
     [class*="offset-"] {
       grid-column-start: auto;
     }
@@ -125,65 +222,205 @@
   /* ── Responsive column classes (media queries for power users) ─────────── */
   /* sm: 640px+ */
   @media (min-width: 640px) {
-    .sm\:col-1  { --span: 1; }
-    .sm\:col-2  { --span: 2; }
-    .sm\:col-3  { --span: 3; }
-    .sm\:col-4  { --span: 4; }
-    .sm\:col-5  { --span: 5; }
-    .sm\:col-6  { --span: 6; }
-    .sm\:col-7  { --span: 7; }
-    .sm\:col-8  { --span: 8; }
-    .sm\:col-9  { --span: 9; }
-    .sm\:col-10 { --span: 10; }
-    .sm\:col-11 { --span: 11; }
-    .sm\:col-12 { --span: 12; }
+    .sm\:col-1 {
+      --span: 1;
+    }
+
+    .sm\:col-2 {
+      --span: 2;
+    }
+
+    .sm\:col-3 {
+      --span: 3;
+    }
+
+    .sm\:col-4 {
+      --span: 4;
+    }
+
+    .sm\:col-5 {
+      --span: 5;
+    }
+
+    .sm\:col-6 {
+      --span: 6;
+    }
+
+    .sm\:col-7 {
+      --span: 7;
+    }
+
+    .sm\:col-8 {
+      --span: 8;
+    }
+
+    .sm\:col-9 {
+      --span: 9;
+    }
+
+    .sm\:col-10 {
+      --span: 10;
+    }
+
+    .sm\:col-11 {
+      --span: 11;
+    }
+
+    .sm\:col-12 {
+      --span: 12;
+    }
   }
 
   /* md: 768px+ */
   @media (min-width: 768px) {
-    .md\:col-1  { --span: 1; }
-    .md\:col-2  { --span: 2; }
-    .md\:col-3  { --span: 3; }
-    .md\:col-4  { --span: 4; }
-    .md\:col-5  { --span: 5; }
-    .md\:col-6  { --span: 6; }
-    .md\:col-7  { --span: 7; }
-    .md\:col-8  { --span: 8; }
-    .md\:col-9  { --span: 9; }
-    .md\:col-10 { --span: 10; }
-    .md\:col-11 { --span: 11; }
-    .md\:col-12 { --span: 12; }
+    .md\:col-1 {
+      --span: 1;
+    }
+
+    .md\:col-2 {
+      --span: 2;
+    }
+
+    .md\:col-3 {
+      --span: 3;
+    }
+
+    .md\:col-4 {
+      --span: 4;
+    }
+
+    .md\:col-5 {
+      --span: 5;
+    }
+
+    .md\:col-6 {
+      --span: 6;
+    }
+
+    .md\:col-7 {
+      --span: 7;
+    }
+
+    .md\:col-8 {
+      --span: 8;
+    }
+
+    .md\:col-9 {
+      --span: 9;
+    }
+
+    .md\:col-10 {
+      --span: 10;
+    }
+
+    .md\:col-11 {
+      --span: 11;
+    }
+
+    .md\:col-12 {
+      --span: 12;
+    }
   }
 
   /* lg: 1024px+ */
   @media (min-width: 1024px) {
-    .lg\:col-1  { --span: 1; }
-    .lg\:col-2  { --span: 2; }
-    .lg\:col-3  { --span: 3; }
-    .lg\:col-4  { --span: 4; }
-    .lg\:col-5  { --span: 5; }
-    .lg\:col-6  { --span: 6; }
-    .lg\:col-7  { --span: 7; }
-    .lg\:col-8  { --span: 8; }
-    .lg\:col-9  { --span: 9; }
-    .lg\:col-10 { --span: 10; }
-    .lg\:col-11 { --span: 11; }
-    .lg\:col-12 { --span: 12; }
+    .lg\:col-1 {
+      --span: 1;
+    }
+
+    .lg\:col-2 {
+      --span: 2;
+    }
+
+    .lg\:col-3 {
+      --span: 3;
+    }
+
+    .lg\:col-4 {
+      --span: 4;
+    }
+
+    .lg\:col-5 {
+      --span: 5;
+    }
+
+    .lg\:col-6 {
+      --span: 6;
+    }
+
+    .lg\:col-7 {
+      --span: 7;
+    }
+
+    .lg\:col-8 {
+      --span: 8;
+    }
+
+    .lg\:col-9 {
+      --span: 9;
+    }
+
+    .lg\:col-10 {
+      --span: 10;
+    }
+
+    .lg\:col-11 {
+      --span: 11;
+    }
+
+    .lg\:col-12 {
+      --span: 12;
+    }
   }
 
   /* xl: 1280px+ */
   @media (min-width: 1280px) {
-    .xl\:col-1  { --span: 1; }
-    .xl\:col-2  { --span: 2; }
-    .xl\:col-3  { --span: 3; }
-    .xl\:col-4  { --span: 4; }
-    .xl\:col-5  { --span: 5; }
-    .xl\:col-6  { --span: 6; }
-    .xl\:col-7  { --span: 7; }
-    .xl\:col-8  { --span: 8; }
-    .xl\:col-9  { --span: 9; }
-    .xl\:col-10 { --span: 10; }
-    .xl\:col-11 { --span: 11; }
-    .xl\:col-12 { --span: 12; }
-  }
-}
+    .xl\:col-1 {
+      --span: 1;
+    }
+
+    .xl\:col-2 {
+      --span: 2;
+    }
+
+    .xl\:col-3 {
+      --span: 3;
+    }
+
+    .xl\:col-4 {
+      --span: 4;
+    }
+
+    .xl\:col-5 {
+      --span: 5;
+    }
+
+    .xl\:col-6 {
+      --span: 6;
+    }
+
+    .xl\:col-7 {
+      --span: 7;
+    }
+
+    .xl\:col-8 {
+      --span: 8;
+    }
+
+    .xl\:col-9 {
+      --span: 9;
+    }
+
+    .xl\:col-10 {
+      --span: 10;
+    }
+
+    .xl\:col-11 {
+      --span: 11;
+    }
+
+    .xl\:col-12 {
+      --span: 12;
+    }
+  }
+}