dynamic-ds 1.0.7 → 1.0.9

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 (6) hide show
  1. package/README.md +372 -270
  2. package/package.json +1 -1
  3. package/src/lib/styles/_animations.scss +1012 -300
  4. package/src/lib/styles/_spacing.scss +1413 -563
  5. package/src/lib/styles/_typography.scss +293 -148
  6. package/src/lib/styles/icons.scss +3597 -0
package/src/lib/styles/_spacing.scss CHANGED
@@ -11,76 +11,76 @@ $spacing-base: 4px;
11
11
 
12
12
  $spacing-0: 0;
13
13
  $spacing-px: 1px;
14
- $spacing-0_5: $spacing-base * 0.5; // 2px
15
- $spacing-1: $spacing-base; // 4px
16
- $spacing-1_5: $spacing-base * 1.5; // 6px
17
- $spacing-2: $spacing-base * 2; // 8px
18
- $spacing-2_5: $spacing-base * 2.5; // 10px
19
- $spacing-3: $spacing-base * 3; // 12px
20
- $spacing-3_5: $spacing-base * 3.5; // 14px
21
- $spacing-4: $spacing-base * 4; // 16px
22
- $spacing-5: $spacing-base * 5; // 20px
23
- $spacing-6: $spacing-base * 6; // 24px
24
- $spacing-7: $spacing-base * 7; // 28px
25
- $spacing-8: $spacing-base * 8; // 32px
26
- $spacing-9: $spacing-base * 9; // 36px
27
- $spacing-10: $spacing-base * 10; // 40px
28
- $spacing-11: $spacing-base * 11; // 44px
29
- $spacing-12: $spacing-base * 12; // 48px
30
- $spacing-14: $spacing-base * 14; // 56px
31
- $spacing-16: $spacing-base * 16; // 64px
32
- $spacing-20: $spacing-base * 20; // 80px
33
- $spacing-24: $spacing-base * 24; // 96px
34
- $spacing-28: $spacing-base * 28; // 112px
35
- $spacing-32: $spacing-base * 32; // 128px
36
- $spacing-36: $spacing-base * 36; // 144px
37
- $spacing-40: $spacing-base * 40; // 160px
38
- $spacing-44: $spacing-base * 44; // 176px
39
- $spacing-48: $spacing-base * 48; // 192px
40
- $spacing-52: $spacing-base * 52; // 208px
41
- $spacing-56: $spacing-base * 56; // 224px
42
- $spacing-60: $spacing-base * 60; // 240px
43
- $spacing-64: $spacing-base * 64; // 256px
44
- $spacing-72: $spacing-base * 72; // 288px
45
- $spacing-80: $spacing-base * 80; // 320px
46
- $spacing-96: $spacing-base * 96; // 384px
14
+ $spacing-0_5: $spacing-base * 0.5; // 2px
15
+ $spacing-1: $spacing-base; // 4px
16
+ $spacing-1_5: $spacing-base * 1.5; // 6px
17
+ $spacing-2: $spacing-base * 2; // 8px
18
+ $spacing-2_5: $spacing-base * 2.5; // 10px
19
+ $spacing-3: $spacing-base * 3; // 12px
20
+ $spacing-3_5: $spacing-base * 3.5; // 14px
21
+ $spacing-4: $spacing-base * 4; // 16px
22
+ $spacing-5: $spacing-base * 5; // 20px
23
+ $spacing-6: $spacing-base * 6; // 24px
24
+ $spacing-7: $spacing-base * 7; // 28px
25
+ $spacing-8: $spacing-base * 8; // 32px
26
+ $spacing-9: $spacing-base * 9; // 36px
27
+ $spacing-10: $spacing-base * 10; // 40px
28
+ $spacing-11: $spacing-base * 11; // 44px
29
+ $spacing-12: $spacing-base * 12; // 48px
30
+ $spacing-14: $spacing-base * 14; // 56px
31
+ $spacing-16: $spacing-base * 16; // 64px
32
+ $spacing-20: $spacing-base * 20; // 80px
33
+ $spacing-24: $spacing-base * 24; // 96px
34
+ $spacing-28: $spacing-base * 28; // 112px
35
+ $spacing-32: $spacing-base * 32; // 128px
36
+ $spacing-36: $spacing-base * 36; // 144px
37
+ $spacing-40: $spacing-base * 40; // 160px
38
+ $spacing-44: $spacing-base * 44; // 176px
39
+ $spacing-48: $spacing-base * 48; // 192px
40
+ $spacing-52: $spacing-base * 52; // 208px
41
+ $spacing-56: $spacing-base * 56; // 224px
42
+ $spacing-60: $spacing-base * 60; // 240px
43
+ $spacing-64: $spacing-base * 64; // 256px
44
+ $spacing-72: $spacing-base * 72; // 288px
45
+ $spacing-80: $spacing-base * 80; // 320px
46
+ $spacing-96: $spacing-base * 96; // 384px
47
47
 
48
48
  $spacing-map: (
49
- '0': $spacing-0,
50
- 'px': $spacing-px,
51
- '0\\.5': $spacing-0_5,
52
- '1': $spacing-1,
53
- '1\\.5': $spacing-1_5,
54
- '2': $spacing-2,
55
- '2\\.5': $spacing-2_5,
56
- '3': $spacing-3,
57
- '3\\.5': $spacing-3_5,
58
- '4': $spacing-4,
59
- '5': $spacing-5,
60
- '6': $spacing-6,
61
- '7': $spacing-7,
62
- '8': $spacing-8,
63
- '9': $spacing-9,
64
- '10': $spacing-10,
65
- '11': $spacing-11,
66
- '12': $spacing-12,
67
- '14': $spacing-14,
68
- '16': $spacing-16,
69
- '20': $spacing-20,
70
- '24': $spacing-24,
71
- '28': $spacing-28,
72
- '32': $spacing-32,
73
- '36': $spacing-36,
74
- '40': $spacing-40,
75
- '44': $spacing-44,
76
- '48': $spacing-48,
77
- '52': $spacing-52,
78
- '56': $spacing-56,
79
- '60': $spacing-60,
80
- '64': $spacing-64,
81
- '72': $spacing-72,
82
- '80': $spacing-80,
83
- '96': $spacing-96,
49
+ "0": $spacing-0,
50
+ "px": $spacing-px,
51
+ "0\\.5": $spacing-0_5,
52
+ "1": $spacing-1,
53
+ "1\\.5": $spacing-1_5,
54
+ "2": $spacing-2,
55
+ "2\\.5": $spacing-2_5,
56
+ "3": $spacing-3,
57
+ "3\\.5": $spacing-3_5,
58
+ "4": $spacing-4,
59
+ "5": $spacing-5,
60
+ "6": $spacing-6,
61
+ "7": $spacing-7,
62
+ "8": $spacing-8,
63
+ "9": $spacing-9,
64
+ "10": $spacing-10,
65
+ "11": $spacing-11,
66
+ "12": $spacing-12,
67
+ "14": $spacing-14,
68
+ "16": $spacing-16,
69
+ "20": $spacing-20,
70
+ "24": $spacing-24,
71
+ "28": $spacing-28,
72
+ "32": $spacing-32,
73
+ "36": $spacing-36,
74
+ "40": $spacing-40,
75
+ "44": $spacing-44,
76
+ "48": $spacing-48,
77
+ "52": $spacing-52,
78
+ "56": $spacing-56,
79
+ "60": $spacing-60,
80
+ "64": $spacing-64,
81
+ "72": $spacing-72,
82
+ "80": $spacing-80,
83
+ "96": $spacing-96,
84
84
  );
85
85
 
86
86
  // CSS Custom Properties for spacing
@@ -127,80 +127,124 @@ $spacing-map: (
127
127
  // ============================================================================
128
128
  // All sides margin
129
129
  @each $key, $value in $spacing-map {
130
- .m-#{$key} { margin: $value !important; }
130
+ .m-#{$key} {
131
+ margin: $value !important;
132
+ }
133
+ }
134
+ .m-auto {
135
+ margin: auto !important;
131
136
  }
132
- .m-auto { margin: auto !important; }
133
137
 
134
138
  // Margin X (horizontal)
135
139
  @each $key, $value in $spacing-map {
136
- .mx-#{$key} {
137
- margin-left: $value !important;
138
- margin-right: $value !important;
140
+ .mx-#{$key} {
141
+ margin-left: $value !important;
142
+ margin-right: $value !important;
139
143
  }
140
144
  }
141
- .mx-auto {
142
- margin-left: auto !important;
143
- margin-right: auto !important;
145
+ .mx-auto {
146
+ margin-left: auto !important;
147
+ margin-right: auto !important;
144
148
  }
145
149
 
146
150
  // Margin Y (vertical)
147
151
  @each $key, $value in $spacing-map {
148
- .my-#{$key} {
149
- margin-top: $value !important;
150
- margin-bottom: $value !important;
152
+ .my-#{$key} {
153
+ margin-top: $value !important;
154
+ margin-bottom: $value !important;
151
155
  }
152
156
  }
153
- .my-auto {
154
- margin-top: auto !important;
155
- margin-bottom: auto !important;
157
+ .my-auto {
158
+ margin-top: auto !important;
159
+ margin-bottom: auto !important;
156
160
  }
157
161
 
158
162
  // Margin Top
159
163
  @each $key, $value in $spacing-map {
160
- .mt-#{$key} { margin-top: $value !important; }
164
+ .mt-#{$key} {
165
+ margin-top: $value !important;
166
+ }
167
+ }
168
+ .mt-auto {
169
+ margin-top: auto !important;
161
170
  }
162
- .mt-auto { margin-top: auto !important; }
163
171
 
164
172
  // Margin Right
165
173
  @each $key, $value in $spacing-map {
166
- .mr-#{$key} { margin-right: $value !important; }
174
+ .mr-#{$key} {
175
+ margin-right: $value !important;
176
+ }
177
+ }
178
+ .mr-auto {
179
+ margin-right: auto !important;
167
180
  }
168
- .mr-auto { margin-right: auto !important; }
169
181
 
170
182
  // Margin Bottom
171
183
  @each $key, $value in $spacing-map {
172
- .mb-#{$key} { margin-bottom: $value !important; }
184
+ .mb-#{$key} {
185
+ margin-bottom: $value !important;
186
+ }
187
+ }
188
+ .mb-auto {
189
+ margin-bottom: auto !important;
173
190
  }
174
- .mb-auto { margin-bottom: auto !important; }
175
191
 
176
192
  // Margin Left
177
193
  @each $key, $value in $spacing-map {
178
- .ml-#{$key} { margin-left: $value !important; }
194
+ .ml-#{$key} {
195
+ margin-left: $value !important;
196
+ }
197
+ }
198
+ .ml-auto {
199
+ margin-left: auto !important;
179
200
  }
180
- .ml-auto { margin-left: auto !important; }
181
201
 
182
202
  // Margin Start (logical)
183
203
  @each $key, $value in $spacing-map {
184
- .ms-#{$key} { margin-inline-start: $value !important; }
204
+ .ms-#{$key} {
205
+ margin-inline-start: $value !important;
206
+ }
207
+ }
208
+ .ms-auto {
209
+ margin-inline-start: auto !important;
185
210
  }
186
- .ms-auto { margin-inline-start: auto !important; }
187
211
 
188
212
  // Margin End (logical)
189
213
  @each $key, $value in $spacing-map {
190
- .me-#{$key} { margin-inline-end: $value !important; }
214
+ .me-#{$key} {
215
+ margin-inline-end: $value !important;
216
+ }
217
+ }
218
+ .me-auto {
219
+ margin-inline-end: auto !important;
191
220
  }
192
- .me-auto { margin-inline-end: auto !important; }
193
221
 
194
222
  // Negative margins
195
223
  @each $key, $value in $spacing-map {
196
- @if $key != '0' and $key != 'px' {
197
- .-m-#{$key} { margin: -#{$value} !important; }
198
- .-mx-#{$key} { margin-left: -#{$value} !important; margin-right: -#{$value} !important; }
199
- .-my-#{$key} { margin-top: -#{$value} !important; margin-bottom: -#{$value} !important; }
200
- .-mt-#{$key} { margin-top: -#{$value} !important; }
201
- .-mr-#{$key} { margin-right: -#{$value} !important; }
202
- .-mb-#{$key} { margin-bottom: -#{$value} !important; }
203
- .-ml-#{$key} { margin-left: -#{$value} !important; }
224
+ @if $key != "0" and $key != "px" {
225
+ .-m-#{$key} {
226
+ margin: -#{$value} !important;
227
+ }
228
+ .-mx-#{$key} {
229
+ margin-left: -#{$value} !important;
230
+ margin-right: -#{$value} !important;
231
+ }
232
+ .-my-#{$key} {
233
+ margin-top: -#{$value} !important;
234
+ margin-bottom: -#{$value} !important;
235
+ }
236
+ .-mt-#{$key} {
237
+ margin-top: -#{$value} !important;
238
+ }
239
+ .-mr-#{$key} {
240
+ margin-right: -#{$value} !important;
241
+ }
242
+ .-mb-#{$key} {
243
+ margin-bottom: -#{$value} !important;
244
+ }
245
+ .-ml-#{$key} {
246
+ margin-left: -#{$value} !important;
247
+ }
204
248
  }
205
249
  }
206
250
 
@@ -209,62 +253,82 @@ $spacing-map: (
209
253
  // ============================================================================
210
254
  // All sides padding
211
255
  @each $key, $value in $spacing-map {
212
- .p-#{$key} { padding: $value !important; }
256
+ .p-#{$key} {
257
+ padding: $value !important;
258
+ }
213
259
  }
214
260
 
215
261
  // Padding X (horizontal)
216
262
  @each $key, $value in $spacing-map {
217
- .px-#{$key} {
218
- padding-left: $value !important;
219
- padding-right: $value !important;
263
+ .px-#{$key} {
264
+ padding-left: $value !important;
265
+ padding-right: $value !important;
220
266
  }
221
267
  }
222
268
 
223
269
  // Padding Y (vertical)
224
270
  @each $key, $value in $spacing-map {
225
- .py-#{$key} {
226
- padding-top: $value !important;
227
- padding-bottom: $value !important;
271
+ .py-#{$key} {
272
+ padding-top: $value !important;
273
+ padding-bottom: $value !important;
228
274
  }
229
275
  }
230
276
 
231
277
  // Padding Top
232
278
  @each $key, $value in $spacing-map {
233
- .pt-#{$key} { padding-top: $value !important; }
279
+ .pt-#{$key} {
280
+ padding-top: $value !important;
281
+ }
234
282
  }
235
283
 
236
284
  // Padding Right
237
285
  @each $key, $value in $spacing-map {
238
- .pr-#{$key} { padding-right: $value !important; }
286
+ .pr-#{$key} {
287
+ padding-right: $value !important;
288
+ }
239
289
  }
240
290
 
241
291
  // Padding Bottom
242
292
  @each $key, $value in $spacing-map {
243
- .pb-#{$key} { padding-bottom: $value !important; }
293
+ .pb-#{$key} {
294
+ padding-bottom: $value !important;
295
+ }
244
296
  }
245
297
 
246
298
  // Padding Left
247
299
  @each $key, $value in $spacing-map {
248
- .pl-#{$key} { padding-left: $value !important; }
300
+ .pl-#{$key} {
301
+ padding-left: $value !important;
302
+ }
249
303
  }
250
304
 
251
305
  // Padding Start (logical)
252
306
  @each $key, $value in $spacing-map {
253
- .ps-#{$key} { padding-inline-start: $value !important; }
307
+ .ps-#{$key} {
308
+ padding-inline-start: $value !important;
309
+ }
254
310
  }
255
311
 
256
312
  // Padding End (logical)
257
313
  @each $key, $value in $spacing-map {
258
- .pe-#{$key} { padding-inline-end: $value !important; }
314
+ .pe-#{$key} {
315
+ padding-inline-end: $value !important;
316
+ }
259
317
  }
260
318
 
261
319
  // ============================================================================
262
320
  // 4. GAP UTILITIES (for Flexbox/Grid)
263
321
  // ============================================================================
264
322
  @each $key, $value in $spacing-map {
265
- .gap-#{$key} { gap: $value !important; }
266
- .gap-x-#{$key} { column-gap: $value !important; }
267
- .gap-y-#{$key} { row-gap: $value !important; }
323
+ .gap-#{$key} {
324
+ gap: $value !important;
325
+ }
326
+ .gap-x-#{$key} {
327
+ column-gap: $value !important;
328
+ }
329
+ .gap-y-#{$key} {
330
+ row-gap: $value !important;
331
+ }
268
332
  }
269
333
 
270
334
  // ============================================================================
@@ -273,579 +337,1313 @@ $spacing-map: (
273
337
  // Fractional widths using hyphen separator (SCSS-compatible naming)
274
338
  // Format: {numerator}-{denominator} e.g., 1-2 = 1/2 = 50%
275
339
  $width-fractions: (
276
- '1-2': 50%,
277
- '1-3': 33.333333%,
278
- '2-3': 66.666667%,
279
- '1-4': 25%,
280
- '2-4': 50%,
281
- '3-4': 75%,
282
- '1-5': 20%,
283
- '2-5': 40%,
284
- '3-5': 60%,
285
- '4-5': 80%,
286
- '1-6': 16.666667%,
287
- '2-6': 33.333333%,
288
- '3-6': 50%,
289
- '4-6': 66.666667%,
290
- '5-6': 83.333333%,
291
- '1-12': 8.333333%,
292
- '2-12': 16.666667%,
293
- '3-12': 25%,
294
- '4-12': 33.333333%,
295
- '5-12': 41.666667%,
296
- '6-12': 50%,
297
- '7-12': 58.333333%,
298
- '8-12': 66.666667%,
299
- '9-12': 75%,
300
- '10-12': 83.333333%,
301
- '11-12': 91.666667%,
340
+ "1-2": 50%,
341
+ "1-3": 33.333333%,
342
+ "2-3": 66.666667%,
343
+ "1-4": 25%,
344
+ "2-4": 50%,
345
+ "3-4": 75%,
346
+ "1-5": 20%,
347
+ "2-5": 40%,
348
+ "3-5": 60%,
349
+ "4-5": 80%,
350
+ "1-6": 16.666667%,
351
+ "2-6": 33.333333%,
352
+ "3-6": 50%,
353
+ "4-6": 66.666667%,
354
+ "5-6": 83.333333%,
355
+ "1-12": 8.333333%,
356
+ "2-12": 16.666667%,
357
+ "3-12": 25%,
358
+ "4-12": 33.333333%,
359
+ "5-12": 41.666667%,
360
+ "6-12": 50%,
361
+ "7-12": 58.333333%,
362
+ "8-12": 66.666667%,
363
+ "9-12": 75%,
364
+ "10-12": 83.333333%,
365
+ "11-12": 91.666667%,
302
366
  );
303
367
 
304
368
  // Fixed widths
305
369
  @each $key, $value in $spacing-map {
306
- .w-#{$key} { width: $value !important; }
370
+ .w-#{$key} {
371
+ width: $value !important;
372
+ }
307
373
  }
308
374
 
309
375
  // Fraction widths
310
376
  @each $key, $value in $width-fractions {
311
- .w-#{$key} { width: $value !important; }
377
+ .w-#{$key} {
378
+ width: $value !important;
379
+ }
312
380
  }
313
381
 
314
382
  // Special widths
315
- .w-auto { width: auto !important; }
316
- .w-full { width: 100% !important; }
317
- .w-screen { width: 100vw !important; }
318
- .w-svw { width: 100svw !important; }
319
- .w-lvw { width: 100lvw !important; }
320
- .w-dvw { width: 100dvw !important; }
321
- .w-min { width: min-content !important; }
322
- .w-max { width: max-content !important; }
323
- .w-fit { width: fit-content !important; }
383
+ .w-auto {
384
+ width: auto !important;
385
+ }
386
+ .w-full {
387
+ width: 100% !important;
388
+ }
389
+ .w-screen {
390
+ width: 100vw !important;
391
+ }
392
+ .w-svw {
393
+ width: 100svw !important;
394
+ }
395
+ .w-lvw {
396
+ width: 100lvw !important;
397
+ }
398
+ .w-dvw {
399
+ width: 100dvw !important;
400
+ }
401
+ .w-min {
402
+ width: min-content !important;
403
+ }
404
+ .w-max {
405
+ width: max-content !important;
406
+ }
407
+ .w-fit {
408
+ width: fit-content !important;
409
+ }
324
410
 
325
411
  // Min-width
326
- .min-w-0 { min-width: 0 !important; }
327
- .min-w-full { min-width: 100% !important; }
328
- .min-w-min { min-width: min-content !important; }
329
- .min-w-max { min-width: max-content !important; }
330
- .min-w-fit { min-width: fit-content !important; }
412
+ .min-w-0 {
413
+ min-width: 0 !important;
414
+ }
415
+ .min-w-full {
416
+ min-width: 100% !important;
417
+ }
418
+ .min-w-min {
419
+ min-width: min-content !important;
420
+ }
421
+ .min-w-max {
422
+ min-width: max-content !important;
423
+ }
424
+ .min-w-fit {
425
+ min-width: fit-content !important;
426
+ }
331
427
 
332
428
  // Max-width
333
- .max-w-0 { max-width: 0 !important; }
334
- .max-w-none { max-width: none !important; }
335
- .max-w-xs { max-width: 20rem !important; } // 320px
336
- .max-w-sm { max-width: 24rem !important; } // 384px
337
- .max-w-md { max-width: 28rem !important; } // 448px
338
- .max-w-lg { max-width: 32rem !important; } // 512px
339
- .max-w-xl { max-width: 36rem !important; } // 576px
340
- .max-w-2xl { max-width: 42rem !important; } // 672px
341
- .max-w-3xl { max-width: 48rem !important; } // 768px
342
- .max-w-4xl { max-width: 56rem !important; } // 896px
343
- .max-w-5xl { max-width: 64rem !important; } // 1024px
344
- .max-w-6xl { max-width: 72rem !important; } // 1152px
345
- .max-w-7xl { max-width: 80rem !important; } // 1280px
346
- .max-w-full { max-width: 100% !important; }
347
- .max-w-min { max-width: min-content !important; }
348
- .max-w-max { max-width: max-content !important; }
349
- .max-w-fit { max-width: fit-content !important; }
350
- .max-w-prose { max-width: 65ch !important; }
351
- .max-w-screen-sm { max-width: 640px !important; }
352
- .max-w-screen-md { max-width: 768px !important; }
353
- .max-w-screen-lg { max-width: 1024px !important; }
354
- .max-w-screen-xl { max-width: 1280px !important; }
355
- .max-w-screen-2xl { max-width: 1536px !important; }
429
+ .max-w-0 {
430
+ max-width: 0 !important;
431
+ }
432
+ .max-w-none {
433
+ max-width: none !important;
434
+ }
435
+ .max-w-xs {
436
+ max-width: 20rem !important;
437
+ } // 320px
438
+ .max-w-sm {
439
+ max-width: 24rem !important;
440
+ } // 384px
441
+ .max-w-md {
442
+ max-width: 28rem !important;
443
+ } // 448px
444
+ .max-w-lg {
445
+ max-width: 32rem !important;
446
+ } // 512px
447
+ .max-w-xl {
448
+ max-width: 36rem !important;
449
+ } // 576px
450
+ .max-w-2xl {
451
+ max-width: 42rem !important;
452
+ } // 672px
453
+ .max-w-3xl {
454
+ max-width: 48rem !important;
455
+ } // 768px
456
+ .max-w-4xl {
457
+ max-width: 56rem !important;
458
+ } // 896px
459
+ .max-w-5xl {
460
+ max-width: 64rem !important;
461
+ } // 1024px
462
+ .max-w-6xl {
463
+ max-width: 72rem !important;
464
+ } // 1152px
465
+ .max-w-7xl {
466
+ max-width: 80rem !important;
467
+ } // 1280px
468
+ .max-w-full {
469
+ max-width: 100% !important;
470
+ }
471
+ .max-w-min {
472
+ max-width: min-content !important;
473
+ }
474
+ .max-w-max {
475
+ max-width: max-content !important;
476
+ }
477
+ .max-w-fit {
478
+ max-width: fit-content !important;
479
+ }
480
+ .max-w-prose {
481
+ max-width: 65ch !important;
482
+ }
483
+ .max-w-screen-sm {
484
+ max-width: 640px !important;
485
+ }
486
+ .max-w-screen-md {
487
+ max-width: 768px !important;
488
+ }
489
+ .max-w-screen-lg {
490
+ max-width: 1024px !important;
491
+ }
492
+ .max-w-screen-xl {
493
+ max-width: 1280px !important;
494
+ }
495
+ .max-w-screen-2xl {
496
+ max-width: 1536px !important;
497
+ }
356
498
 
357
499
  // ============================================================================
358
500
  // 6. HEIGHT UTILITIES
359
501
  // ============================================================================
360
502
  // Fixed heights
361
503
  @each $key, $value in $spacing-map {
362
- .h-#{$key} { height: $value !important; }
504
+ .h-#{$key} {
505
+ height: $value !important;
506
+ }
363
507
  }
364
508
 
365
509
  // Fraction heights
366
510
  @each $key, $value in $width-fractions {
367
- .h-#{$key} { height: $value !important; }
511
+ .h-#{$key} {
512
+ height: $value !important;
513
+ }
368
514
  }
369
515
 
370
516
  // Special heights
371
- .h-auto { height: auto !important; }
372
- .h-full { height: 100% !important; }
373
- .h-screen { height: 100vh !important; }
374
- .h-svh { height: 100svh !important; }
375
- .h-lvh { height: 100lvh !important; }
376
- .h-dvh { height: 100dvh !important; }
377
- .h-min { height: min-content !important; }
378
- .h-max { height: max-content !important; }
379
- .h-fit { height: fit-content !important; }
517
+ .h-auto {
518
+ height: auto !important;
519
+ }
520
+ .h-full {
521
+ height: 100% !important;
522
+ }
523
+ .h-screen {
524
+ height: 100vh !important;
525
+ }
526
+ .h-svh {
527
+ height: 100svh !important;
528
+ }
529
+ .h-lvh {
530
+ height: 100lvh !important;
531
+ }
532
+ .h-dvh {
533
+ height: 100dvh !important;
534
+ }
535
+ .h-min {
536
+ height: min-content !important;
537
+ }
538
+ .h-max {
539
+ height: max-content !important;
540
+ }
541
+ .h-fit {
542
+ height: fit-content !important;
543
+ }
380
544
 
381
545
  // Min-height
382
- .min-h-0 { min-height: 0 !important; }
383
- .min-h-full { min-height: 100% !important; }
384
- .min-h-screen { min-height: 100vh !important; }
385
- .min-h-svh { min-height: 100svh !important; }
386
- .min-h-lvh { min-height: 100lvh !important; }
387
- .min-h-dvh { min-height: 100dvh !important; }
388
- .min-h-min { min-height: min-content !important; }
389
- .min-h-max { min-height: max-content !important; }
390
- .min-h-fit { min-height: fit-content !important; }
546
+ .min-h-0 {
547
+ min-height: 0 !important;
548
+ }
549
+ .min-h-full {
550
+ min-height: 100% !important;
551
+ }
552
+ .min-h-screen {
553
+ min-height: 100vh !important;
554
+ }
555
+ .min-h-svh {
556
+ min-height: 100svh !important;
557
+ }
558
+ .min-h-lvh {
559
+ min-height: 100lvh !important;
560
+ }
561
+ .min-h-dvh {
562
+ min-height: 100dvh !important;
563
+ }
564
+ .min-h-min {
565
+ min-height: min-content !important;
566
+ }
567
+ .min-h-max {
568
+ min-height: max-content !important;
569
+ }
570
+ .min-h-fit {
571
+ min-height: fit-content !important;
572
+ }
391
573
 
392
574
  // Max-height
393
- .max-h-0 { max-height: 0 !important; }
394
- .max-h-none { max-height: none !important; }
395
- .max-h-full { max-height: 100% !important; }
396
- .max-h-screen { max-height: 100vh !important; }
397
- .max-h-svh { max-height: 100svh !important; }
398
- .max-h-lvh { max-height: 100lvh !important; }
399
- .max-h-dvh { max-height: 100dvh !important; }
400
- .max-h-min { max-height: min-content !important; }
401
- .max-h-max { max-height: max-content !important; }
402
- .max-h-fit { max-height: fit-content !important; }
575
+ .max-h-0 {
576
+ max-height: 0 !important;
577
+ }
578
+ .max-h-none {
579
+ max-height: none !important;
580
+ }
581
+ .max-h-full {
582
+ max-height: 100% !important;
583
+ }
584
+ .max-h-screen {
585
+ max-height: 100vh !important;
586
+ }
587
+ .max-h-svh {
588
+ max-height: 100svh !important;
589
+ }
590
+ .max-h-lvh {
591
+ max-height: 100lvh !important;
592
+ }
593
+ .max-h-dvh {
594
+ max-height: 100dvh !important;
595
+ }
596
+ .max-h-min {
597
+ max-height: min-content !important;
598
+ }
599
+ .max-h-max {
600
+ max-height: max-content !important;
601
+ }
602
+ .max-h-fit {
603
+ max-height: fit-content !important;
604
+ }
403
605
 
404
606
  // ============================================================================
405
607
  // 7. SQUARE SIZE (width & height equal)
406
608
  // ============================================================================
407
609
  @each $key, $value in $spacing-map {
408
- .size-#{$key} {
409
- width: $value !important;
410
- height: $value !important;
610
+ .size-#{$key} {
611
+ width: $value !important;
612
+ height: $value !important;
411
613
  }
412
614
  }
413
- .size-auto { width: auto !important; height: auto !important; }
414
- .size-full { width: 100% !important; height: 100% !important; }
615
+ .size-auto {
616
+ width: auto !important;
617
+ height: auto !important;
618
+ }
619
+ .size-full {
620
+ width: 100% !important;
621
+ height: 100% !important;
622
+ }
415
623
 
416
624
  // ============================================================================
417
625
  // 8. FLEXBOX UTILITIES
418
626
  // ============================================================================
419
627
 
420
628
  // Display
421
- .flex { display: flex !important; }
422
- .inline-flex { display: inline-flex !important; }
629
+ .flex {
630
+ display: flex !important;
631
+ }
632
+ .inline-flex {
633
+ display: inline-flex !important;
634
+ }
423
635
 
424
636
  // Flex Direction
425
- .flex-row { flex-direction: row !important; }
426
- .flex-row-reverse { flex-direction: row-reverse !important; }
427
- .flex-col { flex-direction: column !important; }
428
- .flex-col-reverse { flex-direction: column-reverse !important; }
637
+ .flex-row {
638
+ flex-direction: row !important;
639
+ }
640
+ .flex-row-reverse {
641
+ flex-direction: row-reverse !important;
642
+ }
643
+ .flex-col {
644
+ flex-direction: column !important;
645
+ }
646
+ .flex-col-reverse {
647
+ flex-direction: column-reverse !important;
648
+ }
429
649
 
430
650
  // Flex Wrap
431
- .flex-wrap { flex-wrap: wrap !important; }
432
- .flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
433
- .flex-nowrap { flex-wrap: nowrap !important; }
651
+ .flex-wrap {
652
+ flex-wrap: wrap !important;
653
+ }
654
+ .flex-wrap-reverse {
655
+ flex-wrap: wrap-reverse !important;
656
+ }
657
+ .flex-nowrap {
658
+ flex-wrap: nowrap !important;
659
+ }
434
660
 
435
661
  // Flex
436
- .flex-1 { flex: 1 1 0% !important; }
437
- .flex-auto { flex: 1 1 auto !important; }
438
- .flex-initial { flex: 0 1 auto !important; }
439
- .flex-none { flex: none !important; }
662
+ .flex-1 {
663
+ flex: 1 1 0% !important;
664
+ }
665
+ .flex-auto {
666
+ flex: 1 1 auto !important;
667
+ }
668
+ .flex-initial {
669
+ flex: 0 1 auto !important;
670
+ }
671
+ .flex-none {
672
+ flex: none !important;
673
+ }
440
674
 
441
675
  // Flex Grow
442
- .grow { flex-grow: 1 !important; }
443
- .grow-0 { flex-grow: 0 !important; }
676
+ .grow {
677
+ flex-grow: 1 !important;
678
+ }
679
+ .grow-0 {
680
+ flex-grow: 0 !important;
681
+ }
444
682
 
445
683
  // Flex Shrink
446
- .shrink { flex-shrink: 1 !important; }
447
- .shrink-0 { flex-shrink: 0 !important; }
684
+ .shrink {
685
+ flex-shrink: 1 !important;
686
+ }
687
+ .shrink-0 {
688
+ flex-shrink: 0 !important;
689
+ }
448
690
 
449
691
  // Flex Basis
450
- .basis-0 { flex-basis: 0 !important; }
451
- .basis-1 { flex-basis: $spacing-1 !important; }
452
- .basis-2 { flex-basis: $spacing-2 !important; }
453
- .basis-4 { flex-basis: $spacing-4 !important; }
454
- .basis-8 { flex-basis: $spacing-8 !important; }
455
- .basis-12 { flex-basis: $spacing-12 !important; }
456
- .basis-16 { flex-basis: $spacing-16 !important; }
457
- .basis-auto { flex-basis: auto !important; }
458
- .basis-full { flex-basis: 100% !important; }
692
+ .basis-0 {
693
+ flex-basis: 0 !important;
694
+ }
695
+ .basis-1 {
696
+ flex-basis: $spacing-1 !important;
697
+ }
698
+ .basis-2 {
699
+ flex-basis: $spacing-2 !important;
700
+ }
701
+ .basis-4 {
702
+ flex-basis: $spacing-4 !important;
703
+ }
704
+ .basis-8 {
705
+ flex-basis: $spacing-8 !important;
706
+ }
707
+ .basis-12 {
708
+ flex-basis: $spacing-12 !important;
709
+ }
710
+ .basis-16 {
711
+ flex-basis: $spacing-16 !important;
712
+ }
713
+ .basis-auto {
714
+ flex-basis: auto !important;
715
+ }
716
+ .basis-full {
717
+ flex-basis: 100% !important;
718
+ }
459
719
  @each $key, $value in $width-fractions {
460
- .basis-#{$key} { flex-basis: $value !important; }
720
+ .basis-#{$key} {
721
+ flex-basis: $value !important;
722
+ }
461
723
  }
462
724
 
463
725
  // Justify Content
464
- .justify-start { justify-content: flex-start !important; }
465
- .justify-end { justify-content: flex-end !important; }
466
- .justify-center { justify-content: center !important; }
467
- .justify-between { justify-content: space-between !important; }
468
- .justify-around { justify-content: space-around !important; }
469
- .justify-evenly { justify-content: space-evenly !important; }
470
- .justify-stretch { justify-content: stretch !important; }
726
+ .justify-start {
727
+ justify-content: flex-start !important;
728
+ }
729
+ .justify-end {
730
+ justify-content: flex-end !important;
731
+ }
732
+ .justify-center {
733
+ justify-content: center !important;
734
+ }
735
+ .justify-between {
736
+ justify-content: space-between !important;
737
+ }
738
+ .justify-around {
739
+ justify-content: space-around !important;
740
+ }
741
+ .justify-evenly {
742
+ justify-content: space-evenly !important;
743
+ }
744
+ .justify-stretch {
745
+ justify-content: stretch !important;
746
+ }
471
747
 
472
748
  // Justify Items
473
- .justify-items-start { justify-items: start !important; }
474
- .justify-items-end { justify-items: end !important; }
475
- .justify-items-center { justify-items: center !important; }
476
- .justify-items-stretch { justify-items: stretch !important; }
749
+ .justify-items-start {
750
+ justify-items: start !important;
751
+ }
752
+ .justify-items-end {
753
+ justify-items: end !important;
754
+ }
755
+ .justify-items-center {
756
+ justify-items: center !important;
757
+ }
758
+ .justify-items-stretch {
759
+ justify-items: stretch !important;
760
+ }
477
761
 
478
762
  // Justify Self
479
- .justify-self-auto { justify-self: auto !important; }
480
- .justify-self-start { justify-self: start !important; }
481
- .justify-self-end { justify-self: end !important; }
482
- .justify-self-center { justify-self: center !important; }
483
- .justify-self-stretch { justify-self: stretch !important; }
763
+ .justify-self-auto {
764
+ justify-self: auto !important;
765
+ }
766
+ .justify-self-start {
767
+ justify-self: start !important;
768
+ }
769
+ .justify-self-end {
770
+ justify-self: end !important;
771
+ }
772
+ .justify-self-center {
773
+ justify-self: center !important;
774
+ }
775
+ .justify-self-stretch {
776
+ justify-self: stretch !important;
777
+ }
484
778
 
485
779
  // Align Content
486
- .content-start { align-content: flex-start !important; }
487
- .content-end { align-content: flex-end !important; }
488
- .content-center { align-content: center !important; }
489
- .content-between { align-content: space-between !important; }
490
- .content-around { align-content: space-around !important; }
491
- .content-evenly { align-content: space-evenly !important; }
492
- .content-stretch { align-content: stretch !important; }
493
- .content-baseline { align-content: baseline !important; }
780
+ .content-start {
781
+ align-content: flex-start !important;
782
+ }
783
+ .content-end {
784
+ align-content: flex-end !important;
785
+ }
786
+ .content-center {
787
+ align-content: center !important;
788
+ }
789
+ .content-between {
790
+ align-content: space-between !important;
791
+ }
792
+ .content-around {
793
+ align-content: space-around !important;
794
+ }
795
+ .content-evenly {
796
+ align-content: space-evenly !important;
797
+ }
798
+ .content-stretch {
799
+ align-content: stretch !important;
800
+ }
801
+ .content-baseline {
802
+ align-content: baseline !important;
803
+ }
494
804
 
495
805
  // Align Items
496
- .items-start { align-items: flex-start !important; }
497
- .items-end { align-items: flex-end !important; }
498
- .items-center { align-items: center !important; }
499
- .items-baseline { align-items: baseline !important; }
500
- .items-stretch { align-items: stretch !important; }
806
+ .items-start {
807
+ align-items: flex-start !important;
808
+ }
809
+ .items-end {
810
+ align-items: flex-end !important;
811
+ }
812
+ .items-center {
813
+ align-items: center !important;
814
+ }
815
+ .items-baseline {
816
+ align-items: baseline !important;
817
+ }
818
+ .items-stretch {
819
+ align-items: stretch !important;
820
+ }
501
821
 
502
822
  // Align Self
503
- .self-auto { align-self: auto !important; }
504
- .self-start { align-self: flex-start !important; }
505
- .self-end { align-self: flex-end !important; }
506
- .self-center { align-self: center !important; }
507
- .self-baseline { align-self: baseline !important; }
508
- .self-stretch { align-self: stretch !important; }
823
+ .self-auto {
824
+ align-self: auto !important;
825
+ }
826
+ .self-start {
827
+ align-self: flex-start !important;
828
+ }
829
+ .self-end {
830
+ align-self: flex-end !important;
831
+ }
832
+ .self-center {
833
+ align-self: center !important;
834
+ }
835
+ .self-baseline {
836
+ align-self: baseline !important;
837
+ }
838
+ .self-stretch {
839
+ align-self: stretch !important;
840
+ }
509
841
 
510
842
  // Place Content
511
- .place-content-start { place-content: start !important; }
512
- .place-content-end { place-content: end !important; }
513
- .place-content-center { place-content: center !important; }
514
- .place-content-between { place-content: space-between !important; }
515
- .place-content-around { place-content: space-around !important; }
516
- .place-content-evenly { place-content: space-evenly !important; }
517
- .place-content-stretch { place-content: stretch !important; }
518
- .place-content-baseline { place-content: baseline !important; }
843
+ .place-content-start {
844
+ place-content: start !important;
845
+ }
846
+ .place-content-end {
847
+ place-content: end !important;
848
+ }
849
+ .place-content-center {
850
+ place-content: center !important;
851
+ }
852
+ .place-content-between {
853
+ place-content: space-between !important;
854
+ }
855
+ .place-content-around {
856
+ place-content: space-around !important;
857
+ }
858
+ .place-content-evenly {
859
+ place-content: space-evenly !important;
860
+ }
861
+ .place-content-stretch {
862
+ place-content: stretch !important;
863
+ }
864
+ .place-content-baseline {
865
+ place-content: baseline !important;
866
+ }
519
867
 
520
868
  // Place Items
521
- .place-items-start { place-items: start !important; }
522
- .place-items-end { place-items: end !important; }
523
- .place-items-center { place-items: center !important; }
524
- .place-items-baseline { place-items: baseline !important; }
525
- .place-items-stretch { place-items: stretch !important; }
869
+ .place-items-start {
870
+ place-items: start !important;
871
+ }
872
+ .place-items-end {
873
+ place-items: end !important;
874
+ }
875
+ .place-items-center {
876
+ place-items: center !important;
877
+ }
878
+ .place-items-baseline {
879
+ place-items: baseline !important;
880
+ }
881
+ .place-items-stretch {
882
+ place-items: stretch !important;
883
+ }
526
884
 
527
885
  // Place Self
528
- .place-self-auto { place-self: auto !important; }
529
- .place-self-start { place-self: start !important; }
530
- .place-self-end { place-self: end !important; }
531
- .place-self-center { place-self: center !important; }
532
- .place-self-stretch { place-self: stretch !important; }
886
+ .place-self-auto {
887
+ place-self: auto !important;
888
+ }
889
+ .place-self-start {
890
+ place-self: start !important;
891
+ }
892
+ .place-self-end {
893
+ place-self: end !important;
894
+ }
895
+ .place-self-center {
896
+ place-self: center !important;
897
+ }
898
+ .place-self-stretch {
899
+ place-self: stretch !important;
900
+ }
533
901
 
534
902
  // ============================================================================
535
903
  // 9. CSS GRID UTILITIES
536
904
  // ============================================================================
537
905
 
538
906
  // Display
539
- .grid { display: grid !important; }
540
- .inline-grid { display: inline-grid !important; }
907
+ .grid {
908
+ display: grid !important;
909
+ }
910
+ .inline-grid {
911
+ display: inline-grid !important;
912
+ }
541
913
 
542
914
  // Grid Template Columns
543
- .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
544
- .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
545
- .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
546
- .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
547
- .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
548
- .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
549
- .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
550
- .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
551
- .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
552
- .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
553
- .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
554
- .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
555
- .grid-cols-none { grid-template-columns: none !important; }
556
- .grid-cols-subgrid { grid-template-columns: subgrid !important; }
915
+ .grid-cols-1 {
916
+ grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
917
+ }
918
+ .grid-cols-2 {
919
+ grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
920
+ }
921
+ .grid-cols-3 {
922
+ grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
923
+ }
924
+ .grid-cols-4 {
925
+ grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
926
+ }
927
+ .grid-cols-5 {
928
+ grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
929
+ }
930
+ .grid-cols-6 {
931
+ grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
932
+ }
933
+ .grid-cols-7 {
934
+ grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
935
+ }
936
+ .grid-cols-8 {
937
+ grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
938
+ }
939
+ .grid-cols-9 {
940
+ grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
941
+ }
942
+ .grid-cols-10 {
943
+ grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
944
+ }
945
+ .grid-cols-11 {
946
+ grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
947
+ }
948
+ .grid-cols-12 {
949
+ grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
950
+ }
951
+ .grid-cols-none {
952
+ grid-template-columns: none !important;
953
+ }
954
+ .grid-cols-subgrid {
955
+ grid-template-columns: subgrid !important;
956
+ }
557
957
 
558
958
  // Grid Column Span
559
- .col-auto { grid-column: auto !important; }
560
- .col-span-1 { grid-column: span 1 / span 1 !important; }
561
- .col-span-2 { grid-column: span 2 / span 2 !important; }
562
- .col-span-3 { grid-column: span 3 / span 3 !important; }
563
- .col-span-4 { grid-column: span 4 / span 4 !important; }
564
- .col-span-5 { grid-column: span 5 / span 5 !important; }
565
- .col-span-6 { grid-column: span 6 / span 6 !important; }
566
- .col-span-7 { grid-column: span 7 / span 7 !important; }
567
- .col-span-8 { grid-column: span 8 / span 8 !important; }
568
- .col-span-9 { grid-column: span 9 / span 9 !important; }
569
- .col-span-10 { grid-column: span 10 / span 10 !important; }
570
- .col-span-11 { grid-column: span 11 / span 11 !important; }
571
- .col-span-12 { grid-column: span 12 / span 12 !important; }
572
- .col-span-full { grid-column: 1 / -1 !important; }
959
+ .col-auto {
960
+ grid-column: auto !important;
961
+ }
962
+ .col-span-1 {
963
+ grid-column: span 1 / span 1 !important;
964
+ }
965
+ .col-span-2 {
966
+ grid-column: span 2 / span 2 !important;
967
+ }
968
+ .col-span-3 {
969
+ grid-column: span 3 / span 3 !important;
970
+ }
971
+ .col-span-4 {
972
+ grid-column: span 4 / span 4 !important;
973
+ }
974
+ .col-span-5 {
975
+ grid-column: span 5 / span 5 !important;
976
+ }
977
+ .col-span-6 {
978
+ grid-column: span 6 / span 6 !important;
979
+ }
980
+ .col-span-7 {
981
+ grid-column: span 7 / span 7 !important;
982
+ }
983
+ .col-span-8 {
984
+ grid-column: span 8 / span 8 !important;
985
+ }
986
+ .col-span-9 {
987
+ grid-column: span 9 / span 9 !important;
988
+ }
989
+ .col-span-10 {
990
+ grid-column: span 10 / span 10 !important;
991
+ }
992
+ .col-span-11 {
993
+ grid-column: span 11 / span 11 !important;
994
+ }
995
+ .col-span-12 {
996
+ grid-column: span 12 / span 12 !important;
997
+ }
998
+ .col-span-full {
999
+ grid-column: 1 / -1 !important;
1000
+ }
573
1001
 
574
1002
  // Grid Column Start
575
- .col-start-1 { grid-column-start: 1 !important; }
576
- .col-start-2 { grid-column-start: 2 !important; }
577
- .col-start-3 { grid-column-start: 3 !important; }
578
- .col-start-4 { grid-column-start: 4 !important; }
579
- .col-start-5 { grid-column-start: 5 !important; }
580
- .col-start-6 { grid-column-start: 6 !important; }
581
- .col-start-7 { grid-column-start: 7 !important; }
582
- .col-start-8 { grid-column-start: 8 !important; }
583
- .col-start-9 { grid-column-start: 9 !important; }
584
- .col-start-10 { grid-column-start: 10 !important; }
585
- .col-start-11 { grid-column-start: 11 !important; }
586
- .col-start-12 { grid-column-start: 12 !important; }
587
- .col-start-13 { grid-column-start: 13 !important; }
588
- .col-start-auto { grid-column-start: auto !important; }
1003
+ .col-start-1 {
1004
+ grid-column-start: 1 !important;
1005
+ }
1006
+ .col-start-2 {
1007
+ grid-column-start: 2 !important;
1008
+ }
1009
+ .col-start-3 {
1010
+ grid-column-start: 3 !important;
1011
+ }
1012
+ .col-start-4 {
1013
+ grid-column-start: 4 !important;
1014
+ }
1015
+ .col-start-5 {
1016
+ grid-column-start: 5 !important;
1017
+ }
1018
+ .col-start-6 {
1019
+ grid-column-start: 6 !important;
1020
+ }
1021
+ .col-start-7 {
1022
+ grid-column-start: 7 !important;
1023
+ }
1024
+ .col-start-8 {
1025
+ grid-column-start: 8 !important;
1026
+ }
1027
+ .col-start-9 {
1028
+ grid-column-start: 9 !important;
1029
+ }
1030
+ .col-start-10 {
1031
+ grid-column-start: 10 !important;
1032
+ }
1033
+ .col-start-11 {
1034
+ grid-column-start: 11 !important;
1035
+ }
1036
+ .col-start-12 {
1037
+ grid-column-start: 12 !important;
1038
+ }
1039
+ .col-start-13 {
1040
+ grid-column-start: 13 !important;
1041
+ }
1042
+ .col-start-auto {
1043
+ grid-column-start: auto !important;
1044
+ }
589
1045
 
590
1046
  // Grid Column End
591
- .col-end-1 { grid-column-end: 1 !important; }
592
- .col-end-2 { grid-column-end: 2 !important; }
593
- .col-end-3 { grid-column-end: 3 !important; }
594
- .col-end-4 { grid-column-end: 4 !important; }
595
- .col-end-5 { grid-column-end: 5 !important; }
596
- .col-end-6 { grid-column-end: 6 !important; }
597
- .col-end-7 { grid-column-end: 7 !important; }
598
- .col-end-8 { grid-column-end: 8 !important; }
599
- .col-end-9 { grid-column-end: 9 !important; }
600
- .col-end-10 { grid-column-end: 10 !important; }
601
- .col-end-11 { grid-column-end: 11 !important; }
602
- .col-end-12 { grid-column-end: 12 !important; }
603
- .col-end-13 { grid-column-end: 13 !important; }
604
- .col-end-auto { grid-column-end: auto !important; }
1047
+ .col-end-1 {
1048
+ grid-column-end: 1 !important;
1049
+ }
1050
+ .col-end-2 {
1051
+ grid-column-end: 2 !important;
1052
+ }
1053
+ .col-end-3 {
1054
+ grid-column-end: 3 !important;
1055
+ }
1056
+ .col-end-4 {
1057
+ grid-column-end: 4 !important;
1058
+ }
1059
+ .col-end-5 {
1060
+ grid-column-end: 5 !important;
1061
+ }
1062
+ .col-end-6 {
1063
+ grid-column-end: 6 !important;
1064
+ }
1065
+ .col-end-7 {
1066
+ grid-column-end: 7 !important;
1067
+ }
1068
+ .col-end-8 {
1069
+ grid-column-end: 8 !important;
1070
+ }
1071
+ .col-end-9 {
1072
+ grid-column-end: 9 !important;
1073
+ }
1074
+ .col-end-10 {
1075
+ grid-column-end: 10 !important;
1076
+ }
1077
+ .col-end-11 {
1078
+ grid-column-end: 11 !important;
1079
+ }
1080
+ .col-end-12 {
1081
+ grid-column-end: 12 !important;
1082
+ }
1083
+ .col-end-13 {
1084
+ grid-column-end: 13 !important;
1085
+ }
1086
+ .col-end-auto {
1087
+ grid-column-end: auto !important;
1088
+ }
605
1089
 
606
1090
  // Grid Template Rows
607
- .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
608
- .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
609
- .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
610
- .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
611
- .grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
612
- .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
613
- .grid-rows-none { grid-template-rows: none !important; }
614
- .grid-rows-subgrid { grid-template-rows: subgrid !important; }
1091
+ .grid-rows-1 {
1092
+ grid-template-rows: repeat(1, minmax(0, 1fr)) !important;
1093
+ }
1094
+ .grid-rows-2 {
1095
+ grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
1096
+ }
1097
+ .grid-rows-3 {
1098
+ grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
1099
+ }
1100
+ .grid-rows-4 {
1101
+ grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
1102
+ }
1103
+ .grid-rows-5 {
1104
+ grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
1105
+ }
1106
+ .grid-rows-6 {
1107
+ grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
1108
+ }
1109
+ .grid-rows-none {
1110
+ grid-template-rows: none !important;
1111
+ }
1112
+ .grid-rows-subgrid {
1113
+ grid-template-rows: subgrid !important;
1114
+ }
615
1115
 
616
1116
  // Grid Row Span
617
- .row-auto { grid-row: auto !important; }
618
- .row-span-1 { grid-row: span 1 / span 1 !important; }
619
- .row-span-2 { grid-row: span 2 / span 2 !important; }
620
- .row-span-3 { grid-row: span 3 / span 3 !important; }
621
- .row-span-4 { grid-row: span 4 / span 4 !important; }
622
- .row-span-5 { grid-row: span 5 / span 5 !important; }
623
- .row-span-6 { grid-row: span 6 / span 6 !important; }
624
- .row-span-full { grid-row: 1 / -1 !important; }
1117
+ .row-auto {
1118
+ grid-row: auto !important;
1119
+ }
1120
+ .row-span-1 {
1121
+ grid-row: span 1 / span 1 !important;
1122
+ }
1123
+ .row-span-2 {
1124
+ grid-row: span 2 / span 2 !important;
1125
+ }
1126
+ .row-span-3 {
1127
+ grid-row: span 3 / span 3 !important;
1128
+ }
1129
+ .row-span-4 {
1130
+ grid-row: span 4 / span 4 !important;
1131
+ }
1132
+ .row-span-5 {
1133
+ grid-row: span 5 / span 5 !important;
1134
+ }
1135
+ .row-span-6 {
1136
+ grid-row: span 6 / span 6 !important;
1137
+ }
1138
+ .row-span-full {
1139
+ grid-row: 1 / -1 !important;
1140
+ }
625
1141
 
626
1142
  // Grid Row Start
627
- .row-start-1 { grid-row-start: 1 !important; }
628
- .row-start-2 { grid-row-start: 2 !important; }
629
- .row-start-3 { grid-row-start: 3 !important; }
630
- .row-start-4 { grid-row-start: 4 !important; }
631
- .row-start-5 { grid-row-start: 5 !important; }
632
- .row-start-6 { grid-row-start: 6 !important; }
633
- .row-start-7 { grid-row-start: 7 !important; }
634
- .row-start-auto { grid-row-start: auto !important; }
1143
+ .row-start-1 {
1144
+ grid-row-start: 1 !important;
1145
+ }
1146
+ .row-start-2 {
1147
+ grid-row-start: 2 !important;
1148
+ }
1149
+ .row-start-3 {
1150
+ grid-row-start: 3 !important;
1151
+ }
1152
+ .row-start-4 {
1153
+ grid-row-start: 4 !important;
1154
+ }
1155
+ .row-start-5 {
1156
+ grid-row-start: 5 !important;
1157
+ }
1158
+ .row-start-6 {
1159
+ grid-row-start: 6 !important;
1160
+ }
1161
+ .row-start-7 {
1162
+ grid-row-start: 7 !important;
1163
+ }
1164
+ .row-start-auto {
1165
+ grid-row-start: auto !important;
1166
+ }
635
1167
 
636
1168
  // Grid Row End
637
- .row-end-1 { grid-row-end: 1 !important; }
638
- .row-end-2 { grid-row-end: 2 !important; }
639
- .row-end-3 { grid-row-end: 3 !important; }
640
- .row-end-4 { grid-row-end: 4 !important; }
641
- .row-end-5 { grid-row-end: 5 !important; }
642
- .row-end-6 { grid-row-end: 6 !important; }
643
- .row-end-7 { grid-row-end: 7 !important; }
644
- .row-end-auto { grid-row-end: auto !important; }
1169
+ .row-end-1 {
1170
+ grid-row-end: 1 !important;
1171
+ }
1172
+ .row-end-2 {
1173
+ grid-row-end: 2 !important;
1174
+ }
1175
+ .row-end-3 {
1176
+ grid-row-end: 3 !important;
1177
+ }
1178
+ .row-end-4 {
1179
+ grid-row-end: 4 !important;
1180
+ }
1181
+ .row-end-5 {
1182
+ grid-row-end: 5 !important;
1183
+ }
1184
+ .row-end-6 {
1185
+ grid-row-end: 6 !important;
1186
+ }
1187
+ .row-end-7 {
1188
+ grid-row-end: 7 !important;
1189
+ }
1190
+ .row-end-auto {
1191
+ grid-row-end: auto !important;
1192
+ }
645
1193
 
646
1194
  // Grid Auto Flow
647
- .grid-flow-row { grid-auto-flow: row !important; }
648
- .grid-flow-col { grid-auto-flow: column !important; }
649
- .grid-flow-dense { grid-auto-flow: dense !important; }
650
- .grid-flow-row-dense { grid-auto-flow: row dense !important; }
651
- .grid-flow-col-dense { grid-auto-flow: column dense !important; }
1195
+ .grid-flow-row {
1196
+ grid-auto-flow: row !important;
1197
+ }
1198
+ .grid-flow-col {
1199
+ grid-auto-flow: column !important;
1200
+ }
1201
+ .grid-flow-dense {
1202
+ grid-auto-flow: dense !important;
1203
+ }
1204
+ .grid-flow-row-dense {
1205
+ grid-auto-flow: row dense !important;
1206
+ }
1207
+ .grid-flow-col-dense {
1208
+ grid-auto-flow: column dense !important;
1209
+ }
652
1210
 
653
1211
  // Grid Auto Columns
654
- .auto-cols-auto { grid-auto-columns: auto !important; }
655
- .auto-cols-min { grid-auto-columns: min-content !important; }
656
- .auto-cols-max { grid-auto-columns: max-content !important; }
657
- .auto-cols-fr { grid-auto-columns: minmax(0, 1fr) !important; }
1212
+ .auto-cols-auto {
1213
+ grid-auto-columns: auto !important;
1214
+ }
1215
+ .auto-cols-min {
1216
+ grid-auto-columns: min-content !important;
1217
+ }
1218
+ .auto-cols-max {
1219
+ grid-auto-columns: max-content !important;
1220
+ }
1221
+ .auto-cols-fr {
1222
+ grid-auto-columns: minmax(0, 1fr) !important;
1223
+ }
658
1224
 
659
1225
  // Grid Auto Rows
660
- .auto-rows-auto { grid-auto-rows: auto !important; }
661
- .auto-rows-min { grid-auto-rows: min-content !important; }
662
- .auto-rows-max { grid-auto-rows: max-content !important; }
663
- .auto-rows-fr { grid-auto-rows: minmax(0, 1fr) !important; }
1226
+ .auto-rows-auto {
1227
+ grid-auto-rows: auto !important;
1228
+ }
1229
+ .auto-rows-min {
1230
+ grid-auto-rows: min-content !important;
1231
+ }
1232
+ .auto-rows-max {
1233
+ grid-auto-rows: max-content !important;
1234
+ }
1235
+ .auto-rows-fr {
1236
+ grid-auto-rows: minmax(0, 1fr) !important;
1237
+ }
664
1238
 
665
1239
  // ============================================================================
666
1240
  // 10. ORDER UTILITIES
667
1241
  // ============================================================================
668
- .order-first { order: -9999 !important; }
669
- .order-last { order: 9999 !important; }
670
- .order-none { order: 0 !important; }
671
- .order-1 { order: 1 !important; }
672
- .order-2 { order: 2 !important; }
673
- .order-3 { order: 3 !important; }
674
- .order-4 { order: 4 !important; }
675
- .order-5 { order: 5 !important; }
676
- .order-6 { order: 6 !important; }
677
- .order-7 { order: 7 !important; }
678
- .order-8 { order: 8 !important; }
679
- .order-9 { order: 9 !important; }
680
- .order-10 { order: 10 !important; }
681
- .order-11 { order: 11 !important; }
682
- .order-12 { order: 12 !important; }
1242
+ .order-first {
1243
+ order: -9999 !important;
1244
+ }
1245
+ .order-last {
1246
+ order: 9999 !important;
1247
+ }
1248
+ .order-none {
1249
+ order: 0 !important;
1250
+ }
1251
+ .order-1 {
1252
+ order: 1 !important;
1253
+ }
1254
+ .order-2 {
1255
+ order: 2 !important;
1256
+ }
1257
+ .order-3 {
1258
+ order: 3 !important;
1259
+ }
1260
+ .order-4 {
1261
+ order: 4 !important;
1262
+ }
1263
+ .order-5 {
1264
+ order: 5 !important;
1265
+ }
1266
+ .order-6 {
1267
+ order: 6 !important;
1268
+ }
1269
+ .order-7 {
1270
+ order: 7 !important;
1271
+ }
1272
+ .order-8 {
1273
+ order: 8 !important;
1274
+ }
1275
+ .order-9 {
1276
+ order: 9 !important;
1277
+ }
1278
+ .order-10 {
1279
+ order: 10 !important;
1280
+ }
1281
+ .order-11 {
1282
+ order: 11 !important;
1283
+ }
1284
+ .order-12 {
1285
+ order: 12 !important;
1286
+ }
683
1287
 
684
1288
  // ============================================================================
685
1289
  // 11. DISPLAY UTILITIES
686
1290
  // ============================================================================
687
- .block { display: block !important; }
688
- .inline-block { display: inline-block !important; }
689
- .inline { display: inline !important; }
690
- .hidden { display: none !important; }
691
- .contents { display: contents !important; }
692
- .flow-root { display: flow-root !important; }
693
- .list-item { display: list-item !important; }
1291
+ .block {
1292
+ display: block !important;
1293
+ }
1294
+ .inline-block {
1295
+ display: inline-block !important;
1296
+ }
1297
+ .inline {
1298
+ display: inline !important;
1299
+ }
1300
+ .hidden {
1301
+ display: none !important;
1302
+ }
1303
+ .contents {
1304
+ display: contents !important;
1305
+ }
1306
+ .flow-root {
1307
+ display: flow-root !important;
1308
+ }
1309
+ .list-item {
1310
+ display: list-item !important;
1311
+ }
694
1312
 
695
1313
  // Table display
696
- .table { display: table !important; }
697
- .inline-table { display: inline-table !important; }
698
- .table-caption { display: table-caption !important; }
699
- .table-cell { display: table-cell !important; }
700
- .table-column { display: table-column !important; }
701
- .table-column-group { display: table-column-group !important; }
702
- .table-footer-group { display: table-footer-group !important; }
703
- .table-header-group { display: table-header-group !important; }
704
- .table-row-group { display: table-row-group !important; }
705
- .table-row { display: table-row !important; }
1314
+ .table {
1315
+ display: table !important;
1316
+ }
1317
+ .inline-table {
1318
+ display: inline-table !important;
1319
+ }
1320
+ .table-caption {
1321
+ display: table-caption !important;
1322
+ }
1323
+ .table-cell {
1324
+ display: table-cell !important;
1325
+ }
1326
+ .table-column {
1327
+ display: table-column !important;
1328
+ }
1329
+ .table-column-group {
1330
+ display: table-column-group !important;
1331
+ }
1332
+ .table-footer-group {
1333
+ display: table-footer-group !important;
1334
+ }
1335
+ .table-header-group {
1336
+ display: table-header-group !important;
1337
+ }
1338
+ .table-row-group {
1339
+ display: table-row-group !important;
1340
+ }
1341
+ .table-row {
1342
+ display: table-row !important;
1343
+ }
706
1344
 
707
1345
  // ============================================================================
708
1346
  // 12. POSITION UTILITIES
709
1347
  // ============================================================================
710
- .static { position: static !important; }
711
- .fixed { position: fixed !important; }
712
- .absolute { position: absolute !important; }
713
- .relative { position: relative !important; }
714
- .sticky { position: sticky !important; }
1348
+ .static {
1349
+ position: static !important;
1350
+ }
1351
+ .fixed {
1352
+ position: fixed !important;
1353
+ }
1354
+ .absolute {
1355
+ position: absolute !important;
1356
+ }
1357
+ .relative {
1358
+ position: relative !important;
1359
+ }
1360
+ .sticky {
1361
+ position: sticky !important;
1362
+ }
715
1363
 
716
1364
  // Top/Right/Bottom/Left
717
1365
  $inset-values: (
718
- '0': 0,
719
- 'px': 1px,
720
- '0\\.5': $spacing-0_5,
721
- '1': $spacing-1,
722
- '2': $spacing-2,
723
- '3': $spacing-3,
724
- '4': $spacing-4,
725
- '5': $spacing-5,
726
- '6': $spacing-6,
727
- '8': $spacing-8,
728
- '10': $spacing-10,
729
- '12': $spacing-12,
730
- '16': $spacing-16,
731
- '20': $spacing-20,
732
- '24': $spacing-24,
733
- '1\\/2': 50%,
734
- '1\\/3': 33.333333%,
735
- '2\\/3': 66.666667%,
736
- '1\\/4': 25%,
737
- '3\\/4': 75%,
738
- 'full': 100%,
739
- 'auto': auto,
1366
+ "0": 0,
1367
+ "px": 1px,
1368
+ "0\\.5": $spacing-0_5,
1369
+ "1": $spacing-1,
1370
+ "2": $spacing-2,
1371
+ "3": $spacing-3,
1372
+ "4": $spacing-4,
1373
+ "5": $spacing-5,
1374
+ "6": $spacing-6,
1375
+ "8": $spacing-8,
1376
+ "10": $spacing-10,
1377
+ "12": $spacing-12,
1378
+ "16": $spacing-16,
1379
+ "20": $spacing-20,
1380
+ "24": $spacing-24,
1381
+ "1-2": 50%,
1382
+ "1-3": 33.333333%,
1383
+ "2-3": 66.666667%,
1384
+ "1-4": 25%,
1385
+ "3-4": 75%,
1386
+ "full": 100%,
1387
+ "auto": auto,
740
1388
  );
741
1389
 
742
1390
  @each $key, $value in $inset-values {
743
- .inset-#{$key} { inset: $value !important; }
744
- .inset-x-#{$key} { left: $value !important; right: $value !important; }
745
- .inset-y-#{$key} { top: $value !important; bottom: $value !important; }
746
- .top-#{$key} { top: $value !important; }
747
- .right-#{$key} { right: $value !important; }
748
- .bottom-#{$key} { bottom: $value !important; }
749
- .left-#{$key} { left: $value !important; }
750
- .start-#{$key} { inset-inline-start: $value !important; }
751
- .end-#{$key} { inset-inline-end: $value !important; }
752
-
1391
+ .inset-#{$key} {
1392
+ inset: $value !important;
1393
+ }
1394
+ .inset-x-#{$key} {
1395
+ left: $value !important;
1396
+ right: $value !important;
1397
+ }
1398
+ .inset-y-#{$key} {
1399
+ top: $value !important;
1400
+ bottom: $value !important;
1401
+ }
1402
+ .top-#{$key} {
1403
+ top: $value !important;
1404
+ }
1405
+ .right-#{$key} {
1406
+ right: $value !important;
1407
+ }
1408
+ .bottom-#{$key} {
1409
+ bottom: $value !important;
1410
+ }
1411
+ .left-#{$key} {
1412
+ left: $value !important;
1413
+ }
1414
+ .start-#{$key} {
1415
+ inset-inline-start: $value !important;
1416
+ }
1417
+ .end-#{$key} {
1418
+ inset-inline-end: $value !important;
1419
+ }
1420
+
753
1421
  // Negative values
754
- @if $value != auto and $key != '0' {
755
- .-inset-#{$key} { inset: -#{$value} !important; }
756
- .-inset-x-#{$key} { left: -#{$value} !important; right: -#{$value} !important; }
757
- .-inset-y-#{$key} { top: -#{$value} !important; bottom: -#{$value} !important; }
758
- .-top-#{$key} { top: -#{$value} !important; }
759
- .-right-#{$key} { right: -#{$value} !important; }
760
- .-bottom-#{$key} { bottom: -#{$value} !important; }
761
- .-left-#{$key} { left: -#{$value} !important; }
1422
+ @if $value != auto and $key != "0" {
1423
+ .-inset-#{$key} {
1424
+ inset: -#{$value} !important;
1425
+ }
1426
+ .-inset-x-#{$key} {
1427
+ left: -#{$value} !important;
1428
+ right: -#{$value} !important;
1429
+ }
1430
+ .-inset-y-#{$key} {
1431
+ top: -#{$value} !important;
1432
+ bottom: -#{$value} !important;
1433
+ }
1434
+ .-top-#{$key} {
1435
+ top: -#{$value} !important;
1436
+ }
1437
+ .-right-#{$key} {
1438
+ right: -#{$value} !important;
1439
+ }
1440
+ .-bottom-#{$key} {
1441
+ bottom: -#{$value} !important;
1442
+ }
1443
+ .-left-#{$key} {
1444
+ left: -#{$value} !important;
1445
+ }
762
1446
  }
763
1447
  }
764
1448
 
765
1449
  // ============================================================================
766
1450
  // 13. Z-INDEX UTILITIES
767
1451
  // ============================================================================
768
- .z-0 { z-index: 0 !important; }
769
- .z-10 { z-index: 10 !important; }
770
- .z-20 { z-index: 20 !important; }
771
- .z-30 { z-index: 30 !important; }
772
- .z-40 { z-index: 40 !important; }
773
- .z-50 { z-index: 50 !important; }
774
- .z-auto { z-index: auto !important; }
775
- .-z-10 { z-index: -10 !important; }
1452
+ .z-0 {
1453
+ z-index: 0 !important;
1454
+ }
1455
+ .z-10 {
1456
+ z-index: 10 !important;
1457
+ }
1458
+ .z-20 {
1459
+ z-index: 20 !important;
1460
+ }
1461
+ .z-30 {
1462
+ z-index: 30 !important;
1463
+ }
1464
+ .z-40 {
1465
+ z-index: 40 !important;
1466
+ }
1467
+ .z-50 {
1468
+ z-index: 50 !important;
1469
+ }
1470
+ .z-auto {
1471
+ z-index: auto !important;
1472
+ }
1473
+ .-z-10 {
1474
+ z-index: -10 !important;
1475
+ }
776
1476
 
777
1477
  // ============================================================================
778
1478
  // 14. OVERFLOW UTILITIES
779
1479
  // ============================================================================
780
- .overflow-auto { overflow: auto !important; }
781
- .overflow-hidden { overflow: hidden !important; }
782
- .overflow-clip { overflow: clip !important; }
783
- .overflow-visible { overflow: visible !important; }
784
- .overflow-scroll { overflow: scroll !important; }
1480
+ .overflow-auto {
1481
+ overflow: auto !important;
1482
+ }
1483
+ .overflow-hidden {
1484
+ overflow: hidden !important;
1485
+ }
1486
+ .overflow-clip {
1487
+ overflow: clip !important;
1488
+ }
1489
+ .overflow-visible {
1490
+ overflow: visible !important;
1491
+ }
1492
+ .overflow-scroll {
1493
+ overflow: scroll !important;
1494
+ }
785
1495
 
786
- .overflow-x-auto { overflow-x: auto !important; }
787
- .overflow-x-hidden { overflow-x: hidden !important; }
788
- .overflow-x-clip { overflow-x: clip !important; }
789
- .overflow-x-visible { overflow-x: visible !important; }
790
- .overflow-x-scroll { overflow-x: scroll !important; }
1496
+ .overflow-x-auto {
1497
+ overflow-x: auto !important;
1498
+ }
1499
+ .overflow-x-hidden {
1500
+ overflow-x: hidden !important;
1501
+ }
1502
+ .overflow-x-clip {
1503
+ overflow-x: clip !important;
1504
+ }
1505
+ .overflow-x-visible {
1506
+ overflow-x: visible !important;
1507
+ }
1508
+ .overflow-x-scroll {
1509
+ overflow-x: scroll !important;
1510
+ }
791
1511
 
792
- .overflow-y-auto { overflow-y: auto !important; }
793
- .overflow-y-hidden { overflow-y: hidden !important; }
794
- .overflow-y-clip { overflow-y: clip !important; }
795
- .overflow-y-visible { overflow-y: visible !important; }
796
- .overflow-y-scroll { overflow-y: scroll !important; }
1512
+ .overflow-y-auto {
1513
+ overflow-y: auto !important;
1514
+ }
1515
+ .overflow-y-hidden {
1516
+ overflow-y: hidden !important;
1517
+ }
1518
+ .overflow-y-clip {
1519
+ overflow-y: clip !important;
1520
+ }
1521
+ .overflow-y-visible {
1522
+ overflow-y: visible !important;
1523
+ }
1524
+ .overflow-y-scroll {
1525
+ overflow-y: scroll !important;
1526
+ }
797
1527
 
798
1528
  // ============================================================================
799
1529
  // 15. VISIBILITY UTILITIES
800
1530
  // ============================================================================
801
- .visible { visibility: visible !important; }
802
- .invisible { visibility: hidden !important; }
803
- .collapse { visibility: collapse !important; }
1531
+ .visible {
1532
+ visibility: visible !important;
1533
+ }
1534
+ .invisible {
1535
+ visibility: hidden !important;
1536
+ }
1537
+ .collapse {
1538
+ visibility: collapse !important;
1539
+ }
804
1540
 
805
1541
  // ============================================================================
806
1542
  // 16. ASPECT RATIO UTILITIES
807
1543
  // ============================================================================
808
- .aspect-auto { aspect-ratio: auto !important; }
809
- .aspect-square { aspect-ratio: 1 / 1 !important; }
810
- .aspect-video { aspect-ratio: 16 / 9 !important; }
811
- .aspect-4-3 { aspect-ratio: 4 / 3 !important; }
812
- .aspect-3-2 { aspect-ratio: 3 / 2 !important; }
813
- .aspect-2-1 { aspect-ratio: 2 / 1 !important; }
1544
+ .aspect-auto {
1545
+ aspect-ratio: auto !important;
1546
+ }
1547
+ .aspect-square {
1548
+ aspect-ratio: 1 / 1 !important;
1549
+ }
1550
+ .aspect-video {
1551
+ aspect-ratio: 16 / 9 !important;
1552
+ }
1553
+ .aspect-4-3 {
1554
+ aspect-ratio: 4 / 3 !important;
1555
+ }
1556
+ .aspect-3-2 {
1557
+ aspect-ratio: 3 / 2 !important;
1558
+ }
1559
+ .aspect-2-1 {
1560
+ aspect-ratio: 2 / 1 !important;
1561
+ }
814
1562
 
815
1563
  // ============================================================================
816
1564
  // 17. OBJECT FIT & POSITION UTILITIES
817
1565
  // ============================================================================
818
- .object-contain { object-fit: contain !important; }
819
- .object-cover { object-fit: cover !important; }
820
- .object-fill { object-fit: fill !important; }
821
- .object-none { object-fit: none !important; }
822
- .object-scale-down { object-fit: scale-down !important; }
1566
+ .object-contain {
1567
+ object-fit: contain !important;
1568
+ }
1569
+ .object-cover {
1570
+ object-fit: cover !important;
1571
+ }
1572
+ .object-fill {
1573
+ object-fit: fill !important;
1574
+ }
1575
+ .object-none {
1576
+ object-fit: none !important;
1577
+ }
1578
+ .object-scale-down {
1579
+ object-fit: scale-down !important;
1580
+ }
823
1581
 
824
- .object-bottom { object-position: bottom !important; }
825
- .object-center { object-position: center !important; }
826
- .object-left { object-position: left !important; }
827
- .object-left-bottom { object-position: left bottom !important; }
828
- .object-left-top { object-position: left top !important; }
829
- .object-right { object-position: right !important; }
830
- .object-right-bottom { object-position: right bottom !important; }
831
- .object-right-top { object-position: right top !important; }
832
- .object-top { object-position: top !important; }
1582
+ .object-bottom {
1583
+ object-position: bottom !important;
1584
+ }
1585
+ .object-center {
1586
+ object-position: center !important;
1587
+ }
1588
+ .object-left {
1589
+ object-position: left !important;
1590
+ }
1591
+ .object-left-bottom {
1592
+ object-position: left bottom !important;
1593
+ }
1594
+ .object-left-top {
1595
+ object-position: left top !important;
1596
+ }
1597
+ .object-right {
1598
+ object-position: right !important;
1599
+ }
1600
+ .object-right-bottom {
1601
+ object-position: right bottom !important;
1602
+ }
1603
+ .object-right-top {
1604
+ object-position: right top !important;
1605
+ }
1606
+ .object-top {
1607
+ object-position: top !important;
1608
+ }
833
1609
 
834
1610
  // ============================================================================
835
1611
  // 18. FLOAT & CLEAR UTILITIES
836
1612
  // ============================================================================
837
- .float-start { float: inline-start !important; }
838
- .float-end { float: inline-end !important; }
839
- .float-left { float: left !important; }
840
- .float-right { float: right !important; }
841
- .float-none { float: none !important; }
1613
+ .float-start {
1614
+ float: inline-start !important;
1615
+ }
1616
+ .float-end {
1617
+ float: inline-end !important;
1618
+ }
1619
+ .float-left {
1620
+ float: left !important;
1621
+ }
1622
+ .float-right {
1623
+ float: right !important;
1624
+ }
1625
+ .float-none {
1626
+ float: none !important;
1627
+ }
842
1628
 
843
- .clear-left { clear: left !important; }
844
- .clear-right { clear: right !important; }
845
- .clear-both { clear: both !important; }
846
- .clear-none { clear: none !important; }
847
- .clear-start { clear: inline-start !important; }
848
- .clear-end { clear: inline-end !important; }
1629
+ .clear-left {
1630
+ clear: left !important;
1631
+ }
1632
+ .clear-right {
1633
+ clear: right !important;
1634
+ }
1635
+ .clear-both {
1636
+ clear: both !important;
1637
+ }
1638
+ .clear-none {
1639
+ clear: none !important;
1640
+ }
1641
+ .clear-start {
1642
+ clear: inline-start !important;
1643
+ }
1644
+ .clear-end {
1645
+ clear: inline-end !important;
1646
+ }
849
1647
 
850
1648
  // ============================================================================
851
1649
  // 19. CONTAINER UTILITY
@@ -856,7 +1654,7 @@ $inset-values: (
856
1654
  margin-right: auto;
857
1655
  padding-left: var(--spacing-4);
858
1656
  padding-right: var(--spacing-4);
859
-
1657
+
860
1658
  @media (min-width: 640px) {
861
1659
  max-width: 640px;
862
1660
  }
@@ -883,42 +1681,94 @@ $inset-values: (
883
1681
  // ============================================================================
884
1682
  // 20. BOX SIZING UTILITIES
885
1683
  // ============================================================================
886
- .box-border { box-sizing: border-box !important; }
887
- .box-content { box-sizing: content-box !important; }
1684
+ .box-border {
1685
+ box-sizing: border-box !important;
1686
+ }
1687
+ .box-content {
1688
+ box-sizing: content-box !important;
1689
+ }
888
1690
 
889
1691
  // ============================================================================
890
1692
  // 21. ISOLATION UTILITIES
891
1693
  // ============================================================================
892
- .isolate { isolation: isolate !important; }
893
- .isolation-auto { isolation: auto !important; }
1694
+ .isolate {
1695
+ isolation: isolate !important;
1696
+ }
1697
+ .isolation-auto {
1698
+ isolation: auto !important;
1699
+ }
894
1700
 
895
1701
  // ============================================================================
896
1702
  // 22. SCROLLBAR UTILITIES
897
1703
  // ============================================================================
898
- .scrollbar-auto { scrollbar-width: auto !important; }
899
- .scrollbar-thin { scrollbar-width: thin !important; }
900
- .scrollbar-none { scrollbar-width: none !important; }
1704
+ .scrollbar-auto {
1705
+ scrollbar-width: auto !important;
1706
+ }
1707
+ .scrollbar-thin {
1708
+ scrollbar-width: thin !important;
1709
+ }
1710
+ .scrollbar-none {
1711
+ scrollbar-width: none !important;
1712
+ }
901
1713
 
902
1714
  // Overscroll behavior
903
- .overscroll-auto { overscroll-behavior: auto !important; }
904
- .overscroll-contain { overscroll-behavior: contain !important; }
905
- .overscroll-none { overscroll-behavior: none !important; }
906
- .overscroll-x-auto { overscroll-behavior-x: auto !important; }
907
- .overscroll-x-contain { overscroll-behavior-x: contain !important; }
908
- .overscroll-x-none { overscroll-behavior-x: none !important; }
909
- .overscroll-y-auto { overscroll-behavior-y: auto !important; }
910
- .overscroll-y-contain { overscroll-behavior-y: contain !important; }
911
- .overscroll-y-none { overscroll-behavior-y: none !important; }
1715
+ .overscroll-auto {
1716
+ overscroll-behavior: auto !important;
1717
+ }
1718
+ .overscroll-contain {
1719
+ overscroll-behavior: contain !important;
1720
+ }
1721
+ .overscroll-none {
1722
+ overscroll-behavior: none !important;
1723
+ }
1724
+ .overscroll-x-auto {
1725
+ overscroll-behavior-x: auto !important;
1726
+ }
1727
+ .overscroll-x-contain {
1728
+ overscroll-behavior-x: contain !important;
1729
+ }
1730
+ .overscroll-x-none {
1731
+ overscroll-behavior-x: none !important;
1732
+ }
1733
+ .overscroll-y-auto {
1734
+ overscroll-behavior-y: auto !important;
1735
+ }
1736
+ .overscroll-y-contain {
1737
+ overscroll-behavior-y: contain !important;
1738
+ }
1739
+ .overscroll-y-none {
1740
+ overscroll-behavior-y: none !important;
1741
+ }
912
1742
 
913
1743
  // Scroll snap
914
- .snap-start { scroll-snap-align: start !important; }
915
- .snap-end { scroll-snap-align: end !important; }
916
- .snap-center { scroll-snap-align: center !important; }
917
- .snap-align-none { scroll-snap-align: none !important; }
918
-
919
- .snap-none { scroll-snap-type: none !important; }
920
- .snap-x { scroll-snap-type: x var(--snap-strictness, mandatory) !important; }
921
- .snap-y { scroll-snap-type: y var(--snap-strictness, mandatory) !important; }
922
- .snap-both { scroll-snap-type: both var(--snap-strictness, mandatory) !important; }
923
- .snap-mandatory { --snap-strictness: mandatory; }
924
- .snap-proximity { --snap-strictness: proximity; }
1744
+ .snap-start {
1745
+ scroll-snap-align: start !important;
1746
+ }
1747
+ .snap-end {
1748
+ scroll-snap-align: end !important;
1749
+ }
1750
+ .snap-center {
1751
+ scroll-snap-align: center !important;
1752
+ }
1753
+ .snap-align-none {
1754
+ scroll-snap-align: none !important;
1755
+ }
1756
+
1757
+ .snap-none {
1758
+ scroll-snap-type: none !important;
1759
+ }
1760
+ .snap-x {
1761
+ scroll-snap-type: x var(--snap-strictness, mandatory) !important;
1762
+ }
1763
+ .snap-y {
1764
+ scroll-snap-type: y var(--snap-strictness, mandatory) !important;
1765
+ }
1766
+ .snap-both {
1767
+ scroll-snap-type: both var(--snap-strictness, mandatory) !important;
1768
+ }
1769
+ .snap-mandatory {
1770
+ --snap-strictness: mandatory;
1771
+ }
1772
+ .snap-proximity {
1773
+ --snap-strictness: proximity;
1774
+ }