Merge pull request #34 from supple-kit/feature/block-gap-layout-object

Remove `o-layout` block axis gaps with native row-gap property.
supple-kit · Apr 5, 2022 · 0f6e1a6 · 0f6e1a6
2 parents a3894bd + b2e1e1a
commit 0f6e1a6
Show file tree

Hide file tree

Showing 3 changed files with 814 additions and 1,121 deletions.
diff --git a/objects/layout/_index.scss b/objects/layout/_index.scss
@@ -46,7 +46,7 @@ $selector: '> *';
   flex-flow: row wrap;
   align-items: flex-start;
   padding: 0; /* [1] */
-  margin-block-start: calc(-1 * var(--layout-block-gap));
+  row-gap: var(--layout-block-gap);
   margin-inline-start: calc(-1 * var(--layout-inline-gap)); /* [1,2] */
   list-style: none; /* [1] */
 
@@ -68,12 +68,10 @@ $selector: '> *';
     --colspan: var(--columns);
     --offset: 0;
     --layout-igi: var(--layout-inline-gap); /* [4] */
-    --layout-bgi: var(--layout-block-gap); /* [4] */
     flex-basis: calc(
       (100% / var(--columns) * var(--colspan)) - var(--layout-igi)
     ); /* [1] */
     min-inline-size: 0; /* [2] */
-    margin-block-start: var(--layout-bgi);
     margin-inline-start: calc(
       100% / var(--columns) * var(--offset) + var(--layout-igi)
     ); /* [3] */
@@ -134,8 +132,6 @@ $selector: '> *';
  */
 .o-layout__cell {
   --layout-igi: 0px; // stylelint-disable-line
-  --layout-bgi: 0px; // stylelint-disable-line
-  padding-block-start: var(--layout-block-gap);
   padding-inline-start: var(--layout-inline-gap);
 
   // Old way to stretch inner items