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