@joshwilkerson/flex-ui 1.0.0-alpha.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 (14) hide show
  1. package/README.md +141 -0
  2. package/bin/flex-ui.ts +10 -0
  3. package/dist/config.cjs +1 -0
  4. package/dist/config.d.ts +78 -0
  5. package/dist/config.js +42 -0
  6. package/dist/flex-ui.css +705 -0
  7. package/dist/react.cjs +1 -0
  8. package/dist/react.d.ts +95 -0
  9. package/dist/react.js +87 -0
  10. package/package.json +86 -0
  11. package/scripts/cli.ts +164 -0
  12. package/scripts/generate-flex-css.ts +316 -0
  13. package/src/config.ts +115 -0
  14. package/src/tokens/index.ts +123 -0
package/dist/flex-ui.css ADDED
@@ -0,0 +1,705 @@
1
+ /**
2
+ * Flex UI - CSS-only flexbox layouts
3
+ *
4
+ * Usage:
5
+ * <div data-flex data-axis="horizontal" data-gap="2" data-align="center">
6
+ * <div>Item 1</div>
7
+ * <div>Item 2</div>
8
+ * </div>
9
+ *
10
+ * Customize spacing by overriding CSS custom properties:
11
+ * :root {
12
+ * --flex-spacing-1: 0.5rem;
13
+ * --flex-spacing-2: 1rem;
14
+ * }
15
+ */
16
+
17
+ /* ----- Spacing Tokens ----- */
18
+ :root {
19
+ --flex-spacing-0: 0;
20
+ --flex-spacing-1: 8px;
21
+ --flex-spacing-2: 16px;
22
+ --flex-spacing-3: 24px;
23
+ --flex-spacing-4: 32px;
24
+ --flex-spacing-5: 40px;
25
+ --flex-spacing-6: 48px;
26
+ --flex-spacing-7: 56px;
27
+ --flex-spacing-8: 64px;
28
+ --flex-spacing-9: 72px;
29
+ --flex-spacing-10: 80px;
30
+ --flex-spacing-fourth: 2px;
31
+ --flex-spacing-half: 4px;
32
+ }
33
+
34
+ [data-flex] {
35
+ display: flex;
36
+ }
37
+
38
+ [data-flex][data-inline] {
39
+ display: inline-flex;
40
+ }
41
+
42
+ /* ----- Axis ----- */
43
+ [data-flex][data-axis="horizontal"] { flex-direction: row; }
44
+ [data-flex][data-axis="horizontal"][data-reverse] { flex-direction: row-reverse; }
45
+ [data-flex][data-axis="vertical"] { flex-direction: column; }
46
+ [data-flex][data-axis="vertical"][data-reverse] { flex-direction: column-reverse; }
47
+
48
+ /* ----- Gap ----- */
49
+ [data-flex][data-gap="0"] { gap: var(--flex-spacing-0); }
50
+ [data-flex][data-gap="1"] { gap: var(--flex-spacing-1); }
51
+ [data-flex][data-gap="2"] { gap: var(--flex-spacing-2); }
52
+ [data-flex][data-gap="3"] { gap: var(--flex-spacing-3); }
53
+ [data-flex][data-gap="4"] { gap: var(--flex-spacing-4); }
54
+ [data-flex][data-gap="5"] { gap: var(--flex-spacing-5); }
55
+ [data-flex][data-gap="6"] { gap: var(--flex-spacing-6); }
56
+ [data-flex][data-gap="7"] { gap: var(--flex-spacing-7); }
57
+ [data-flex][data-gap="8"] { gap: var(--flex-spacing-8); }
58
+ [data-flex][data-gap="9"] { gap: var(--flex-spacing-9); }
59
+ [data-flex][data-gap="10"] { gap: var(--flex-spacing-10); }
60
+ [data-flex][data-gap="fourth"] { gap: var(--flex-spacing-fourth); }
61
+ [data-flex][data-gap="half"] { gap: var(--flex-spacing-half); }
62
+
63
+ /* ----- Row Gap ----- */
64
+ [data-flex][data-row-gap="0"] { row-gap: var(--flex-spacing-0); }
65
+ [data-flex][data-row-gap="1"] { row-gap: var(--flex-spacing-1); }
66
+ [data-flex][data-row-gap="2"] { row-gap: var(--flex-spacing-2); }
67
+ [data-flex][data-row-gap="3"] { row-gap: var(--flex-spacing-3); }
68
+ [data-flex][data-row-gap="4"] { row-gap: var(--flex-spacing-4); }
69
+ [data-flex][data-row-gap="5"] { row-gap: var(--flex-spacing-5); }
70
+ [data-flex][data-row-gap="6"] { row-gap: var(--flex-spacing-6); }
71
+ [data-flex][data-row-gap="7"] { row-gap: var(--flex-spacing-7); }
72
+ [data-flex][data-row-gap="8"] { row-gap: var(--flex-spacing-8); }
73
+ [data-flex][data-row-gap="9"] { row-gap: var(--flex-spacing-9); }
74
+ [data-flex][data-row-gap="10"] { row-gap: var(--flex-spacing-10); }
75
+ [data-flex][data-row-gap="fourth"] { row-gap: var(--flex-spacing-fourth); }
76
+ [data-flex][data-row-gap="half"] { row-gap: var(--flex-spacing-half); }
77
+
78
+ /* ----- Column Gap ----- */
79
+ [data-flex][data-column-gap="0"] { column-gap: var(--flex-spacing-0); }
80
+ [data-flex][data-column-gap="1"] { column-gap: var(--flex-spacing-1); }
81
+ [data-flex][data-column-gap="2"] { column-gap: var(--flex-spacing-2); }
82
+ [data-flex][data-column-gap="3"] { column-gap: var(--flex-spacing-3); }
83
+ [data-flex][data-column-gap="4"] { column-gap: var(--flex-spacing-4); }
84
+ [data-flex][data-column-gap="5"] { column-gap: var(--flex-spacing-5); }
85
+ [data-flex][data-column-gap="6"] { column-gap: var(--flex-spacing-6); }
86
+ [data-flex][data-column-gap="7"] { column-gap: var(--flex-spacing-7); }
87
+ [data-flex][data-column-gap="8"] { column-gap: var(--flex-spacing-8); }
88
+ [data-flex][data-column-gap="9"] { column-gap: var(--flex-spacing-9); }
89
+ [data-flex][data-column-gap="10"] { column-gap: var(--flex-spacing-10); }
90
+ [data-flex][data-column-gap="fourth"] { column-gap: var(--flex-spacing-fourth); }
91
+ [data-flex][data-column-gap="half"] { column-gap: var(--flex-spacing-half); }
92
+
93
+ /* ----- Justify ----- */
94
+ [data-flex][data-justify="start"] { justify-content: flex-start; }
95
+ [data-flex][data-justify="end"] { justify-content: flex-end; }
96
+ [data-flex][data-justify="center"] { justify-content: center; }
97
+ [data-flex][data-justify="between"] { justify-content: space-between; }
98
+ [data-flex][data-justify="around"] { justify-content: space-around; }
99
+ [data-flex][data-justify="evenly"] { justify-content: space-evenly; }
100
+
101
+ /* ----- Align ----- */
102
+ [data-flex][data-align="start"] { align-items: flex-start; }
103
+ [data-flex][data-align="end"] { align-items: flex-end; }
104
+ [data-flex][data-align="center"] { align-items: center; }
105
+ [data-flex][data-align="stretch"] { align-items: stretch; }
106
+ [data-flex][data-align="baseline"] { align-items: baseline; }
107
+
108
+ /* ----- Align Content ----- */
109
+ [data-flex][data-align-content="start"] { align-content: flex-start; }
110
+ [data-flex][data-align-content="end"] { align-content: flex-end; }
111
+ [data-flex][data-align-content="center"] { align-content: center; }
112
+ [data-flex][data-align-content="stretch"] { align-content: stretch; }
113
+ [data-flex][data-align-content="between"] { align-content: space-between; }
114
+ [data-flex][data-align-content="around"] { align-content: space-around; }
115
+ [data-flex][data-align-content="evenly"] { align-content: space-evenly; }
116
+
117
+ /* ----- Wrap ----- */
118
+ [data-flex][data-wrap="nowrap"] { flex-wrap: nowrap; }
119
+ [data-flex][data-wrap="wrap"] { flex-wrap: wrap; }
120
+ [data-flex][data-wrap="wrap-reverse"] { flex-wrap: wrap-reverse; }
121
+
122
+ /* ----- Flex Item: Grow ----- */
123
+ [data-flex-item][data-grow="0"] { flex-grow: 0; }
124
+ [data-flex-item][data-grow="1"] { flex-grow: 1; }
125
+ [data-flex-item][data-grow="2"] { flex-grow: 2; }
126
+ [data-flex-item][data-grow="3"] { flex-grow: 3; }
127
+ [data-flex-item][data-grow="4"] { flex-grow: 4; }
128
+ [data-flex-item][data-grow="5"] { flex-grow: 5; }
129
+
130
+ /* ----- Flex Item: Shrink ----- */
131
+ [data-flex-item][data-shrink="0"] { flex-shrink: 0; }
132
+ [data-flex-item][data-shrink="1"] { flex-shrink: 1; }
133
+ [data-flex-item][data-shrink="2"] { flex-shrink: 2; }
134
+ [data-flex-item][data-shrink="3"] { flex-shrink: 3; }
135
+
136
+ /* ----- Flex Item: Basis ----- */
137
+ [data-flex-item][data-basis="auto"] { flex-basis: auto; }
138
+ [data-flex-item][data-basis="0"] { flex-basis: 0; }
139
+ [data-flex-item][data-basis="full"] { flex-basis: 100%; }
140
+ [data-flex-item][data-basis="1/2"] { flex-basis: 50%; }
141
+ [data-flex-item][data-basis="1/3"] { flex-basis: 33.333333%; }
142
+ [data-flex-item][data-basis="2/3"] { flex-basis: 66.666667%; }
143
+ [data-flex-item][data-basis="1/4"] { flex-basis: 25%; }
144
+ [data-flex-item][data-basis="3/4"] { flex-basis: 75%; }
145
+
146
+ /* ----- Flex Item: Align Self ----- */
147
+ [data-flex-item][data-align-self="auto"] { align-self: auto; }
148
+ [data-flex-item][data-align-self="start"] { align-self: flex-start; }
149
+ [data-flex-item][data-align-self="end"] { align-self: flex-end; }
150
+ [data-flex-item][data-align-self="center"] { align-self: center; }
151
+ [data-flex-item][data-align-self="stretch"] { align-self: stretch; }
152
+ [data-flex-item][data-align-self="baseline"] { align-self: baseline; }
153
+
154
+ /* ----- Flex Item: Order ----- */
155
+ [data-flex-item][data-order="first"] { order: -9999; }
156
+ [data-flex-item][data-order="last"] { order: 9999; }
157
+ [data-flex-item][data-order="none"] { order: 0; }
158
+ [data-flex-item][data-order="1"] { order: 1; }
159
+ [data-flex-item][data-order="2"] { order: 2; }
160
+ [data-flex-item][data-order="3"] { order: 3; }
161
+ [data-flex-item][data-order="4"] { order: 4; }
162
+ [data-flex-item][data-order="5"] { order: 5; }
163
+ [data-flex-item][data-order="6"] { order: 6; }
164
+ [data-flex-item][data-order="7"] { order: 7; }
165
+ [data-flex-item][data-order="8"] { order: 8; }
166
+ [data-flex-item][data-order="9"] { order: 9; }
167
+ [data-flex-item][data-order="10"] { order: 10; }
168
+ [data-flex-item][data-order="11"] { order: 11; }
169
+ [data-flex-item][data-order="12"] { order: 12; }
170
+
171
+ /* ===== XS (480px) ===== */
172
+ @media screen and (min-width: 480px) {
173
+ [data-flex][data-axis-xs="horizontal"] { flex-direction: row; }
174
+ [data-flex][data-axis-xs="horizontal"][data-reverse] { flex-direction: row-reverse; }
175
+ [data-flex][data-axis-xs="vertical"] { flex-direction: column; }
176
+ [data-flex][data-axis-xs="vertical"][data-reverse] { flex-direction: column-reverse; }
177
+ [data-flex][data-gap-xs="0"] { gap: var(--flex-spacing-0); }
178
+ [data-flex][data-gap-xs="1"] { gap: var(--flex-spacing-1); }
179
+ [data-flex][data-gap-xs="2"] { gap: var(--flex-spacing-2); }
180
+ [data-flex][data-gap-xs="3"] { gap: var(--flex-spacing-3); }
181
+ [data-flex][data-gap-xs="4"] { gap: var(--flex-spacing-4); }
182
+ [data-flex][data-gap-xs="5"] { gap: var(--flex-spacing-5); }
183
+ [data-flex][data-gap-xs="6"] { gap: var(--flex-spacing-6); }
184
+ [data-flex][data-gap-xs="7"] { gap: var(--flex-spacing-7); }
185
+ [data-flex][data-gap-xs="8"] { gap: var(--flex-spacing-8); }
186
+ [data-flex][data-gap-xs="9"] { gap: var(--flex-spacing-9); }
187
+ [data-flex][data-gap-xs="10"] { gap: var(--flex-spacing-10); }
188
+ [data-flex][data-gap-xs="fourth"] { gap: var(--flex-spacing-fourth); }
189
+ [data-flex][data-gap-xs="half"] { gap: var(--flex-spacing-half); }
190
+ [data-flex][data-row-gap-xs="0"] { row-gap: var(--flex-spacing-0); }
191
+ [data-flex][data-row-gap-xs="1"] { row-gap: var(--flex-spacing-1); }
192
+ [data-flex][data-row-gap-xs="2"] { row-gap: var(--flex-spacing-2); }
193
+ [data-flex][data-row-gap-xs="3"] { row-gap: var(--flex-spacing-3); }
194
+ [data-flex][data-row-gap-xs="4"] { row-gap: var(--flex-spacing-4); }
195
+ [data-flex][data-row-gap-xs="5"] { row-gap: var(--flex-spacing-5); }
196
+ [data-flex][data-row-gap-xs="6"] { row-gap: var(--flex-spacing-6); }
197
+ [data-flex][data-row-gap-xs="7"] { row-gap: var(--flex-spacing-7); }
198
+ [data-flex][data-row-gap-xs="8"] { row-gap: var(--flex-spacing-8); }
199
+ [data-flex][data-row-gap-xs="9"] { row-gap: var(--flex-spacing-9); }
200
+ [data-flex][data-row-gap-xs="10"] { row-gap: var(--flex-spacing-10); }
201
+ [data-flex][data-row-gap-xs="fourth"] { row-gap: var(--flex-spacing-fourth); }
202
+ [data-flex][data-row-gap-xs="half"] { row-gap: var(--flex-spacing-half); }
203
+ [data-flex][data-column-gap-xs="0"] { column-gap: var(--flex-spacing-0); }
204
+ [data-flex][data-column-gap-xs="1"] { column-gap: var(--flex-spacing-1); }
205
+ [data-flex][data-column-gap-xs="2"] { column-gap: var(--flex-spacing-2); }
206
+ [data-flex][data-column-gap-xs="3"] { column-gap: var(--flex-spacing-3); }
207
+ [data-flex][data-column-gap-xs="4"] { column-gap: var(--flex-spacing-4); }
208
+ [data-flex][data-column-gap-xs="5"] { column-gap: var(--flex-spacing-5); }
209
+ [data-flex][data-column-gap-xs="6"] { column-gap: var(--flex-spacing-6); }
210
+ [data-flex][data-column-gap-xs="7"] { column-gap: var(--flex-spacing-7); }
211
+ [data-flex][data-column-gap-xs="8"] { column-gap: var(--flex-spacing-8); }
212
+ [data-flex][data-column-gap-xs="9"] { column-gap: var(--flex-spacing-9); }
213
+ [data-flex][data-column-gap-xs="10"] { column-gap: var(--flex-spacing-10); }
214
+ [data-flex][data-column-gap-xs="fourth"] { column-gap: var(--flex-spacing-fourth); }
215
+ [data-flex][data-column-gap-xs="half"] { column-gap: var(--flex-spacing-half); }
216
+ [data-flex][data-justify-xs="start"] { justify-content: flex-start; }
217
+ [data-flex][data-justify-xs="end"] { justify-content: flex-end; }
218
+ [data-flex][data-justify-xs="center"] { justify-content: center; }
219
+ [data-flex][data-justify-xs="between"] { justify-content: space-between; }
220
+ [data-flex][data-justify-xs="around"] { justify-content: space-around; }
221
+ [data-flex][data-justify-xs="evenly"] { justify-content: space-evenly; }
222
+ [data-flex][data-align-xs="start"] { align-items: flex-start; }
223
+ [data-flex][data-align-xs="end"] { align-items: flex-end; }
224
+ [data-flex][data-align-xs="center"] { align-items: center; }
225
+ [data-flex][data-align-xs="stretch"] { align-items: stretch; }
226
+ [data-flex][data-align-xs="baseline"] { align-items: baseline; }
227
+ [data-flex][data-align-content-xs="start"] { align-content: flex-start; }
228
+ [data-flex][data-align-content-xs="end"] { align-content: flex-end; }
229
+ [data-flex][data-align-content-xs="center"] { align-content: center; }
230
+ [data-flex][data-align-content-xs="stretch"] { align-content: stretch; }
231
+ [data-flex][data-align-content-xs="between"] { align-content: space-between; }
232
+ [data-flex][data-align-content-xs="around"] { align-content: space-around; }
233
+ [data-flex][data-align-content-xs="evenly"] { align-content: space-evenly; }
234
+ [data-flex][data-wrap-xs="nowrap"] { flex-wrap: nowrap; }
235
+ [data-flex][data-wrap-xs="wrap"] { flex-wrap: wrap; }
236
+ [data-flex][data-wrap-xs="wrap-reverse"] { flex-wrap: wrap-reverse; }
237
+ [data-flex-item][data-grow-xs="0"] { flex-grow: 0; }
238
+ [data-flex-item][data-grow-xs="1"] { flex-grow: 1; }
239
+ [data-flex-item][data-grow-xs="2"] { flex-grow: 2; }
240
+ [data-flex-item][data-grow-xs="3"] { flex-grow: 3; }
241
+ [data-flex-item][data-grow-xs="4"] { flex-grow: 4; }
242
+ [data-flex-item][data-grow-xs="5"] { flex-grow: 5; }
243
+ [data-flex-item][data-shrink-xs="0"] { flex-shrink: 0; }
244
+ [data-flex-item][data-shrink-xs="1"] { flex-shrink: 1; }
245
+ [data-flex-item][data-shrink-xs="2"] { flex-shrink: 2; }
246
+ [data-flex-item][data-shrink-xs="3"] { flex-shrink: 3; }
247
+ [data-flex-item][data-basis-xs="auto"] { flex-basis: auto; }
248
+ [data-flex-item][data-basis-xs="0"] { flex-basis: 0; }
249
+ [data-flex-item][data-basis-xs="full"] { flex-basis: 100%; }
250
+ [data-flex-item][data-basis-xs="1/2"] { flex-basis: 50%; }
251
+ [data-flex-item][data-basis-xs="1/3"] { flex-basis: 33.333333%; }
252
+ [data-flex-item][data-basis-xs="2/3"] { flex-basis: 66.666667%; }
253
+ [data-flex-item][data-basis-xs="1/4"] { flex-basis: 25%; }
254
+ [data-flex-item][data-basis-xs="3/4"] { flex-basis: 75%; }
255
+ [data-flex-item][data-align-self-xs="auto"] { align-self: auto; }
256
+ [data-flex-item][data-align-self-xs="start"] { align-self: flex-start; }
257
+ [data-flex-item][data-align-self-xs="end"] { align-self: flex-end; }
258
+ [data-flex-item][data-align-self-xs="center"] { align-self: center; }
259
+ [data-flex-item][data-align-self-xs="stretch"] { align-self: stretch; }
260
+ [data-flex-item][data-align-self-xs="baseline"] { align-self: baseline; }
261
+ [data-flex-item][data-order-xs="first"] { order: -9999; }
262
+ [data-flex-item][data-order-xs="last"] { order: 9999; }
263
+ [data-flex-item][data-order-xs="none"] { order: 0; }
264
+ [data-flex-item][data-order-xs="1"] { order: 1; }
265
+ [data-flex-item][data-order-xs="2"] { order: 2; }
266
+ [data-flex-item][data-order-xs="3"] { order: 3; }
267
+ [data-flex-item][data-order-xs="4"] { order: 4; }
268
+ [data-flex-item][data-order-xs="5"] { order: 5; }
269
+ [data-flex-item][data-order-xs="6"] { order: 6; }
270
+ [data-flex-item][data-order-xs="7"] { order: 7; }
271
+ [data-flex-item][data-order-xs="8"] { order: 8; }
272
+ [data-flex-item][data-order-xs="9"] { order: 9; }
273
+ [data-flex-item][data-order-xs="10"] { order: 10; }
274
+ [data-flex-item][data-order-xs="11"] { order: 11; }
275
+ [data-flex-item][data-order-xs="12"] { order: 12; }
276
+ }
277
+
278
+ /* ===== SM (600px) ===== */
279
+ @media screen and (min-width: 600px) {
280
+ [data-flex][data-axis-sm="horizontal"] { flex-direction: row; }
281
+ [data-flex][data-axis-sm="horizontal"][data-reverse] { flex-direction: row-reverse; }
282
+ [data-flex][data-axis-sm="vertical"] { flex-direction: column; }
283
+ [data-flex][data-axis-sm="vertical"][data-reverse] { flex-direction: column-reverse; }
284
+ [data-flex][data-gap-sm="0"] { gap: var(--flex-spacing-0); }
285
+ [data-flex][data-gap-sm="1"] { gap: var(--flex-spacing-1); }
286
+ [data-flex][data-gap-sm="2"] { gap: var(--flex-spacing-2); }
287
+ [data-flex][data-gap-sm="3"] { gap: var(--flex-spacing-3); }
288
+ [data-flex][data-gap-sm="4"] { gap: var(--flex-spacing-4); }
289
+ [data-flex][data-gap-sm="5"] { gap: var(--flex-spacing-5); }
290
+ [data-flex][data-gap-sm="6"] { gap: var(--flex-spacing-6); }
291
+ [data-flex][data-gap-sm="7"] { gap: var(--flex-spacing-7); }
292
+ [data-flex][data-gap-sm="8"] { gap: var(--flex-spacing-8); }
293
+ [data-flex][data-gap-sm="9"] { gap: var(--flex-spacing-9); }
294
+ [data-flex][data-gap-sm="10"] { gap: var(--flex-spacing-10); }
295
+ [data-flex][data-gap-sm="fourth"] { gap: var(--flex-spacing-fourth); }
296
+ [data-flex][data-gap-sm="half"] { gap: var(--flex-spacing-half); }
297
+ [data-flex][data-row-gap-sm="0"] { row-gap: var(--flex-spacing-0); }
298
+ [data-flex][data-row-gap-sm="1"] { row-gap: var(--flex-spacing-1); }
299
+ [data-flex][data-row-gap-sm="2"] { row-gap: var(--flex-spacing-2); }
300
+ [data-flex][data-row-gap-sm="3"] { row-gap: var(--flex-spacing-3); }
301
+ [data-flex][data-row-gap-sm="4"] { row-gap: var(--flex-spacing-4); }
302
+ [data-flex][data-row-gap-sm="5"] { row-gap: var(--flex-spacing-5); }
303
+ [data-flex][data-row-gap-sm="6"] { row-gap: var(--flex-spacing-6); }
304
+ [data-flex][data-row-gap-sm="7"] { row-gap: var(--flex-spacing-7); }
305
+ [data-flex][data-row-gap-sm="8"] { row-gap: var(--flex-spacing-8); }
306
+ [data-flex][data-row-gap-sm="9"] { row-gap: var(--flex-spacing-9); }
307
+ [data-flex][data-row-gap-sm="10"] { row-gap: var(--flex-spacing-10); }
308
+ [data-flex][data-row-gap-sm="fourth"] { row-gap: var(--flex-spacing-fourth); }
309
+ [data-flex][data-row-gap-sm="half"] { row-gap: var(--flex-spacing-half); }
310
+ [data-flex][data-column-gap-sm="0"] { column-gap: var(--flex-spacing-0); }
311
+ [data-flex][data-column-gap-sm="1"] { column-gap: var(--flex-spacing-1); }
312
+ [data-flex][data-column-gap-sm="2"] { column-gap: var(--flex-spacing-2); }
313
+ [data-flex][data-column-gap-sm="3"] { column-gap: var(--flex-spacing-3); }
314
+ [data-flex][data-column-gap-sm="4"] { column-gap: var(--flex-spacing-4); }
315
+ [data-flex][data-column-gap-sm="5"] { column-gap: var(--flex-spacing-5); }
316
+ [data-flex][data-column-gap-sm="6"] { column-gap: var(--flex-spacing-6); }
317
+ [data-flex][data-column-gap-sm="7"] { column-gap: var(--flex-spacing-7); }
318
+ [data-flex][data-column-gap-sm="8"] { column-gap: var(--flex-spacing-8); }
319
+ [data-flex][data-column-gap-sm="9"] { column-gap: var(--flex-spacing-9); }
320
+ [data-flex][data-column-gap-sm="10"] { column-gap: var(--flex-spacing-10); }
321
+ [data-flex][data-column-gap-sm="fourth"] { column-gap: var(--flex-spacing-fourth); }
322
+ [data-flex][data-column-gap-sm="half"] { column-gap: var(--flex-spacing-half); }
323
+ [data-flex][data-justify-sm="start"] { justify-content: flex-start; }
324
+ [data-flex][data-justify-sm="end"] { justify-content: flex-end; }
325
+ [data-flex][data-justify-sm="center"] { justify-content: center; }
326
+ [data-flex][data-justify-sm="between"] { justify-content: space-between; }
327
+ [data-flex][data-justify-sm="around"] { justify-content: space-around; }
328
+ [data-flex][data-justify-sm="evenly"] { justify-content: space-evenly; }
329
+ [data-flex][data-align-sm="start"] { align-items: flex-start; }
330
+ [data-flex][data-align-sm="end"] { align-items: flex-end; }
331
+ [data-flex][data-align-sm="center"] { align-items: center; }
332
+ [data-flex][data-align-sm="stretch"] { align-items: stretch; }
333
+ [data-flex][data-align-sm="baseline"] { align-items: baseline; }
334
+ [data-flex][data-align-content-sm="start"] { align-content: flex-start; }
335
+ [data-flex][data-align-content-sm="end"] { align-content: flex-end; }
336
+ [data-flex][data-align-content-sm="center"] { align-content: center; }
337
+ [data-flex][data-align-content-sm="stretch"] { align-content: stretch; }
338
+ [data-flex][data-align-content-sm="between"] { align-content: space-between; }
339
+ [data-flex][data-align-content-sm="around"] { align-content: space-around; }
340
+ [data-flex][data-align-content-sm="evenly"] { align-content: space-evenly; }
341
+ [data-flex][data-wrap-sm="nowrap"] { flex-wrap: nowrap; }
342
+ [data-flex][data-wrap-sm="wrap"] { flex-wrap: wrap; }
343
+ [data-flex][data-wrap-sm="wrap-reverse"] { flex-wrap: wrap-reverse; }
344
+ [data-flex-item][data-grow-sm="0"] { flex-grow: 0; }
345
+ [data-flex-item][data-grow-sm="1"] { flex-grow: 1; }
346
+ [data-flex-item][data-grow-sm="2"] { flex-grow: 2; }
347
+ [data-flex-item][data-grow-sm="3"] { flex-grow: 3; }
348
+ [data-flex-item][data-grow-sm="4"] { flex-grow: 4; }
349
+ [data-flex-item][data-grow-sm="5"] { flex-grow: 5; }
350
+ [data-flex-item][data-shrink-sm="0"] { flex-shrink: 0; }
351
+ [data-flex-item][data-shrink-sm="1"] { flex-shrink: 1; }
352
+ [data-flex-item][data-shrink-sm="2"] { flex-shrink: 2; }
353
+ [data-flex-item][data-shrink-sm="3"] { flex-shrink: 3; }
354
+ [data-flex-item][data-basis-sm="auto"] { flex-basis: auto; }
355
+ [data-flex-item][data-basis-sm="0"] { flex-basis: 0; }
356
+ [data-flex-item][data-basis-sm="full"] { flex-basis: 100%; }
357
+ [data-flex-item][data-basis-sm="1/2"] { flex-basis: 50%; }
358
+ [data-flex-item][data-basis-sm="1/3"] { flex-basis: 33.333333%; }
359
+ [data-flex-item][data-basis-sm="2/3"] { flex-basis: 66.666667%; }
360
+ [data-flex-item][data-basis-sm="1/4"] { flex-basis: 25%; }
361
+ [data-flex-item][data-basis-sm="3/4"] { flex-basis: 75%; }
362
+ [data-flex-item][data-align-self-sm="auto"] { align-self: auto; }
363
+ [data-flex-item][data-align-self-sm="start"] { align-self: flex-start; }
364
+ [data-flex-item][data-align-self-sm="end"] { align-self: flex-end; }
365
+ [data-flex-item][data-align-self-sm="center"] { align-self: center; }
366
+ [data-flex-item][data-align-self-sm="stretch"] { align-self: stretch; }
367
+ [data-flex-item][data-align-self-sm="baseline"] { align-self: baseline; }
368
+ [data-flex-item][data-order-sm="first"] { order: -9999; }
369
+ [data-flex-item][data-order-sm="last"] { order: 9999; }
370
+ [data-flex-item][data-order-sm="none"] { order: 0; }
371
+ [data-flex-item][data-order-sm="1"] { order: 1; }
372
+ [data-flex-item][data-order-sm="2"] { order: 2; }
373
+ [data-flex-item][data-order-sm="3"] { order: 3; }
374
+ [data-flex-item][data-order-sm="4"] { order: 4; }
375
+ [data-flex-item][data-order-sm="5"] { order: 5; }
376
+ [data-flex-item][data-order-sm="6"] { order: 6; }
377
+ [data-flex-item][data-order-sm="7"] { order: 7; }
378
+ [data-flex-item][data-order-sm="8"] { order: 8; }
379
+ [data-flex-item][data-order-sm="9"] { order: 9; }
380
+ [data-flex-item][data-order-sm="10"] { order: 10; }
381
+ [data-flex-item][data-order-sm="11"] { order: 11; }
382
+ [data-flex-item][data-order-sm="12"] { order: 12; }
383
+ }
384
+
385
+ /* ===== MD (720px) ===== */
386
+ @media screen and (min-width: 720px) {
387
+ [data-flex][data-axis-md="horizontal"] { flex-direction: row; }
388
+ [data-flex][data-axis-md="horizontal"][data-reverse] { flex-direction: row-reverse; }
389
+ [data-flex][data-axis-md="vertical"] { flex-direction: column; }
390
+ [data-flex][data-axis-md="vertical"][data-reverse] { flex-direction: column-reverse; }
391
+ [data-flex][data-gap-md="0"] { gap: var(--flex-spacing-0); }
392
+ [data-flex][data-gap-md="1"] { gap: var(--flex-spacing-1); }
393
+ [data-flex][data-gap-md="2"] { gap: var(--flex-spacing-2); }
394
+ [data-flex][data-gap-md="3"] { gap: var(--flex-spacing-3); }
395
+ [data-flex][data-gap-md="4"] { gap: var(--flex-spacing-4); }
396
+ [data-flex][data-gap-md="5"] { gap: var(--flex-spacing-5); }
397
+ [data-flex][data-gap-md="6"] { gap: var(--flex-spacing-6); }
398
+ [data-flex][data-gap-md="7"] { gap: var(--flex-spacing-7); }
399
+ [data-flex][data-gap-md="8"] { gap: var(--flex-spacing-8); }
400
+ [data-flex][data-gap-md="9"] { gap: var(--flex-spacing-9); }
401
+ [data-flex][data-gap-md="10"] { gap: var(--flex-spacing-10); }
402
+ [data-flex][data-gap-md="fourth"] { gap: var(--flex-spacing-fourth); }
403
+ [data-flex][data-gap-md="half"] { gap: var(--flex-spacing-half); }
404
+ [data-flex][data-row-gap-md="0"] { row-gap: var(--flex-spacing-0); }
405
+ [data-flex][data-row-gap-md="1"] { row-gap: var(--flex-spacing-1); }
406
+ [data-flex][data-row-gap-md="2"] { row-gap: var(--flex-spacing-2); }
407
+ [data-flex][data-row-gap-md="3"] { row-gap: var(--flex-spacing-3); }
408
+ [data-flex][data-row-gap-md="4"] { row-gap: var(--flex-spacing-4); }
409
+ [data-flex][data-row-gap-md="5"] { row-gap: var(--flex-spacing-5); }
410
+ [data-flex][data-row-gap-md="6"] { row-gap: var(--flex-spacing-6); }
411
+ [data-flex][data-row-gap-md="7"] { row-gap: var(--flex-spacing-7); }
412
+ [data-flex][data-row-gap-md="8"] { row-gap: var(--flex-spacing-8); }
413
+ [data-flex][data-row-gap-md="9"] { row-gap: var(--flex-spacing-9); }
414
+ [data-flex][data-row-gap-md="10"] { row-gap: var(--flex-spacing-10); }
415
+ [data-flex][data-row-gap-md="fourth"] { row-gap: var(--flex-spacing-fourth); }
416
+ [data-flex][data-row-gap-md="half"] { row-gap: var(--flex-spacing-half); }
417
+ [data-flex][data-column-gap-md="0"] { column-gap: var(--flex-spacing-0); }
418
+ [data-flex][data-column-gap-md="1"] { column-gap: var(--flex-spacing-1); }
419
+ [data-flex][data-column-gap-md="2"] { column-gap: var(--flex-spacing-2); }
420
+ [data-flex][data-column-gap-md="3"] { column-gap: var(--flex-spacing-3); }
421
+ [data-flex][data-column-gap-md="4"] { column-gap: var(--flex-spacing-4); }
422
+ [data-flex][data-column-gap-md="5"] { column-gap: var(--flex-spacing-5); }
423
+ [data-flex][data-column-gap-md="6"] { column-gap: var(--flex-spacing-6); }
424
+ [data-flex][data-column-gap-md="7"] { column-gap: var(--flex-spacing-7); }
425
+ [data-flex][data-column-gap-md="8"] { column-gap: var(--flex-spacing-8); }
426
+ [data-flex][data-column-gap-md="9"] { column-gap: var(--flex-spacing-9); }
427
+ [data-flex][data-column-gap-md="10"] { column-gap: var(--flex-spacing-10); }
428
+ [data-flex][data-column-gap-md="fourth"] { column-gap: var(--flex-spacing-fourth); }
429
+ [data-flex][data-column-gap-md="half"] { column-gap: var(--flex-spacing-half); }
430
+ [data-flex][data-justify-md="start"] { justify-content: flex-start; }
431
+ [data-flex][data-justify-md="end"] { justify-content: flex-end; }
432
+ [data-flex][data-justify-md="center"] { justify-content: center; }
433
+ [data-flex][data-justify-md="between"] { justify-content: space-between; }
434
+ [data-flex][data-justify-md="around"] { justify-content: space-around; }
435
+ [data-flex][data-justify-md="evenly"] { justify-content: space-evenly; }
436
+ [data-flex][data-align-md="start"] { align-items: flex-start; }
437
+ [data-flex][data-align-md="end"] { align-items: flex-end; }
438
+ [data-flex][data-align-md="center"] { align-items: center; }
439
+ [data-flex][data-align-md="stretch"] { align-items: stretch; }
440
+ [data-flex][data-align-md="baseline"] { align-items: baseline; }
441
+ [data-flex][data-align-content-md="start"] { align-content: flex-start; }
442
+ [data-flex][data-align-content-md="end"] { align-content: flex-end; }
443
+ [data-flex][data-align-content-md="center"] { align-content: center; }
444
+ [data-flex][data-align-content-md="stretch"] { align-content: stretch; }
445
+ [data-flex][data-align-content-md="between"] { align-content: space-between; }
446
+ [data-flex][data-align-content-md="around"] { align-content: space-around; }
447
+ [data-flex][data-align-content-md="evenly"] { align-content: space-evenly; }
448
+ [data-flex][data-wrap-md="nowrap"] { flex-wrap: nowrap; }
449
+ [data-flex][data-wrap-md="wrap"] { flex-wrap: wrap; }
450
+ [data-flex][data-wrap-md="wrap-reverse"] { flex-wrap: wrap-reverse; }
451
+ [data-flex-item][data-grow-md="0"] { flex-grow: 0; }
452
+ [data-flex-item][data-grow-md="1"] { flex-grow: 1; }
453
+ [data-flex-item][data-grow-md="2"] { flex-grow: 2; }
454
+ [data-flex-item][data-grow-md="3"] { flex-grow: 3; }
455
+ [data-flex-item][data-grow-md="4"] { flex-grow: 4; }
456
+ [data-flex-item][data-grow-md="5"] { flex-grow: 5; }
457
+ [data-flex-item][data-shrink-md="0"] { flex-shrink: 0; }
458
+ [data-flex-item][data-shrink-md="1"] { flex-shrink: 1; }
459
+ [data-flex-item][data-shrink-md="2"] { flex-shrink: 2; }
460
+ [data-flex-item][data-shrink-md="3"] { flex-shrink: 3; }
461
+ [data-flex-item][data-basis-md="auto"] { flex-basis: auto; }
462
+ [data-flex-item][data-basis-md="0"] { flex-basis: 0; }
463
+ [data-flex-item][data-basis-md="full"] { flex-basis: 100%; }
464
+ [data-flex-item][data-basis-md="1/2"] { flex-basis: 50%; }
465
+ [data-flex-item][data-basis-md="1/3"] { flex-basis: 33.333333%; }
466
+ [data-flex-item][data-basis-md="2/3"] { flex-basis: 66.666667%; }
467
+ [data-flex-item][data-basis-md="1/4"] { flex-basis: 25%; }
468
+ [data-flex-item][data-basis-md="3/4"] { flex-basis: 75%; }
469
+ [data-flex-item][data-align-self-md="auto"] { align-self: auto; }
470
+ [data-flex-item][data-align-self-md="start"] { align-self: flex-start; }
471
+ [data-flex-item][data-align-self-md="end"] { align-self: flex-end; }
472
+ [data-flex-item][data-align-self-md="center"] { align-self: center; }
473
+ [data-flex-item][data-align-self-md="stretch"] { align-self: stretch; }
474
+ [data-flex-item][data-align-self-md="baseline"] { align-self: baseline; }
475
+ [data-flex-item][data-order-md="first"] { order: -9999; }
476
+ [data-flex-item][data-order-md="last"] { order: 9999; }
477
+ [data-flex-item][data-order-md="none"] { order: 0; }
478
+ [data-flex-item][data-order-md="1"] { order: 1; }
479
+ [data-flex-item][data-order-md="2"] { order: 2; }
480
+ [data-flex-item][data-order-md="3"] { order: 3; }
481
+ [data-flex-item][data-order-md="4"] { order: 4; }
482
+ [data-flex-item][data-order-md="5"] { order: 5; }
483
+ [data-flex-item][data-order-md="6"] { order: 6; }
484
+ [data-flex-item][data-order-md="7"] { order: 7; }
485
+ [data-flex-item][data-order-md="8"] { order: 8; }
486
+ [data-flex-item][data-order-md="9"] { order: 9; }
487
+ [data-flex-item][data-order-md="10"] { order: 10; }
488
+ [data-flex-item][data-order-md="11"] { order: 11; }
489
+ [data-flex-item][data-order-md="12"] { order: 12; }
490
+ }
491
+
492
+ /* ===== LG (960px) ===== */
493
+ @media screen and (min-width: 960px) {
494
+ [data-flex][data-axis-lg="horizontal"] { flex-direction: row; }
495
+ [data-flex][data-axis-lg="horizontal"][data-reverse] { flex-direction: row-reverse; }
496
+ [data-flex][data-axis-lg="vertical"] { flex-direction: column; }
497
+ [data-flex][data-axis-lg="vertical"][data-reverse] { flex-direction: column-reverse; }
498
+ [data-flex][data-gap-lg="0"] { gap: var(--flex-spacing-0); }
499
+ [data-flex][data-gap-lg="1"] { gap: var(--flex-spacing-1); }
500
+ [data-flex][data-gap-lg="2"] { gap: var(--flex-spacing-2); }
501
+ [data-flex][data-gap-lg="3"] { gap: var(--flex-spacing-3); }
502
+ [data-flex][data-gap-lg="4"] { gap: var(--flex-spacing-4); }
503
+ [data-flex][data-gap-lg="5"] { gap: var(--flex-spacing-5); }
504
+ [data-flex][data-gap-lg="6"] { gap: var(--flex-spacing-6); }
505
+ [data-flex][data-gap-lg="7"] { gap: var(--flex-spacing-7); }
506
+ [data-flex][data-gap-lg="8"] { gap: var(--flex-spacing-8); }
507
+ [data-flex][data-gap-lg="9"] { gap: var(--flex-spacing-9); }
508
+ [data-flex][data-gap-lg="10"] { gap: var(--flex-spacing-10); }
509
+ [data-flex][data-gap-lg="fourth"] { gap: var(--flex-spacing-fourth); }
510
+ [data-flex][data-gap-lg="half"] { gap: var(--flex-spacing-half); }
511
+ [data-flex][data-row-gap-lg="0"] { row-gap: var(--flex-spacing-0); }
512
+ [data-flex][data-row-gap-lg="1"] { row-gap: var(--flex-spacing-1); }
513
+ [data-flex][data-row-gap-lg="2"] { row-gap: var(--flex-spacing-2); }
514
+ [data-flex][data-row-gap-lg="3"] { row-gap: var(--flex-spacing-3); }
515
+ [data-flex][data-row-gap-lg="4"] { row-gap: var(--flex-spacing-4); }
516
+ [data-flex][data-row-gap-lg="5"] { row-gap: var(--flex-spacing-5); }
517
+ [data-flex][data-row-gap-lg="6"] { row-gap: var(--flex-spacing-6); }
518
+ [data-flex][data-row-gap-lg="7"] { row-gap: var(--flex-spacing-7); }
519
+ [data-flex][data-row-gap-lg="8"] { row-gap: var(--flex-spacing-8); }
520
+ [data-flex][data-row-gap-lg="9"] { row-gap: var(--flex-spacing-9); }
521
+ [data-flex][data-row-gap-lg="10"] { row-gap: var(--flex-spacing-10); }
522
+ [data-flex][data-row-gap-lg="fourth"] { row-gap: var(--flex-spacing-fourth); }
523
+ [data-flex][data-row-gap-lg="half"] { row-gap: var(--flex-spacing-half); }
524
+ [data-flex][data-column-gap-lg="0"] { column-gap: var(--flex-spacing-0); }
525
+ [data-flex][data-column-gap-lg="1"] { column-gap: var(--flex-spacing-1); }
526
+ [data-flex][data-column-gap-lg="2"] { column-gap: var(--flex-spacing-2); }
527
+ [data-flex][data-column-gap-lg="3"] { column-gap: var(--flex-spacing-3); }
528
+ [data-flex][data-column-gap-lg="4"] { column-gap: var(--flex-spacing-4); }
529
+ [data-flex][data-column-gap-lg="5"] { column-gap: var(--flex-spacing-5); }
530
+ [data-flex][data-column-gap-lg="6"] { column-gap: var(--flex-spacing-6); }
531
+ [data-flex][data-column-gap-lg="7"] { column-gap: var(--flex-spacing-7); }
532
+ [data-flex][data-column-gap-lg="8"] { column-gap: var(--flex-spacing-8); }
533
+ [data-flex][data-column-gap-lg="9"] { column-gap: var(--flex-spacing-9); }
534
+ [data-flex][data-column-gap-lg="10"] { column-gap: var(--flex-spacing-10); }
535
+ [data-flex][data-column-gap-lg="fourth"] { column-gap: var(--flex-spacing-fourth); }
536
+ [data-flex][data-column-gap-lg="half"] { column-gap: var(--flex-spacing-half); }
537
+ [data-flex][data-justify-lg="start"] { justify-content: flex-start; }
538
+ [data-flex][data-justify-lg="end"] { justify-content: flex-end; }
539
+ [data-flex][data-justify-lg="center"] { justify-content: center; }
540
+ [data-flex][data-justify-lg="between"] { justify-content: space-between; }
541
+ [data-flex][data-justify-lg="around"] { justify-content: space-around; }
542
+ [data-flex][data-justify-lg="evenly"] { justify-content: space-evenly; }
543
+ [data-flex][data-align-lg="start"] { align-items: flex-start; }
544
+ [data-flex][data-align-lg="end"] { align-items: flex-end; }
545
+ [data-flex][data-align-lg="center"] { align-items: center; }
546
+ [data-flex][data-align-lg="stretch"] { align-items: stretch; }
547
+ [data-flex][data-align-lg="baseline"] { align-items: baseline; }
548
+ [data-flex][data-align-content-lg="start"] { align-content: flex-start; }
549
+ [data-flex][data-align-content-lg="end"] { align-content: flex-end; }
550
+ [data-flex][data-align-content-lg="center"] { align-content: center; }
551
+ [data-flex][data-align-content-lg="stretch"] { align-content: stretch; }
552
+ [data-flex][data-align-content-lg="between"] { align-content: space-between; }
553
+ [data-flex][data-align-content-lg="around"] { align-content: space-around; }
554
+ [data-flex][data-align-content-lg="evenly"] { align-content: space-evenly; }
555
+ [data-flex][data-wrap-lg="nowrap"] { flex-wrap: nowrap; }
556
+ [data-flex][data-wrap-lg="wrap"] { flex-wrap: wrap; }
557
+ [data-flex][data-wrap-lg="wrap-reverse"] { flex-wrap: wrap-reverse; }
558
+ [data-flex-item][data-grow-lg="0"] { flex-grow: 0; }
559
+ [data-flex-item][data-grow-lg="1"] { flex-grow: 1; }
560
+ [data-flex-item][data-grow-lg="2"] { flex-grow: 2; }
561
+ [data-flex-item][data-grow-lg="3"] { flex-grow: 3; }
562
+ [data-flex-item][data-grow-lg="4"] { flex-grow: 4; }
563
+ [data-flex-item][data-grow-lg="5"] { flex-grow: 5; }
564
+ [data-flex-item][data-shrink-lg="0"] { flex-shrink: 0; }
565
+ [data-flex-item][data-shrink-lg="1"] { flex-shrink: 1; }
566
+ [data-flex-item][data-shrink-lg="2"] { flex-shrink: 2; }
567
+ [data-flex-item][data-shrink-lg="3"] { flex-shrink: 3; }
568
+ [data-flex-item][data-basis-lg="auto"] { flex-basis: auto; }
569
+ [data-flex-item][data-basis-lg="0"] { flex-basis: 0; }
570
+ [data-flex-item][data-basis-lg="full"] { flex-basis: 100%; }
571
+ [data-flex-item][data-basis-lg="1/2"] { flex-basis: 50%; }
572
+ [data-flex-item][data-basis-lg="1/3"] { flex-basis: 33.333333%; }
573
+ [data-flex-item][data-basis-lg="2/3"] { flex-basis: 66.666667%; }
574
+ [data-flex-item][data-basis-lg="1/4"] { flex-basis: 25%; }
575
+ [data-flex-item][data-basis-lg="3/4"] { flex-basis: 75%; }
576
+ [data-flex-item][data-align-self-lg="auto"] { align-self: auto; }
577
+ [data-flex-item][data-align-self-lg="start"] { align-self: flex-start; }
578
+ [data-flex-item][data-align-self-lg="end"] { align-self: flex-end; }
579
+ [data-flex-item][data-align-self-lg="center"] { align-self: center; }
580
+ [data-flex-item][data-align-self-lg="stretch"] { align-self: stretch; }
581
+ [data-flex-item][data-align-self-lg="baseline"] { align-self: baseline; }
582
+ [data-flex-item][data-order-lg="first"] { order: -9999; }
583
+ [data-flex-item][data-order-lg="last"] { order: 9999; }
584
+ [data-flex-item][data-order-lg="none"] { order: 0; }
585
+ [data-flex-item][data-order-lg="1"] { order: 1; }
586
+ [data-flex-item][data-order-lg="2"] { order: 2; }
587
+ [data-flex-item][data-order-lg="3"] { order: 3; }
588
+ [data-flex-item][data-order-lg="4"] { order: 4; }
589
+ [data-flex-item][data-order-lg="5"] { order: 5; }
590
+ [data-flex-item][data-order-lg="6"] { order: 6; }
591
+ [data-flex-item][data-order-lg="7"] { order: 7; }
592
+ [data-flex-item][data-order-lg="8"] { order: 8; }
593
+ [data-flex-item][data-order-lg="9"] { order: 9; }
594
+ [data-flex-item][data-order-lg="10"] { order: 10; }
595
+ [data-flex-item][data-order-lg="11"] { order: 11; }
596
+ [data-flex-item][data-order-lg="12"] { order: 12; }
597
+ }
598
+
599
+ /* ===== XL (1200px) ===== */
600
+ @media screen and (min-width: 1200px) {
601
+ [data-flex][data-axis-xl="horizontal"] { flex-direction: row; }
602
+ [data-flex][data-axis-xl="horizontal"][data-reverse] { flex-direction: row-reverse; }
603
+ [data-flex][data-axis-xl="vertical"] { flex-direction: column; }
604
+ [data-flex][data-axis-xl="vertical"][data-reverse] { flex-direction: column-reverse; }
605
+ [data-flex][data-gap-xl="0"] { gap: var(--flex-spacing-0); }
606
+ [data-flex][data-gap-xl="1"] { gap: var(--flex-spacing-1); }
607
+ [data-flex][data-gap-xl="2"] { gap: var(--flex-spacing-2); }
608
+ [data-flex][data-gap-xl="3"] { gap: var(--flex-spacing-3); }
609
+ [data-flex][data-gap-xl="4"] { gap: var(--flex-spacing-4); }
610
+ [data-flex][data-gap-xl="5"] { gap: var(--flex-spacing-5); }
611
+ [data-flex][data-gap-xl="6"] { gap: var(--flex-spacing-6); }
612
+ [data-flex][data-gap-xl="7"] { gap: var(--flex-spacing-7); }
613
+ [data-flex][data-gap-xl="8"] { gap: var(--flex-spacing-8); }
614
+ [data-flex][data-gap-xl="9"] { gap: var(--flex-spacing-9); }
615
+ [data-flex][data-gap-xl="10"] { gap: var(--flex-spacing-10); }
616
+ [data-flex][data-gap-xl="fourth"] { gap: var(--flex-spacing-fourth); }
617
+ [data-flex][data-gap-xl="half"] { gap: var(--flex-spacing-half); }
618
+ [data-flex][data-row-gap-xl="0"] { row-gap: var(--flex-spacing-0); }
619
+ [data-flex][data-row-gap-xl="1"] { row-gap: var(--flex-spacing-1); }
620
+ [data-flex][data-row-gap-xl="2"] { row-gap: var(--flex-spacing-2); }
621
+ [data-flex][data-row-gap-xl="3"] { row-gap: var(--flex-spacing-3); }
622
+ [data-flex][data-row-gap-xl="4"] { row-gap: var(--flex-spacing-4); }
623
+ [data-flex][data-row-gap-xl="5"] { row-gap: var(--flex-spacing-5); }
624
+ [data-flex][data-row-gap-xl="6"] { row-gap: var(--flex-spacing-6); }
625
+ [data-flex][data-row-gap-xl="7"] { row-gap: var(--flex-spacing-7); }
626
+ [data-flex][data-row-gap-xl="8"] { row-gap: var(--flex-spacing-8); }
627
+ [data-flex][data-row-gap-xl="9"] { row-gap: var(--flex-spacing-9); }
628
+ [data-flex][data-row-gap-xl="10"] { row-gap: var(--flex-spacing-10); }
629
+ [data-flex][data-row-gap-xl="fourth"] { row-gap: var(--flex-spacing-fourth); }
630
+ [data-flex][data-row-gap-xl="half"] { row-gap: var(--flex-spacing-half); }
631
+ [data-flex][data-column-gap-xl="0"] { column-gap: var(--flex-spacing-0); }
632
+ [data-flex][data-column-gap-xl="1"] { column-gap: var(--flex-spacing-1); }
633
+ [data-flex][data-column-gap-xl="2"] { column-gap: var(--flex-spacing-2); }
634
+ [data-flex][data-column-gap-xl="3"] { column-gap: var(--flex-spacing-3); }
635
+ [data-flex][data-column-gap-xl="4"] { column-gap: var(--flex-spacing-4); }
636
+ [data-flex][data-column-gap-xl="5"] { column-gap: var(--flex-spacing-5); }
637
+ [data-flex][data-column-gap-xl="6"] { column-gap: var(--flex-spacing-6); }
638
+ [data-flex][data-column-gap-xl="7"] { column-gap: var(--flex-spacing-7); }
639
+ [data-flex][data-column-gap-xl="8"] { column-gap: var(--flex-spacing-8); }
640
+ [data-flex][data-column-gap-xl="9"] { column-gap: var(--flex-spacing-9); }
641
+ [data-flex][data-column-gap-xl="10"] { column-gap: var(--flex-spacing-10); }
642
+ [data-flex][data-column-gap-xl="fourth"] { column-gap: var(--flex-spacing-fourth); }
643
+ [data-flex][data-column-gap-xl="half"] { column-gap: var(--flex-spacing-half); }
644
+ [data-flex][data-justify-xl="start"] { justify-content: flex-start; }
645
+ [data-flex][data-justify-xl="end"] { justify-content: flex-end; }
646
+ [data-flex][data-justify-xl="center"] { justify-content: center; }
647
+ [data-flex][data-justify-xl="between"] { justify-content: space-between; }
648
+ [data-flex][data-justify-xl="around"] { justify-content: space-around; }
649
+ [data-flex][data-justify-xl="evenly"] { justify-content: space-evenly; }
650
+ [data-flex][data-align-xl="start"] { align-items: flex-start; }
651
+ [data-flex][data-align-xl="end"] { align-items: flex-end; }
652
+ [data-flex][data-align-xl="center"] { align-items: center; }
653
+ [data-flex][data-align-xl="stretch"] { align-items: stretch; }
654
+ [data-flex][data-align-xl="baseline"] { align-items: baseline; }
655
+ [data-flex][data-align-content-xl="start"] { align-content: flex-start; }
656
+ [data-flex][data-align-content-xl="end"] { align-content: flex-end; }
657
+ [data-flex][data-align-content-xl="center"] { align-content: center; }
658
+ [data-flex][data-align-content-xl="stretch"] { align-content: stretch; }
659
+ [data-flex][data-align-content-xl="between"] { align-content: space-between; }
660
+ [data-flex][data-align-content-xl="around"] { align-content: space-around; }
661
+ [data-flex][data-align-content-xl="evenly"] { align-content: space-evenly; }
662
+ [data-flex][data-wrap-xl="nowrap"] { flex-wrap: nowrap; }
663
+ [data-flex][data-wrap-xl="wrap"] { flex-wrap: wrap; }
664
+ [data-flex][data-wrap-xl="wrap-reverse"] { flex-wrap: wrap-reverse; }
665
+ [data-flex-item][data-grow-xl="0"] { flex-grow: 0; }
666
+ [data-flex-item][data-grow-xl="1"] { flex-grow: 1; }
667
+ [data-flex-item][data-grow-xl="2"] { flex-grow: 2; }
668
+ [data-flex-item][data-grow-xl="3"] { flex-grow: 3; }
669
+ [data-flex-item][data-grow-xl="4"] { flex-grow: 4; }
670
+ [data-flex-item][data-grow-xl="5"] { flex-grow: 5; }
671
+ [data-flex-item][data-shrink-xl="0"] { flex-shrink: 0; }
672
+ [data-flex-item][data-shrink-xl="1"] { flex-shrink: 1; }
673
+ [data-flex-item][data-shrink-xl="2"] { flex-shrink: 2; }
674
+ [data-flex-item][data-shrink-xl="3"] { flex-shrink: 3; }
675
+ [data-flex-item][data-basis-xl="auto"] { flex-basis: auto; }
676
+ [data-flex-item][data-basis-xl="0"] { flex-basis: 0; }
677
+ [data-flex-item][data-basis-xl="full"] { flex-basis: 100%; }
678
+ [data-flex-item][data-basis-xl="1/2"] { flex-basis: 50%; }
679
+ [data-flex-item][data-basis-xl="1/3"] { flex-basis: 33.333333%; }
680
+ [data-flex-item][data-basis-xl="2/3"] { flex-basis: 66.666667%; }
681
+ [data-flex-item][data-basis-xl="1/4"] { flex-basis: 25%; }
682
+ [data-flex-item][data-basis-xl="3/4"] { flex-basis: 75%; }
683
+ [data-flex-item][data-align-self-xl="auto"] { align-self: auto; }
684
+ [data-flex-item][data-align-self-xl="start"] { align-self: flex-start; }
685
+ [data-flex-item][data-align-self-xl="end"] { align-self: flex-end; }
686
+ [data-flex-item][data-align-self-xl="center"] { align-self: center; }
687
+ [data-flex-item][data-align-self-xl="stretch"] { align-self: stretch; }
688
+ [data-flex-item][data-align-self-xl="baseline"] { align-self: baseline; }
689
+ [data-flex-item][data-order-xl="first"] { order: -9999; }
690
+ [data-flex-item][data-order-xl="last"] { order: 9999; }
691
+ [data-flex-item][data-order-xl="none"] { order: 0; }
692
+ [data-flex-item][data-order-xl="1"] { order: 1; }
693
+ [data-flex-item][data-order-xl="2"] { order: 2; }
694
+ [data-flex-item][data-order-xl="3"] { order: 3; }
695
+ [data-flex-item][data-order-xl="4"] { order: 4; }
696
+ [data-flex-item][data-order-xl="5"] { order: 5; }
697
+ [data-flex-item][data-order-xl="6"] { order: 6; }
698
+ [data-flex-item][data-order-xl="7"] { order: 7; }
699
+ [data-flex-item][data-order-xl="8"] { order: 8; }
700
+ [data-flex-item][data-order-xl="9"] { order: 9; }
701
+ [data-flex-item][data-order-xl="10"] { order: 10; }
702
+ [data-flex-item][data-order-xl="11"] { order: 11; }
703
+ [data-flex-item][data-order-xl="12"] { order: 12; }
704
+ }
705
+