@stackoverflow/stacks 0.75.0 → 0.76.0

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 (87) hide show
  1. package/LICENSE.MD +9 -9
  2. package/README.md +47 -47
  3. package/dist/controllers/index.d.ts +7 -0
  4. package/dist/controllers/s-expandable-control.d.ts +17 -0
  5. package/dist/controllers/s-modal.d.ts +97 -0
  6. package/dist/controllers/s-navigation-tablist.d.ts +36 -0
  7. package/dist/controllers/s-popover.d.ts +155 -0
  8. package/dist/controllers/s-table.d.ts +8 -0
  9. package/dist/controllers/s-tooltip.d.ts +82 -0
  10. package/dist/controllers/s-uploader.d.ts +48 -0
  11. package/dist/css/stacks.css +86 -53
  12. package/dist/css/stacks.min.css +1 -1
  13. package/dist/index.d.ts +3 -0
  14. package/dist/js/stacks.js +6128 -5505
  15. package/dist/js/stacks.min.js +1 -1
  16. package/dist/stacks.d.ts +21 -0
  17. package/lib/css/atomic/_stacks-borders.less +378 -378
  18. package/lib/css/atomic/_stacks-colors.less +209 -209
  19. package/lib/css/atomic/_stacks-flex.less +374 -374
  20. package/lib/css/atomic/_stacks-grid.less +174 -173
  21. package/lib/css/atomic/_stacks-misc.less +343 -343
  22. package/lib/css/atomic/_stacks-spacing.less +168 -168
  23. package/lib/css/atomic/_stacks-typography.less +273 -273
  24. package/lib/css/atomic/_stacks-width-height.less +195 -195
  25. package/lib/css/base/_stacks-body.less +44 -46
  26. package/lib/css/base/_stacks-configuration-static.less +59 -59
  27. package/lib/css/base/_stacks-icons.less +20 -20
  28. package/lib/css/base/_stacks-internals.less +220 -230
  29. package/lib/css/base/_stacks-reset-meyer.less +64 -64
  30. package/lib/css/base/_stacks-reset-normalize.less +449 -449
  31. package/lib/css/base/_stacks-reset.less +20 -20
  32. package/lib/css/components/_stacks-activity-indicator.less +45 -45
  33. package/lib/css/components/_stacks-avatars.less +189 -189
  34. package/lib/css/components/_stacks-badges.less +209 -209
  35. package/lib/css/components/_stacks-banners.less +80 -81
  36. package/lib/css/components/_stacks-blank-states.less +26 -26
  37. package/lib/css/components/_stacks-breadcrumbs.less +44 -44
  38. package/lib/css/components/_stacks-button-groups.less +104 -104
  39. package/lib/css/components/_stacks-buttons.less +658 -660
  40. package/lib/css/components/_stacks-cards.less +44 -44
  41. package/lib/css/components/_stacks-code-blocks.less +130 -130
  42. package/lib/css/components/_stacks-collapsible.less +104 -104
  43. package/lib/css/components/_stacks-inputs.less +728 -728
  44. package/lib/css/components/_stacks-link-previews.less +136 -136
  45. package/lib/css/components/_stacks-links.less +218 -218
  46. package/lib/css/components/_stacks-menu.less +47 -47
  47. package/lib/css/components/_stacks-modals.less +133 -133
  48. package/lib/css/components/_stacks-navigation.less +146 -146
  49. package/lib/css/components/_stacks-notices.less +233 -233
  50. package/lib/css/components/_stacks-page-titles.less +60 -60
  51. package/lib/css/components/_stacks-pagination.less +55 -55
  52. package/lib/css/components/_stacks-popovers.less +197 -197
  53. package/lib/css/components/_stacks-post-summary.less +425 -425
  54. package/lib/css/components/_stacks-progress-bars.less +331 -331
  55. package/lib/css/components/_stacks-prose.less +503 -503
  56. package/lib/css/components/_stacks-spinner.less +107 -107
  57. package/lib/css/components/_stacks-tables.less +341 -341
  58. package/lib/css/components/_stacks-tags.less +236 -244
  59. package/lib/css/components/_stacks-toggle-switches.less +144 -144
  60. package/lib/css/components/_stacks-topbar.less +425 -440
  61. package/lib/css/components/_stacks-uploader.less +210 -210
  62. package/lib/css/components/_stacks-user-cards.less +169 -169
  63. package/lib/css/components/_stacks-widget-dynamic.less +33 -33
  64. package/lib/css/components/_stacks-widget-static.less +272 -272
  65. package/lib/css/exports/_stacks-constants-colors.less +1112 -1112
  66. package/lib/css/exports/_stacks-constants-helpers.less +139 -139
  67. package/lib/css/exports/_stacks-constants-type.less +152 -91
  68. package/lib/css/exports/_stacks-exports.less +15 -15
  69. package/lib/css/exports/_stacks-mixins.less +220 -220
  70. package/lib/css/stacks-dynamic.less +35 -36
  71. package/lib/css/stacks-static.less +86 -86
  72. package/lib/ts/controllers/index.ts +8 -0
  73. package/lib/ts/controllers/s-expandable-control.ts +189 -190
  74. package/lib/ts/controllers/s-modal.ts +321 -323
  75. package/lib/ts/controllers/s-navigation-tablist.ts +118 -119
  76. package/lib/ts/controllers/s-popover.ts +547 -549
  77. package/lib/ts/controllers/s-table.ts +220 -220
  78. package/lib/ts/controllers/s-tooltip.ts +246 -247
  79. package/lib/ts/controllers/s-uploader.ts +172 -174
  80. package/lib/ts/index.ts +20 -0
  81. package/lib/ts/stacks.ts +88 -83
  82. package/lib/tsconfig.json +13 -11
  83. package/package.json +87 -71
  84. package/dist/css/stacks-flexgrid-shim.min.css +0 -1
  85. package/lib/css/base/_stacks-configuration-dynamic.less +0 -106
  86. package/lib/ts/finalize.ts +0 -1
  87. package/lib/ts/stimulus.d.ts +0 -4
package/lib/css/atomic/_stacks-spacing.less CHANGED
@@ -1,168 +1,168 @@
1
- //
2
- // STACK OVERFLOW
3
- // SPACING
4
- //
5
- // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
- // Stack Overflow. For documentation of all these classes and how to contribute,
7
- // visit https://stackoverflow.design/
8
- //
9
- // • MARGIN
10
- // • PADDING
11
- // • POSITIONING
12
- //
13
- // ============================================================================
14
- // $ MARGIN
15
- // ----------------------------------------------------------------------------
16
- // $$ All margin
17
- #stacks-internals #build-classes(
18
- responsive,
19
- '.m', { .template(@value) { margin: @value !important; } },
20
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
21
- );
22
-
23
- // $$ Top margin
24
- #stacks-internals #build-classes(
25
- responsive,
26
- '.mt', { .template(@value) { margin-top: @value !important; } },
27
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
28
- );
29
-
30
- // $$ Negative & auto top margin
31
- #stacks-internals #build-classes(
32
- '.mt', { .template(@value) { margin-top: @value !important; } },
33
- auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
34
- );
35
-
36
- // $$ Right margin
37
- #stacks-internals #build-classes(
38
- responsive,
39
- '.mr', { .template(@value) { margin-right: @value !important; } },
40
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
41
- );
42
-
43
- // $$ Negative & auto right margin
44
- #stacks-internals #build-classes(
45
- '.mr', { .template(@value) { margin-right: @value !important; } },
46
- auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
47
- );
48
-
49
- // $$ Bottom margin
50
- #stacks-internals #build-classes(
51
- responsive,
52
- '.mb', { .template(@value) { margin-bottom: @value !important; } },
53
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
54
- );
55
-
56
- // $$ Negative & auto bottom margin
57
- #stacks-internals #build-classes(
58
- '.mb', { .template(@value) { margin-bottom: @value !important; } },
59
- auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
60
- );
61
-
62
- // $$ Left margin
63
- #stacks-internals #build-classes(
64
- responsive,
65
- '.ml', { .template(@value) { margin-left: @value !important; } },
66
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
67
- );
68
-
69
- // $$ Negative & auto left margin
70
- #stacks-internals #build-classes(
71
- '.ml', { .template(@value) { margin-left: @value !important; } },
72
- auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
73
- );
74
-
75
- // $$ X-Axis margin
76
- #stacks-internals #build-classes(
77
- '.mx', { .template(@value) { margin-left: @value !important; margin-right: @value !important; } },
78
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
79
- );
80
-
81
- // $$ Y-Axis margin
82
- #stacks-internals #build-classes(
83
- '.my', { .template(@value) { margin-top: @value !important; margin-bottom: @value !important; } },
84
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
85
- );
86
-
87
- // ============================================================================
88
- // $ PADDING
89
- // ----------------------------------------------------------------------------
90
- // $$ All padding
91
- #stacks-internals #build-classes(
92
- responsive,
93
- '.p', { .template(@value) { padding: @value !important; } },
94
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
95
- );
96
-
97
- // $$ Top Padding
98
- #stacks-internals #build-classes(
99
- responsive,
100
- '.pt', { .template(@value) { padding-top: @value !important; } },
101
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
102
- );
103
-
104
- // $$ Right Padding
105
- #stacks-internals #build-classes(
106
- responsive,
107
- '.pr', { .template(@value) { padding-right: @value !important; } },
108
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
109
- );
110
-
111
- // $$ Bottom Padding
112
- #stacks-internals #build-classes(
113
- responsive,
114
- '.pb', { .template(@value) { padding-bottom: @value !important; } },
115
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
116
- );
117
-
118
- // $$ Left Padding
119
- #stacks-internals #build-classes(
120
- responsive,
121
- '.pl', { .template(@value) { padding-left: @value !important; } },
122
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
123
- );
124
-
125
- // $$ X-Axis Padding
126
- #stacks-internals #build-classes(
127
- '.px', { .template(@value) { padding-left: @value !important; padding-right: @value !important; } },
128
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
129
- );
130
-
131
- // $$ Y-Axis Padding
132
- #stacks-internals #build-classes(
133
- '.py', { .template(@value) { padding-top: @value !important; padding-bottom: @value !important; } },
134
- 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
135
- );
136
-
137
- // ============================================================================
138
- // $ POSITIONING
139
- // ----------------------------------------------------------------------------
140
- // $$ Top
141
- #stacks-internals #build-classes(
142
- '.t', { .template(@value) { top: @value !important; } },
143
- 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
144
- );
145
-
146
- // $$ Right
147
- #stacks-internals #build-classes(
148
- '.r', { .template(@value) { right: @value !important; } },
149
- 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
150
- );
151
-
152
- // $$ Bottom
153
- #stacks-internals #build-classes(
154
- '.b', { .template(@value) { bottom: @value !important; } },
155
- 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
156
- );
157
-
158
- // $$ Left
159
- #stacks-internals #build-classes(
160
- '.l', { .template(@value) { left: @value !important; } },
161
- 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
162
- );
163
-
164
- // $$ Inset
165
- #stacks-internals #build-classes(
166
- '.i', { .template(@value) { inset: @value !important; } },
167
- 0 1px @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
168
- );
1
+ //
2
+ // STACK OVERFLOW
3
+ // SPACING
4
+ //
5
+ // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
+ // Stack Overflow. For documentation of all these classes and how to contribute,
7
+ // visit https://stackoverflow.design/
8
+ //
9
+ // • MARGIN
10
+ // • PADDING
11
+ // • POSITIONING
12
+ //
13
+ // ============================================================================
14
+ // $ MARGIN
15
+ // ----------------------------------------------------------------------------
16
+ // $$ All margin
17
+ #stacks-internals #build-classes(
18
+ responsive,
19
+ '.m', { .template(@value) { margin: @value !important; } },
20
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
21
+ );
22
+
23
+ // $$ Top margin
24
+ #stacks-internals #build-classes(
25
+ responsive,
26
+ '.mt', { .template(@value) { margin-top: @value !important; } },
27
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
28
+ );
29
+
30
+ // $$ Negative & auto top margin
31
+ #stacks-internals #build-classes(
32
+ '.mt', { .template(@value) { margin-top: @value !important; } },
33
+ auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
34
+ );
35
+
36
+ // $$ Right margin
37
+ #stacks-internals #build-classes(
38
+ responsive,
39
+ '.mr', { .template(@value) { margin-right: @value !important; } },
40
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
41
+ );
42
+
43
+ // $$ Negative & auto right margin
44
+ #stacks-internals #build-classes(
45
+ '.mr', { .template(@value) { margin-right: @value !important; } },
46
+ auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
47
+ );
48
+
49
+ // $$ Bottom margin
50
+ #stacks-internals #build-classes(
51
+ responsive,
52
+ '.mb', { .template(@value) { margin-bottom: @value !important; } },
53
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
54
+ );
55
+
56
+ // $$ Negative & auto bottom margin
57
+ #stacks-internals #build-classes(
58
+ '.mb', { .template(@value) { margin-bottom: @value !important; } },
59
+ auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
60
+ );
61
+
62
+ // $$ Left margin
63
+ #stacks-internals #build-classes(
64
+ responsive,
65
+ '.ml', { .template(@value) { margin-left: @value !important; } },
66
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
67
+ );
68
+
69
+ // $$ Negative & auto left margin
70
+ #stacks-internals #build-classes(
71
+ '.ml', { .template(@value) { margin-left: @value !important; } },
72
+ auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
73
+ );
74
+
75
+ // $$ X-Axis margin
76
+ #stacks-internals #build-classes(
77
+ '.mx', { .template(@value) { margin-left: @value !important; margin-right: @value !important; } },
78
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
79
+ );
80
+
81
+ // $$ Y-Axis margin
82
+ #stacks-internals #build-classes(
83
+ '.my', { .template(@value) { margin-top: @value !important; margin-bottom: @value !important; } },
84
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
85
+ );
86
+
87
+ // ============================================================================
88
+ // $ PADDING
89
+ // ----------------------------------------------------------------------------
90
+ // $$ All padding
91
+ #stacks-internals #build-classes(
92
+ responsive,
93
+ '.p', { .template(@value) { padding: @value !important; } },
94
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
95
+ );
96
+
97
+ // $$ Top Padding
98
+ #stacks-internals #build-classes(
99
+ responsive,
100
+ '.pt', { .template(@value) { padding-top: @value !important; } },
101
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
102
+ );
103
+
104
+ // $$ Right Padding
105
+ #stacks-internals #build-classes(
106
+ responsive,
107
+ '.pr', { .template(@value) { padding-right: @value !important; } },
108
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
109
+ );
110
+
111
+ // $$ Bottom Padding
112
+ #stacks-internals #build-classes(
113
+ responsive,
114
+ '.pb', { .template(@value) { padding-bottom: @value !important; } },
115
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
116
+ );
117
+
118
+ // $$ Left Padding
119
+ #stacks-internals #build-classes(
120
+ responsive,
121
+ '.pl', { .template(@value) { padding-left: @value !important; } },
122
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
123
+ );
124
+
125
+ // $$ X-Axis Padding
126
+ #stacks-internals #build-classes(
127
+ '.px', { .template(@value) { padding-left: @value !important; padding-right: @value !important; } },
128
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
129
+ );
130
+
131
+ // $$ Y-Axis Padding
132
+ #stacks-internals #build-classes(
133
+ '.py', { .template(@value) { padding-top: @value !important; padding-bottom: @value !important; } },
134
+ 0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
135
+ );
136
+
137
+ // ============================================================================
138
+ // $ POSITIONING
139
+ // ----------------------------------------------------------------------------
140
+ // $$ Top
141
+ #stacks-internals #build-classes(
142
+ '.t', { .template(@value) { top: @value !important; } },
143
+ 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
144
+ );
145
+
146
+ // $$ Right
147
+ #stacks-internals #build-classes(
148
+ '.r', { .template(@value) { right: @value !important; } },
149
+ 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
150
+ );
151
+
152
+ // $$ Bottom
153
+ #stacks-internals #build-classes(
154
+ '.b', { .template(@value) { bottom: @value !important; } },
155
+ 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
156
+ );
157
+
158
+ // $$ Left
159
+ #stacks-internals #build-classes(
160
+ '.l', { .template(@value) { left: @value !important; } },
161
+ 0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
162
+ );
163
+
164
+ // $$ Inset
165
+ #stacks-internals #build-classes(
166
+ '.i', { .template(@value) { inset: @value !important; } },
167
+ 0 1px @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
168
+ );