@medyll/cssfabric 0.0.16 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/index.js +6 -1
- package/gulpfile.js +3 -15
- package/lib/styles/core/box/box.css +206 -20
- package/lib/styles/core/box/box.min.css +1 -1
- package/lib/styles/core/box/box.responsive.css +1030 -100
- package/lib/styles/core/box/box.responsive.min.css +1 -1
- package/lib/styles/core/vars.css +1 -5
- package/lib/styles/core/vars.min.css +1 -1
- package/lib/styles/cssfabric.css +207 -25
- package/lib/styles/cssfabric.min.css +2 -2
- package/lib/styles/cssfabric.responsive.css +1030 -100
- package/lib/styles/cssfabric.responsive.min.css +1 -1
- package/package.json +10 -10
- package/src/_generated/export.variables.json +187 -187
- package/src/cssfabric/modules/_cssfabric-config.scss +3 -0
- package/src/cssfabric/modules/box/_box-build.scss +55 -2
- package/src/cssfabric/modules/box/_box-vars.scss +1 -1
- package/src/cssfabric/modules/vars.scss +1 -1
- package/css/mystyles.css +0 -280
- package/css/mystyles.css.map +0 -1
package/package.json
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medyll/cssfabric",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"bin": {
|
|
6
6
|
"@medyll/cssfabric": "./bin/index.js"
|
|
7
7
|
},
|
|
8
|
-
"repository":
|
|
8
|
+
"repository": {
|
|
9
|
+
"type" : "git",
|
|
10
|
+
"url": "https://github.com/medyll/cssfabric.git"
|
|
11
|
+
},
|
|
9
12
|
"scripts": {
|
|
10
13
|
"dev": "tsc -w || exit 1",
|
|
11
14
|
"build": "",
|
|
@@ -19,13 +22,13 @@
|
|
|
19
22
|
},
|
|
20
23
|
"dependencies": {
|
|
21
24
|
"chokidar": "^3.5.1",
|
|
25
|
+
"fs-extra": "^10.0.1",
|
|
22
26
|
"gulp-filelist": "^2.0.5",
|
|
23
|
-
"gulp-
|
|
27
|
+
"gulp-jsbeautifier": "^3.0.1",
|
|
24
28
|
"gulp-sort": "^2.0.0",
|
|
25
29
|
"JSON": "^1.0.0",
|
|
26
30
|
"node-sass": "^6.0.0",
|
|
27
|
-
"sass": "^1.32.12"
|
|
28
|
-
"unescape-js": "^1.1.4"
|
|
31
|
+
"sass": "^1.32.12"
|
|
29
32
|
},
|
|
30
33
|
"devDependencies": {
|
|
31
34
|
"clean-css": "^5.1.2",
|
|
@@ -43,13 +46,11 @@
|
|
|
43
46
|
"gulp-ignore": "^3.0.0",
|
|
44
47
|
"gulp-json-modify": "^1.0.2",
|
|
45
48
|
"gulp-json-transform": "^0.4.7",
|
|
46
|
-
"gulp-merge-json": "^2.1.1",
|
|
47
49
|
"gulp-minify-css": "^1.2.4",
|
|
48
50
|
"gulp-modify-file": "^1.0.1",
|
|
49
51
|
"gulp-rename": "^2.0.0",
|
|
50
52
|
"gulp-sass": "^4.1.0",
|
|
51
53
|
"gulp-sass-export": "0.0.3",
|
|
52
|
-
"gulp-sass-vars-to-js": "^0.1.2",
|
|
53
54
|
"gulp-util": "^3.0.8",
|
|
54
55
|
"json-to-scss": "^1.6.2",
|
|
55
56
|
"json2md": "^1.10.0",
|
|
@@ -57,13 +58,12 @@
|
|
|
57
58
|
"npm-run-all": "^4.1.5",
|
|
58
59
|
"sass-json-export": "^2.0.1",
|
|
59
60
|
"sass-loader": "^11.0.1",
|
|
60
|
-
"sass-parser": "^0.1.2",
|
|
61
61
|
"sassdoc": "^2.7.3",
|
|
62
|
+
"scss-to-json": "^2.0.0",
|
|
62
63
|
"style-loader": "^2.0.0",
|
|
63
64
|
"terminal": "^0.1.4",
|
|
64
65
|
"through2": "^4.0.2",
|
|
65
66
|
"tsconfig-paths": "^3.9.0",
|
|
66
|
-
"webpack": "^5.36.2"
|
|
67
|
-
"scss-to-json": "^2.0.0"
|
|
67
|
+
"webpack": "^5.36.2"
|
|
68
68
|
}
|
|
69
69
|
}
|
|
@@ -43,6 +43,120 @@
|
|
|
43
43
|
"_docs": []
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
,
|
|
47
|
+
"color": {
|
|
48
|
+
"_data": {
|
|
49
|
+
"gray-config": {
|
|
50
|
+
"start": "#f4f4f4", "end": "#999", "steps": 8
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
,
|
|
54
|
+
"color-types-config": ["color",
|
|
55
|
+
"bg",
|
|
56
|
+
"bg-themed",
|
|
57
|
+
"border-color"],
|
|
58
|
+
"theme": {
|
|
59
|
+
"primary": "#0288d1", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#f1f1f1"
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
,
|
|
63
|
+
"scheme": {
|
|
64
|
+
"discrete": "#ccc", "success": "green", "info": "#ffdd57", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
,
|
|
68
|
+
"palette": {
|
|
69
|
+
"yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
,
|
|
73
|
+
"gray": "getGraySteps(8, #f4f4f4, #999)"
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
,
|
|
77
|
+
"_metadata": {
|
|
78
|
+
"title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
,
|
|
82
|
+
"_docs": {
|
|
83
|
+
"attributes": {
|
|
84
|
+
"color": {
|
|
85
|
+
|
|
86
|
+
"tag": "color",
|
|
87
|
+
"keys": ["scheme",
|
|
88
|
+
"palette",
|
|
89
|
+
"gray"],
|
|
90
|
+
"levelsLinked": {
|
|
91
|
+
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
,
|
|
95
|
+
"levelsDeclin": {
|
|
96
|
+
"palette": ["_", "lighter", "light", "dark", "darker", "complement"]
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
,
|
|
100
|
+
"about": "color for text level html elements"
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
,
|
|
104
|
+
"background-color": {
|
|
105
|
+
|
|
106
|
+
"tag": "bg",
|
|
107
|
+
"keys": ["scheme",
|
|
108
|
+
"palette",
|
|
109
|
+
"gray"],
|
|
110
|
+
"levelsLinked": {
|
|
111
|
+
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
,
|
|
115
|
+
"levelsDeclin": {
|
|
116
|
+
"palette": ["_", "lighter", "light", "dark", "darker", "complement"]
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
,
|
|
120
|
+
"about": "background colors"
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
,
|
|
124
|
+
"background-themed": {
|
|
125
|
+
|
|
126
|
+
"tag": "bg-themed",
|
|
127
|
+
"keys": ["scheme",
|
|
128
|
+
"palette",
|
|
129
|
+
"gray"],
|
|
130
|
+
"levelsLinked": {
|
|
131
|
+
"gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
,
|
|
135
|
+
"levelsDeclin": {
|
|
136
|
+
"palette": ["_", "lighter", "light", "dark", "darker", "complement"]
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
,
|
|
140
|
+
"about": "same as background-color, but with added contrasted color to text"
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
,
|
|
144
|
+
"border-color": {
|
|
145
|
+
|
|
146
|
+
"tag": "border-color",
|
|
147
|
+
"keys": ["palette",
|
|
148
|
+
"gray"],
|
|
149
|
+
"levelsLinked": {
|
|
150
|
+
"gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
,
|
|
154
|
+
"about": "border colors are slightly darker to maximize surrounding effect"
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
46
160
|
,
|
|
47
161
|
"box": {
|
|
48
162
|
"_data": {
|
|
@@ -53,7 +167,7 @@
|
|
|
53
167
|
"unit-border-size-config": 1,
|
|
54
168
|
"sizes-config": 32,
|
|
55
169
|
"border-sizes-px-config": 5,
|
|
56
|
-
"shadows-steps":
|
|
170
|
+
"shadows-steps": 5,
|
|
57
171
|
"shadows_step_multiplier": 2,
|
|
58
172
|
"position-shorthand-config": "pos",
|
|
59
173
|
"display-shorthand-config": "dsp",
|
|
@@ -184,129 +298,15 @@
|
|
|
184
298
|
}
|
|
185
299
|
|
|
186
300
|
,
|
|
187
|
-
"
|
|
188
|
-
"_data": {
|
|
189
|
-
"gray-config": {
|
|
190
|
-
"start": "#f4f4f4", "end": "#999", "steps": 8
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
,
|
|
194
|
-
"color-types-config": ["color",
|
|
195
|
-
"bg",
|
|
196
|
-
"bg-themed",
|
|
197
|
-
"border-color"],
|
|
198
|
-
"theme": {
|
|
199
|
-
"primary": "#0288d1", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#f1f1f1"
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
,
|
|
203
|
-
"scheme": {
|
|
204
|
-
"discrete": "#ccc", "success": "green", "info": "#ffdd57", "warning": "#e6b905", "alert": "#ff7300", "error": "red"
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
,
|
|
208
|
-
"palette": {
|
|
209
|
-
"yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
,
|
|
213
|
-
"gray": "getGraySteps(8, #f4f4f4, #999)"
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
,
|
|
217
|
-
"_metadata": {
|
|
218
|
-
"title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
,
|
|
222
|
-
"_docs": {
|
|
223
|
-
"attributes": {
|
|
224
|
-
"color": {
|
|
225
|
-
|
|
226
|
-
"tag": "color",
|
|
227
|
-
"keys": ["scheme",
|
|
228
|
-
"palette",
|
|
229
|
-
"gray"],
|
|
230
|
-
"levelsLinked": {
|
|
231
|
-
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
,
|
|
235
|
-
"levelsDeclin": {
|
|
236
|
-
"palette": ["_", "lighter", "light", "dark", "darker", "complement"]
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
,
|
|
240
|
-
"about": "color for text level html elements"
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
,
|
|
244
|
-
"background-color": {
|
|
245
|
-
|
|
246
|
-
"tag": "bg",
|
|
247
|
-
"keys": ["scheme",
|
|
248
|
-
"palette",
|
|
249
|
-
"gray"],
|
|
250
|
-
"levelsLinked": {
|
|
251
|
-
"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(8, #f4f4f4, #999)"]
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
,
|
|
255
|
-
"levelsDeclin": {
|
|
256
|
-
"palette": ["_", "lighter", "light", "dark", "darker", "complement"]
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
,
|
|
260
|
-
"about": "background colors"
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
,
|
|
264
|
-
"background-themed": {
|
|
265
|
-
|
|
266
|
-
"tag": "bg-themed",
|
|
267
|
-
"keys": ["scheme",
|
|
268
|
-
"palette",
|
|
269
|
-
"gray"],
|
|
270
|
-
"levelsLinked": {
|
|
271
|
-
"gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
,
|
|
275
|
-
"levelsDeclin": {
|
|
276
|
-
"palette": ["_", "lighter", "light", "dark", "darker", "complement"]
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
,
|
|
280
|
-
"about": "same as background-color, but with added contrasted color to text"
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
,
|
|
284
|
-
"border-color": {
|
|
285
|
-
|
|
286
|
-
"tag": "border-color",
|
|
287
|
-
"keys": ["palette",
|
|
288
|
-
"gray"],
|
|
289
|
-
"levelsLinked": {
|
|
290
|
-
"gray": ["getGraySteps(8, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
,
|
|
294
|
-
"about": "border colors are slightly darker to maximize surrounding effect"
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
,
|
|
301
|
-
"flex": {
|
|
301
|
+
"grid": {
|
|
302
302
|
"_data": {
|
|
303
303
|
|
|
304
|
-
"moduleName": "
|
|
305
|
-
"moduleNameShort": "
|
|
304
|
+
"moduleName": "grid",
|
|
305
|
+
"moduleNameShort": "grid",
|
|
306
306
|
"horCode": "h",
|
|
307
307
|
"vertCode": "v",
|
|
308
308
|
"gridFullWidth": "main",
|
|
309
|
-
"grow-shrink-steps":
|
|
309
|
+
"grow-shrink-steps": 4,
|
|
310
310
|
"cssProps": {
|
|
311
311
|
"flexWrap": {
|
|
312
312
|
"wrap": "wrap", "wrap-reverse": "wrap-reverse"
|
|
@@ -334,11 +334,15 @@
|
|
|
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
|
|
337
341
|
}
|
|
338
342
|
|
|
339
343
|
,
|
|
340
344
|
"_metadata": {
|
|
341
|
-
"title": "
|
|
345
|
+
"title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"
|
|
342
346
|
}
|
|
343
347
|
|
|
344
348
|
,
|
|
@@ -346,7 +350,7 @@
|
|
|
346
350
|
"attributes": {
|
|
347
351
|
"grid": {
|
|
348
352
|
|
|
349
|
-
"tag": "
|
|
353
|
+
"tag": "grid",
|
|
350
354
|
"keys": ["v",
|
|
351
355
|
"h"],
|
|
352
356
|
"classNames": {
|
|
@@ -354,27 +358,62 @@
|
|
|
354
358
|
}
|
|
355
359
|
|
|
356
360
|
,
|
|
357
|
-
"about": "a classic
|
|
361
|
+
"about": "a classic grid system"
|
|
358
362
|
}
|
|
359
363
|
|
|
360
364
|
,
|
|
361
365
|
"self": {
|
|
362
|
-
"tag": "self", "keys": ["start", "end", "stretch"], "about": "
|
|
366
|
+
"tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"
|
|
363
367
|
}
|
|
364
368
|
}
|
|
365
369
|
}
|
|
366
370
|
}
|
|
367
371
|
|
|
368
372
|
,
|
|
369
|
-
"
|
|
373
|
+
"menu": {
|
|
370
374
|
"_data": {
|
|
371
375
|
|
|
372
|
-
"
|
|
373
|
-
"
|
|
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"]
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
,
|
|
408
|
+
"flex": {
|
|
409
|
+
"_data": {
|
|
410
|
+
|
|
411
|
+
"moduleName": "flex",
|
|
412
|
+
"moduleNameShort": "flex",
|
|
374
413
|
"horCode": "h",
|
|
375
414
|
"vertCode": "v",
|
|
376
415
|
"gridFullWidth": "main",
|
|
377
|
-
"grow-shrink-steps":
|
|
416
|
+
"grow-shrink-steps": 2,
|
|
378
417
|
"cssProps": {
|
|
379
418
|
"flexWrap": {
|
|
380
419
|
"wrap": "wrap", "wrap-reverse": "wrap-reverse"
|
|
@@ -402,15 +441,11 @@
|
|
|
402
441
|
"start": "flex-start", "end": "flex-end", "stretch": "stretch"
|
|
403
442
|
}
|
|
404
443
|
}
|
|
405
|
-
|
|
406
|
-
,
|
|
407
|
-
"grid-max-rows": 8,
|
|
408
|
-
"grid-max-cols": 12
|
|
409
444
|
}
|
|
410
445
|
|
|
411
446
|
,
|
|
412
447
|
"_metadata": {
|
|
413
|
-
"title": "
|
|
448
|
+
"title": "flex", "tag": "flex", "description": "cssfabric flex system module"
|
|
414
449
|
}
|
|
415
450
|
|
|
416
451
|
,
|
|
@@ -418,7 +453,7 @@
|
|
|
418
453
|
"attributes": {
|
|
419
454
|
"grid": {
|
|
420
455
|
|
|
421
|
-
"tag": "
|
|
456
|
+
"tag": "flex",
|
|
422
457
|
"keys": ["v",
|
|
423
458
|
"h"],
|
|
424
459
|
"classNames": {
|
|
@@ -426,47 +461,12 @@
|
|
|
426
461
|
}
|
|
427
462
|
|
|
428
463
|
,
|
|
429
|
-
"about": "a classic grid system"
|
|
464
|
+
"about": "a classic flex grid system, and hey, it gets height !"
|
|
430
465
|
}
|
|
431
466
|
|
|
432
467
|
,
|
|
433
468
|
"self": {
|
|
434
|
-
"tag": "self", "keys": ["start", "end", "stretch"], "about": "
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
,
|
|
441
|
-
"menu": {
|
|
442
|
-
"_data": {
|
|
443
|
-
|
|
444
|
-
"menu_class_name": "menu",
|
|
445
|
-
"menu_class_name_short": "ul",
|
|
446
|
-
"orientations": {
|
|
447
|
-
"v": "vertical", "h": "horizontal"
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
,
|
|
451
|
-
"menu_item_class_name": "menu-item",
|
|
452
|
-
"menu_item_class_name_short": "li",
|
|
453
|
-
"menu_item_disabled_tag": "disabled",
|
|
454
|
-
"menu_item_selected_tag": "selected",
|
|
455
|
-
"menu_dropdown_tag": "drop",
|
|
456
|
-
"menu_dropdown_open": "open",
|
|
457
|
-
"menu_dropdown_close": "close"
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
,
|
|
461
|
-
"_metadata": {
|
|
462
|
-
"title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
,
|
|
466
|
-
"_docs": {
|
|
467
|
-
"attributes": {
|
|
468
|
-
"menu": {
|
|
469
|
-
"tag": "menu", "keys": ["h", "v"]
|
|
469
|
+
"tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"
|
|
470
470
|
}
|
|
471
471
|
}
|
|
472
472
|
}
|
|
@@ -689,23 +689,6 @@
|
|
|
689
689
|
}
|
|
690
690
|
}
|
|
691
691
|
|
|
692
|
-
,
|
|
693
|
-
"zindex": {
|
|
694
|
-
"_data": {
|
|
695
|
-
"z_groups": ["a", "z"]
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
,
|
|
699
|
-
"_metadata": {
|
|
700
|
-
"title": "zindex", "tag": "zI", "description": "cssfabric zindex module to set z-index on all html elements"
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
,
|
|
704
|
-
"_docs": {
|
|
705
|
-
"z_groups": "_"
|
|
706
|
-
}
|
|
707
|
-
}
|
|
708
|
-
|
|
709
692
|
,
|
|
710
693
|
"theme": {
|
|
711
694
|
"_data": {
|
|
@@ -755,6 +738,23 @@
|
|
|
755
738
|
}
|
|
756
739
|
}
|
|
757
740
|
}
|
|
741
|
+
|
|
742
|
+
,
|
|
743
|
+
"zindex": {
|
|
744
|
+
"_data": {
|
|
745
|
+
"z_groups": ["a", "z"]
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
,
|
|
749
|
+
"_metadata": {
|
|
750
|
+
"title": "zindex", "tag": "zI", "description": "cssfabric zindex module to set z-index on all html elements"
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
,
|
|
754
|
+
"_docs": {
|
|
755
|
+
"z_groups": "_"
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
758
|
}
|
|
759
759
|
}
|
|
760
760
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
2
|
@use "sass:math";
|
|
3
3
|
@use '../../_utils';
|
|
4
|
-
@use "../cssfabric-config";
|
|
4
|
+
@use "../cssfabric-config" as fabricConfig;
|
|
5
5
|
@use "box-vars" as box;
|
|
6
6
|
|
|
7
|
+
$fabric-config: fabricConfig.$cssfabric-config;
|
|
7
8
|
$box-config: box.$box-config;
|
|
8
9
|
$box-docs: box.$box-docs;
|
|
9
10
|
|
|
@@ -30,6 +31,8 @@ $box-margin-shorthand-config: map-get($box-config, margin-shorthand-config) !def
|
|
|
30
31
|
$box-shadows-steps: map-get($box-config, shadows-steps) !default;
|
|
31
32
|
$box-shadows-step-multiplier: map-get($box-config, shadows-step_multiplier) !default;
|
|
32
33
|
|
|
34
|
+
$box-radius: map-get($fabric-config, border-radius);
|
|
35
|
+
|
|
33
36
|
$css-shorthands: (
|
|
34
37
|
border: $box-border-shorthand-config,
|
|
35
38
|
padding: $box-padding-shorthand-config,
|
|
@@ -70,7 +73,7 @@ $css-shorthands: (
|
|
|
70
73
|
|
|
71
74
|
@mixin pmbCssVars() {
|
|
72
75
|
$iterator: $box-sizes-config;
|
|
73
|
-
@for $grid_size_value from
|
|
76
|
+
@for $grid_size_value from 0 through $iterator {
|
|
74
77
|
$css_size_value: ($grid_size_value * $box-unit-size-config) + $box-unit-config;
|
|
75
78
|
--box-unit-#{$grid_size_value} : #{$css_size_value};
|
|
76
79
|
}
|
|
@@ -132,6 +135,54 @@ $css-shorthands: (
|
|
|
132
135
|
}
|
|
133
136
|
}
|
|
134
137
|
|
|
138
|
+
// radius
|
|
139
|
+
@mixin radius($mq_key) {
|
|
140
|
+
$shorthand: if($mq_key, radius-#{$mq_key}, radius);
|
|
141
|
+
|
|
142
|
+
@debug $box-radius;
|
|
143
|
+
/*radius*/
|
|
144
|
+
@each $radius, $value in $box-radius {
|
|
145
|
+
.#{$shorthand}-#{$radius} {
|
|
146
|
+
border-radius: #{$value};
|
|
147
|
+
|
|
148
|
+
&-t {
|
|
149
|
+
border-top-left-radius: #{$value};
|
|
150
|
+
border-top-right-radius: #{$value}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&-b {
|
|
154
|
+
border-bottom-left-radius: #{$value};
|
|
155
|
+
border-bottom-right-radius: #{$value}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
&-l {
|
|
159
|
+
border-top-left-radius: #{$value};
|
|
160
|
+
border-bottom-left-radius: #{$value}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&-r {
|
|
164
|
+
border-top-right-radius: #{$value};
|
|
165
|
+
border-bottom-right-radius: #{$value}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// placement property -- top-0/8
|
|
172
|
+
@mixin placement($mq_key) {
|
|
173
|
+
$shorthand: if($mq_key, #{$mq_key}-, '');
|
|
174
|
+
$places: (top, right, bottom, left);
|
|
175
|
+
|
|
176
|
+
/*placement*/
|
|
177
|
+
@each $place in $places {
|
|
178
|
+
@for $size from 0 through 8 {
|
|
179
|
+
.#{$place}-#{$shorthand}#{$size} {
|
|
180
|
+
#{$place}: var(--box-unit-#{$size});
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
135
186
|
// display property
|
|
136
187
|
@mixin display($mq_key) {
|
|
137
188
|
|
|
@@ -211,5 +262,7 @@ $css-shorthands: (
|
|
|
211
262
|
@include padding-margin-border($mq_key);
|
|
212
263
|
@include display($mq_key);
|
|
213
264
|
@include position($mq_key);
|
|
265
|
+
@include placement($mq_key);
|
|
266
|
+
@include radius($mq_key);
|
|
214
267
|
@include shadows($mq_key);
|
|
215
268
|
}
|
|
@@ -26,7 +26,7 @@ $themes: map-get($config, themes) !default;
|
|
|
26
26
|
$theme-light: map-get($themes, light) !default;
|
|
27
27
|
$theme-dark: map-get($themes, dark) !default;
|
|
28
28
|
|
|
29
|
-
//
|
|
29
|
+
// GREYS
|
|
30
30
|
$gray-config: map-get($color-config, gray-config) !default;
|
|
31
31
|
$color-gray-start: map-get($gray-config, start) !default;
|
|
32
32
|
$color-gray-end: map-get($gray-config, end) !default;
|