pacem-less 0.40.0-delphi → 0.40.0-durovernon

package/pacem/layout/dark/container.less

@@ -1,6 +1,12 @@
 @import "../shared";
 
 .@{PCSS}-contain {
+    contain: size;
+
+    &.contain-size {
+        // default
+    }
+
     &.contain-none {
         contain: none;
     }
@@ -9,10 +15,6 @@
         contain: strict;
     }
 
-    &.contain-size {
-        contain: size;
-    }
-
     &.contain-inline-size {
         contain: inline-size;
     }
@@ -30,18 +32,19 @@
     }
 }
 
-/* container queries */
 .@{PCSS}-container {
+    container-type: inline-size;
+    container-name: ~"@{PCSS}";
 
-    &.container-normal {
-        container-type: normal;
+    &.container-inline-size {
+        // default
     }
 
     &.container-size {
         container-type: size;
     }
 
-    &.container-inline-size {
-        container-type: inline-size;
+    &.container-normal {
+        container-type: normal;
     }
 }

package/pacem/layout/dark/grids.less

@@ -215,74 +215,53 @@
     // TODO: exploit container queries
 }
 
+
+@sizes: sm, md, lg, xl, hd, 2k, 4k;
+
 @media (max-width: @threshold_sm - 1) {
 
-    .@{PCSS}-grid .@{PCSS}-cell {
+    .@{PCSS}-grid:not(.grid-contained) .@{PCSS}-cell {
         .ColsMid(cols, xs, 12);
         .RowsMid(rows, xs, 12);
     }
 }
 
-@media (min-width: @threshold_sm) {
-
-    .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, sm, 12);
-        .RowsMid(rows, sm, 12);
-    }
-}
-
-@media (min-width: @threshold_md) {
-
-    .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, md, 12);
-        .RowsMid(rows, md, 12);
-    }
-}
-
-@media (min-width: @threshold_lg) {
-
-    .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, lg, 12);
-        .RowsMid(rows, lg, 12);
-    }
-}
-
-@media (min-width: @threshold_xl) {
-
-    .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, xl, 12);
-        .RowsMid(rows, xl, 12);
-    }
-}
-
-@media (min-width: @threshold_hd) {
-
-    .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, hd, 12);
-        .RowsMid(rows, hd, 12);
+each(@sizes, {   
+    @_threshold: ~"threshold_@{value}";
+    @media (min-width: @@_threshold){
+    
+        .@{PCSS}-grid:not(.grid-contained) .@{PCSS}-cell {
+            .ColsMid(cols, @value, 12);
+            .RowsMid(rows, @value, 12);
+        }
     }
-}
+})
 
-@media (min-width: @threshold_2k) {
+@media (orientation: portrait) {
 
     .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, 2k, 12);
-        .RowsMid(rows, 2k, 12);
+        .ColsMid(cols, v, 12);
+        .RowsMid(rows, v, 12);
     }
 }
 
-@media (min-width: @threshold_4k) {
+// container queries
+@_threshold_xs: @threshold_sm - 1;
+@container ~"@{PCSS}" (max-width: @_threshold_xs) {
 
-    .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, 4k, 12);
-        .RowsMid(rows, 4k, 12);
+    .@{PCSS}-grid.grid-contained .@{PCSS}-cell {
+        .ColsMid(cols, xs, 12);
+        .RowsMid(rows, xs, 12);
     }
 }
 
-@media (orientation: portrait) {
-
-    .@{PCSS}-grid .@{PCSS}-cell {
-        .ColsMid(cols, v, 12);
-        .RowsMid(rows, v, 12);
+each(@sizes, {   
+    @_threshold: ~"threshold_@{value}";
+    @container @PCSS (min-width: @@_threshold){
+    
+        .@{PCSS}-grid.grid-contained .@{PCSS}-cell {
+            .ColsMid(cols, @value, 12);
+            .RowsMid(rows, @value, 12);
+        }
     }
-}
+})

package/pacem/layout/dark/index.less

@@ -19,6 +19,7 @@
 @import "breadcrumbs";
 @import "fetch-feedback";
 @import "container";
+@import "scroll";
 @import "coloring";
 @import "borders";
 @import "shapes";

package/pacem/layout/dark/scroll.less

@@ -0,0 +1,78 @@
+@import "../shared";
+
+.scroll-snap {
+    scroll-behavior: smooth;
+    scroll-snap-type: both;
+
+    &.snap-proximity {
+        scroll-snap-type: both proximity;
+    }
+
+    &.snap-mandatory {
+        scroll-snap-type: both mandatory;
+    }
+
+    &.snap-inline {
+        scroll-snap-type: inline;
+
+        &.snap-proximity {
+            scroll-snap-type: inline proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: inline mandatory;
+        }
+    }
+
+    &.snap-block {
+        scroll-snap-type: block;
+
+        &.snap-proximity {
+            scroll-snap-type: block proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: block mandatory;
+        }
+    }
+
+    &.snap-x {
+        scroll-snap-type: x;
+
+        &.snap-proximity {
+            scroll-snap-type: x proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: x mandatory;
+        }
+    }
+
+    &.snap-y {
+        scroll-snap-type: y;
+
+        &.snap-proximity {
+            scroll-snap-type: y proximity;
+        }
+
+        &.snap-mandatory {
+            scroll-snap-type: y mandatory;
+        }
+    }
+
+    > * {
+        scroll-snap-align: start;
+
+        &.snap-start {
+            // defaults to start
+        }
+
+        &.snap-center {
+            scroll-snap-align: center;
+        }
+
+        &.snap-end {
+            scroll-snap-align: end;
+        }
+    }
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.0-delphi",
+  "version": "0.40.0-durovernon",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {