@stackoverflow/stacks 2.7.3 → 2.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/LICENSE.MD +9 -9
  2. package/README.md +158 -180
  3. package/dist/css/stacks.css +6 -0
  4. package/dist/js/stacks.min.js +1 -1
  5. package/lib/atomic/border.less +139 -139
  6. package/lib/atomic/color.less +36 -36
  7. package/lib/atomic/flex.less +426 -426
  8. package/lib/atomic/gap.less +44 -44
  9. package/lib/atomic/grid.less +139 -139
  10. package/lib/atomic/misc.less +374 -374
  11. package/lib/atomic/spacing.less +98 -98
  12. package/lib/atomic/typography.less +266 -264
  13. package/lib/atomic/width-height.less +194 -194
  14. package/lib/base/body.less +44 -44
  15. package/lib/base/configuration-static.less +61 -61
  16. package/lib/base/fieldset.less +5 -5
  17. package/lib/base/icon.less +11 -11
  18. package/lib/base/internal.less +220 -220
  19. package/lib/base/reset-meyer.less +64 -64
  20. package/lib/base/reset-normalize.less +449 -449
  21. package/lib/base/reset.less +20 -20
  22. package/lib/components/activity-indicator/activity-indicator.less +53 -53
  23. package/lib/components/avatar/avatar.less +108 -108
  24. package/lib/components/award-bling/award-bling.less +31 -31
  25. package/lib/components/banner/banner.less +44 -44
  26. package/lib/components/banner/banner.ts +149 -149
  27. package/lib/components/block-link/block-link.less +82 -82
  28. package/lib/components/breadcrumbs/breadcrumbs.less +41 -41
  29. package/lib/components/button-group/button-group.less +82 -82
  30. package/lib/components/card/card.less +37 -37
  31. package/lib/components/check-control/check-control.less +17 -17
  32. package/lib/components/check-group/check-group.less +19 -19
  33. package/lib/components/checkbox_radio/checkbox_radio.less +159 -159
  34. package/lib/components/code-block/code-block.fixtures.ts +88 -88
  35. package/lib/components/code-block/code-block.less +116 -116
  36. package/lib/components/description/description.less +9 -9
  37. package/lib/components/empty-state/empty-state.less +16 -16
  38. package/lib/components/expandable/expandable.less +118 -118
  39. package/lib/components/input-fill/input-fill.less +35 -35
  40. package/lib/components/input-icon/input-icon.less +45 -45
  41. package/lib/components/input-message/input-message.less +49 -49
  42. package/lib/components/label/label.less +110 -110
  43. package/lib/components/link-preview/link-preview.less +148 -148
  44. package/lib/components/menu/menu.less +41 -41
  45. package/lib/components/modal/modal.less +118 -118
  46. package/lib/components/modal/modal.ts +383 -383
  47. package/lib/components/navigation/navigation.less +136 -136
  48. package/lib/components/navigation/navigation.ts +128 -128
  49. package/lib/components/page-title/page-title.less +51 -51
  50. package/lib/components/popover/popover.less +159 -159
  51. package/lib/components/popover/popover.ts +651 -651
  52. package/lib/components/post-summary/post-summary.less +457 -457
  53. package/lib/components/progress-bar/progress-bar.less +291 -291
  54. package/lib/components/prose/prose.less +452 -452
  55. package/lib/components/select/select.less +138 -138
  56. package/lib/components/spinner/spinner.less +103 -103
  57. package/lib/components/table/table.ts +296 -296
  58. package/lib/components/table-container/table-container.less +4 -4
  59. package/lib/components/tag/tag.less +186 -186
  60. package/lib/components/toast/toast.less +35 -35
  61. package/lib/components/toast/toast.ts +357 -357
  62. package/lib/components/toggle-switch/toggle-switch.less +104 -104
  63. package/lib/components/topbar/topbar.less +553 -553
  64. package/lib/components/uploader/uploader.less +205 -205
  65. package/lib/components/user-card/user-card.less +129 -129
  66. package/lib/controllers.ts +33 -33
  67. package/lib/exports/color-mixins.less +283 -283
  68. package/lib/exports/constants-helpers.less +108 -108
  69. package/lib/exports/constants-type.less +155 -155
  70. package/lib/exports/exports.less +15 -15
  71. package/lib/exports/mixins.less +334 -333
  72. package/lib/exports/spacing-mixins.less +67 -67
  73. package/lib/index.ts +32 -32
  74. package/lib/input-utils.less +41 -41
  75. package/lib/stacks-dynamic.less +24 -24
  76. package/lib/stacks-static.less +93 -93
  77. package/lib/stacks.less +13 -13
  78. package/lib/test/assertions.ts +36 -36
  79. package/lib/test/less-test-utils.ts +28 -28
  80. package/lib/test/open-wc-testing-patch.d.ts +26 -26
  81. package/lib/tsconfig.build.json +4 -4
  82. package/lib/tsconfig.json +17 -17
  83. package/package.json +26 -22
package/lib/atomic/gap.less CHANGED
@@ -1,44 +1,44 @@
1
- #stacks-internals #responsify('.g0', { --_gap-y: 0; --_gap-x: 0; });
2
- #stacks-internals #responsify('.g1', { --_gap-y: var(--su1); --_gap-x: var(--su1); });
3
- #stacks-internals #responsify('.g2', { --_gap-y: var(--su2); --_gap-x: var(--su2); });
4
- #stacks-internals #responsify('.g4', { --_gap-y: var(--su4); --_gap-x: var(--su4); });
5
- #stacks-internals #responsify('.g6', { --_gap-y: var(--su6); --_gap-x: var(--su6); });
6
- #stacks-internals #responsify('.g8', { --_gap-y: var(--su8); --_gap-x: var(--su8); });
7
- #stacks-internals #responsify('.g12', { --_gap-y: var(--su12); --_gap-x: var(--su12); });
8
- #stacks-internals #responsify('.g16', { --_gap-y: var(--su16); --_gap-x: var(--su16); });
9
- #stacks-internals #responsify('.g24', { --_gap-y: var(--su24); --_gap-x: var(--su24); });
10
- #stacks-internals #responsify('.g32', { --_gap-y: var(--su32); --_gap-x: var(--su32); });
11
- #stacks-internals #responsify('.g48', { --_gap-y: var(--su48); --_gap-x: var(--su48); });
12
- #stacks-internals #responsify('.g64', { --_gap-y: var(--su64); --_gap-x: var(--su64); });
13
-
14
- #stacks-internals #responsify('.gx0', { --_gap-x: 0; });
15
- #stacks-internals #responsify('.gx1', { --_gap-x: var(--su1); });
16
- #stacks-internals #responsify('.gx2', { --_gap-x: var(--su2); });
17
- #stacks-internals #responsify('.gx4', { --_gap-x: var(--su4); });
18
- #stacks-internals #responsify('.gx6', { --_gap-x: var(--su6); });
19
- #stacks-internals #responsify('.gx8', { --_gap-x: var(--su8); });
20
- #stacks-internals #responsify('.gx12', { --_gap-x: var(--su12); });
21
- #stacks-internals #responsify('.gx16', { --_gap-x: var(--su16); });
22
- #stacks-internals #responsify('.gx24', { --_gap-x: var(--su24); });
23
- #stacks-internals #responsify('.gx32', { --_gap-x: var(--su32); });
24
- #stacks-internals #responsify('.gx48', { --_gap-x: var(--su48); });
25
- #stacks-internals #responsify('.gx64', { --_gap-x: var(--su64); });
26
-
27
- #stacks-internals #responsify('.gy0', { --_gap-y: 0; });
28
- #stacks-internals #responsify('.gy1', { --_gap-y: var(--su1); });
29
- #stacks-internals #responsify('.gy2', { --_gap-y: var(--su2); });
30
- #stacks-internals #responsify('.gy4', { --_gap-y: var(--su4); });
31
- #stacks-internals #responsify('.gy6', { --_gap-y: var(--su6); });
32
- #stacks-internals #responsify('.gy8', { --_gap-y: var(--su8); });
33
- #stacks-internals #responsify('.gy12', { --_gap-y: var(--su12); });
34
- #stacks-internals #responsify('.gy16', { --_gap-y: var(--su16); });
35
- #stacks-internals #responsify('.gy24', { --_gap-y: var(--su24); });
36
- #stacks-internals #responsify('.gy32', { --_gap-y: var(--su32); });
37
- #stacks-internals #responsify('.gy48', { --_gap-y: var(--su48); });
38
- #stacks-internals #responsify('.gy64', { --_gap-y: var(--su64); });
39
-
40
- .gx0, .gx1, .gx2, .gx4, .gx6, .gx8, .gx12, .gx16, .gx24, .gx32, .gx48, .gx64,
41
- .gy0, .gy1, .gy2, .gy4, .gy6, .gy8, .gy12, .gy16, .gy24, .gy32, .gy48, .gy64,
42
- .g0, .g1, .g2, .g4, .g6, .g8, .g12, .g16, .g24, .g32, .g48, .g64 {
43
- gap: var(--_gap-y, 0) var(--_gap-x, 0);
44
- }
1
+ #stacks-internals #responsify('.g0', { --_gap-y: 0; --_gap-x: 0; });
2
+ #stacks-internals #responsify('.g1', { --_gap-y: var(--su1); --_gap-x: var(--su1); });
3
+ #stacks-internals #responsify('.g2', { --_gap-y: var(--su2); --_gap-x: var(--su2); });
4
+ #stacks-internals #responsify('.g4', { --_gap-y: var(--su4); --_gap-x: var(--su4); });
5
+ #stacks-internals #responsify('.g6', { --_gap-y: var(--su6); --_gap-x: var(--su6); });
6
+ #stacks-internals #responsify('.g8', { --_gap-y: var(--su8); --_gap-x: var(--su8); });
7
+ #stacks-internals #responsify('.g12', { --_gap-y: var(--su12); --_gap-x: var(--su12); });
8
+ #stacks-internals #responsify('.g16', { --_gap-y: var(--su16); --_gap-x: var(--su16); });
9
+ #stacks-internals #responsify('.g24', { --_gap-y: var(--su24); --_gap-x: var(--su24); });
10
+ #stacks-internals #responsify('.g32', { --_gap-y: var(--su32); --_gap-x: var(--su32); });
11
+ #stacks-internals #responsify('.g48', { --_gap-y: var(--su48); --_gap-x: var(--su48); });
12
+ #stacks-internals #responsify('.g64', { --_gap-y: var(--su64); --_gap-x: var(--su64); });
13
+
14
+ #stacks-internals #responsify('.gx0', { --_gap-x: 0; });
15
+ #stacks-internals #responsify('.gx1', { --_gap-x: var(--su1); });
16
+ #stacks-internals #responsify('.gx2', { --_gap-x: var(--su2); });
17
+ #stacks-internals #responsify('.gx4', { --_gap-x: var(--su4); });
18
+ #stacks-internals #responsify('.gx6', { --_gap-x: var(--su6); });
19
+ #stacks-internals #responsify('.gx8', { --_gap-x: var(--su8); });
20
+ #stacks-internals #responsify('.gx12', { --_gap-x: var(--su12); });
21
+ #stacks-internals #responsify('.gx16', { --_gap-x: var(--su16); });
22
+ #stacks-internals #responsify('.gx24', { --_gap-x: var(--su24); });
23
+ #stacks-internals #responsify('.gx32', { --_gap-x: var(--su32); });
24
+ #stacks-internals #responsify('.gx48', { --_gap-x: var(--su48); });
25
+ #stacks-internals #responsify('.gx64', { --_gap-x: var(--su64); });
26
+
27
+ #stacks-internals #responsify('.gy0', { --_gap-y: 0; });
28
+ #stacks-internals #responsify('.gy1', { --_gap-y: var(--su1); });
29
+ #stacks-internals #responsify('.gy2', { --_gap-y: var(--su2); });
30
+ #stacks-internals #responsify('.gy4', { --_gap-y: var(--su4); });
31
+ #stacks-internals #responsify('.gy6', { --_gap-y: var(--su6); });
32
+ #stacks-internals #responsify('.gy8', { --_gap-y: var(--su8); });
33
+ #stacks-internals #responsify('.gy12', { --_gap-y: var(--su12); });
34
+ #stacks-internals #responsify('.gy16', { --_gap-y: var(--su16); });
35
+ #stacks-internals #responsify('.gy24', { --_gap-y: var(--su24); });
36
+ #stacks-internals #responsify('.gy32', { --_gap-y: var(--su32); });
37
+ #stacks-internals #responsify('.gy48', { --_gap-y: var(--su48); });
38
+ #stacks-internals #responsify('.gy64', { --_gap-y: var(--su64); });
39
+
40
+ .gx0, .gx1, .gx2, .gx4, .gx6, .gx8, .gx12, .gx16, .gx24, .gx32, .gx48, .gx64,
41
+ .gy0, .gy1, .gy2, .gy4, .gy6, .gy8, .gy12, .gy16, .gy24, .gy32, .gy48, .gy64,
42
+ .g0, .g1, .g2, .g4, .g6, .g8, .g12, .g16, .g24, .g32, .g48, .g64 {
43
+ gap: var(--_gap-y, 0) var(--_gap-x, 0);
44
+ }
package/lib/atomic/grid.less CHANGED
@@ -1,139 +1,139 @@
1
- // ============================================================================
2
- // $ GRID FLOW
3
- // ----------------------------------------------------------------------------
4
- #stacks-internals #responsify('.g-af-dense', { grid-auto-flow: dense; });
5
- #stacks-internals #responsify('.g-af-row', { grid-auto-flow: row; });
6
- #stacks-internals #responsify('.g-af-column', { grid-auto-flow: column; });
7
-
8
- // ============================================================================
9
- // $ GRID COLUMN TEMPLATES
10
- // ----------------------------------------------------------------------------
11
- #stacks-internals #responsify('.grid__1', { grid-template-columns: repeat(1, minmax(0, 1fr)); });
12
- #stacks-internals #responsify('.grid__2', { grid-template-columns: repeat(2, minmax(0, 1fr)); });
13
- #stacks-internals #responsify('.grid__3', { grid-template-columns: repeat(3, minmax(0, 1fr)); });
14
- #stacks-internals #responsify('.grid__4', { grid-template-columns: repeat(4, minmax(0, 1fr)); });
15
- #stacks-internals #responsify('.grid__5', { grid-template-columns: repeat(5, minmax(0, 1fr)); });
16
- #stacks-internals #responsify('.grid__6', { grid-template-columns: repeat(6, minmax(0, 1fr)); });
17
- #stacks-internals #responsify('.grid__7', { grid-template-columns: repeat(7, minmax(0, 1fr)); });
18
- #stacks-internals #responsify('.grid__8', { grid-template-columns: repeat(8, minmax(0, 1fr)); });
19
- #stacks-internals #responsify('.grid__9', { grid-template-columns: repeat(9, minmax(0, 1fr)); });
20
- #stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
21
- #stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
22
- #stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
23
- #stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
24
-
25
- // ============================================================================
26
- // $ COLUMN SPANS
27
- // ----------------------------------------------------------------------------
28
- #stacks-internals #responsify('.grid--col-all', { grid-column: ~"1 / -1"; });
29
- #stacks-internals #responsify('.grid--row-all', { grid-row: ~"1 / -1"; });
30
-
31
- #stacks-internals #responsify('.grid--col1', { grid-column: span 1; });
32
- #stacks-internals #responsify('.grid--col2', { grid-column: span 2; });
33
- #stacks-internals #responsify('.grid--col3', { grid-column: span 3; });
34
- #stacks-internals #responsify('.grid--col4', { grid-column: span 4; });
35
- #stacks-internals #responsify('.grid--col5', { grid-column: span 5; });
36
- #stacks-internals #responsify('.grid--col6', { grid-column: span 6; });
37
- #stacks-internals #responsify('.grid--col7', { grid-column: span 7; });
38
- #stacks-internals #responsify('.grid--col8', { grid-column: span 8; });
39
- #stacks-internals #responsify('.grid--col9', { grid-column: span 9; });
40
- #stacks-internals #responsify('.grid--col10', { grid-column: span 10; });
41
- #stacks-internals #responsify('.grid--col11', { grid-column: span 11; });
42
- #stacks-internals #responsify('.grid--col12', { grid-column: span 12; });
43
-
44
- // ============================================================================
45
- // $ ROW SPANS
46
- // ----------------------------------------------------------------------------
47
- #stacks-internals #responsify('.grid--row1', { grid-row: span 1; });
48
- #stacks-internals #responsify('.grid--row2', { grid-row: span 2; });
49
- #stacks-internals #responsify('.grid--row3', { grid-row: span 3; });
50
- #stacks-internals #responsify('.grid--row4', { grid-row: span 4; });
51
- #stacks-internals #responsify('.grid--row5', { grid-row: span 5; });
52
- #stacks-internals #responsify('.grid--row6', { grid-row: span 6; });
53
- #stacks-internals #responsify('.grid--row7', { grid-row: span 7; });
54
- #stacks-internals #responsify('.grid--row8', { grid-row: span 8; });
55
- #stacks-internals #responsify('.grid--row9', { grid-row: span 9; });
56
- #stacks-internals #responsify('.grid--row10', { grid-row: span 10; });
57
- #stacks-internals #responsify('.grid--row11', { grid-row: span 11; });
58
- #stacks-internals #responsify('.grid--row12', { grid-row: span 12; });
59
-
60
- // ============================================================================
61
- // $ COLUMN START
62
- // ----------------------------------------------------------------------------
63
- #stacks-internals #responsify('.grid--col-start1', { grid-column-start: 1; });
64
- #stacks-internals #responsify('.grid--col-start2', { grid-column-start: 2; });
65
- #stacks-internals #responsify('.grid--col-start3', { grid-column-start: 3; });
66
- #stacks-internals #responsify('.grid--col-start4', { grid-column-start: 4; });
67
- #stacks-internals #responsify('.grid--col-start5', { grid-column-start: 5; });
68
- #stacks-internals #responsify('.grid--col-start6', { grid-column-start: 6; });
69
- #stacks-internals #responsify('.grid--col-start7', { grid-column-start: 7; });
70
- #stacks-internals #responsify('.grid--col-start8', { grid-column-start: 8; });
71
- #stacks-internals #responsify('.grid--col-start9', { grid-column-start: 9; });
72
- #stacks-internals #responsify('.grid--col-start10', { grid-column-start: 10; });
73
- #stacks-internals #responsify('.grid--col-start11', { grid-column-start: 11; });
74
- #stacks-internals #responsify('.grid--col-start12', { grid-column-start: 12; });
75
-
76
- // ============================================================================
77
- // $ COLUMN END
78
- // ----------------------------------------------------------------------------
79
- #stacks-internals #responsify('.grid--col-end2', { grid-column-end: 2; });
80
- #stacks-internals #responsify('.grid--col-end3', { grid-column-end: 3; });
81
- #stacks-internals #responsify('.grid--col-end4', { grid-column-end: 4; });
82
- #stacks-internals #responsify('.grid--col-end5', { grid-column-end: 5; });
83
- #stacks-internals #responsify('.grid--col-end6', { grid-column-end: 6; });
84
- #stacks-internals #responsify('.grid--col-end7', { grid-column-end: 7; });
85
- #stacks-internals #responsify('.grid--col-end8', { grid-column-end: 8; });
86
- #stacks-internals #responsify('.grid--col-end9', { grid-column-end: 9; });
87
- #stacks-internals #responsify('.grid--col-end10', { grid-column-end: 10; });
88
- #stacks-internals #responsify('.grid--col-end11', { grid-column-end: 11; });
89
- #stacks-internals #responsify('.grid--col-end12', { grid-column-end: 12; });
90
- #stacks-internals #responsify('.grid--col-end13', { grid-column-end: 13; });
91
-
92
- // ============================================================================
93
- // $ ROW START
94
- // ----------------------------------------------------------------------------
95
- #stacks-internals #responsify('.grid--row-start1', { grid-row-start: 1; });
96
- #stacks-internals #responsify('.grid--row-start2', { grid-row-start: 2; });
97
- #stacks-internals #responsify('.grid--row-start3', { grid-row-start: 3; });
98
- #stacks-internals #responsify('.grid--row-start4', { grid-row-start: 4; });
99
- #stacks-internals #responsify('.grid--row-start5', { grid-row-start: 5; });
100
- #stacks-internals #responsify('.grid--row-start6', { grid-row-start: 6; });
101
- #stacks-internals #responsify('.grid--row-start7', { grid-row-start: 7; });
102
- #stacks-internals #responsify('.grid--row-start8', { grid-row-start: 8; });
103
- #stacks-internals #responsify('.grid--row-start9', { grid-row-start: 9; });
104
- #stacks-internals #responsify('.grid--row-start10', { grid-row-start: 10; });
105
- #stacks-internals #responsify('.grid--row-start11', { grid-row-start: 11; });
106
- #stacks-internals #responsify('.grid--row-start12', { grid-row-start: 12; });
107
-
108
- // ============================================================================
109
- // $ ROW END
110
- // ----------------------------------------------------------------------------
111
- #stacks-internals #responsify('.grid--row-end2', { grid-row-end: 2; });
112
- #stacks-internals #responsify('.grid--row-end3', { grid-row-end: 3; });
113
- #stacks-internals #responsify('.grid--row-end4', { grid-row-end: 4; });
114
- #stacks-internals #responsify('.grid--row-end5', { grid-row-end: 5; });
115
- #stacks-internals #responsify('.grid--row-end6', { grid-row-end: 6; });
116
- #stacks-internals #responsify('.grid--row-end7', { grid-row-end: 7; });
117
- #stacks-internals #responsify('.grid--row-end8', { grid-row-end: 8; });
118
- #stacks-internals #responsify('.grid--row-end9', { grid-row-end: 9; });
119
- #stacks-internals #responsify('.grid--row-end10', { grid-row-end: 10; });
120
- #stacks-internals #responsify('.grid--row-end11', { grid-row-end: 11; });
121
- #stacks-internals #responsify('.grid--row-end12', { grid-row-end: 12; });
122
- #stacks-internals #responsify('.grid--row-end13', { grid-row-end: 13; });
123
-
124
- // ============================================================================
125
- // $ JUSTIFICATION
126
- // ----------------------------------------------------------------------------
127
- #stacks-internals #responsify('.ji-auto', { justify-items: auto !important; });
128
- #stacks-internals #responsify('.ji-center', { justify-items: center !important; });
129
- #stacks-internals #responsify('.ji-start', { justify-items: start !important; });
130
- #stacks-internals #responsify('.ji-end', { justify-items: end !important; });
131
- #stacks-internals #responsify('.ji-stretch', { justify-items: stretch !important; });
132
- #stacks-internals #responsify('.ji-unset', { justify-items: unset !important; });
133
-
134
- #stacks-internals #responsify('.js-auto', { justify-self: auto !important; });
135
- #stacks-internals #responsify('.js-center', { justify-self: center !important; });
136
- #stacks-internals #responsify('.js-start', { justify-self: start !important; });
137
- #stacks-internals #responsify('.js-end', { justify-self: end !important; });
138
- #stacks-internals #responsify('.js-stretch', { justify-self: stretch !important; });
139
- #stacks-internals #responsify('.js-unset', { justify-self: unset !important; });
1
+ // ============================================================================
2
+ // $ GRID FLOW
3
+ // ----------------------------------------------------------------------------
4
+ #stacks-internals #responsify('.g-af-dense', { grid-auto-flow: dense; });
5
+ #stacks-internals #responsify('.g-af-row', { grid-auto-flow: row; });
6
+ #stacks-internals #responsify('.g-af-column', { grid-auto-flow: column; });
7
+
8
+ // ============================================================================
9
+ // $ GRID COLUMN TEMPLATES
10
+ // ----------------------------------------------------------------------------
11
+ #stacks-internals #responsify('.grid__1', { grid-template-columns: repeat(1, minmax(0, 1fr)); });
12
+ #stacks-internals #responsify('.grid__2', { grid-template-columns: repeat(2, minmax(0, 1fr)); });
13
+ #stacks-internals #responsify('.grid__3', { grid-template-columns: repeat(3, minmax(0, 1fr)); });
14
+ #stacks-internals #responsify('.grid__4', { grid-template-columns: repeat(4, minmax(0, 1fr)); });
15
+ #stacks-internals #responsify('.grid__5', { grid-template-columns: repeat(5, minmax(0, 1fr)); });
16
+ #stacks-internals #responsify('.grid__6', { grid-template-columns: repeat(6, minmax(0, 1fr)); });
17
+ #stacks-internals #responsify('.grid__7', { grid-template-columns: repeat(7, minmax(0, 1fr)); });
18
+ #stacks-internals #responsify('.grid__8', { grid-template-columns: repeat(8, minmax(0, 1fr)); });
19
+ #stacks-internals #responsify('.grid__9', { grid-template-columns: repeat(9, minmax(0, 1fr)); });
20
+ #stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
21
+ #stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
22
+ #stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
23
+ #stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
24
+
25
+ // ============================================================================
26
+ // $ COLUMN SPANS
27
+ // ----------------------------------------------------------------------------
28
+ #stacks-internals #responsify('.grid--col-all', { grid-column: ~"1 / -1"; });
29
+ #stacks-internals #responsify('.grid--row-all', { grid-row: ~"1 / -1"; });
30
+
31
+ #stacks-internals #responsify('.grid--col1', { grid-column: span 1; });
32
+ #stacks-internals #responsify('.grid--col2', { grid-column: span 2; });
33
+ #stacks-internals #responsify('.grid--col3', { grid-column: span 3; });
34
+ #stacks-internals #responsify('.grid--col4', { grid-column: span 4; });
35
+ #stacks-internals #responsify('.grid--col5', { grid-column: span 5; });
36
+ #stacks-internals #responsify('.grid--col6', { grid-column: span 6; });
37
+ #stacks-internals #responsify('.grid--col7', { grid-column: span 7; });
38
+ #stacks-internals #responsify('.grid--col8', { grid-column: span 8; });
39
+ #stacks-internals #responsify('.grid--col9', { grid-column: span 9; });
40
+ #stacks-internals #responsify('.grid--col10', { grid-column: span 10; });
41
+ #stacks-internals #responsify('.grid--col11', { grid-column: span 11; });
42
+ #stacks-internals #responsify('.grid--col12', { grid-column: span 12; });
43
+
44
+ // ============================================================================
45
+ // $ ROW SPANS
46
+ // ----------------------------------------------------------------------------
47
+ #stacks-internals #responsify('.grid--row1', { grid-row: span 1; });
48
+ #stacks-internals #responsify('.grid--row2', { grid-row: span 2; });
49
+ #stacks-internals #responsify('.grid--row3', { grid-row: span 3; });
50
+ #stacks-internals #responsify('.grid--row4', { grid-row: span 4; });
51
+ #stacks-internals #responsify('.grid--row5', { grid-row: span 5; });
52
+ #stacks-internals #responsify('.grid--row6', { grid-row: span 6; });
53
+ #stacks-internals #responsify('.grid--row7', { grid-row: span 7; });
54
+ #stacks-internals #responsify('.grid--row8', { grid-row: span 8; });
55
+ #stacks-internals #responsify('.grid--row9', { grid-row: span 9; });
56
+ #stacks-internals #responsify('.grid--row10', { grid-row: span 10; });
57
+ #stacks-internals #responsify('.grid--row11', { grid-row: span 11; });
58
+ #stacks-internals #responsify('.grid--row12', { grid-row: span 12; });
59
+
60
+ // ============================================================================
61
+ // $ COLUMN START
62
+ // ----------------------------------------------------------------------------
63
+ #stacks-internals #responsify('.grid--col-start1', { grid-column-start: 1; });
64
+ #stacks-internals #responsify('.grid--col-start2', { grid-column-start: 2; });
65
+ #stacks-internals #responsify('.grid--col-start3', { grid-column-start: 3; });
66
+ #stacks-internals #responsify('.grid--col-start4', { grid-column-start: 4; });
67
+ #stacks-internals #responsify('.grid--col-start5', { grid-column-start: 5; });
68
+ #stacks-internals #responsify('.grid--col-start6', { grid-column-start: 6; });
69
+ #stacks-internals #responsify('.grid--col-start7', { grid-column-start: 7; });
70
+ #stacks-internals #responsify('.grid--col-start8', { grid-column-start: 8; });
71
+ #stacks-internals #responsify('.grid--col-start9', { grid-column-start: 9; });
72
+ #stacks-internals #responsify('.grid--col-start10', { grid-column-start: 10; });
73
+ #stacks-internals #responsify('.grid--col-start11', { grid-column-start: 11; });
74
+ #stacks-internals #responsify('.grid--col-start12', { grid-column-start: 12; });
75
+
76
+ // ============================================================================
77
+ // $ COLUMN END
78
+ // ----------------------------------------------------------------------------
79
+ #stacks-internals #responsify('.grid--col-end2', { grid-column-end: 2; });
80
+ #stacks-internals #responsify('.grid--col-end3', { grid-column-end: 3; });
81
+ #stacks-internals #responsify('.grid--col-end4', { grid-column-end: 4; });
82
+ #stacks-internals #responsify('.grid--col-end5', { grid-column-end: 5; });
83
+ #stacks-internals #responsify('.grid--col-end6', { grid-column-end: 6; });
84
+ #stacks-internals #responsify('.grid--col-end7', { grid-column-end: 7; });
85
+ #stacks-internals #responsify('.grid--col-end8', { grid-column-end: 8; });
86
+ #stacks-internals #responsify('.grid--col-end9', { grid-column-end: 9; });
87
+ #stacks-internals #responsify('.grid--col-end10', { grid-column-end: 10; });
88
+ #stacks-internals #responsify('.grid--col-end11', { grid-column-end: 11; });
89
+ #stacks-internals #responsify('.grid--col-end12', { grid-column-end: 12; });
90
+ #stacks-internals #responsify('.grid--col-end13', { grid-column-end: 13; });
91
+
92
+ // ============================================================================
93
+ // $ ROW START
94
+ // ----------------------------------------------------------------------------
95
+ #stacks-internals #responsify('.grid--row-start1', { grid-row-start: 1; });
96
+ #stacks-internals #responsify('.grid--row-start2', { grid-row-start: 2; });
97
+ #stacks-internals #responsify('.grid--row-start3', { grid-row-start: 3; });
98
+ #stacks-internals #responsify('.grid--row-start4', { grid-row-start: 4; });
99
+ #stacks-internals #responsify('.grid--row-start5', { grid-row-start: 5; });
100
+ #stacks-internals #responsify('.grid--row-start6', { grid-row-start: 6; });
101
+ #stacks-internals #responsify('.grid--row-start7', { grid-row-start: 7; });
102
+ #stacks-internals #responsify('.grid--row-start8', { grid-row-start: 8; });
103
+ #stacks-internals #responsify('.grid--row-start9', { grid-row-start: 9; });
104
+ #stacks-internals #responsify('.grid--row-start10', { grid-row-start: 10; });
105
+ #stacks-internals #responsify('.grid--row-start11', { grid-row-start: 11; });
106
+ #stacks-internals #responsify('.grid--row-start12', { grid-row-start: 12; });
107
+
108
+ // ============================================================================
109
+ // $ ROW END
110
+ // ----------------------------------------------------------------------------
111
+ #stacks-internals #responsify('.grid--row-end2', { grid-row-end: 2; });
112
+ #stacks-internals #responsify('.grid--row-end3', { grid-row-end: 3; });
113
+ #stacks-internals #responsify('.grid--row-end4', { grid-row-end: 4; });
114
+ #stacks-internals #responsify('.grid--row-end5', { grid-row-end: 5; });
115
+ #stacks-internals #responsify('.grid--row-end6', { grid-row-end: 6; });
116
+ #stacks-internals #responsify('.grid--row-end7', { grid-row-end: 7; });
117
+ #stacks-internals #responsify('.grid--row-end8', { grid-row-end: 8; });
118
+ #stacks-internals #responsify('.grid--row-end9', { grid-row-end: 9; });
119
+ #stacks-internals #responsify('.grid--row-end10', { grid-row-end: 10; });
120
+ #stacks-internals #responsify('.grid--row-end11', { grid-row-end: 11; });
121
+ #stacks-internals #responsify('.grid--row-end12', { grid-row-end: 12; });
122
+ #stacks-internals #responsify('.grid--row-end13', { grid-row-end: 13; });
123
+
124
+ // ============================================================================
125
+ // $ JUSTIFICATION
126
+ // ----------------------------------------------------------------------------
127
+ #stacks-internals #responsify('.ji-auto', { justify-items: auto !important; });
128
+ #stacks-internals #responsify('.ji-center', { justify-items: center !important; });
129
+ #stacks-internals #responsify('.ji-start', { justify-items: start !important; });
130
+ #stacks-internals #responsify('.ji-end', { justify-items: end !important; });
131
+ #stacks-internals #responsify('.ji-stretch', { justify-items: stretch !important; });
132
+ #stacks-internals #responsify('.ji-unset', { justify-items: unset !important; });
133
+
134
+ #stacks-internals #responsify('.js-auto', { justify-self: auto !important; });
135
+ #stacks-internals #responsify('.js-center', { justify-self: center !important; });
136
+ #stacks-internals #responsify('.js-start', { justify-self: start !important; });
137
+ #stacks-internals #responsify('.js-end', { justify-self: end !important; });
138
+ #stacks-internals #responsify('.js-stretch', { justify-self: stretch !important; });
139
+ #stacks-internals #responsify('.js-unset', { justify-self: unset !important; });