yummacss 0.1.1 → 1.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,14 +1,547 @@
1
- @use 'sass:math';
1
+ @use "sass:math";
2
2
 
3
3
  $utilities: (
4
- "box-sizing": ("prefix": "bs",
5
- "values": ("bb": border-box,
6
- "cb": content-box,
7
- ),
4
+
5
+ // borders & background
6
+ "border-width": (
7
+ "prefix": "b",
8
+ "values": (
9
+ "0": $base-border * 0,
10
+ "1": $base-border,
11
+ "2": $base-border * 2,
12
+ "3": $base-border * 4,
13
+ "4": $base-border * 6,
14
+ "5": $base-border * 8,
15
+ "6": $base-border * 10,
16
+ "7": $base-border * 12,
17
+ "8": $base-border * 14
18
+ )
19
+ ),
20
+
21
+ "border-bottom-width": (
22
+ "prefix": "bb",
23
+ "values": (
24
+ "0": $base-border * 0,
25
+ "1": $base-border,
26
+ "2": $base-border * 2,
27
+ "3": $base-border * 4,
28
+ "4": $base-border * 6,
29
+ "5": $base-border * 8,
30
+ "6": $base-border * 10,
31
+ "7": $base-border * 12,
32
+ "8": $base-border * 14
33
+ )
34
+ ),
35
+
36
+ "border-left-width": (
37
+ "prefix": "bl",
38
+ "values": (
39
+ "0": $base-border * 0,
40
+ "1": $base-border,
41
+ "2": $base-border * 2,
42
+ "3": $base-border * 4,
43
+ "4": $base-border * 6,
44
+ "5": $base-border * 8,
45
+ "6": $base-border * 10,
46
+ "7": $base-border * 12,
47
+ "8": $base-border * 14
48
+ )
49
+ ),
50
+
51
+ "border-right-width": (
52
+ "prefix": "br",
53
+ "values": (
54
+ "0": $base-border * 0,
55
+ "1": $base-border,
56
+ "2": $base-border * 2,
57
+ "3": $base-border * 4,
58
+ "4": $base-border * 6,
59
+ "5": $base-border * 8,
60
+ "6": $base-border * 10,
61
+ "7": $base-border * 12,
62
+ "8": $base-border * 14
63
+ )
64
+ ),
65
+
66
+ "border-top-width": (
67
+ "prefix": "bt",
68
+ "values": (
69
+ "0": $base-border * 0,
70
+ "1": $base-border,
71
+ "2": $base-border * 2,
72
+ "3": $base-border * 4,
73
+ "4": $base-border * 6,
74
+ "5": $base-border * 8,
75
+ "6": $base-border * 10,
76
+ "7": $base-border * 12,
77
+ "8": $base-border * 14
78
+ )
79
+ ),
80
+
81
+ "border-radius": (
82
+ "prefix": "rad",
83
+ "values": (
84
+ "0": $base-border-radius * 0,
85
+ "1": $base-border-radius,
86
+ "2": $base-border-radius * 2,
87
+ "3": $base-border-radius * 4,
88
+ "4": $base-border-radius * 6,
89
+ "5": $base-border-radius * 8,
90
+ "6": $base-border-radius * 10,
91
+ "7": $base-border-radius * 12,
92
+ "8": $base-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": $base-border-radius * 0,
102
+ "1": $base-border-radius,
103
+ "2": $base-border-radius * 2,
104
+ "3": $base-border-radius * 4,
105
+ "4": $base-border-radius * 6,
106
+ "5": $base-border-radius * 8,
107
+ "6": $base-border-radius * 10,
108
+ "7": $base-border-radius * 12,
109
+ "8": $base-border-radius * 14
110
+ )
111
+ ),
112
+
113
+ "border-top-right-radius": (
114
+ "prefix": "rad-tr",
115
+ "values": (
116
+ "0": $base-border-radius * 0,
117
+ "1": $base-border-radius,
118
+ "2": $base-border-radius * 2,
119
+ "3": $base-border-radius * 4,
120
+ "4": $base-border-radius * 6,
121
+ "5": $base-border-radius * 8,
122
+ "6": $base-border-radius * 10,
123
+ "7": $base-border-radius * 12,
124
+ "8": $base-border-radius * 14
125
+ )
126
+ ),
127
+
128
+ "border-bottom-left-radius": (
129
+ "prefix": "rad-bl",
130
+ "values": (
131
+ "0": $base-border-radius * 0,
132
+ "1": $base-border-radius,
133
+ "2": $base-border-radius * 2,
134
+ "3": $base-border-radius * 4,
135
+ "4": $base-border-radius * 6,
136
+ "5": $base-border-radius * 8,
137
+ "6": $base-border-radius * 10,
138
+ "7": $base-border-radius * 12,
139
+ "8": $base-border-radius * 14
140
+ )
141
+ ),
142
+
143
+ "border-bottom-right-radius": (
144
+ "prefix": "rad-br",
145
+ "values": (
146
+ "0": $base-border-radius * 0,
147
+ "1": $base-border-radius,
148
+ "2": $base-border-radius * 2,
149
+ "3": $base-border-radius * 4,
150
+ "4": $base-border-radius * 6,
151
+ "5": $base-border-radius * 8,
152
+ "6": $base-border-radius * 10,
153
+ "7": $base-border-radius * 12,
154
+ "8": $base-border-radius * 14
155
+ )
156
+ ),
157
+
158
+ "box-shadow": (
159
+ "prefix": "bs",
160
+ "values": (
161
+ "default": 1px 3px 5px rgba(0, 0, 0, 0.1),
162
+ "xsm": 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
+ "xlg": 1px 3px 5px 2px rgba(0, 0, 0, 0.1)
167
+ )
168
+ ),
169
+
170
+ // box model
171
+ "box-sizing": (
172
+ "prefix": "bs",
173
+ "values": (
174
+ "bb": border-box,
175
+ "cb": content-box
176
+ )
177
+ ),
178
+
179
+ // flexbox & grid
180
+ "align-content": (
181
+ "prefix": "ac",
182
+ "values": (
183
+ "c": center,
184
+ "start": start,
185
+ "e": end,
186
+ "fs": flex-start,
187
+ "fe": flex-end,
188
+ "n": normal,
189
+ "sb": space-between,
190
+ "sa": space-around,
191
+ "se": space-evenly,
192
+ "stretch": stretch
193
+ )
194
+ ),
195
+
196
+ "align-items": (
197
+ "prefix": "ai",
198
+ "values": (
199
+ "n": normal,
200
+ "stretch": stretch,
201
+ "c": center,
202
+ "start": start,
203
+ "e": end,
204
+ "fs": flex-start,
205
+ "fe": flex-end
206
+ )
207
+ ),
208
+
209
+ "align-self": (
210
+ "prefix": "as",
211
+ "values": (
212
+ "auto": auto,
213
+ "n": normal,
214
+ "c": center,
215
+ "start": start,
216
+ "e": end,
217
+ "fs": flex-start,
218
+ "fe": flex-end,
219
+ "stretch": stretch
220
+ )
221
+ ),
222
+
223
+ "column-gap": (
224
+ "prefix": "cg",
225
+ "values": (
226
+ "1": $base-column-gap,
227
+ "2": $base-column-gap * 2,
228
+ "3": $base-column-gap * 3,
229
+ "4": $base-column-gap * 4,
230
+ "5": $base-column-gap * 5,
231
+ "6": $base-column-gap * 6,
232
+ "7": $base-column-gap * 7,
233
+ "8": $base-column-gap * 8,
234
+ "9": $base-column-gap * 9,
235
+ "10": $base-column-gap * 10,
236
+ "11": $base-column-gap * 11,
237
+ "12": $base-column-gap * 12,
238
+ "13": $base-column-gap * 13,
239
+ "14": $base-column-gap * 14,
240
+ "15": $base-column-gap * 15,
241
+ "16": $base-column-gap * 16
242
+ )
243
+ ),
244
+
245
+ "flex-direction": (
246
+ "prefix": "fd",
247
+ "values": (
248
+ "r": row,
249
+ "rr": row-reverse,
250
+ "c": column,
251
+ "cr": column-reverse
252
+ )
253
+ ),
254
+
255
+ "flex-grow": (
256
+ "prefix": "fg",
257
+ "values": (
258
+ "1": $base-flex-grow,
259
+ "2": $base-flex-grow * 2,
260
+ "3": $base-flex-grow * 3,
261
+ "4": $base-flex-grow * 4,
262
+ "5": $base-flex-grow * 5,
263
+ "6": $base-flex-grow * 6,
264
+ "7": $base-flex-grow * 7,
265
+ "8": $base-flex-grow * 8
266
+ )
267
+ ),
268
+
269
+ "flex-shrink": (
270
+ "prefix": "fs",
271
+ "values": (
272
+ "1": $base-flex-shrink,
273
+ "2": $base-flex-shrink * 2,
274
+ "3": $base-flex-shrink * 3,
275
+ "4": $base-flex-shrink * 4,
276
+ "5": $base-flex-shrink * 5,
277
+ "6": $base-flex-shrink * 6,
278
+ "7": $base-flex-shrink * 7,
279
+ "8": $base-flex-shrink * 8
280
+ )
281
+ ),
282
+
283
+ "flex-wrap": (
284
+ "prefix": "fw",
285
+ "values": (
286
+ "nw": nowrap,
287
+ "w": wrap,
288
+ "wr": wrap-reverse
289
+ )
290
+ ),
291
+
292
+ "flex": (
293
+ "prefix": "f",
294
+ "values": (
295
+ "1": $base-flex,
296
+ "2": $base-flex * 2,
297
+ "3": $base-flex * 3,
298
+ "4": $base-flex * 4,
299
+ "5": $base-flex * 5,
300
+ "6": $base-flex * 6,
301
+ "7": $base-flex * 7,
302
+ "8": $base-flex * 8,
303
+ "9": $base-flex * 9,
304
+ "10": $base-flex * 10,
305
+ "11": $base-flex * 11,
306
+ "12": $base-flex * 12,
307
+ "13": $base-flex * 13,
308
+ "14": $base-flex * 14,
309
+ "15": $base-flex * 15,
310
+ "16": $base-flex * 16
311
+ )
312
+ ),
313
+
314
+ "grid-auto-columns": (
315
+ "prefix": "gac",
316
+ "values": (
317
+ "min": min-content,
318
+ "max": max-content,
319
+ "auto": auto
320
+ )
321
+ ),
322
+
323
+ "grid-auto-flow": (
324
+ "prefix": "gaf",
325
+ "values": (
326
+ "r": row,
327
+ "c": column,
328
+ "d": dense
329
+ )
330
+ ),
331
+
332
+ "grid-auto-rows": (
333
+ "prefix": "gar",
334
+ "values": (
335
+ "min": min-content,
336
+ "max": max-content,
337
+ "auto": auto
338
+ )
339
+ ),
340
+
341
+ "grid-template-columns": (
342
+ "prefix": "gtc",
343
+ "values": (
344
+ "1": repeat(1, auto),
345
+ "2": repeat(2, auto),
346
+ "3": repeat(3, auto),
347
+ "4": repeat(4, auto),
348
+ "5": repeat(5, auto),
349
+ "6": repeat(6, auto),
350
+ "7": repeat(7, auto),
351
+ "8": repeat(8, auto),
352
+ "9": repeat(9, auto),
353
+ "10": repeat(10, auto),
354
+ "11": repeat(11, auto),
355
+ "12": repeat(12, auto),
356
+ "13": repeat(13, auto),
357
+ "14": repeat(14, auto),
358
+ "15": repeat(15, auto),
359
+ "16": repeat(16, auto)
360
+ )
361
+ ),
362
+
363
+ "grid-template-rows": (
364
+ "prefix": "gtr",
365
+ "values": (
366
+ "1": repeat($base-template-rows, auto),
367
+ "2": repeat(2, auto),
368
+ "3": repeat(3, auto),
369
+ "4": repeat(4, auto),
370
+ "5": repeat(5, auto),
371
+ "6": repeat(6, auto),
372
+ "7": repeat(7, auto),
373
+ "8": repeat(8, auto),
374
+ "9": repeat(9, auto),
375
+ "10": repeat(10, auto),
376
+ "11": repeat(11, auto),
377
+ "12": repeat(12, auto),
378
+ "13": repeat(13, auto),
379
+ "14": repeat(14, auto),
380
+ "15": repeat(15, auto),
381
+ "16": repeat(16, auto)
382
+ )
383
+ ),
384
+
385
+ "justify-content": (
386
+ "prefix": "jc",
387
+ "values": (
388
+ "c": center,
389
+ "s": start,
390
+ "e": end,
391
+ "fs": flex-start,
392
+ "fe": flex-end,
393
+ "l": left,
394
+ "r": right,
395
+ "n": normal,
396
+ "sb": space-between,
397
+ "sa": space-around,
398
+ "se": space-evenly,
399
+ "stretch": stretch
400
+ )
401
+ ),
402
+
403
+ "justify-items": (
404
+ "prefix": "ji",
405
+ "values": (
406
+ "n": normal,
407
+ "stretch": stretch,
408
+ "c": center,
409
+ "s": start,
410
+ "e": end,
411
+ "fs": flex-start,
412
+ "fe": flex-end,
413
+ "l": left,
414
+ "r": right
415
+ )
416
+ ),
417
+
418
+ "justify-self": (
419
+ "prefix": "js",
420
+ "values": (
421
+ "auto": auto,
422
+ "n": normal,
423
+ "stretch": stretch,
424
+ "c": center,
425
+ "s": start,
426
+ "e": end,
427
+ "fs": flex-start,
428
+ "fe": flex-end,
429
+ "l": left,
430
+ "r": right
431
+ )
432
+ ),
433
+
434
+ "row-gap": (
435
+ "prefix": "rg",
436
+ "values": (
437
+ "1": $base-row-gap,
438
+ "2": $base-row-gap * 2,
439
+ "3": $base-row-gap * 3,
440
+ "4": $base-row-gap * 4,
441
+ "5": $base-row-gap * 5,
442
+ "6": $base-row-gap * 6,
443
+ "7": $base-row-gap * 7,
444
+ "8": $base-row-gap * 8,
445
+ "9": $base-row-gap * 9,
446
+ "10": $base-row-gap * 10,
447
+ "11": $base-row-gap * 11,
448
+ "12": $base-row-gap * 12,
449
+ "13": $base-row-gap * 13,
450
+ "14": $base-row-gap * 14,
451
+ "15": $base-row-gap * 15,
452
+ "16": $base-row-gap * 16
453
+ )
454
+ ),
455
+
456
+ // miscellaneous
457
+ "appearance": (
458
+ "prefix": "a",
459
+ "values": (
460
+ "none": none,
461
+ "auto": auto
462
+ )
463
+ ),
464
+
465
+ "cursor": (
466
+ "prefix": "c",
467
+ "values": (
468
+ "auto": auto,
469
+ "p": pointer,
470
+ "t": text,
471
+ "m": move,
472
+ "na": not-allowed,
473
+ "c": crosshair,
474
+ "h": help,
475
+ "er": e-resize,
476
+ "nr": n-resize,
477
+ "w": wait
478
+ )
479
+ ),
480
+
481
+ "pointer-events": (
482
+ "prefix": "pe",
483
+ "values": (
484
+ "auto": auto,
485
+ "none": none
486
+ )
487
+ ),
488
+
489
+ "user-select": (
490
+ "prefix": "us",
491
+ "values": (
492
+ "auto": auto,
493
+ "none": none
494
+ )
495
+ ),
496
+
497
+ "resize": (
498
+ "prefix": "r",
499
+ "values": (
500
+ "b": both,
501
+ "h": horizontal,
502
+ "v": vertical,
503
+ "none": none
504
+ )
505
+ ),
506
+
507
+ // positioning
508
+ "overflow": (
509
+ "prefix": "ovf",
510
+ "values": (
511
+ "v": visible,
512
+ "h": hidden,
513
+ "c": clip,
514
+ "s": scroll,
515
+ "auto": auto
516
+ )
517
+ ),
518
+
519
+ "overflow-x": (
520
+ "prefix": "ovf-x",
521
+ "values": (
522
+ "v": visible,
523
+ "h": hidden,
524
+ "c": clip,
525
+ "s": scroll,
526
+ "auto": auto
527
+ )
8
528
  ),
9
529
 
10
- "columns": ("prefix": "col",
11
- "values": ("1": $base-columns,
530
+ "overflow-y": (
531
+ "prefix": "ovf-y",
532
+ "values": (
533
+ "v": visible,
534
+ "h": hidden,
535
+ "c": clip,
536
+ "s": scroll,
537
+ "auto": auto
538
+ )
539
+ ),
540
+
541
+ "columns": (
542
+ "prefix": "col",
543
+ "values": (
544
+ "1": $base-columns,
12
545
  "2": $base-columns * 2,
13
546
  "3": $base-columns * 3,
14
547
  "4": $base-columns * 4,
@@ -23,12 +556,14 @@ $utilities: (
23
556
  "13": $base-columns * 13,
24
557
  "14": $base-columns * 14,
25
558
  "15": $base-columns * 15,
26
- "16": $base-columns * 16,
27
- ),
559
+ "16": $base-columns * 16
560
+ )
28
561
  ),
29
562
 
30
- "bottom": ("prefix": "dir-b",
31
- "values": ("default": $base-direction * 0,
563
+ "bottom": (
564
+ "prefix": "dir-b",
565
+ "values": (
566
+ "default": $base-direction * 0,
32
567
  "1": $base-direction,
33
568
  "2": $base-direction * 2,
34
569
  "3": $base-direction * 4,
@@ -45,12 +580,14 @@ $utilities: (
45
580
  "14": $base-direction * 26,
46
581
  "15": $base-direction * 28,
47
582
  "16": $base-direction * 30,
48
- "none": none,
49
- ),
583
+ "none": none
584
+ )
50
585
  ),
51
586
 
52
- "inset": ("prefix": "dir-i",
53
- "values": ("default": $base-direction * 0,
587
+ "inset": (
588
+ "prefix": "dir-i",
589
+ "values": (
590
+ "default": $base-direction * 0,
54
591
  "1": $base-direction,
55
592
  "2": $base-direction * 2,
56
593
  "3": $base-direction * 4,
@@ -67,12 +604,14 @@ $utilities: (
67
604
  "14": $base-direction * 26,
68
605
  "15": $base-direction * 28,
69
606
  "16": $base-direction * 30,
70
- "none": none,
71
- ),
607
+ "none": none
608
+ )
72
609
  ),
73
610
 
74
- "left": ("prefix": "dir-l",
75
- "values": ("default": $base-direction * 0,
611
+ "left": (
612
+ "prefix": "dir-l",
613
+ "values": (
614
+ "default": $base-direction * 0,
76
615
  "1": $base-direction,
77
616
  "2": $base-direction * 2,
78
617
  "3": $base-direction * 4,
@@ -89,12 +628,14 @@ $utilities: (
89
628
  "14": $base-direction * 26,
90
629
  "15": $base-direction * 28,
91
630
  "16": $base-direction * 30,
92
- "none": none,
93
- ),
631
+ "none": none
632
+ )
94
633
  ),
95
634
 
96
- "right": ("prefix": "dir-r",
97
- "values": ("default": $base-direction * 0,
635
+ "right": (
636
+ "prefix": "dir-r",
637
+ "values": (
638
+ "default": $base-direction * 0,
98
639
  "1": $base-direction,
99
640
  "2": $base-direction * 2,
100
641
  "3": $base-direction * 4,
@@ -111,274 +652,102 @@ $utilities: (
111
652
  "14": $base-direction * 26,
112
653
  "15": $base-direction * 28,
113
654
  "16": $base-direction * 30,
114
- "none": none,
115
- ),
655
+ "none": none
656
+ )
116
657
  ),
117
658
 
118
- "top": ("prefix": "dir-t",
119
- "values": ("default": $base-direction * 0,
659
+ "top": (
660
+ "prefix": "dir-t",
661
+ "values": (
662
+ "default": $base-direction * 0,
120
663
  "1": $base-direction,
121
664
  "2": $base-direction * 2,
122
665
  "3": $base-direction * 4,
123
666
  "4": $base-direction * 6,
124
667
  "5": $base-direction * 8,
125
668
  "6": $base-direction * 10,
126
- "7": $base-direction * 12,
127
- "8": $base-direction * 14,
128
- "9": $base-direction * 16,
129
- "10": $base-direction * 18,
130
- "11": $base-direction * 20,
131
- "12": $base-direction * 22,
132
- "13": $base-direction * 24,
133
- "14": $base-direction * 26,
134
- "15": $base-direction * 28,
135
- "16": $base-direction * 30,
136
- "none": none,
137
- ),
138
- ),
139
-
140
- "flex-wrap": ("prefix": "fw",
141
- "values": ("w": wrap,
142
- "wr": wrap-reverse,
143
- "nw": nowrap,
144
- ),
145
- ),
146
-
147
- "display": ("prefix": "dis",
148
- "values": ("b": block,
149
- "f": flex,
150
- "g": grid,
151
- "i": inline,
152
- "ib": inline-block,
153
- "if": inline-flex,
154
- "none": none,
155
- ),
156
- ),
157
-
158
- "float": ("prefix": "f",
159
- "values": ("l": left,
160
- "none": none,
161
- "r": right,
162
- ),
163
- ),
164
-
165
- "overflow": ("prefix": "ovf",
166
- "values": ("auto": auto,
167
- "c": clip,
168
- "h": hidden,
169
- "s": scroll,
170
- "v": visible,
171
- ),
172
- ),
173
-
174
- "overflow-x": ("prefix": "ovf-x",
175
- "values": ("auto": auto,
176
- "c": clip,
177
- "h": hidden,
178
- "s": scroll,
179
- "v": visible,
180
- ),
181
- ),
182
-
183
- "overflow-y": ("prefix": "ovf-y",
184
- "values": ("auto": auto,
185
- "c": clip,
186
- "h": hidden,
187
- "s": scroll,
188
- "v": visible,
189
- ),
190
- ),
191
-
192
- "position": ("prefix": "pos",
193
- "values": ("a": absolute,
194
- "f": fixed,
195
- "r": relative,
196
- "static": static,
197
- "sticky": sticky,
198
- ),
199
- ),
200
-
201
- "z-index": ("prefix": "zi",
202
- "values": ("0": 0,
203
- "10": 10,
204
- "20": 20,
205
- "30": 30,
206
- "40": 40,
207
- "50": 50,
208
- "60": 60,
209
- "70": 70,
210
- "80": 80,
211
- "90": 90,
212
- "auto": auto,
213
- ),
214
- ),
215
-
216
- "border-width": ("prefix": "b",
217
- "values": ("0": $base-border * 0,
218
- "1": $base-border,
219
- "2": $base-border * 2,
220
- "3": $base-border * 4,
221
- "4": $base-border * 6,
222
- "5": $base-border * 8,
223
- "6": $base-border * 10,
224
- "7": $base-border * 12,
225
- "8": $base-border * 14,
226
- ),
227
- ),
228
-
229
- "border-bottom-width": ("prefix": "bb",
230
- "values": ("0": $base-border * 0,
231
- "1": $base-border,
232
- "2": $base-border * 2,
233
- "3": $base-border * 4,
234
- "4": $base-border * 6,
235
- "5": $base-border * 8,
236
- "6": $base-border * 10,
237
- "7": $base-border * 12,
238
- "8": $base-border * 14,
239
- ),
240
- ),
241
-
242
- "border-left-width": ("prefix": "bl",
243
- "values": ("0": $base-border * 0,
244
- "1": $base-border,
245
- "2": $base-border * 2,
246
- "3": $base-border * 4,
247
- "4": $base-border * 6,
248
- "5": $base-border * 8,
249
- "6": $base-border * 10,
250
- "7": $base-border * 12,
251
- "8": $base-border * 14,
252
- ),
253
- ),
254
-
255
- "border-right-width": ("prefix": "br",
256
- "values": ("0": $base-border * 0,
257
- "1": $base-border,
258
- "2": $base-border * 2,
259
- "3": $base-border * 4,
260
- "4": $base-border * 6,
261
- "5": $base-border * 8,
262
- "6": $base-border * 10,
263
- "7": $base-border * 12,
264
- "8": $base-border * 14,
265
- ),
266
- ),
267
-
268
- "border-top-width": ("prefix": "bt",
269
- "values": ("0": $base-border * 0,
270
- "1": $base-border,
271
- "2": $base-border * 2,
272
- "3": $base-border * 4,
273
- "4": $base-border * 6,
274
- "5": $base-border * 8,
275
- "6": $base-border * 10,
276
- "7": $base-border * 12,
277
- "8": $base-border * 14,
278
- ),
279
- ),
280
-
281
- "border-radius": ("prefix": "rad",
282
- "values": ("0": $base-border-radius * 0,
283
- "1": $base-border-radius,
284
- "2": $base-border-radius * 2,
285
- "3": $base-border-radius * 4,
286
- "4": $base-border-radius * 6,
287
- "5": $base-border-radius * 8,
288
- "6": $base-border-radius * 10,
289
- "7": $base-border-radius * 12,
290
- "8": $base-border-radius * 14,
291
- "full": 100%,
292
- "half": 50%,
293
- ),
294
- ),
295
-
296
- "border-top-left-radius": ("prefix": "rad-tl",
297
- "values": ("0": $base-border-radius * 0,
298
- "1": $base-border-radius,
299
- "2": $base-border-radius * 2,
300
- "3": $base-border-radius * 4,
301
- "4": $base-border-radius * 6,
302
- "5": $base-border-radius * 8,
303
- "6": $base-border-radius * 10,
304
- "7": $base-border-radius * 12,
305
- "8": $base-border-radius * 14,
306
- ),
307
- ),
308
-
309
- "border-top-right-radius": ("prefix": "rad-tr",
310
- "values": ("0": $base-border-radius * 0,
311
- "1": $base-border-radius,
312
- "2": $base-border-radius * 2,
313
- "3": $base-border-radius * 4,
314
- "4": $base-border-radius * 6,
315
- "5": $base-border-radius * 8,
316
- "6": $base-border-radius * 10,
317
- "7": $base-border-radius * 12,
318
- "8": $base-border-radius * 14,
319
- ),
669
+ "7": $base-direction * 12,
670
+ "8": $base-direction * 14,
671
+ "9": $base-direction * 16,
672
+ "10": $base-direction * 18,
673
+ "11": $base-direction * 20,
674
+ "12": $base-direction * 22,
675
+ "13": $base-direction * 24,
676
+ "14": $base-direction * 26,
677
+ "15": $base-direction * 28,
678
+ "16": $base-direction * 30,
679
+ "none": none
680
+ )
320
681
  ),
321
682
 
322
- "border-bottom-left-radius": ("prefix": "rad-bl",
323
- "values": ("0": $base-border-radius * 0,
324
- "1": $base-border-radius,
325
- "2": $base-border-radius * 2,
326
- "3": $base-border-radius * 4,
327
- "4": $base-border-radius * 6,
328
- "5": $base-border-radius * 8,
329
- "6": $base-border-radius * 10,
330
- "7": $base-border-radius * 12,
331
- "8": $base-border-radius * 14,
332
- ),
683
+ "display": (
684
+ "prefix": "d",
685
+ "values": (
686
+ "b": block,
687
+ "i": inline,
688
+ "ib": inline-block,
689
+ "f": flex,
690
+ "if": inline-flex,
691
+ "g": grid,
692
+ "fr": flow-root,
693
+ "none": none
694
+ )
333
695
  ),
334
696
 
335
- "border-bottom-right-radius": ("prefix": "rad-br",
336
- "values": ("0": $base-border-radius * 0,
337
- "1": $base-border-radius,
338
- "2": $base-border-radius * 2,
339
- "3": $base-border-radius * 4,
340
- "4": $base-border-radius * 6,
341
- "5": $base-border-radius * 8,
342
- "6": $base-border-radius * 10,
343
- "7": $base-border-radius * 12,
344
- "8": $base-border-radius * 14,
345
- ),
697
+ "float": (
698
+ "prefix": "f",
699
+ "values": (
700
+ "none": none,
701
+ "l": left,
702
+ "r": right,
703
+ "is": inline-start,
704
+ "ie": inline-end
705
+ )
346
706
  ),
347
707
 
348
- "box-shadow": ("prefix": "bs",
349
- "values": ("default": 1px 3px 5px rgba(0, 0, 0, 0.1),
350
- "xsm": 1px 3px 5px -3px rgba(0, 0, 0, 0.1),
351
- "sm": 1px 3px 5px -2px rgba(0, 0, 0, 0.1),
352
- "md": 1px 3px 5px -1px rgba(0, 0, 0, 0.1),
353
- "lg": 1px 3px 5px 1px rgba(0, 0, 0, 0.1),
354
- "xlg": 1px 3px 5px 2px rgba(0, 0, 0, 0.1),
355
- ),
708
+ "position": (
709
+ "prefix": "pos",
710
+ "values": (
711
+ "static": static,
712
+ "r": relative,
713
+ "a": absolute,
714
+ "f": fixed,
715
+ "sticky": sticky
716
+ )
356
717
  ),
357
718
 
358
- "opacity": ("prefix": "o",
359
- "values": ("10": 0.1,
360
- "20": 0.2,
361
- "30": 0.3,
362
- "40": 0.4,
363
- "50": 0.5,
364
- "60": 0.6,
365
- "70": 0.7,
366
- "80": 0.8,
367
- "90": 0.9,
368
- "100": 1,
369
- ),
719
+ "z-index": (
720
+ "prefix": "zi",
721
+ "values": (
722
+ "0": 0,
723
+ "10": 10,
724
+ "20": 20,
725
+ "30": 30,
726
+ "40": 40,
727
+ "50": 50,
728
+ "60": 60,
729
+ "70": 70,
730
+ "80": 80,
731
+ "90": 90,
732
+ "auto": auto
733
+ )
370
734
  ),
371
735
 
372
- "font-size": ("prefix": "fs",
373
- "values": ("sm": $font-size-sm,
736
+ // typography & text
737
+ "font-size": (
738
+ "prefix": "fs",
739
+ "values": (
740
+ "sm": $base-font-size-sm,
374
741
  "md": $base-font-size,
375
- "lg": $font-size-lg,
376
- "xlg": $font-size-xlg,
377
- ),
742
+ "lg": $base-font-size-lg,
743
+ "xlg": $base-font-size-xlg
744
+ )
378
745
  ),
379
746
 
380
- "font-weight": ("prefix": "fw",
381
- "values": ("100": 100,
747
+ "font-weight": (
748
+ "prefix": "fw",
749
+ "values": (
750
+ "100": 100,
382
751
  "200": 200,
383
752
  "300": 300,
384
753
  "400": 400,
@@ -386,198 +755,101 @@ $utilities: (
386
755
  "600": 600,
387
756
  "700": 700,
388
757
  "800": 800,
389
- "900": 900,
390
- ),
391
- ),
392
-
393
- "text-align": ("prefix": "ta",
394
- "values": ("l": left,
395
- "c": center,
396
- "r": right,
397
- "j": justify,
398
- "s": start,
399
- "e": end,
400
- ),
758
+ "900": 900
759
+ )
401
760
  ),
402
761
 
403
- "text-decoration-line": ("prefix": "tdl",
404
- "values": ("none": none,
405
- "lt": line-through,
406
- "u": underline,
407
- ),
408
- ),
409
-
410
- "overflow-wrap": ("prefix": "ow",
411
- "values": ("ba": break-all,
412
- "bw": break-word,
413
- "ka": keep-all,
414
- "n": normal,
415
- ),
416
- ),
417
-
418
- "align-items": ("prefix": "ai",
419
- "values": ("c": center,
420
- "e": end,
421
- "start": start,
422
- "stretch": stretch,
423
- ),
762
+ "list-style-type": (
763
+ "prefix": "tst",
764
+ "values": (
765
+ "d": disc,
766
+ "c": circle,
767
+ "s": square
768
+ )
424
769
  ),
425
770
 
426
- "flex-direction": ("prefix": "fd",
427
- "values": ("c": column,
428
- "cr": column-reverse,
429
- "r": row,
430
- "rr": row-reverse,
431
- ),
771
+ "opacity": (
772
+ "prefix": "o",
773
+ "values": (
774
+ "10": 0.1,
775
+ "20": 0.2,
776
+ "30": 0.3,
777
+ "40": 0.4,
778
+ "50": 0.5,
779
+ "60": 0.6,
780
+ "70": 0.7,
781
+ "80": 0.8,
782
+ "90": 0.9,
783
+ "100": 1
784
+ )
432
785
  ),
433
786
 
434
- "justify-content": ("prefix": "jc",
435
- "values": ("c": center,
436
- "sa": space-around,
437
- "sb": space-between,
438
- "se": space-evenly,
787
+ "text-align": (
788
+ "prefix": "ta",
789
+ "values": (
439
790
  "s": start,
440
- ),
441
- ),
442
-
443
- "column-gap": ("prefix": "cg",
444
- "values": ("1": $base-column-gap,
445
- "2": $base-column-gap * 2,
446
- "3": $base-column-gap * 3,
447
- "4": $base-column-gap * 4,
448
- "5": $base-column-gap * 5,
449
- "6": $base-column-gap * 6,
450
- "7": $base-column-gap * 7,
451
- "8": $base-column-gap * 8,
452
- "9": $base-column-gap * 9,
453
- "10": $base-column-gap * 10,
454
- "11": $base-column-gap * 11,
455
- "12": $base-column-gap * 12,
456
- "13": $base-column-gap * 13,
457
- "14": $base-column-gap * 14,
458
- "15": $base-column-gap * 15,
459
- "16": $base-column-gap * 16,
460
- ),
461
- ),
462
-
463
- "row-gap": ("prefix": "rg",
464
- "values": ("1": $base-row-gap,
465
- "2": $base-row-gap * 2,
466
- "3": $base-row-gap * 3,
467
- "4": $base-row-gap * 4,
468
- "5": $base-row-gap * 5,
469
- "6": $base-row-gap * 6,
470
- "7": $base-row-gap * 7,
471
- "8": $base-row-gap * 8,
472
- "9": $base-row-gap * 9,
473
- "10": $base-row-gap * 10,
474
- "11": $base-row-gap * 11,
475
- "12": $base-row-gap * 12,
476
- "13": $base-row-gap * 13,
477
- "14": $base-row-gap * 14,
478
- "15": $base-row-gap * 15,
479
- "16": $base-row-gap * 16,
480
- ),
791
+ "e": end,
792
+ "l": left,
793
+ "r": right,
794
+ "c": center,
795
+ "j": justify,
796
+ "ja": justify-all,
797
+ "mp": match-parent
798
+ )
481
799
  ),
482
800
 
483
- "grid-template-columns": ("prefix": "gtc",
484
- "values": ("1": repeat(1, auto),
485
- "2": repeat(2, auto),
486
- "3": repeat(3, auto),
487
- "4": repeat(4, auto),
488
- "5": repeat(5, auto),
489
- "6": repeat(6, auto),
490
- "7": repeat(7, auto),
491
- "8": repeat(8, auto),
492
- "9": repeat(9, auto),
493
- "10": repeat(10, auto),
494
- "11": repeat(11, auto),
495
- "12": repeat(12, auto),
496
- "13": repeat(13, auto),
497
- "14": repeat(14, auto),
498
- "15": repeat(15, auto),
499
- "16": repeat(16, auto),
500
- ),
801
+ "text-decoration-line": (
802
+ "prefix": "tdl",
803
+ "values": (
804
+ "none": none,
805
+ "u": underline,
806
+ "o": overline,
807
+ "lt": line-through
808
+ )
501
809
  ),
502
810
 
503
- "grid-template-rows": ("prefix": "gtr",
504
- "values": ("1": repeat($base-template-rows, auto),
505
- "2": repeat(2, auto),
506
- "3": repeat(3, auto),
507
- "4": repeat(4, auto),
508
- "5": repeat(5, auto),
509
- "6": repeat(6, auto),
510
- "7": repeat(7, auto),
511
- "8": repeat(8, auto),
512
- "9": repeat(9, auto),
513
- "10": repeat(10, auto),
514
- "11": repeat(11, auto),
515
- "12": repeat(12, auto),
516
- "13": repeat(13, auto),
517
- "14": repeat(14, auto),
518
- "15": repeat(15, auto),
519
- "16": repeat(16, auto),
520
- ),
811
+ "text-decoration": (
812
+ "prefix": "td",
813
+ "values": (
814
+ "u": underline,
815
+ "none": none
816
+ )
521
817
  ),
522
818
 
523
- "resize": ("prefix": "r",
524
- "values": ("b": both,
525
- "h": horizontal,
526
- "none": none,
527
- "v": vertical,
528
- ),
819
+ "overflow-wrap": (
820
+ "prefix": "ow",
821
+ "values": (
822
+ "n": normal,
823
+ "bw": break-word
824
+ )
529
825
  ),
530
- );
531
-
532
- @each $property,
533
- $map in $utilities {
534
- $prefix: map-get($map, "prefix");
535
- $values: map-get($map, "values");
536
-
537
- @each $k,
538
- $v in $values {
539
- @if($k =="default") {
540
- .#{$prefix} {
541
- #{$property}: $v;
542
- }
543
- }
544
-
545
- @else {
546
- .#{$prefix}-#{$k} {
547
- #{$property}: $v;
548
- }
549
- }
550
- }
551
- }
552
-
553
- $custom-values: (
554
- 'auto': auto,
555
- 'full': 100%,
556
- 'half': 50%
826
+
557
827
  );
558
828
 
559
829
  @for $i from 0 through 100 {
560
- .h-#{$i} {
830
+ $suffix: #{$i};
831
+
832
+ .h-#{$suffix} {
561
833
  height: $i * $base-height;
562
834
  }
563
835
 
564
- .max-h-#{$i} {
836
+ .max-h-#{$suffix} {
565
837
  max-height: $i * $base-height;
566
838
  }
567
839
 
568
- .min-h-#{$i} {
840
+ .min-h-#{$suffix} {
569
841
  min-height: $i * $base-height;
570
842
  }
571
843
 
572
- .w-#{$i} {
844
+ .w-#{$suffix} {
573
845
  width: $i * $base-width;
574
846
  }
575
847
 
576
- .max-w-#{$i} {
848
+ .max-w-#{$suffix} {
577
849
  max-width: $i * $base-width;
578
850
  }
579
851
 
580
- .min-w-#{$i} {
852
+ .min-w-#{$suffix} {
581
853
  min-width: $i * $base-width;
582
854
  }
583
855
 
@@ -601,6 +873,16 @@ $custom-values: (
601
873
  margin-top: $i * $base-margin;
602
874
  }
603
875
 
876
+ .mx-#{$i} {
877
+ margin-left: $i * $base-margin;
878
+ margin-right: $i * $base-margin;
879
+ }
880
+
881
+ .my-#{$i} {
882
+ margin-top: $i * $base-margin;
883
+ margin-bottom: $i * $base-margin;
884
+ }
885
+
604
886
  .p-#{$i} {
605
887
  padding: $i * $base-padding;
606
888
  }
@@ -620,6 +902,37 @@ $custom-values: (
620
902
  .pt-#{$i} {
621
903
  padding-top: $i * $base-padding;
622
904
  }
905
+
906
+ .px-#{$i} {
907
+ padding-left: $i * $base-padding;
908
+ padding-right: $i * $base-padding;
909
+ }
910
+
911
+ .py-#{$i} {
912
+ padding-top: $i * $base-padding;
913
+ padding-bottom: $i * $base-padding;
914
+ }
915
+
916
+ .fb-#{$suffix} {
917
+ flex-basis: $i * $base-flex-basis;
918
+ }
919
+ }
920
+
921
+ @each $property, $map in $utilities {
922
+ $prefix: map-get($map, "prefix");
923
+ $values: map-get($map, "values");
924
+
925
+ @each $k, $v in $values {
926
+ @if ($k == "default") {
927
+ .#{$prefix} {
928
+ #{$property}: $v;
929
+ }
930
+ } @else {
931
+ .#{$prefix}-#{$k} {
932
+ #{$property}: $v;
933
+ }
934
+ }
935
+ }
623
936
  }
624
937
 
625
938
  @each $key, $value in $custom-values {
@@ -649,7 +962,7 @@ $custom-values: (
649
962
  }
650
963
 
651
964
  @each $key, $value in $custom-values {
652
- @if $key =='auto' {
965
+ @if $key == "auto" {
653
966
  .m-#{$key} {
654
967
  margin: $value;
655
968
  }
@@ -690,4 +1003,56 @@ $custom-values: (
690
1003
  padding-top: $value;
691
1004
  }
692
1005
  }
1006
+ }
1007
+
1008
+ @each $key, $value in $custom-height-values {
1009
+ .h-#{$key} {
1010
+ height: $value;
1011
+ }
1012
+
1013
+ .max-h-#{$key} {
1014
+ max-height: $value;
1015
+ }
1016
+
1017
+ .min-h-#{$key} {
1018
+ min-height: $value;
1019
+ }
1020
+
1021
+ .w-#{$key} {
1022
+ width: $value;
1023
+ }
1024
+
1025
+ .max-w-#{$key} {
1026
+ max-width: $value;
1027
+ }
1028
+
1029
+ .min-w-#{$key} {
1030
+ min-width: $value;
1031
+ }
1032
+ }
1033
+
1034
+ @each $key, $value in $custom-width-values {
1035
+ .h-#{$key} {
1036
+ height: $value;
1037
+ }
1038
+
1039
+ .max-h-#{$key} {
1040
+ max-height: $value;
1041
+ }
1042
+
1043
+ .min-h-#{$key} {
1044
+ min-height: $value;
1045
+ }
1046
+
1047
+ .w-#{$key} {
1048
+ width: $value;
1049
+ }
1050
+
1051
+ .max-w-#{$key} {
1052
+ max-width: $value;
1053
+ }
1054
+
1055
+ .min-w-#{$key} {
1056
+ min-width: $value;
1057
+ }
693
1058
  }