@medyll/cssfabric 0.1.0 → 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.
- package/lib/styles/core/box/box.css +756 -1842
- package/lib/styles/core/box/box.min.css +1 -1
- package/lib/styles/core/box/box.responsive.css +3757 -10552
- package/lib/styles/core/box/box.responsive.min.css +1 -1
- package/lib/styles/core/color/color.css +908 -266
- package/lib/styles/core/color/color.min.css +1 -1
- package/lib/styles/core/color/color.responsive.css +4011 -2368
- package/lib/styles/core/color/color.responsive.min.css +1 -1
- package/lib/styles/core/flex/flex.responsive.css +0 -126
- package/lib/styles/core/flex/flex.responsive.min.css +1 -1
- package/lib/styles/core/grid/grid.responsive.css +0 -121
- package/lib/styles/core/grid/grid.responsive.min.css +1 -1
- package/lib/styles/core/menu/menu.responsive.css +0 -81
- package/lib/styles/core/menu/menu.responsive.min.css +1 -1
- package/lib/styles/core/overflow/overflow.responsive.css +0 -61
- package/lib/styles/core/overflow/overflow.responsive.min.css +1 -1
- package/lib/styles/core/scale/scale.css +286 -206
- package/lib/styles/core/scale/scale.min.css +1 -1
- package/lib/styles/core/scale/scale.responsive.css +1157 -1478
- package/lib/styles/core/scale/scale.responsive.min.css +1 -1
- package/lib/styles/core/table/table.responsive.css +0 -74
- package/lib/styles/core/table/table.responsive.min.css +1 -1
- package/lib/styles/core/text/text.css +4 -0
- package/lib/styles/core/text/text.responsive.css +0 -549
- package/lib/styles/core/text/text.responsive.min.css +1 -1
- package/lib/styles/core/vars.css +261 -125
- package/lib/styles/core/vars.min.css +1 -1
- package/lib/styles/cssfabric.css +2626 -2850
- package/lib/styles/cssfabric.min.css +4 -4
- package/lib/styles/cssfabric.responsive.css +10959 -17444
- package/lib/styles/cssfabric.responsive.min.css +9 -9
- package/package.json +1 -1
- package/src/_generated/export.variables.json +77 -78
- package/src/cssfabric/_utils.scss +22 -12
- package/src/cssfabric/modules/_cssfabric-config.scss +87 -17
- package/src/cssfabric/modules/box/_box-build.scss +103 -84
- package/src/cssfabric/modules/box/_box-vars.scss +48 -46
- package/src/cssfabric/modules/color/_color-build.scss +108 -24
- package/src/cssfabric/modules/scale/_scale-build.scss +26 -13
- package/src/cssfabric/modules/scale/_scale-vars.scss +50 -51
- package/src/cssfabric/modules/text/_text-build.scss +60 -3
- package/src/cssfabric/modules/text/text-responsive.scss +1 -0
- package/src/cssfabric/modules/theme/_theme-build.scss +27 -10
- package/src/cssfabric/modules/vars.scss +19 -86
package/package.json
CHANGED
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"color": {
|
|
48
48
|
"_data": {
|
|
49
49
|
"gray-config": {
|
|
50
|
-
"start": "#f4f4f4", "end": "#999", "steps":
|
|
50
|
+
"start": "#f4f4f4", "end": "#999", "steps": 5
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
,
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"bg-themed",
|
|
57
57
|
"border-color"],
|
|
58
58
|
"theme": {
|
|
59
|
-
"primary": "#
|
|
59
|
+
"primary": "#431700", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#ffffff"
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
,
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
,
|
|
73
|
-
"gray": "getGraySteps(
|
|
73
|
+
"gray": "getGraySteps(5, #f4f4f4, #999)"
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
,
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"palette",
|
|
89
89
|
"gray"],
|
|
90
90
|
"levelsLinked": {
|
|
91
|
-
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(
|
|
91
|
+
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
,
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
"palette",
|
|
109
109
|
"gray"],
|
|
110
110
|
"levelsLinked": {
|
|
111
|
-
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(
|
|
111
|
+
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
,
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
"palette",
|
|
129
129
|
"gray"],
|
|
130
130
|
"levelsLinked": {
|
|
131
|
-
"gray": ["getGraySteps(
|
|
131
|
+
"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
,
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
"keys": ["palette",
|
|
148
148
|
"gray"],
|
|
149
149
|
"levelsLinked": {
|
|
150
|
-
"gray": ["getGraySteps(
|
|
150
|
+
"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
,
|
|
@@ -165,8 +165,8 @@
|
|
|
165
165
|
"border-unit-config": "px",
|
|
166
166
|
"unit-size-config": 0.5,
|
|
167
167
|
"unit-border-size-config": 1,
|
|
168
|
-
"sizes-config":
|
|
169
|
-
"border-sizes-px-config":
|
|
168
|
+
"sizes-config": 12,
|
|
169
|
+
"border-sizes-px-config": 3,
|
|
170
170
|
"shadows-steps": 5,
|
|
171
171
|
"shadows_step_multiplier": 2,
|
|
172
172
|
"position-shorthand-config": "pos",
|
|
@@ -213,12 +213,12 @@
|
|
|
213
213
|
"ii",
|
|
214
214
|
"tb"],
|
|
215
215
|
"values": {
|
|
216
|
-
"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"
|
|
216
|
+
"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"
|
|
217
217
|
}
|
|
218
218
|
|
|
219
219
|
,
|
|
220
220
|
"levels": {
|
|
221
|
-
"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
|
|
221
|
+
"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
|
|
222
222
|
}
|
|
223
223
|
|
|
224
224
|
,
|
|
@@ -239,12 +239,12 @@
|
|
|
239
239
|
"ii",
|
|
240
240
|
"tb"],
|
|
241
241
|
"values": {
|
|
242
|
-
"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"
|
|
242
|
+
"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
,
|
|
246
246
|
"levels": {
|
|
247
|
-
"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
|
|
247
|
+
"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
|
|
248
248
|
}
|
|
249
249
|
|
|
250
250
|
,
|
|
@@ -265,12 +265,12 @@
|
|
|
265
265
|
"ii",
|
|
266
266
|
"tb"],
|
|
267
267
|
"values": {
|
|
268
|
-
"_": "_", "1": "1px", "2": "2px", "3": "3px"
|
|
268
|
+
"_": "_", "1": "1px", "2": "2px", "3": "3px"
|
|
269
269
|
}
|
|
270
270
|
|
|
271
271
|
,
|
|
272
272
|
"levels": {
|
|
273
|
-
"_": ["_", 1, 2, 3
|
|
273
|
+
"_": ["_", 1, 2, 3]
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
,
|
|
@@ -282,12 +282,12 @@
|
|
|
282
282
|
|
|
283
283
|
"tag": "shad",
|
|
284
284
|
"values": {
|
|
285
|
-
"2": "0.83333333331.724137931", "4": "1.66666666673.4482758621", "8": "3.33333333336.8965517241", "16": "6.666666666713.7931034483", "32": "13.333333333327.5862068966"
|
|
285
|
+
"2": "0.83333333331.724137931", "4": "1.66666666673.4482758621", "8": "3.33333333336.8965517241", "16": "6.666666666713.7931034483", "32": "13.333333333327.5862068966"
|
|
286
286
|
}
|
|
287
287
|
|
|
288
288
|
,
|
|
289
289
|
"levels": {
|
|
290
|
-
"_": [2, 4, 8, 16, 32
|
|
290
|
+
"_": [2, 4, 8, 16, 32]
|
|
291
291
|
}
|
|
292
292
|
|
|
293
293
|
,
|
|
@@ -298,15 +298,15 @@
|
|
|
298
298
|
}
|
|
299
299
|
|
|
300
300
|
,
|
|
301
|
-
"
|
|
301
|
+
"flex": {
|
|
302
302
|
"_data": {
|
|
303
303
|
|
|
304
|
-
"moduleName": "
|
|
305
|
-
"moduleNameShort": "
|
|
304
|
+
"moduleName": "flex",
|
|
305
|
+
"moduleNameShort": "flex",
|
|
306
306
|
"horCode": "h",
|
|
307
307
|
"vertCode": "v",
|
|
308
308
|
"gridFullWidth": "main",
|
|
309
|
-
"grow-shrink-steps":
|
|
309
|
+
"grow-shrink-steps": 2,
|
|
310
310
|
"cssProps": {
|
|
311
311
|
"flexWrap": {
|
|
312
312
|
"wrap": "wrap", "wrap-reverse": "wrap-reverse"
|
|
@@ -334,15 +334,11 @@
|
|
|
334
334
|
"start": "flex-start", "end": "flex-end", "stretch": "stretch"
|
|
335
335
|
}
|
|
336
336
|
}
|
|
337
|
-
|
|
338
|
-
,
|
|
339
|
-
"grid-max-rows": 8,
|
|
340
|
-
"grid-max-cols": 12
|
|
341
337
|
}
|
|
342
338
|
|
|
343
339
|
,
|
|
344
340
|
"_metadata": {
|
|
345
|
-
"title": "
|
|
341
|
+
"title": "flex", "tag": "flex", "description": "cssfabric flex system module"
|
|
346
342
|
}
|
|
347
343
|
|
|
348
344
|
,
|
|
@@ -350,7 +346,7 @@
|
|
|
350
346
|
"attributes": {
|
|
351
347
|
"grid": {
|
|
352
348
|
|
|
353
|
-
"tag": "
|
|
349
|
+
"tag": "flex",
|
|
354
350
|
"keys": ["v",
|
|
355
351
|
"h"],
|
|
356
352
|
"classNames": {
|
|
@@ -358,62 +354,27 @@
|
|
|
358
354
|
}
|
|
359
355
|
|
|
360
356
|
,
|
|
361
|
-
"about": "a classic grid system"
|
|
357
|
+
"about": "a classic flex grid system, and hey, it gets height !"
|
|
362
358
|
}
|
|
363
359
|
|
|
364
360
|
,
|
|
365
361
|
"self": {
|
|
366
|
-
"tag": "self", "keys": ["start", "end", "stretch"], "about": "
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
,
|
|
373
|
-
"menu": {
|
|
374
|
-
"_data": {
|
|
375
|
-
|
|
376
|
-
"menu_class_name": "menu",
|
|
377
|
-
"menu_class_name_short": "ul",
|
|
378
|
-
"orientations": {
|
|
379
|
-
"v": "vertical", "h": "horizontal"
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
,
|
|
383
|
-
"menu_item_class_name": "menu-item",
|
|
384
|
-
"menu_item_class_name_short": "li",
|
|
385
|
-
"menu_item_disabled_tag": "disabled",
|
|
386
|
-
"menu_item_selected_tag": "selected",
|
|
387
|
-
"menu_dropdown_tag": "drop",
|
|
388
|
-
"menu_dropdown_open": "open",
|
|
389
|
-
"menu_dropdown_close": "close"
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
,
|
|
393
|
-
"_metadata": {
|
|
394
|
-
"title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
,
|
|
398
|
-
"_docs": {
|
|
399
|
-
"attributes": {
|
|
400
|
-
"menu": {
|
|
401
|
-
"tag": "menu", "keys": ["h", "v"]
|
|
362
|
+
"tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"
|
|
402
363
|
}
|
|
403
364
|
}
|
|
404
365
|
}
|
|
405
366
|
}
|
|
406
367
|
|
|
407
368
|
,
|
|
408
|
-
"
|
|
369
|
+
"grid": {
|
|
409
370
|
"_data": {
|
|
410
371
|
|
|
411
|
-
"moduleName": "
|
|
412
|
-
"moduleNameShort": "
|
|
372
|
+
"moduleName": "grid",
|
|
373
|
+
"moduleNameShort": "grid",
|
|
413
374
|
"horCode": "h",
|
|
414
375
|
"vertCode": "v",
|
|
415
376
|
"gridFullWidth": "main",
|
|
416
|
-
"grow-shrink-steps":
|
|
377
|
+
"grow-shrink-steps": 4,
|
|
417
378
|
"cssProps": {
|
|
418
379
|
"flexWrap": {
|
|
419
380
|
"wrap": "wrap", "wrap-reverse": "wrap-reverse"
|
|
@@ -441,11 +402,15 @@
|
|
|
441
402
|
"start": "flex-start", "end": "flex-end", "stretch": "stretch"
|
|
442
403
|
}
|
|
443
404
|
}
|
|
405
|
+
|
|
406
|
+
,
|
|
407
|
+
"grid-max-rows": 8,
|
|
408
|
+
"grid-max-cols": 12
|
|
444
409
|
}
|
|
445
410
|
|
|
446
411
|
,
|
|
447
412
|
"_metadata": {
|
|
448
|
-
"title": "
|
|
413
|
+
"title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"
|
|
449
414
|
}
|
|
450
415
|
|
|
451
416
|
,
|
|
@@ -453,7 +418,7 @@
|
|
|
453
418
|
"attributes": {
|
|
454
419
|
"grid": {
|
|
455
420
|
|
|
456
|
-
"tag": "
|
|
421
|
+
"tag": "grid",
|
|
457
422
|
"keys": ["v",
|
|
458
423
|
"h"],
|
|
459
424
|
"classNames": {
|
|
@@ -461,12 +426,12 @@
|
|
|
461
426
|
}
|
|
462
427
|
|
|
463
428
|
,
|
|
464
|
-
"about": "a classic
|
|
429
|
+
"about": "a classic grid system"
|
|
465
430
|
}
|
|
466
431
|
|
|
467
432
|
,
|
|
468
433
|
"self": {
|
|
469
|
-
"tag": "self", "keys": ["start", "end", "stretch"], "about": "
|
|
434
|
+
"tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"
|
|
470
435
|
}
|
|
471
436
|
}
|
|
472
437
|
}
|
|
@@ -516,6 +481,41 @@
|
|
|
516
481
|
}
|
|
517
482
|
}
|
|
518
483
|
|
|
484
|
+
,
|
|
485
|
+
"menu": {
|
|
486
|
+
"_data": {
|
|
487
|
+
|
|
488
|
+
"menu_class_name": "menu",
|
|
489
|
+
"menu_class_name_short": "ul",
|
|
490
|
+
"orientations": {
|
|
491
|
+
"v": "vertical", "h": "horizontal"
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
,
|
|
495
|
+
"menu_item_class_name": "menu-item",
|
|
496
|
+
"menu_item_class_name_short": "li",
|
|
497
|
+
"menu_item_disabled_tag": "disabled",
|
|
498
|
+
"menu_item_selected_tag": "selected",
|
|
499
|
+
"menu_dropdown_tag": "drop",
|
|
500
|
+
"menu_dropdown_open": "open",
|
|
501
|
+
"menu_dropdown_close": "close"
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
,
|
|
505
|
+
"_metadata": {
|
|
506
|
+
"title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
,
|
|
510
|
+
"_docs": {
|
|
511
|
+
"attributes": {
|
|
512
|
+
"menu": {
|
|
513
|
+
"tag": "menu", "keys": ["h", "v"]
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
|
|
519
519
|
,
|
|
520
520
|
"scale": {
|
|
521
521
|
"_data": {
|
|
@@ -526,8 +526,7 @@
|
|
|
526
526
|
}
|
|
527
527
|
|
|
528
528
|
,
|
|
529
|
-
"grid-ratios-config":
|
|
530
|
-
12],
|
|
529
|
+
"grid-ratios-config": 16,
|
|
531
530
|
"defined-step-size": 2,
|
|
532
531
|
"defined-step-unit": "rem",
|
|
533
532
|
"defined-steps": [1,
|
|
@@ -576,7 +575,7 @@
|
|
|
576
575
|
"keys": ["w",
|
|
577
576
|
"h"],
|
|
578
577
|
"levels": {
|
|
579
|
-
"_size": ["full", "mid", "quarter", "tiers"], "_content": ["content-max", "content-min"], "_defined-steps": [1, 2, 4, 8, 16, 24, 32, 48, 64], "_grid-
|
|
578
|
+
"_size": ["full", "mid", "quarter", "tiers"], "_content": ["content-max", "content-min"], "_defined-steps": [1, 2, 4, 8, 16, 24, 32, 48, 64], "_grid-16": ["1-16", "2-16", "3-16", "4-16", "5-16", "6-16", "7-16", "8-16", "9-16", "10-16", "11-16", "12-16", "13-16", "14-16", "15-16", "16-16"]
|
|
580
579
|
}
|
|
581
580
|
}
|
|
582
581
|
}
|
|
@@ -649,7 +648,7 @@
|
|
|
649
648
|
}
|
|
650
649
|
|
|
651
650
|
,
|
|
652
|
-
"gray": "getGraySteps(
|
|
651
|
+
"gray": "getGraySteps(5, #f4f4f4, #999)"
|
|
653
652
|
}
|
|
654
653
|
|
|
655
654
|
,
|
|
@@ -696,7 +695,7 @@
|
|
|
696
695
|
"moduleName": "theme",
|
|
697
696
|
"moduleNameShort": "theme",
|
|
698
697
|
"color-default-config": {
|
|
699
|
-
"primary": "#
|
|
698
|
+
"primary": "#431700", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#ffffff"
|
|
700
699
|
}
|
|
701
700
|
|
|
702
701
|
,
|
|
@@ -713,7 +712,7 @@
|
|
|
713
712
|
"bg",
|
|
714
713
|
"border"],
|
|
715
714
|
"color": {
|
|
716
|
-
"primary": "#
|
|
715
|
+
"primary": "#431700", "primary-light": "#903100", "primary-lighter": "#dc4c00", "primary-dark": "#100500", "primary-darker": "black", "primary-complement": "#002c43", "primary-invert": "#bce8ff", "secondary": "#D14B02", "secondary-light": "#fd7023", "secondary-lighter": "#fea16e", "secondary-dark": "#9e3902", "secondary-darker": "#6c2701", "secondary-complement": "#0288d1", "secondary-invert": "#2eb4fd", "tertiary": "#88D102", "tertiary-light": "#b0fd23", "tertiary-lighter": "#cbfe6e", "tertiary-dark": "#679e02", "tertiary-darker": "#466c01", "tertiary-complement": "#4b02d1", "tertiary-invert": "#772efd"
|
|
717
716
|
}
|
|
718
717
|
}
|
|
719
718
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
@use "sass:string";
|
|
2
2
|
@use "sass:map";
|
|
3
3
|
@use "sass:math";
|
|
4
|
+
@use "sass:color";
|
|
5
|
+
|
|
4
6
|
// load main fabric vars
|
|
5
7
|
@use 'modules/cssfabric-config' as cssfabric-config;
|
|
6
8
|
|
|
@@ -9,12 +11,12 @@
|
|
|
9
11
|
@if not $prop {
|
|
10
12
|
@return cssfabric-config.$cssfabric-config;
|
|
11
13
|
}
|
|
12
|
-
@if
|
|
13
|
-
@return
|
|
14
|
+
@if $prop and not $val {
|
|
15
|
+
@return map-get(cssfabric-config.$cssfabric-config, $prop);
|
|
14
16
|
}
|
|
15
|
-
@if
|
|
17
|
+
@if $val {
|
|
16
18
|
$in: map-get(cssfabric-config.$cssfabric-config, $prop);
|
|
17
|
-
@return
|
|
19
|
+
@return map-get($in, $prop, $val);
|
|
18
20
|
}
|
|
19
21
|
}
|
|
20
22
|
|
|
@@ -22,8 +24,8 @@
|
|
|
22
24
|
@mixin fabricResponsiveEncloser($mq_size_value, $mq_min_size_value: null) {
|
|
23
25
|
// and (min-width: $mq_min_size_value + rem)
|
|
24
26
|
// @debug $mq_size_value $mq_min_size_value;
|
|
25
|
-
$type-width: if($mq_size_value==180
|
|
26
|
-
$width: if($mq_size_value==180
|
|
27
|
+
$type-width: if($mq_size_value==180, max, max);
|
|
28
|
+
$width: if($mq_size_value==180, $mq_min_size_value, $mq_size_value);
|
|
27
29
|
|
|
28
30
|
// @debug (#{$type-width}-width: $width + rem) ;
|
|
29
31
|
@media only screen and (#{$type-width}-width: $width + px) {
|
|
@@ -66,6 +68,13 @@
|
|
|
66
68
|
}
|
|
67
69
|
}
|
|
68
70
|
|
|
71
|
+
@mixin alphaTize($key,$color,$ranges: (_:0.3,low:0.8,high:0.1)) {
|
|
72
|
+
@each $range, $val in $ranges {
|
|
73
|
+
$rg: if($range==_,'',-#{$range});
|
|
74
|
+
#{$key}-alpha#{$rg} : #{color.change($color,$alpha:$val)};
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
69
78
|
@function getGraySteps($steps, $gray-start, $gray-end) {
|
|
70
79
|
$gray-schemes: ();
|
|
71
80
|
|
|
@@ -101,6 +110,7 @@
|
|
|
101
110
|
(
|
|
102
111
|
color: color,
|
|
103
112
|
text: color,
|
|
113
|
+
foreground: color,
|
|
104
114
|
bg: background-color,
|
|
105
115
|
bg-themed: background-color,
|
|
106
116
|
border: border-color
|
|
@@ -112,7 +122,7 @@
|
|
|
112
122
|
@function getThemeLevels($declinations-config, $color_primary) {
|
|
113
123
|
$out: ();
|
|
114
124
|
// primary secondary tertiary
|
|
115
|
-
@each $color-grade
|
|
125
|
+
@each $color-grade, $color-value in $declinations-config {
|
|
116
126
|
$color: $color-value;
|
|
117
127
|
$out: map.set($out, $color-grade, $color);
|
|
118
128
|
@each $theme-level in (light lighter dark darker complement invert) {
|
|
@@ -126,7 +136,7 @@
|
|
|
126
136
|
}
|
|
127
137
|
|
|
128
138
|
@function getBoxIterator($iterator, $unit-config,$_unit-size-config) {
|
|
129
|
-
$out: ("_": "_"
|
|
139
|
+
$out: ("_": "_");
|
|
130
140
|
|
|
131
141
|
@for $grid_size_value from 1 through $iterator {
|
|
132
142
|
$css_size_value: ($grid_size_value * $_unit-size-config) + $unit-config;
|
|
@@ -150,11 +160,11 @@
|
|
|
150
160
|
$acc: $acc * 2;
|
|
151
161
|
$v: $shadows_step * 2;
|
|
152
162
|
|
|
153
|
-
$v_val: math.div($acc
|
|
154
|
-
$h_val: math.div($acc
|
|
163
|
+
$v_val: math.div($acc, $v_fact);
|
|
164
|
+
$h_val: math.div($acc, $h_fact);
|
|
155
165
|
|
|
156
|
-
$v_val_2: math.div($acc
|
|
157
|
-
$h_val_2: math.div($acc
|
|
166
|
+
$v_val_2: math.div($acc, $v_fact_2);
|
|
167
|
+
$h_val_2: math.div($acc, $h_fact_2);
|
|
158
168
|
|
|
159
169
|
$out: map.set($out, $acc, #{$v_val} + #{$h_val});
|
|
160
170
|
}
|
|
@@ -1,17 +1,87 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
2
|
@use "sass:math";
|
|
3
3
|
|
|
4
|
+
// prefix ?
|
|
5
|
+
// scoped ?
|
|
6
|
+
|
|
7
|
+
// dimensions
|
|
8
|
+
|
|
9
|
+
// grays
|
|
10
|
+
$has-color-gray: true;
|
|
11
|
+
$has-color-gray-responsive: true;
|
|
12
|
+
// text - done conditionals
|
|
13
|
+
$has-text-transform: true;
|
|
14
|
+
$has-text-transform-responsive: false;
|
|
15
|
+
$has-text-align: true;
|
|
16
|
+
$has-text-align-responsive: false;
|
|
17
|
+
$has-text-font: true;
|
|
18
|
+
$has-text-font-responsive: false;
|
|
19
|
+
$has-text-shadow-color-scheme: true;
|
|
20
|
+
$has-text-shadow-color-scheme-responsive: false;
|
|
21
|
+
$has-text-shadow-color-palette: true;
|
|
22
|
+
$has-text-shadow-color-palette-responsive: false;
|
|
23
|
+
|
|
24
|
+
// colors
|
|
25
|
+
$has-color-palette: true;
|
|
26
|
+
$has-color-palette-responsive: false;
|
|
27
|
+
$has-color-scheme: true;
|
|
28
|
+
$has-color-scheme-responsive: false;
|
|
29
|
+
$has-color-gray: true;
|
|
30
|
+
$has-color-gray-responsive: false;
|
|
31
|
+
|
|
32
|
+
$has-color-foreground: true;
|
|
33
|
+
$has-color-bg: true;
|
|
34
|
+
$has-color-bg-themed: true;
|
|
35
|
+
$has-color-border: true;
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
$theme-color-primary: rgb(67, 23, 0) !default;
|
|
39
|
+
$theme-color-secondary: #D14B02 !default;
|
|
40
|
+
$theme-color-tertiary: #88D102 !default;
|
|
41
|
+
|
|
42
|
+
$theme-color-foreground: #282230 !default;
|
|
43
|
+
$theme-color-background: #ffffff !default;
|
|
44
|
+
$theme-color-paper: #f1f1f1 !default;
|
|
45
|
+
|
|
46
|
+
$theme-dark-color-foreground: #f1f1f1 !default;
|
|
47
|
+
$theme-dark-color-background: #27323a !default;
|
|
48
|
+
$theme-dark-color-paper: #3a3b3b !default;
|
|
49
|
+
|
|
50
|
+
$gray-start: #f4f4f4 !default;
|
|
51
|
+
$gray-end: #999 !default;
|
|
52
|
+
$gray-steps: 5 !default;
|
|
53
|
+
|
|
54
|
+
$densities-ratios: (small:0.5, default:1, large:1.75);
|
|
55
|
+
|
|
56
|
+
$box-position-shorthand: pos !default;
|
|
57
|
+
$box-display-shorthand: dsp !default;
|
|
58
|
+
$box-shadow-shorthand: shad !default;
|
|
59
|
+
$box-border-shorthand: border !default;
|
|
60
|
+
$box-padding-shorthand: pad !default;
|
|
61
|
+
$box-margin-shorthand: marg !default;
|
|
62
|
+
|
|
63
|
+
$box-unit-presets: (tiny:0.5, small:1, medium:3, large:4) !default;
|
|
64
|
+
$box-radius: (tiny:4px, small:8px, medium:16px) !default;
|
|
65
|
+
|
|
66
|
+
$scale-tag-width-shorthand: w!default;
|
|
67
|
+
$scale-tag-height-shorthand: h!default;;
|
|
68
|
+
|
|
4
69
|
$cssfabric-metadata: (
|
|
5
70
|
title: "cssfabric",
|
|
6
71
|
tag: "cssfabric",
|
|
7
72
|
description: "cssfabric global config variables"
|
|
8
73
|
);
|
|
9
74
|
|
|
75
|
+
// vars
|
|
76
|
+
$vars-box-density: --box-density!default;
|
|
77
|
+
$vars-box-density-preset: --box-density-preset!default;
|
|
78
|
+
|
|
10
79
|
$cssfabric-config: (
|
|
11
80
|
cfg-has-dimension-strict: true,
|
|
12
81
|
CFG_HAS_DIMENSION_MIN: true,
|
|
13
82
|
CFG_HAS_DIMENSION_MAX: true,
|
|
14
83
|
size_step: 0.5rem,
|
|
84
|
+
size-step-unit: rem,
|
|
15
85
|
sep: "-",
|
|
16
86
|
sizes: (
|
|
17
87
|
tiny: 32,
|
|
@@ -24,27 +94,27 @@ $cssfabric-config: (
|
|
|
24
94
|
xxl: 1300,
|
|
25
95
|
xl: 1200,
|
|
26
96
|
lg: 960,
|
|
27
|
-
md: 760
|
|
28
|
-
sm: 0
|
|
97
|
+
md: 760
|
|
29
98
|
),
|
|
99
|
+
densities-ratios: $densities-ratios,
|
|
30
100
|
themes:(
|
|
31
101
|
light:(
|
|
32
|
-
foreground:
|
|
33
|
-
background:
|
|
34
|
-
paper:
|
|
102
|
+
foreground: $theme-color-foreground,
|
|
103
|
+
background: $theme-color-background,
|
|
104
|
+
paper: $theme-color-paper,
|
|
35
105
|
),
|
|
36
106
|
dark:(
|
|
37
|
-
foreground:
|
|
38
|
-
background:
|
|
39
|
-
paper:
|
|
107
|
+
foreground: $theme-dark-color-foreground,
|
|
108
|
+
background: $theme-dark-color-background,
|
|
109
|
+
paper: $theme-dark-color-paper
|
|
40
110
|
),
|
|
41
111
|
),
|
|
42
112
|
theme: (
|
|
43
|
-
primary:
|
|
44
|
-
secondary:
|
|
45
|
-
tertiary:
|
|
46
|
-
foreground:
|
|
47
|
-
background:
|
|
113
|
+
primary: $theme-color-primary,
|
|
114
|
+
secondary: $theme-color-secondary,
|
|
115
|
+
tertiary: $theme-color-tertiary,
|
|
116
|
+
foreground: $theme-color-foreground,
|
|
117
|
+
background: $theme-color-background,
|
|
48
118
|
),
|
|
49
119
|
scheme: (
|
|
50
120
|
discrete: #ccc,
|
|
@@ -68,11 +138,11 @@ $cssfabric-config: (
|
|
|
68
138
|
border-radius:(
|
|
69
139
|
tiny:4px, small:8px, medium:16px
|
|
70
140
|
),
|
|
71
|
-
gray: getGraySteps(
|
|
141
|
+
gray: getGraySteps($gray-steps, $gray-start, $gray-end),
|
|
72
142
|
gray-config: (
|
|
73
|
-
start:
|
|
74
|
-
end:
|
|
75
|
-
steps:
|
|
143
|
+
start: $gray-start,
|
|
144
|
+
end: $gray-end,
|
|
145
|
+
steps: $gray-steps
|
|
76
146
|
)
|
|
77
147
|
);
|
|
78
148
|
|