yummacss 2.0.0 → 2.1.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 (29) hide show
  1. package/.prettierrc +9 -0
  2. package/CHANGELOG.md +47 -62
  3. package/README.md +20 -43
  4. package/dist/yumma-core.css +94163 -96777
  5. package/dist/yumma-core.min.css +1 -1
  6. package/dist/yumma.css +93959 -96567
  7. package/dist/yumma.min.css +1 -1
  8. package/package.json +5 -15
  9. package/src/{_stylecent.scss → _base.scss} +19 -15
  10. package/src/abstracts/_colors.scss +2 -2
  11. package/src/abstracts/_extensions.scss +19 -0
  12. package/src/abstracts/_functions.scss +2 -3
  13. package/src/abstracts/_mixins.scss +17 -31
  14. package/src/abstracts/_theme.scss +18 -0
  15. package/src/abstracts/_variables.scss +43 -75
  16. package/src/core.scss +1 -1
  17. package/src/utilities/_borders.scss +214 -0
  18. package/src/utilities/_box-model.scss +107 -0
  19. package/src/utilities/_effects.scss +74 -0
  20. package/src/utilities/_filters.scss +57 -0
  21. package/src/utilities/_flexbox.scss +192 -0
  22. package/src/utilities/_grid.scss +320 -0
  23. package/src/utilities/_interactions.scss +111 -0
  24. package/src/utilities/_layout.scss +310 -0
  25. package/src/utilities/_outlines.scss +76 -0
  26. package/src/utilities/_tables.scss +61 -0
  27. package/src/utilities/_typography.scss +168 -0
  28. package/src/yumma.scss +15 -2
  29. package/src/_utilities.scss +0 -1265
package/src/_utilities.scss DELETED
@@ -1,1265 +0,0 @@
1
- @use "sass:math";
2
-
3
- @import "abstracts/mixins";
4
- @import "abstracts/breakpoints";
5
-
6
- $yma-utilities: (
7
- // borders & outlines
8
- "border-collapse":
9
- (
10
- "prefix": "bc",
11
- "values": (
12
- "c": collapse,
13
- "s": separate,
14
- ),
15
- ),
16
-
17
- "border-radius": (
18
- "prefix": "rad",
19
- "values": (
20
- "0": $yma-border-radius * 0,
21
- "1": $yma-border-radius,
22
- "2": $yma-border-radius * 2,
23
- "3": $yma-border-radius * 4,
24
- "4": $yma-border-radius * 6,
25
- "5": $yma-border-radius * 8,
26
- "6": $yma-border-radius * 10,
27
- "7": $yma-border-radius * 12,
28
- "8": $yma-border-radius * 14,
29
- "full": 100%,
30
- "half": 50%,
31
- ),
32
- ),
33
-
34
- "border-top-left-radius": (
35
- "prefix": "rad-tl",
36
- "values": (
37
- "0": $yma-border-radius * 0,
38
- "1": $yma-border-radius,
39
- "2": $yma-border-radius * 2,
40
- "3": $yma-border-radius * 4,
41
- "4": $yma-border-radius * 6,
42
- "5": $yma-border-radius * 8,
43
- "6": $yma-border-radius * 10,
44
- "7": $yma-border-radius * 12,
45
- "8": $yma-border-radius * 14,
46
- ),
47
- ),
48
-
49
- "border-top-right-radius": (
50
- "prefix": "rad-tr",
51
- "values": (
52
- "0": $yma-border-radius * 0,
53
- "1": $yma-border-radius,
54
- "2": $yma-border-radius * 2,
55
- "3": $yma-border-radius * 4,
56
- "4": $yma-border-radius * 6,
57
- "5": $yma-border-radius * 8,
58
- "6": $yma-border-radius * 10,
59
- "7": $yma-border-radius * 12,
60
- "8": $yma-border-radius * 14,
61
- ),
62
- ),
63
-
64
- "border-bottom-left-radius": (
65
- "prefix": "rad-bl",
66
- "values": (
67
- "0": $yma-border-radius * 0,
68
- "1": $yma-border-radius,
69
- "2": $yma-border-radius * 2,
70
- "3": $yma-border-radius * 4,
71
- "4": $yma-border-radius * 6,
72
- "5": $yma-border-radius * 8,
73
- "6": $yma-border-radius * 10,
74
- "7": $yma-border-radius * 12,
75
- "8": $yma-border-radius * 14,
76
- ),
77
- ),
78
-
79
- "border-bottom-right-radius": (
80
- "prefix": "rad-br",
81
- "values": (
82
- "0": $yma-border-radius * 0,
83
- "1": $yma-border-radius,
84
- "2": $yma-border-radius * 2,
85
- "3": $yma-border-radius * 4,
86
- "4": $yma-border-radius * 6,
87
- "5": $yma-border-radius * 8,
88
- "6": $yma-border-radius * 10,
89
- "7": $yma-border-radius * 12,
90
- "8": $yma-border-radius * 14,
91
- ),
92
- ),
93
-
94
- "border-bottom-width": (
95
- "prefix": "bb",
96
- "values": (
97
- "0": $yma-border * 0,
98
- "1": $yma-border,
99
- "2": $yma-border * 2,
100
- "3": $yma-border * 4,
101
- "4": $yma-border * 6,
102
- "5": $yma-border * 8,
103
- "6": $yma-border * 10,
104
- "7": $yma-border * 12,
105
- "8": $yma-border * 14,
106
- ),
107
- ),
108
-
109
- "border-left-width": (
110
- "prefix": "bl",
111
- "values": (
112
- "0": $yma-border * 0,
113
- "1": $yma-border,
114
- "2": $yma-border * 2,
115
- "3": $yma-border * 4,
116
- "4": $yma-border * 6,
117
- "5": $yma-border * 8,
118
- "6": $yma-border * 10,
119
- "7": $yma-border * 12,
120
- "8": $yma-border * 14,
121
- ),
122
- ),
123
-
124
- "border-right-width": (
125
- "prefix": "br",
126
- "values": (
127
- "0": $yma-border * 0,
128
- "1": $yma-border,
129
- "2": $yma-border * 2,
130
- "3": $yma-border * 4,
131
- "4": $yma-border * 6,
132
- "5": $yma-border * 8,
133
- "6": $yma-border * 10,
134
- "7": $yma-border * 12,
135
- "8": $yma-border * 14,
136
- ),
137
- ),
138
-
139
- "border-top-width": (
140
- "prefix": "bt",
141
- "values": (
142
- "0": $yma-border * 0,
143
- "1": $yma-border,
144
- "2": $yma-border * 2,
145
- "3": $yma-border * 4,
146
- "4": $yma-border * 6,
147
- "5": $yma-border * 8,
148
- "6": $yma-border * 10,
149
- "7": $yma-border * 12,
150
- "8": $yma-border * 14,
151
- ),
152
- ),
153
-
154
- "border-style": (
155
- "prefix": "b",
156
- "values": (
157
- "none": none,
158
- "d": dashed,
159
- "h": hidden,
160
- "s": solid,
161
- ),
162
- ),
163
-
164
- "border-width": (
165
- "prefix": "b",
166
- "values": (
167
- "0": $yma-border * 0,
168
- "1": $yma-border,
169
- "2": $yma-border * 2,
170
- "3": $yma-border * 4,
171
- "4": $yma-border * 6,
172
- "5": $yma-border * 8,
173
- "6": $yma-border * 10,
174
- "7": $yma-border * 12,
175
- "8": $yma-border * 14,
176
- ),
177
- ),
178
-
179
- "outline-offset": (
180
- "prefix": "oo",
181
- "values": (
182
- "0": $yma-outline-offset * 0,
183
- "1": $yma-outline-offset * 2,
184
- "2": $yma-outline-offset * 4,
185
- "3": $yma-outline-offset * 6,
186
- "4": $yma-outline-offset * 8,
187
- ),
188
- ),
189
-
190
- "outline-style": (
191
- "prefix": "os",
192
- "values": (
193
- "none": none,
194
- "d": dashed,
195
- "h": hidden,
196
- "s": solid,
197
- ),
198
- ),
199
-
200
- "outline-width": (
201
- "prefix": "ow",
202
- "values": (
203
- "0": $yma-outline-width * 0,
204
- "1": $yma-outline-width * 2,
205
- "2": $yma-outline-width * 4,
206
- "3": $yma-outline-width * 6,
207
- "4": $yma-outline-width * 8,
208
- ),
209
- ),
210
-
211
- // box model
212
- "box-sizing":
213
- (
214
- "prefix": "bs",
215
- "values": (
216
- "bb": border-box,
217
- "cb": content-box,
218
- ),
219
- ),
220
-
221
- // effects & grid
222
- "backdrop-filter":
223
- (
224
- "prefix": "bf-b",
225
- "values": (
226
- "none": blur($yma-backdrop-blur * 0),
227
- "xs": blur($yma-backdrop-blur),
228
- "sm": blur($yma-backdrop-blur * 2),
229
- "md": blur($yma-backdrop-blur * 4),
230
- "lg": blur($yma-backdrop-blur * 8),
231
- "xl": blur($yma-backdrop-blur * 16),
232
- ),
233
- ),
234
-
235
- "box-shadow": (
236
- "prefix": "bs",
237
- "values": (
238
- "none": none,
239
- "xs": 1px 3px 5px -3px rgb(0, 0, 0, 0.1),
240
- "sm": 1px 3px 5px -2px rgb(0, 0, 0, 0.1),
241
- "md": 1px 3px 5px -1px rgb(0, 0, 0, 0.1),
242
- "lg": 1px 3px 5px 1px rgb(0, 0, 0, 0.1),
243
- "xl": 1px 3px 5px 2px rgb(0, 0, 0, 0.1),
244
- ),
245
- ),
246
-
247
- "opacity": (
248
- "prefix": "o",
249
- "values": (
250
- "10": 0.1,
251
- "20": 0.2,
252
- "30": 0.3,
253
- "40": 0.4,
254
- "50": 0.5,
255
- "60": 0.6,
256
- "70": 0.7,
257
- "80": 0.8,
258
- "90": 0.9,
259
- "100": 1,
260
- ),
261
- ),
262
-
263
- // flexbox & grid
264
- "flex-direction":
265
- (
266
- "prefix": "fd",
267
- "values": (
268
- "c": column,
269
- "cr": column-reverse,
270
- "r": row,
271
- "rr": row-reverse,
272
- ),
273
- ),
274
-
275
- "flex-grow": (
276
- "prefix": "fg",
277
- "values": (
278
- "0": 0,
279
- "1": 1,
280
- "2": 2,
281
- "3": 3,
282
- "4": 4,
283
- "5": 5,
284
- "6": 6,
285
- "7": 7,
286
- "8": 8,
287
- ),
288
- ),
289
-
290
- "flex-shrink": (
291
- "prefix": "fs",
292
- "values": (
293
- "0": 0,
294
- "1": 1,
295
- "2": 2,
296
- "3": 3,
297
- "4": 4,
298
- "5": 5,
299
- "6": 6,
300
- "7": 7,
301
- "8": 8,
302
- ),
303
- ),
304
-
305
- "flex-wrap": (
306
- "prefix": "fw",
307
- "values": (
308
- "nw": nowrap,
309
- "w": wrap,
310
- "wr": wrap-reverse,
311
- ),
312
- ),
313
-
314
- "flex": (
315
- "prefix": "f",
316
- "values": (
317
- "0": 0,
318
- "1": 1,
319
- "2": 2,
320
- "3": 3,
321
- "4": 4,
322
- "5": 5,
323
- "6": 6,
324
- "7": 7,
325
- "8": 8,
326
- "9": 9,
327
- "10": 10,
328
- "11": 11,
329
- "12": 12,
330
- "13": 13,
331
- "14": 14,
332
- "15": 15,
333
- "16": 16,
334
- "none": none,
335
- ),
336
- ),
337
-
338
- "grid-auto-columns": (
339
- "prefix": "gac",
340
- "values": (
341
- "auto": auto,
342
- "max": max-content,
343
- "min": min-content,
344
- ),
345
- ),
346
-
347
- "grid-auto-flow": (
348
- "prefix": "gaf",
349
- "values": (
350
- "c": column,
351
- "d": dense,
352
- "r": row,
353
- ),
354
- ),
355
-
356
- "grid-auto-rows": (
357
- "prefix": "gar",
358
- "values": (
359
- "auto": auto,
360
- "max": max-content,
361
- "min": min-content,
362
- ),
363
- ),
364
-
365
- "grid-column": (
366
- "prefix": "gc-s",
367
- "values": (
368
- "1": span 1 / span 1,
369
- "2": span 2 / span 2,
370
- "3": span 3 / span 3,
371
- "4": span 4 / span 4,
372
- "5": span 5 / span 5,
373
- "6": span 6 / span 6,
374
- "7": span 7 / span 7,
375
- "8": span 8 / span 8,
376
- "9": span 9 / span 9,
377
- "10": span 10 / span 10,
378
- "11": span 11 / span 11,
379
- "12": span 12 / span 12,
380
- "13": span 13 / span 13,
381
- "14": span 14 / span 14,
382
- "15": span 15 / span 15,
383
- "16": span 16 / span 16,
384
- ),
385
- ),
386
-
387
- "grid-column-start": (
388
- "prefix": "gcs",
389
- "values": (
390
- "1": 1,
391
- "2": 2,
392
- "3": 3,
393
- "4": 4,
394
- "5": 5,
395
- "6": 6,
396
- "7": 7,
397
- "8": 8,
398
- "9": 9,
399
- "10": 10,
400
- "11": 11,
401
- "12": 12,
402
- "13": 13,
403
- "14": 14,
404
- "15": 15,
405
- "16": 16,
406
- ),
407
- ),
408
-
409
- "grid-column-end": (
410
- "prefix": "gce",
411
- "values": (
412
- "1": 1,
413
- "2": 2,
414
- "3": 3,
415
- "4": 4,
416
- "5": 5,
417
- "6": 6,
418
- "7": 7,
419
- "8": 8,
420
- "9": 9,
421
- "10": 10,
422
- "11": 11,
423
- "12": 12,
424
- "13": 13,
425
- "14": 14,
426
- "15": 15,
427
- "16": 16,
428
- ),
429
- ),
430
-
431
- "grid-row": (
432
- "prefix": "gr-s",
433
- "values": (
434
- "1": span 1 / span 1,
435
- "2": span 2 / span 2,
436
- "3": span 3 / span 3,
437
- "4": span 4 / span 4,
438
- "5": span 5 / span 5,
439
- "6": span 6 / span 6,
440
- "7": span 7 / span 7,
441
- "8": span 8 / span 8,
442
- "9": span 9 / span 9,
443
- "10": span 10 / span 10,
444
- "11": span 11 / span 11,
445
- "12": span 12 / span 12,
446
- "13": span 13 / span 13,
447
- "14": span 14 / span 14,
448
- "15": span 15 / span 15,
449
- "16": span 16 / span 16,
450
- ),
451
- ),
452
-
453
- "grid-row-start": (
454
- "prefix": "grs",
455
- "values": (
456
- "1": 1,
457
- "2": 2,
458
- "3": 3,
459
- "4": 4,
460
- "5": 5,
461
- "6": 6,
462
- "7": 7,
463
- "8": 8,
464
- "9": 9,
465
- "10": 10,
466
- "11": 11,
467
- "12": 12,
468
- "13": 13,
469
- "14": 14,
470
- "15": 15,
471
- "16": 16,
472
- ),
473
- ),
474
-
475
- "grid-row-end": (
476
- "prefix": "gre",
477
- "values": (
478
- "1": 1,
479
- "2": 2,
480
- "3": 3,
481
- "4": 4,
482
- "5": 5,
483
- "6": 6,
484
- "7": 7,
485
- "8": 8,
486
- "9": 9,
487
- "10": 10,
488
- "11": 11,
489
- "12": 12,
490
- "13": 13,
491
- "14": 14,
492
- "15": 15,
493
- "16": 16,
494
- ),
495
- ),
496
-
497
- "grid-template-columns": (
498
- "prefix": "gtc",
499
- "values": (
500
- "1": repeat(1, minmax(0, 1fr)),
501
- "2": repeat(2, minmax(0, 1fr)),
502
- "3": repeat(3, minmax(0, 1fr)),
503
- "4": repeat(4, minmax(0, 1fr)),
504
- "5": repeat(5, minmax(0, 1fr)),
505
- "6": repeat(6, minmax(0, 1fr)),
506
- "7": repeat(7, minmax(0, 1fr)),
507
- "8": repeat(8, minmax(0, 1fr)),
508
- "9": repeat(9, minmax(0, 1fr)),
509
- "10": repeat(10, minmax(0, 1fr)),
510
- "11": repeat(11, minmax(0, 1fr)),
511
- "12": repeat(12, minmax(0, 1fr)),
512
- "13": repeat(13, minmax(0, 1fr)),
513
- "14": repeat(14, minmax(0, 1fr)),
514
- "15": repeat(15, minmax(0, 1fr)),
515
- "16": repeat(16, minmax(0, 1fr)),
516
- ),
517
- ),
518
-
519
- "grid-template-rows": (
520
- "prefix": "gtr",
521
- "values": (
522
- "1": repeat(1, minmax(0, 1fr)),
523
- "2": repeat(2, minmax(0, 1fr)),
524
- "3": repeat(3, minmax(0, 1fr)),
525
- "4": repeat(4, minmax(0, 1fr)),
526
- "5": repeat(5, minmax(0, 1fr)),
527
- "6": repeat(6, minmax(0, 1fr)),
528
- "7": repeat(7, minmax(0, 1fr)),
529
- "8": repeat(8, minmax(0, 1fr)),
530
- "9": repeat(9, minmax(0, 1fr)),
531
- "10": repeat(10, minmax(0, 1fr)),
532
- "11": repeat(11, minmax(0, 1fr)),
533
- "12": repeat(12, minmax(0, 1fr)),
534
- "13": repeat(13, minmax(0, 1fr)),
535
- "14": repeat(14, minmax(0, 1fr)),
536
- "15": repeat(15, minmax(0, 1fr)),
537
- "16": repeat(16, minmax(0, 1fr)),
538
- ),
539
- ),
540
-
541
- "align-content": (
542
- "prefix": "ac",
543
- "values": (
544
- "c": center,
545
- "e": end,
546
- "fe": flex-end,
547
- "fs": flex-start,
548
- "n": normal,
549
- "sa": space-around,
550
- "sb": space-between,
551
- "se": space-evenly,
552
- "start": start,
553
- "stretch": stretch,
554
- ),
555
- ),
556
-
557
- "align-items": (
558
- "prefix": "ai",
559
- "values": (
560
- "c": center,
561
- "e": end,
562
- "fe": flex-end,
563
- "fs": flex-start,
564
- "n": normal,
565
- "start": start,
566
- "stretch": stretch,
567
- ),
568
- ),
569
-
570
- "align-self": (
571
- "prefix": "as",
572
- "values": (
573
- "auto": auto,
574
- "c": center,
575
- "e": end,
576
- "fe": flex-end,
577
- "fs": flex-start,
578
- "n": normal,
579
- "start": start,
580
- "stretch": stretch,
581
- ),
582
- ),
583
-
584
- "column-gap": (
585
- "prefix": "cg",
586
- "values": (
587
- "1": $yma-column-gap,
588
- "2": $yma-column-gap * 2,
589
- "3": $yma-column-gap * 3,
590
- "4": $yma-column-gap * 4,
591
- "5": $yma-column-gap * 5,
592
- "6": $yma-column-gap * 6,
593
- "7": $yma-column-gap * 7,
594
- "8": $yma-column-gap * 8,
595
- "9": $yma-column-gap * 9,
596
- "10": $yma-column-gap * 10,
597
- "11": $yma-column-gap * 11,
598
- "12": $yma-column-gap * 12,
599
- "13": $yma-column-gap * 13,
600
- "14": $yma-column-gap * 14,
601
- "15": $yma-column-gap * 15,
602
- "16": $yma-column-gap * 16,
603
- ),
604
- ),
605
-
606
- "gap": (
607
- "prefix": "g",
608
- "values": (
609
- "0": $yma-gap * 0,
610
- "1": $yma-gap,
611
- "2": $yma-gap * 2,
612
- "3": $yma-gap * 3,
613
- "4": $yma-gap * 4,
614
- "5": $yma-gap * 5,
615
- "6": $yma-gap * 6,
616
- "7": $yma-gap * 7,
617
- "8": $yma-gap * 8,
618
- "9": $yma-gap * 9,
619
- "10": $yma-gap * 10,
620
- "11": $yma-gap * 11,
621
- "12": $yma-gap * 12,
622
- "13": $yma-gap * 13,
623
- "14": $yma-gap * 14,
624
- "15": $yma-gap * 15,
625
- "16": $yma-gap * 16,
626
- "none": none,
627
- ),
628
- ),
629
-
630
- "justify-content": (
631
- "prefix": "jc",
632
- "values": (
633
- "c": center,
634
- "e": end,
635
- "fe": flex-end,
636
- "fs": flex-start,
637
- "l": left,
638
- "n": normal,
639
- "r": right,
640
- "s": start,
641
- "sa": space-around,
642
- "sb": space-between,
643
- "se": space-evenly,
644
- "stretch": stretch,
645
- ),
646
- ),
647
-
648
- "justify-items": (
649
- "prefix": "ji",
650
- "values": (
651
- "c": center,
652
- "e": end,
653
- "fe": flex-end,
654
- "fs": flex-start,
655
- "l": left,
656
- "n": normal,
657
- "r": right,
658
- "s": start,
659
- "stretch": stretch,
660
- ),
661
- ),
662
-
663
- "justify-self": (
664
- "prefix": "js",
665
- "values": (
666
- "auto": auto,
667
- "c": center,
668
- "e": end,
669
- "fe": flex-end,
670
- "fs": flex-start,
671
- "l": left,
672
- "n": normal,
673
- "r": right,
674
- "s": start,
675
- "stretch": stretch,
676
- ),
677
- ),
678
-
679
- "row-gap": (
680
- "prefix": "rg",
681
- "values": (
682
- "1": $yma-row-gap,
683
- "2": $yma-row-gap * 2,
684
- "3": $yma-row-gap * 3,
685
- "4": $yma-row-gap * 4,
686
- "5": $yma-row-gap * 5,
687
- "6": $yma-row-gap * 6,
688
- "7": $yma-row-gap * 7,
689
- "8": $yma-row-gap * 8,
690
- "9": $yma-row-gap * 9,
691
- "10": $yma-row-gap * 10,
692
- "11": $yma-row-gap * 11,
693
- "12": $yma-row-gap * 12,
694
- "13": $yma-row-gap * 13,
695
- "14": $yma-row-gap * 14,
696
- "15": $yma-row-gap * 15,
697
- "16": $yma-row-gap * 16,
698
- ),
699
- ),
700
-
701
- // layout
702
- "aspect-ratio":
703
- (
704
- "prefix": "ar",
705
- "values": (
706
- "auto": auto,
707
- "l": "16/9",
708
- "s": "1/1",
709
- ),
710
- ),
711
-
712
- "columns": (
713
- "prefix": "cols",
714
- "values": (
715
- "1": 1,
716
- "2": 2,
717
- "3": 3,
718
- "4": 4,
719
- "5": 5,
720
- "6": 6,
721
- "7": 7,
722
- "8": 8,
723
- "9": 9,
724
- "10": 10,
725
- "11": 11,
726
- "12": 12,
727
- "13": 13,
728
- "14": 14,
729
- "15": 15,
730
- "16": 16,
731
- ),
732
- ),
733
-
734
- "bottom": (
735
- "prefix": "dir-b",
736
- "values": (
737
- "0": $yma-direction * 0,
738
- "1": $yma-direction,
739
- "2": $yma-direction * 2,
740
- "3": $yma-direction * 4,
741
- "4": $yma-direction * 6,
742
- "5": $yma-direction * 8,
743
- "6": $yma-direction * 10,
744
- "7": $yma-direction * 12,
745
- "8": $yma-direction * 14,
746
- "9": $yma-direction * 16,
747
- "10": $yma-direction * 18,
748
- "11": $yma-direction * 20,
749
- "12": $yma-direction * 22,
750
- "13": $yma-direction * 24,
751
- "14": $yma-direction * 26,
752
- "15": $yma-direction * 28,
753
- "16": $yma-direction * 30,
754
- "none": none,
755
- ),
756
- ),
757
-
758
- "inset": (
759
- "prefix": "dir-i",
760
- "values": (
761
- "0": $yma-direction * 0,
762
- "1": $yma-direction,
763
- "2": $yma-direction * 2,
764
- "3": $yma-direction * 4,
765
- "4": $yma-direction * 6,
766
- "5": $yma-direction * 8,
767
- "6": $yma-direction * 10,
768
- "7": $yma-direction * 12,
769
- "8": $yma-direction * 14,
770
- "9": $yma-direction * 16,
771
- "10": $yma-direction * 18,
772
- "11": $yma-direction * 20,
773
- "12": $yma-direction * 22,
774
- "13": $yma-direction * 24,
775
- "14": $yma-direction * 26,
776
- "15": $yma-direction * 28,
777
- "16": $yma-direction * 30,
778
- "none": none,
779
- ),
780
- ),
781
-
782
- "left": (
783
- "prefix": "dir-l",
784
- "values": (
785
- "0": $yma-direction * 0,
786
- "1": $yma-direction,
787
- "2": $yma-direction * 2,
788
- "3": $yma-direction * 4,
789
- "4": $yma-direction * 6,
790
- "5": $yma-direction * 8,
791
- "6": $yma-direction * 10,
792
- "7": $yma-direction * 12,
793
- "8": $yma-direction * 14,
794
- "9": $yma-direction * 16,
795
- "10": $yma-direction * 18,
796
- "11": $yma-direction * 20,
797
- "12": $yma-direction * 22,
798
- "13": $yma-direction * 24,
799
- "14": $yma-direction * 26,
800
- "15": $yma-direction * 28,
801
- "16": $yma-direction * 30,
802
- "none": none,
803
- ),
804
- ),
805
-
806
- "right": (
807
- "prefix": "dir-r",
808
- "values": (
809
- "0": $yma-direction * 0,
810
- "1": $yma-direction,
811
- "2": $yma-direction * 2,
812
- "3": $yma-direction * 4,
813
- "4": $yma-direction * 6,
814
- "5": $yma-direction * 8,
815
- "6": $yma-direction * 10,
816
- "7": $yma-direction * 12,
817
- "8": $yma-direction * 14,
818
- "9": $yma-direction * 16,
819
- "10": $yma-direction * 18,
820
- "11": $yma-direction * 20,
821
- "12": $yma-direction * 22,
822
- "13": $yma-direction * 24,
823
- "14": $yma-direction * 26,
824
- "15": $yma-direction * 28,
825
- "16": $yma-direction * 30,
826
- "none": none,
827
- ),
828
- ),
829
-
830
- "top": (
831
- "prefix": "dir-t",
832
- "values": (
833
- "0": $yma-direction * 0,
834
- "1": $yma-direction,
835
- "2": $yma-direction * 2,
836
- "3": $yma-direction * 4,
837
- "4": $yma-direction * 6,
838
- "5": $yma-direction * 8,
839
- "6": $yma-direction * 10,
840
- "7": $yma-direction * 12,
841
- "8": $yma-direction * 14,
842
- "9": $yma-direction * 16,
843
- "10": $yma-direction * 18,
844
- "11": $yma-direction * 20,
845
- "12": $yma-direction * 22,
846
- "13": $yma-direction * 24,
847
- "14": $yma-direction * 26,
848
- "15": $yma-direction * 28,
849
- "16": $yma-direction * 30,
850
- "none": none,
851
- ),
852
- ),
853
-
854
- "display": (
855
- "prefix": "d",
856
- "values": (
857
- "b": block,
858
- "f": flex,
859
- "fr": flow-root,
860
- "g": grid,
861
- "i": inline,
862
- "ib": inline-block,
863
- "if": inline-flex,
864
- "none": none,
865
- ),
866
- ),
867
-
868
- "float": (
869
- "prefix": "flo",
870
- "values": (
871
- "ie": inline-end,
872
- "is": inline-start,
873
- "l": left,
874
- "none": none,
875
- "r": right,
876
- ),
877
- ),
878
-
879
- "object-fit": (
880
- "prefix": "of",
881
- "values": (
882
- "c": cover,
883
- "f": fill,
884
- "none": none,
885
- "sd": scale-down,
886
- ),
887
- ),
888
-
889
- "object-position": (
890
- "prefix": "op",
891
- "values": (
892
- "b": bottom,
893
- "c": center,
894
- "lb": left bottom,
895
- "left": left,
896
- "lt": left top,
897
- "r": right,
898
- "rb": right bottom,
899
- "rt": right top,
900
- "t": top,
901
- ),
902
- ),
903
-
904
- "overflow": (
905
- "prefix": "ovf",
906
- "values": (
907
- "auto": auto,
908
- "c": clip,
909
- "h": hidden,
910
- "s": scroll,
911
- "v": visible,
912
- ),
913
- ),
914
-
915
- "overflow-x": (
916
- "prefix": "ovf-x",
917
- "values": (
918
- "auto": auto,
919
- "c": clip,
920
- "h": hidden,
921
- "s": scroll,
922
- "v": visible,
923
- ),
924
- ),
925
-
926
- "overflow-y": (
927
- "prefix": "ovf-y",
928
- "values": (
929
- "auto": auto,
930
- "c": clip,
931
- "h": hidden,
932
- "s": scroll,
933
- "v": visible,
934
- ),
935
- ),
936
-
937
- "position": (
938
- "prefix": "p",
939
- "values": (
940
- "a": absolute,
941
- "f": fixed,
942
- "r": relative,
943
- "s": static,
944
- "t": sticky,
945
- ),
946
- ),
947
-
948
- "z-index": (
949
- "prefix": "zi",
950
- "values": (
951
- "0": 0,
952
- "10": 10,
953
- "20": 20,
954
- "30": 30,
955
- "40": 40,
956
- "50": 50,
957
- "60": 60,
958
- "70": 70,
959
- "80": 80,
960
- "90": 90,
961
- "auto": auto,
962
- ),
963
- ),
964
-
965
- // miscellaneous
966
- "appearance":
967
- (
968
- "prefix": "a",
969
- "values": (
970
- "auto": auto,
971
- "none": none,
972
- ),
973
- ),
974
-
975
- "cursor": (
976
- "prefix": "c",
977
- "values": (
978
- "auto": auto,
979
- "c": crosshair,
980
- "er": e-resize,
981
- "h": help,
982
- "m": move,
983
- "na": not-allowed,
984
- "nr": n-resize,
985
- "p": pointer,
986
- "t": text,
987
- "w": wait,
988
- ),
989
- ),
990
-
991
- "pointer-events": (
992
- "prefix": "pe",
993
- "values": (
994
- "auto": auto,
995
- "none": none,
996
- ),
997
- ),
998
-
999
- "resize": (
1000
- "prefix": "r",
1001
- "values": (
1002
- "b": both,
1003
- "h": horizontal,
1004
- "none": none,
1005
- "v": vertical,
1006
- ),
1007
- ),
1008
-
1009
- "user-select": (
1010
- "prefix": "us",
1011
- "values": (
1012
- "auto": auto,
1013
- "none": none,
1014
- ),
1015
- ),
1016
-
1017
- // tables
1018
- "caption-side":
1019
- (
1020
- "prefix": "cs",
1021
- "values": (
1022
- "b": bottom,
1023
- "t": top,
1024
- ),
1025
- ),
1026
-
1027
- "table-layout": (
1028
- "prefix": "tl",
1029
- "values": (
1030
- "auto": auto,
1031
- "f": fixed,
1032
- ),
1033
- ),
1034
-
1035
- // typography
1036
- "font-size":
1037
- (
1038
- "prefix": "fs",
1039
- "values": (
1040
- "xs": $yma-font-size-xs,
1041
- "sm": $yma-font-size-sm,
1042
- "md": $yma-font-size-md,
1043
- "lg": $yma-font-size-lg,
1044
- "xl": $yma-font-size-xl,
1045
- "xxl": $yma-font-size-xxl,
1046
- "3xl": $yma-font-size-3xl,
1047
- "6xl": $yma-font-size-6xl,
1048
- ),
1049
- ),
1050
-
1051
- "font-style": (
1052
- "prefix": "fs",
1053
- "values": (
1054
- "i": italic,
1055
- "n": normal,
1056
- ),
1057
- ),
1058
-
1059
- "font-weight": (
1060
- "prefix": "fw",
1061
- "values": (
1062
- "100": 100,
1063
- "200": 200,
1064
- "300": 300,
1065
- "400": 400,
1066
- "500": 500,
1067
- "600": 600,
1068
- "700": 700,
1069
- "800": 800,
1070
- "900": 900,
1071
- ),
1072
- ),
1073
-
1074
- "line-height": (
1075
- "prefix": "lh",
1076
- "values": (
1077
- "1": 1,
1078
- "2": 1.25,
1079
- "3": 1.375,
1080
- "4": 1.5,
1081
- "5": 1.625,
1082
- "6": 2,
1083
- ),
1084
- ),
1085
-
1086
- "list-style-type": (
1087
- "prefix": "lst",
1088
- "values": (
1089
- "c": circle,
1090
- "d": disc,
1091
- "s": square,
1092
- ),
1093
- ),
1094
-
1095
- "overflow-wrap": (
1096
- "prefix": "ow",
1097
- "values": (
1098
- "bw": break-word,
1099
- "n": normal,
1100
- ),
1101
- ),
1102
-
1103
- "text-align": (
1104
- "prefix": "ta",
1105
- "values": (
1106
- "c": center,
1107
- "e": end,
1108
- "j": justify,
1109
- "ja": justify-all,
1110
- "l": left,
1111
- "mp": match-parent,
1112
- "r": right,
1113
- "s": start,
1114
- ),
1115
- ),
1116
-
1117
- "text-decoration-line": (
1118
- "prefix": "tdl",
1119
- "values": (
1120
- "none": none,
1121
- "u": underline,
1122
- "o": overline,
1123
- "lt": line-through,
1124
- ),
1125
- ),
1126
-
1127
- "text-decoration-style": (
1128
- "prefix": "tds",
1129
- "values": (
1130
- "none": none,
1131
- "d": dashed,
1132
- "h": hidden,
1133
- "s": solid,
1134
- ),
1135
- ),
1136
-
1137
- "text-decoration-thickness": (
1138
- "prefix": "tdt",
1139
- "values": (
1140
- "auto": auto,
1141
- "ff": from-font,
1142
- "0": $yma-decoration-thickness * 0,
1143
- "1": $yma-decoration-thickness * 1,
1144
- "2": $yma-decoration-thickness * 2,
1145
- "3": $yma-decoration-thickness * 3,
1146
- "4": $yma-decoration-thickness * 4,
1147
- ),
1148
- ),
1149
-
1150
- "text-decoration": (
1151
- "prefix": "td",
1152
- "values": (
1153
- "none": none,
1154
- "u": underline,
1155
- ),
1156
- )
1157
- );
1158
-
1159
- @each $property, $map in $yma-utilities {
1160
- $prefix: map-get($map, "prefix");
1161
- $values: map-get($map, "values");
1162
-
1163
- @each $k, $v in $values {
1164
- @if ($k == "default") {
1165
- .#{$prefix} {
1166
- #{$property}: $v;
1167
- }
1168
- } @else {
1169
- .#{$prefix}-#{$k} {
1170
- #{$property}: $v;
1171
- }
1172
- }
1173
- }
1174
-
1175
- // responsive variants
1176
- @each $bp, $bp-value in $yma-breakpoints {
1177
- @each $k, $v in $values {
1178
- .#{$bp}\:#{$prefix}-#{$k} {
1179
- @media (min-width: $bp-value) {
1180
- #{$property}: $v;
1181
- }
1182
- }
1183
- }
1184
- }
1185
-
1186
- // hover variants
1187
- @each $k, $v in $values {
1188
- @if ($k == "default") {
1189
- .h\:#{$prefix}:hover {
1190
- #{$property}: $v;
1191
- }
1192
- } @else {
1193
- .h\:#{$prefix}-#{$k}:hover {
1194
- #{$property}: $v;
1195
- }
1196
- }
1197
- }
1198
- }
1199
-
1200
- // variants
1201
- @include variants("height", "h", $yma-height);
1202
- @include variants("max-height", "max-h", $yma-height);
1203
- @include variants("min-height", "min-h", $yma-height);
1204
-
1205
- @include variants("width", "w", $yma-width);
1206
- @include variants("max-width", "max-w", $yma-width);
1207
- @include variants("min-width", "min-w", $yma-width);
1208
-
1209
- @include dimension-variants("dim", $yma-height, $yma-width);
1210
- @include dimension-variants("max-dim", $yma-height, $yma-width);
1211
- @include dimension-variants("min-dim", $yma-height, $yma-width);
1212
-
1213
- @include variants("margin", "m", $yma-margin);
1214
- @include variants("margin-bottom", "mb", $yma-margin);
1215
- @include variants("margin-left", "ml", $yma-margin);
1216
- @include variants("margin-right", "mr", $yma-margin);
1217
- @include variants("margin-top", "mt", $yma-margin);
1218
- @include x-axis-variants("margin", "mx", $yma-margin);
1219
- @include y-axis-variants("margin", "my", $yma-margin);
1220
- @include spacing-x("s-x", $yma-spacing);
1221
- @include spacing-y("s-y", $yma-spacing);
1222
-
1223
- @include variants("padding", "p", $yma-padding);
1224
- @include variants("padding-bottom", "pb", $yma-padding);
1225
- @include variants("padding-left", "pl", $yma-padding);
1226
- @include variants("padding-right", "pr", $yma-padding);
1227
- @include variants("padding-top", "pt", $yma-padding);
1228
- @include x-axis-variants("padding", "px", $yma-padding);
1229
- @include y-axis-variants("padding", "py", $yma-padding);
1230
-
1231
- @include variants("flex-basis", "fb", $yma-flex-basis);
1232
-
1233
- // extensions
1234
- @include extensions(
1235
- $yma-extension,
1236
- (
1237
- "h": height,
1238
- "max-h": max-height,
1239
- "max-w": max-width,
1240
- "min-h": min-height,
1241
- "min-w": min-width,
1242
- "w": width,
1243
- )
1244
- );
1245
-
1246
- @include height-extensions($yma-height-extension);
1247
- @include width-extensions($yma-width-extension);
1248
- @include dimension-extensions($yma-extension);
1249
- @include spacing-extensions($yma-extension, ("m"), "margin");
1250
- @include spacing-extensions($yma-extension, ("mb"), "margin-bottom");
1251
- @include spacing-extensions($yma-extension, ("ml"), "margin-left");
1252
- @include spacing-extensions($yma-extension, ("mr"), "margin-right");
1253
- @include spacing-extensions($yma-extension, ("mt"), "margin-top");
1254
- @include spacing-extensions($yma-extension, ("p"), "padding");
1255
- @include spacing-extensions($yma-extension, ("pb"), "padding-bottom");
1256
- @include spacing-extensions($yma-extension, ("pl"), "padding-left");
1257
- @include spacing-extensions($yma-extension, ("pr"), "padding-right");
1258
- @include spacing-extensions($yma-extension, ("pt"), "padding-top");
1259
-
1260
- @include extensions(
1261
- $yma-extension,
1262
- (
1263
- "fb": flex-basis,
1264
- )
1265
- );