yummacss 0.1.1

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.
@@ -0,0 +1,693 @@
1
+ @use 'sass:math';
2
+
3
+ $utilities: (
4
+ "box-sizing": ("prefix": "bs",
5
+ "values": ("bb": border-box,
6
+ "cb": content-box,
7
+ ),
8
+ ),
9
+
10
+ "columns": ("prefix": "col",
11
+ "values": ("1": $base-columns,
12
+ "2": $base-columns * 2,
13
+ "3": $base-columns * 3,
14
+ "4": $base-columns * 4,
15
+ "5": $base-columns * 5,
16
+ "6": $base-columns * 6,
17
+ "7": $base-columns * 7,
18
+ "8": $base-columns * 8,
19
+ "9": $base-columns * 9,
20
+ "10": $base-columns * 10,
21
+ "11": $base-columns * 11,
22
+ "12": $base-columns * 12,
23
+ "13": $base-columns * 13,
24
+ "14": $base-columns * 14,
25
+ "15": $base-columns * 15,
26
+ "16": $base-columns * 16,
27
+ ),
28
+ ),
29
+
30
+ "bottom": ("prefix": "dir-b",
31
+ "values": ("default": $base-direction * 0,
32
+ "1": $base-direction,
33
+ "2": $base-direction * 2,
34
+ "3": $base-direction * 4,
35
+ "4": $base-direction * 6,
36
+ "5": $base-direction * 8,
37
+ "6": $base-direction * 10,
38
+ "7": $base-direction * 12,
39
+ "8": $base-direction * 14,
40
+ "9": $base-direction * 16,
41
+ "10": $base-direction * 18,
42
+ "11": $base-direction * 20,
43
+ "12": $base-direction * 22,
44
+ "13": $base-direction * 24,
45
+ "14": $base-direction * 26,
46
+ "15": $base-direction * 28,
47
+ "16": $base-direction * 30,
48
+ "none": none,
49
+ ),
50
+ ),
51
+
52
+ "inset": ("prefix": "dir-i",
53
+ "values": ("default": $base-direction * 0,
54
+ "1": $base-direction,
55
+ "2": $base-direction * 2,
56
+ "3": $base-direction * 4,
57
+ "4": $base-direction * 6,
58
+ "5": $base-direction * 8,
59
+ "6": $base-direction * 10,
60
+ "7": $base-direction * 12,
61
+ "8": $base-direction * 14,
62
+ "9": $base-direction * 16,
63
+ "10": $base-direction * 18,
64
+ "11": $base-direction * 20,
65
+ "12": $base-direction * 22,
66
+ "13": $base-direction * 24,
67
+ "14": $base-direction * 26,
68
+ "15": $base-direction * 28,
69
+ "16": $base-direction * 30,
70
+ "none": none,
71
+ ),
72
+ ),
73
+
74
+ "left": ("prefix": "dir-l",
75
+ "values": ("default": $base-direction * 0,
76
+ "1": $base-direction,
77
+ "2": $base-direction * 2,
78
+ "3": $base-direction * 4,
79
+ "4": $base-direction * 6,
80
+ "5": $base-direction * 8,
81
+ "6": $base-direction * 10,
82
+ "7": $base-direction * 12,
83
+ "8": $base-direction * 14,
84
+ "9": $base-direction * 16,
85
+ "10": $base-direction * 18,
86
+ "11": $base-direction * 20,
87
+ "12": $base-direction * 22,
88
+ "13": $base-direction * 24,
89
+ "14": $base-direction * 26,
90
+ "15": $base-direction * 28,
91
+ "16": $base-direction * 30,
92
+ "none": none,
93
+ ),
94
+ ),
95
+
96
+ "right": ("prefix": "dir-r",
97
+ "values": ("default": $base-direction * 0,
98
+ "1": $base-direction,
99
+ "2": $base-direction * 2,
100
+ "3": $base-direction * 4,
101
+ "4": $base-direction * 6,
102
+ "5": $base-direction * 8,
103
+ "6": $base-direction * 10,
104
+ "7": $base-direction * 12,
105
+ "8": $base-direction * 14,
106
+ "9": $base-direction * 16,
107
+ "10": $base-direction * 18,
108
+ "11": $base-direction * 20,
109
+ "12": $base-direction * 22,
110
+ "13": $base-direction * 24,
111
+ "14": $base-direction * 26,
112
+ "15": $base-direction * 28,
113
+ "16": $base-direction * 30,
114
+ "none": none,
115
+ ),
116
+ ),
117
+
118
+ "top": ("prefix": "dir-t",
119
+ "values": ("default": $base-direction * 0,
120
+ "1": $base-direction,
121
+ "2": $base-direction * 2,
122
+ "3": $base-direction * 4,
123
+ "4": $base-direction * 6,
124
+ "5": $base-direction * 8,
125
+ "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
+ ),
320
+ ),
321
+
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
+ ),
333
+ ),
334
+
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
+ ),
346
+ ),
347
+
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
+ ),
356
+ ),
357
+
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
+ ),
370
+ ),
371
+
372
+ "font-size": ("prefix": "fs",
373
+ "values": ("sm": $font-size-sm,
374
+ "md": $base-font-size,
375
+ "lg": $font-size-lg,
376
+ "xlg": $font-size-xlg,
377
+ ),
378
+ ),
379
+
380
+ "font-weight": ("prefix": "fw",
381
+ "values": ("100": 100,
382
+ "200": 200,
383
+ "300": 300,
384
+ "400": 400,
385
+ "500": 500,
386
+ "600": 600,
387
+ "700": 700,
388
+ "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
+ ),
401
+ ),
402
+
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
+ ),
424
+ ),
425
+
426
+ "flex-direction": ("prefix": "fd",
427
+ "values": ("c": column,
428
+ "cr": column-reverse,
429
+ "r": row,
430
+ "rr": row-reverse,
431
+ ),
432
+ ),
433
+
434
+ "justify-content": ("prefix": "jc",
435
+ "values": ("c": center,
436
+ "sa": space-around,
437
+ "sb": space-between,
438
+ "se": space-evenly,
439
+ "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
+ ),
481
+ ),
482
+
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
+ ),
501
+ ),
502
+
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
+ ),
521
+ ),
522
+
523
+ "resize": ("prefix": "r",
524
+ "values": ("b": both,
525
+ "h": horizontal,
526
+ "none": none,
527
+ "v": vertical,
528
+ ),
529
+ ),
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%
557
+ );
558
+
559
+ @for $i from 0 through 100 {
560
+ .h-#{$i} {
561
+ height: $i * $base-height;
562
+ }
563
+
564
+ .max-h-#{$i} {
565
+ max-height: $i * $base-height;
566
+ }
567
+
568
+ .min-h-#{$i} {
569
+ min-height: $i * $base-height;
570
+ }
571
+
572
+ .w-#{$i} {
573
+ width: $i * $base-width;
574
+ }
575
+
576
+ .max-w-#{$i} {
577
+ max-width: $i * $base-width;
578
+ }
579
+
580
+ .min-w-#{$i} {
581
+ min-width: $i * $base-width;
582
+ }
583
+
584
+ .m-#{$i} {
585
+ margin: $i * $base-margin;
586
+ }
587
+
588
+ .mb-#{$i} {
589
+ margin-bottom: $i * $base-margin;
590
+ }
591
+
592
+ .ml-#{$i} {
593
+ margin-left: $i * $base-margin;
594
+ }
595
+
596
+ .mr-#{$i} {
597
+ margin-right: $i * $base-margin;
598
+ }
599
+
600
+ .mt-#{$i} {
601
+ margin-top: $i * $base-margin;
602
+ }
603
+
604
+ .p-#{$i} {
605
+ padding: $i * $base-padding;
606
+ }
607
+
608
+ .pb-#{$i} {
609
+ padding-bottom: $i * $base-padding;
610
+ }
611
+
612
+ .pl-#{$i} {
613
+ padding-left: $i * $base-padding;
614
+ }
615
+
616
+ .pr-#{$i} {
617
+ padding-right: $i * $base-padding;
618
+ }
619
+
620
+ .pt-#{$i} {
621
+ padding-top: $i * $base-padding;
622
+ }
623
+ }
624
+
625
+ @each $key, $value in $custom-values {
626
+ .h-#{$key} {
627
+ height: $value;
628
+ }
629
+
630
+ .max-h-#{$key} {
631
+ max-height: $value;
632
+ }
633
+
634
+ .min-h-#{$key} {
635
+ min-height: $value;
636
+ }
637
+
638
+ .w-#{$key} {
639
+ width: $value;
640
+ }
641
+
642
+ .max-w-#{$key} {
643
+ max-width: $value;
644
+ }
645
+
646
+ .min-w-#{$key} {
647
+ min-width: $value;
648
+ }
649
+ }
650
+
651
+ @each $key, $value in $custom-values {
652
+ @if $key =='auto' {
653
+ .m-#{$key} {
654
+ margin: $value;
655
+ }
656
+
657
+ .mb-#{$key} {
658
+ margin-bottom: $value;
659
+ }
660
+
661
+ .ml-#{$key} {
662
+ margin-left: $value;
663
+ }
664
+
665
+ .mr-#{$key} {
666
+ margin-right: $value;
667
+ }
668
+
669
+ .mt-#{$key} {
670
+ margin-top: $value;
671
+ }
672
+
673
+ .p-#{$key} {
674
+ padding: $value;
675
+ }
676
+
677
+ .pb-#{$key} {
678
+ padding-bottom: $value;
679
+ }
680
+
681
+ .pl-#{$key} {
682
+ padding-left: $value;
683
+ }
684
+
685
+ .pr-#{$key} {
686
+ padding-right: $value;
687
+ }
688
+
689
+ .pt-#{$key} {
690
+ padding-top: $value;
691
+ }
692
+ }
693
+ }