@stackoverflow/stacks 1.9.0 → 1.9.1

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 (132) hide show
  1. package/README.md +161 -153
  2. package/dist/components/table/table.d.ts +26 -4
  3. package/dist/css/stacks.css +21 -6
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +93 -64
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/atomic/border.less +397 -397
  8. package/lib/atomic/color.less +210 -210
  9. package/lib/atomic/flex.less +426 -426
  10. package/lib/atomic/gap.less +44 -44
  11. package/lib/atomic/grid.less +139 -139
  12. package/lib/atomic/misc.less +343 -343
  13. package/lib/atomic/spacing.less +342 -342
  14. package/lib/atomic/typography.less +267 -267
  15. package/lib/atomic/width-height.less +194 -194
  16. package/lib/base/body.less +44 -44
  17. package/lib/base/configuration-static.less +61 -61
  18. package/lib/base/fieldset.less +5 -5
  19. package/lib/base/icon.less +11 -11
  20. package/lib/base/internal.less +220 -220
  21. package/lib/base/reset-meyer.less +64 -64
  22. package/lib/base/reset-normalize.less +449 -449
  23. package/lib/base/reset.less +20 -20
  24. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +21 -21
  25. package/lib/components/activity-indicator/activity-indicator.less +40 -40
  26. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +23 -23
  27. package/lib/components/anchor/anchor.less +61 -61
  28. package/lib/components/avatar/avatar.a11y.test.ts +36 -36
  29. package/lib/components/avatar/avatar.less +108 -108
  30. package/lib/components/avatar/avatar.visual.test.ts +54 -54
  31. package/lib/components/award-bling/award-bling.a11y.test.ts +17 -0
  32. package/lib/components/award-bling/award-bling.less +31 -31
  33. package/lib/components/award-bling/award-bling.visual.test.ts +26 -0
  34. package/lib/components/badge/badge.less +251 -251
  35. package/lib/components/banner/banner.a11y.test.ts +37 -0
  36. package/lib/components/banner/banner.less +51 -51
  37. package/lib/components/banner/banner.test.ts +73 -77
  38. package/lib/components/banner/banner.ts +149 -149
  39. package/lib/components/banner/banner.visual.test.ts +37 -36
  40. package/lib/components/block-link/block-link.a11y.test.ts +68 -0
  41. package/lib/components/block-link/block-link.less +80 -80
  42. package/lib/components/block-link/block-link.visual.test.ts +61 -0
  43. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +37 -0
  44. package/lib/components/breadcrumbs/breadcrumbs.less +41 -41
  45. package/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +37 -0
  46. package/lib/components/button/button.a11y.test.ts +32 -32
  47. package/lib/components/button/button.less +502 -502
  48. package/lib/components/button/button.visual.test.ts +52 -52
  49. package/lib/components/button-group/button-group.less +83 -83
  50. package/lib/components/card/card.a11y.test.ts +13 -0
  51. package/lib/components/card/card.less +29 -29
  52. package/lib/components/card/card.visual.test.ts +54 -0
  53. package/lib/components/check-control/check-control.less +17 -17
  54. package/lib/components/check-group/check-group.less +19 -19
  55. package/lib/components/checkbox_radio/checkbox_radio.less +158 -158
  56. package/lib/components/code-block/code-block.less +116 -116
  57. package/lib/components/description/description.less +9 -9
  58. package/lib/components/empty-state/empty-state.less +16 -16
  59. package/lib/components/expandable/expandable.less +118 -118
  60. package/lib/components/expandable/expandable.test.ts +51 -53
  61. package/lib/components/expandable/expandable.ts +238 -238
  62. package/lib/components/input-fill/input-fill.less +35 -35
  63. package/lib/components/input-icon/input-icon.less +45 -45
  64. package/lib/components/input-message/input-message.less +48 -48
  65. package/lib/components/input_textarea/input_textarea.less +166 -166
  66. package/lib/components/label/label.less +111 -111
  67. package/lib/components/link/link.less +119 -119
  68. package/lib/components/link-preview/link-preview.less +139 -139
  69. package/lib/components/menu/menu.less +41 -41
  70. package/lib/components/modal/modal.less +113 -113
  71. package/lib/components/modal/modal.ts +379 -379
  72. package/lib/components/navigation/navigation.less +134 -134
  73. package/lib/components/navigation/navigation.ts +128 -128
  74. package/lib/components/notice/notice.less +203 -203
  75. package/lib/components/page-title/page-title.less +51 -51
  76. package/lib/components/pagination/pagination.less +52 -52
  77. package/lib/components/popover/popover.less +148 -148
  78. package/lib/components/popover/popover.ts +651 -651
  79. package/lib/components/popover/tooltip.test.ts +62 -66
  80. package/lib/components/popover/tooltip.ts +343 -343
  81. package/lib/components/popover/tooltip.visual.test.ts +31 -31
  82. package/lib/components/post-summary/post-summary.less +415 -415
  83. package/lib/components/progress-bar/progress-bar.less +291 -291
  84. package/lib/components/prose/prose.less +452 -452
  85. package/lib/components/select/select.less +148 -148
  86. package/lib/components/sidebar-widget/sidebar-widget.less +257 -258
  87. package/lib/components/spinner/spinner.less +103 -103
  88. package/lib/components/table/table.less +307 -292
  89. package/lib/components/table/table.test.ts +366 -0
  90. package/lib/components/table/table.ts +296 -263
  91. package/lib/components/table-container/table-container.less +4 -4
  92. package/lib/components/tag/tag.less +213 -213
  93. package/lib/components/toast/toast.less +35 -35
  94. package/lib/components/toast/toast.test.ts +63 -67
  95. package/lib/components/toast/toast.ts +357 -357
  96. package/lib/components/toast/toast.visual.test.ts +27 -27
  97. package/lib/components/toggle-switch/toggle-switch.less +110 -110
  98. package/lib/components/topbar/topbar.less +436 -435
  99. package/lib/components/uploader/uploader.less +195 -195
  100. package/lib/components/uploader/uploader.ts +205 -205
  101. package/lib/components/user-card/user-card.less +129 -129
  102. package/lib/controllers.ts +33 -33
  103. package/lib/exports/constants-colors.less +1112 -1111
  104. package/lib/exports/constants-helpers.less +108 -108
  105. package/lib/exports/constants-type.less +153 -153
  106. package/lib/exports/exports.less +15 -15
  107. package/lib/exports/mixins.less +299 -299
  108. package/lib/index.ts +32 -32
  109. package/lib/input-utils.less +44 -44
  110. package/lib/stacks-dynamic.less +24 -24
  111. package/lib/stacks-static.less +93 -93
  112. package/lib/stacks.less +13 -13
  113. package/lib/stacks.ts +113 -113
  114. package/lib/test/open-wc-testing-patch.d.ts +26 -0
  115. package/lib/test/test-utils.ts +466 -444
  116. package/lib/tsconfig.build.json +4 -0
  117. package/lib/tsconfig.json +16 -13
  118. package/package.json +106 -105
  119. package/dist/components/activity-indicator/activity-indicator.a11y.test.d.ts +0 -1
  120. package/dist/components/activity-indicator/activity-indicator.visual.test.d.ts +0 -1
  121. package/dist/components/avatar/avatar.a11y.test.d.ts +0 -1
  122. package/dist/components/avatar/avatar.visual.test.d.ts +0 -1
  123. package/dist/components/banner/banner.test.d.ts +0 -1
  124. package/dist/components/banner/banner.visual.test.d.ts +0 -1
  125. package/dist/components/button/button.a11y.test.d.ts +0 -1
  126. package/dist/components/button/button.visual.test.d.ts +0 -1
  127. package/dist/components/expandable/expandable.test.d.ts +0 -1
  128. package/dist/components/popover/tooltip.test.d.ts +0 -1
  129. package/dist/components/popover/tooltip.visual.test.d.ts +0 -1
  130. package/dist/components/toast/toast.test.d.ts +0 -1
  131. package/dist/components/toast/toast.visual.test.d.ts +0 -1
  132. package/dist/test/test-utils.d.ts +0 -136
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; });