@stackoverflow/stacks 1.0.0 → 1.2.0

package/lib/css/atomic/grid.less

@@ -1,174 +1,174 @@
-//
-//  STACK OVERFLOW
-//  GRID
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • GAP
-//  • GRID FLOW
-//  • GRID COLUMN TEMPLATES
-//  • COLUMN SPANS
-//  • ROW SPANS
-//
-
-//  ============================================================================
-//  $   GAP
-//      Insert spaces or gutters in between grid items
-//      When this is available in flex layouts, this can be separated
-//      into its own section and documentation
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.g0', { gap: 0 });
-#stacks-internals #responsify('.g1', { gap: var(--su1) });
-#stacks-internals #responsify('.g2', { gap: var(--su2) });
-#stacks-internals #responsify('.g4', { gap: var(--su4); });
-#stacks-internals #responsify('.g6', { gap: var(--su6); });
-#stacks-internals #responsify('.g8', { gap: var(--su8); });
-#stacks-internals #responsify('.g12', { gap: var(--su12); });
-#stacks-internals #responsify('.g16', { gap: var(--su16); });
-#stacks-internals #responsify('.g24', { gap: var(--su24); });
-#stacks-internals #responsify('.g32', { gap: var(--su32); });
-#stacks-internals #responsify('.g48', { gap: var(--su48); });
-#stacks-internals #responsify('.g64', { gap: var(--su64); });
-
-//  ============================================================================
-//  $   GRID FLOW
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.g-af-dense', { grid-auto-flow: dense; });
-#stacks-internals #responsify('.g-af-row', { grid-auto-flow: row; });
-#stacks-internals #responsify('.g-af-column', { grid-auto-flow: column; });
-
-//  ============================================================================
-//  $   GRID COLUMN TEMPLATES
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.grid__1', { grid-template-columns: repeat(1, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__2', { grid-template-columns: repeat(2, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__3', { grid-template-columns: repeat(3, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__4', { grid-template-columns: repeat(4, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__5', { grid-template-columns: repeat(5, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__6', { grid-template-columns: repeat(6, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__7', { grid-template-columns: repeat(7, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__8', { grid-template-columns: repeat(8, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__9', { grid-template-columns: repeat(9, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
-#stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
-
-//  ============================================================================
-//  $   COLUMN SPANS
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.grid--col-all', { grid-column: ~"1 / -1"; });
-#stacks-internals #responsify('.grid--row-all', { grid-row: ~"1 / -1"; });
-
-#stacks-internals #responsify('.grid--col1', { grid-column: span 1; });
-#stacks-internals #responsify('.grid--col2', { grid-column: span 2; });
-#stacks-internals #responsify('.grid--col3', { grid-column: span 3; });
-#stacks-internals #responsify('.grid--col4', { grid-column: span 4; });
-#stacks-internals #responsify('.grid--col5', { grid-column: span 5; });
-#stacks-internals #responsify('.grid--col6', { grid-column: span 6; });
-#stacks-internals #responsify('.grid--col7', { grid-column: span 7; });
-#stacks-internals #responsify('.grid--col8', { grid-column: span 8; });
-#stacks-internals #responsify('.grid--col9', { grid-column: span 9; });
-#stacks-internals #responsify('.grid--col10', { grid-column: span 10; });
-#stacks-internals #responsify('.grid--col11', { grid-column: span 11; });
-#stacks-internals #responsify('.grid--col12', { grid-column: span 12; });
-
-//  ============================================================================
-//  $   ROW SPANS
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.grid--row1', { grid-row: span 1; });
-#stacks-internals #responsify('.grid--row2', { grid-row: span 2; });
-#stacks-internals #responsify('.grid--row3', { grid-row: span 3; });
-#stacks-internals #responsify('.grid--row4', { grid-row: span 4; });
-#stacks-internals #responsify('.grid--row5', { grid-row: span 5; });
-#stacks-internals #responsify('.grid--row6', { grid-row: span 6; });
-#stacks-internals #responsify('.grid--row7', { grid-row: span 7; });
-#stacks-internals #responsify('.grid--row8', { grid-row: span 8; });
-#stacks-internals #responsify('.grid--row9', { grid-row: span 9; });
-#stacks-internals #responsify('.grid--row10', { grid-row: span 10; });
-#stacks-internals #responsify('.grid--row11', { grid-row: span 11; });
-#stacks-internals #responsify('.grid--row12', { grid-row: span 12; });
-
-//  ============================================================================
-//  $   COLUMN START
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.grid--col-start1', { grid-column-start: 1; });
-#stacks-internals #responsify('.grid--col-start2', { grid-column-start: 2; });
-#stacks-internals #responsify('.grid--col-start3', { grid-column-start: 3; });
-#stacks-internals #responsify('.grid--col-start4', { grid-column-start: 4; });
-#stacks-internals #responsify('.grid--col-start5', { grid-column-start: 5; });
-#stacks-internals #responsify('.grid--col-start6', { grid-column-start: 6; });
-#stacks-internals #responsify('.grid--col-start7', { grid-column-start: 7; });
-#stacks-internals #responsify('.grid--col-start8', { grid-column-start: 8; });
-#stacks-internals #responsify('.grid--col-start9', { grid-column-start: 9; });
-#stacks-internals #responsify('.grid--col-start10', { grid-column-start: 10; });
-#stacks-internals #responsify('.grid--col-start11', { grid-column-start: 11; });
-#stacks-internals #responsify('.grid--col-start12', { grid-column-start: 12; });
-
-//  ============================================================================
-//  $   COLUMN END
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.grid--col-end2', { grid-column-end: 2; });
-#stacks-internals #responsify('.grid--col-end3', { grid-column-end: 3; });
-#stacks-internals #responsify('.grid--col-end4', { grid-column-end: 4; });
-#stacks-internals #responsify('.grid--col-end5', { grid-column-end: 5; });
-#stacks-internals #responsify('.grid--col-end6', { grid-column-end: 6; });
-#stacks-internals #responsify('.grid--col-end7', { grid-column-end: 7; });
-#stacks-internals #responsify('.grid--col-end8', { grid-column-end: 8; });
-#stacks-internals #responsify('.grid--col-end9', { grid-column-end: 9; });
-#stacks-internals #responsify('.grid--col-end10', { grid-column-end: 10; });
-#stacks-internals #responsify('.grid--col-end11', { grid-column-end: 11; });
-#stacks-internals #responsify('.grid--col-end12', { grid-column-end: 12; });
-#stacks-internals #responsify('.grid--col-end13', { grid-column-end: 13; });
-
-//  ============================================================================
-//  $   ROW START
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.grid--row-start1', { grid-row-start: 1; });
-#stacks-internals #responsify('.grid--row-start2', { grid-row-start: 2; });
-#stacks-internals #responsify('.grid--row-start3', { grid-row-start: 3; });
-#stacks-internals #responsify('.grid--row-start4', { grid-row-start: 4; });
-#stacks-internals #responsify('.grid--row-start5', { grid-row-start: 5; });
-#stacks-internals #responsify('.grid--row-start6', { grid-row-start: 6; });
-#stacks-internals #responsify('.grid--row-start7', { grid-row-start: 7; });
-#stacks-internals #responsify('.grid--row-start8', { grid-row-start: 8; });
-#stacks-internals #responsify('.grid--row-start9', { grid-row-start: 9; });
-#stacks-internals #responsify('.grid--row-start10', { grid-row-start: 10; });
-#stacks-internals #responsify('.grid--row-start11', { grid-row-start: 11; });
-#stacks-internals #responsify('.grid--row-start12', { grid-row-start: 12; });
-
-//  ============================================================================
-//  $   ROW END
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.grid--row-end2', { grid-row-end: 2; });
-#stacks-internals #responsify('.grid--row-end3', { grid-row-end: 3; });
-#stacks-internals #responsify('.grid--row-end4', { grid-row-end: 4; });
-#stacks-internals #responsify('.grid--row-end5', { grid-row-end: 5; });
-#stacks-internals #responsify('.grid--row-end6', { grid-row-end: 6; });
-#stacks-internals #responsify('.grid--row-end7', { grid-row-end: 7; });
-#stacks-internals #responsify('.grid--row-end8', { grid-row-end: 8; });
-#stacks-internals #responsify('.grid--row-end9', { grid-row-end: 9; });
-#stacks-internals #responsify('.grid--row-end10', { grid-row-end: 10; });
-#stacks-internals #responsify('.grid--row-end11', { grid-row-end: 11; });
-#stacks-internals #responsify('.grid--row-end12', { grid-row-end: 12; });
-#stacks-internals #responsify('.grid--row-end13', { grid-row-end: 13; });
-
-//  ============================================================================
-//  $   JUSTIFICATION
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.ji-auto', { justify-items: auto !important; });
-#stacks-internals #responsify('.ji-center', { justify-items: center !important; });
-#stacks-internals #responsify('.ji-start', { justify-items: start !important; });
-#stacks-internals #responsify('.ji-end', { justify-items: end !important; });
-#stacks-internals #responsify('.ji-stretch', { justify-items: stretch !important; });
-#stacks-internals #responsify('.ji-unset', { justify-items: unset !important; });
-
-#stacks-internals #responsify('.js-auto', { justify-self: auto !important; });
-#stacks-internals #responsify('.js-center', { justify-self: center !important; });
-#stacks-internals #responsify('.js-start', { justify-self: start !important; });
-#stacks-internals #responsify('.js-end', { justify-self: end !important; });
-#stacks-internals #responsify('.js-stretch', { justify-self: stretch !important; });
-#stacks-internals #responsify('.js-unset', { justify-self: unset !important; });
+//
+//  STACK OVERFLOW
+//  GRID
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  TABLE OF CONTENTS
+//  • GAP
+//  • GRID FLOW
+//  • GRID COLUMN TEMPLATES
+//  • COLUMN SPANS
+//  • ROW SPANS
+//
+
+//  ============================================================================
+//  $   GAP
+//      Insert spaces or gutters in between grid items
+//      When this is available in flex layouts, this can be separated
+//      into its own section and documentation
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.g0', { gap: 0 });
+#stacks-internals #responsify('.g1', { gap: var(--su1) });
+#stacks-internals #responsify('.g2', { gap: var(--su2) });
+#stacks-internals #responsify('.g4', { gap: var(--su4); });
+#stacks-internals #responsify('.g6', { gap: var(--su6); });
+#stacks-internals #responsify('.g8', { gap: var(--su8); });
+#stacks-internals #responsify('.g12', { gap: var(--su12); });
+#stacks-internals #responsify('.g16', { gap: var(--su16); });
+#stacks-internals #responsify('.g24', { gap: var(--su24); });
+#stacks-internals #responsify('.g32', { gap: var(--su32); });
+#stacks-internals #responsify('.g48', { gap: var(--su48); });
+#stacks-internals #responsify('.g64', { gap: var(--su64); });
+
+//  ============================================================================
+//  $   GRID FLOW
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.g-af-dense', { grid-auto-flow: dense; });
+#stacks-internals #responsify('.g-af-row', { grid-auto-flow: row; });
+#stacks-internals #responsify('.g-af-column', { grid-auto-flow: column; });
+
+//  ============================================================================
+//  $   GRID COLUMN TEMPLATES
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.grid__1', { grid-template-columns: repeat(1, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__2', { grid-template-columns: repeat(2, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__3', { grid-template-columns: repeat(3, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__4', { grid-template-columns: repeat(4, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__5', { grid-template-columns: repeat(5, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__6', { grid-template-columns: repeat(6, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__7', { grid-template-columns: repeat(7, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__8', { grid-template-columns: repeat(8, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__9', { grid-template-columns: repeat(9, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
+
+//  ============================================================================
+//  $   COLUMN SPANS
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.grid--col-all', { grid-column: ~"1 / -1"; });
+#stacks-internals #responsify('.grid--row-all', { grid-row: ~"1 / -1"; });
+
+#stacks-internals #responsify('.grid--col1', { grid-column: span 1; });
+#stacks-internals #responsify('.grid--col2', { grid-column: span 2; });
+#stacks-internals #responsify('.grid--col3', { grid-column: span 3; });
+#stacks-internals #responsify('.grid--col4', { grid-column: span 4; });
+#stacks-internals #responsify('.grid--col5', { grid-column: span 5; });
+#stacks-internals #responsify('.grid--col6', { grid-column: span 6; });
+#stacks-internals #responsify('.grid--col7', { grid-column: span 7; });
+#stacks-internals #responsify('.grid--col8', { grid-column: span 8; });
+#stacks-internals #responsify('.grid--col9', { grid-column: span 9; });
+#stacks-internals #responsify('.grid--col10', { grid-column: span 10; });
+#stacks-internals #responsify('.grid--col11', { grid-column: span 11; });
+#stacks-internals #responsify('.grid--col12', { grid-column: span 12; });
+
+//  ============================================================================
+//  $   ROW SPANS
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.grid--row1', { grid-row: span 1; });
+#stacks-internals #responsify('.grid--row2', { grid-row: span 2; });
+#stacks-internals #responsify('.grid--row3', { grid-row: span 3; });
+#stacks-internals #responsify('.grid--row4', { grid-row: span 4; });
+#stacks-internals #responsify('.grid--row5', { grid-row: span 5; });
+#stacks-internals #responsify('.grid--row6', { grid-row: span 6; });
+#stacks-internals #responsify('.grid--row7', { grid-row: span 7; });
+#stacks-internals #responsify('.grid--row8', { grid-row: span 8; });
+#stacks-internals #responsify('.grid--row9', { grid-row: span 9; });
+#stacks-internals #responsify('.grid--row10', { grid-row: span 10; });
+#stacks-internals #responsify('.grid--row11', { grid-row: span 11; });
+#stacks-internals #responsify('.grid--row12', { grid-row: span 12; });
+
+//  ============================================================================
+//  $   COLUMN START
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.grid--col-start1', { grid-column-start: 1; });
+#stacks-internals #responsify('.grid--col-start2', { grid-column-start: 2; });
+#stacks-internals #responsify('.grid--col-start3', { grid-column-start: 3; });
+#stacks-internals #responsify('.grid--col-start4', { grid-column-start: 4; });
+#stacks-internals #responsify('.grid--col-start5', { grid-column-start: 5; });
+#stacks-internals #responsify('.grid--col-start6', { grid-column-start: 6; });
+#stacks-internals #responsify('.grid--col-start7', { grid-column-start: 7; });
+#stacks-internals #responsify('.grid--col-start8', { grid-column-start: 8; });
+#stacks-internals #responsify('.grid--col-start9', { grid-column-start: 9; });
+#stacks-internals #responsify('.grid--col-start10', { grid-column-start: 10; });
+#stacks-internals #responsify('.grid--col-start11', { grid-column-start: 11; });
+#stacks-internals #responsify('.grid--col-start12', { grid-column-start: 12; });
+
+//  ============================================================================
+//  $   COLUMN END
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.grid--col-end2', { grid-column-end: 2; });
+#stacks-internals #responsify('.grid--col-end3', { grid-column-end: 3; });
+#stacks-internals #responsify('.grid--col-end4', { grid-column-end: 4; });
+#stacks-internals #responsify('.grid--col-end5', { grid-column-end: 5; });
+#stacks-internals #responsify('.grid--col-end6', { grid-column-end: 6; });
+#stacks-internals #responsify('.grid--col-end7', { grid-column-end: 7; });
+#stacks-internals #responsify('.grid--col-end8', { grid-column-end: 8; });
+#stacks-internals #responsify('.grid--col-end9', { grid-column-end: 9; });
+#stacks-internals #responsify('.grid--col-end10', { grid-column-end: 10; });
+#stacks-internals #responsify('.grid--col-end11', { grid-column-end: 11; });
+#stacks-internals #responsify('.grid--col-end12', { grid-column-end: 12; });
+#stacks-internals #responsify('.grid--col-end13', { grid-column-end: 13; });
+
+//  ============================================================================
+//  $   ROW START
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.grid--row-start1', { grid-row-start: 1; });
+#stacks-internals #responsify('.grid--row-start2', { grid-row-start: 2; });
+#stacks-internals #responsify('.grid--row-start3', { grid-row-start: 3; });
+#stacks-internals #responsify('.grid--row-start4', { grid-row-start: 4; });
+#stacks-internals #responsify('.grid--row-start5', { grid-row-start: 5; });
+#stacks-internals #responsify('.grid--row-start6', { grid-row-start: 6; });
+#stacks-internals #responsify('.grid--row-start7', { grid-row-start: 7; });
+#stacks-internals #responsify('.grid--row-start8', { grid-row-start: 8; });
+#stacks-internals #responsify('.grid--row-start9', { grid-row-start: 9; });
+#stacks-internals #responsify('.grid--row-start10', { grid-row-start: 10; });
+#stacks-internals #responsify('.grid--row-start11', { grid-row-start: 11; });
+#stacks-internals #responsify('.grid--row-start12', { grid-row-start: 12; });
+
+//  ============================================================================
+//  $   ROW END
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.grid--row-end2', { grid-row-end: 2; });
+#stacks-internals #responsify('.grid--row-end3', { grid-row-end: 3; });
+#stacks-internals #responsify('.grid--row-end4', { grid-row-end: 4; });
+#stacks-internals #responsify('.grid--row-end5', { grid-row-end: 5; });
+#stacks-internals #responsify('.grid--row-end6', { grid-row-end: 6; });
+#stacks-internals #responsify('.grid--row-end7', { grid-row-end: 7; });
+#stacks-internals #responsify('.grid--row-end8', { grid-row-end: 8; });
+#stacks-internals #responsify('.grid--row-end9', { grid-row-end: 9; });
+#stacks-internals #responsify('.grid--row-end10', { grid-row-end: 10; });
+#stacks-internals #responsify('.grid--row-end11', { grid-row-end: 11; });
+#stacks-internals #responsify('.grid--row-end12', { grid-row-end: 12; });
+#stacks-internals #responsify('.grid--row-end13', { grid-row-end: 13; });
+
+//  ============================================================================
+//  $   JUSTIFICATION
+//  ----------------------------------------------------------------------------
+#stacks-internals #responsify('.ji-auto', { justify-items: auto !important; });
+#stacks-internals #responsify('.ji-center', { justify-items: center !important; });
+#stacks-internals #responsify('.ji-start', { justify-items: start !important; });
+#stacks-internals #responsify('.ji-end', { justify-items: end !important; });
+#stacks-internals #responsify('.ji-stretch', { justify-items: stretch !important; });
+#stacks-internals #responsify('.ji-unset', { justify-items: unset !important; });
+
+#stacks-internals #responsify('.js-auto', { justify-self: auto !important; });
+#stacks-internals #responsify('.js-center', { justify-self: center !important; });
+#stacks-internals #responsify('.js-start', { justify-self: start !important; });
+#stacks-internals #responsify('.js-end', { justify-self: end !important; });
+#stacks-internals #responsify('.js-stretch', { justify-self: stretch !important; });
+#stacks-internals #responsify('.js-unset', { justify-self: unset !important; });