@medyll/cssfabric 0.2.5 → 0.2.7

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.
Files changed (33) hide show
  1. package/.gitignores +3 -0
  2. package/bin/index.js +33 -5
  3. package/bin/install.js +131 -0
  4. package/bin/package-lock.json +2429 -0
  5. package/bin/package.json +15 -0
  6. package/package.json +8 -1
  7. package/src/cssfabric/_utils.scss +2 -2
  8. package/src/cssfabric/modules/_cssfabric-config.scss +7 -2
  9. package/src/cssfabric/modules/grid/_grid-build.scss +6 -3
  10. package/src/lib/_generated/cssFabric.vars.json +1122 -13
  11. package/src/lib/styles/box/box.responsive.css +2579 -1198
  12. package/src/lib/styles/box/box.responsive.min.css +1 -1
  13. package/src/lib/styles/color/color.responsive.css +3419 -1852
  14. package/src/lib/styles/color/color.responsive.min.css +1 -1
  15. package/src/lib/styles/cssfabric.css +20793 -1
  16. package/src/lib/styles/cssfabric.min.css +56 -0
  17. package/src/lib/styles/cssfabric.responsive.css +75406 -0
  18. package/src/lib/styles/cssfabric.responsive.min.css +37 -1
  19. package/src/lib/styles/flex/flex.responsive.css +190 -64
  20. package/src/lib/styles/flex/flex.responsive.min.css +1 -1
  21. package/src/lib/styles/grid/grid.responsive.css +249 -128
  22. package/src/lib/styles/grid/grid.responsive.min.css +1 -1
  23. package/src/lib/styles/menu/menu.responsive.css +155 -70
  24. package/src/lib/styles/menu/menu.responsive.min.css +1 -1
  25. package/src/lib/styles/overflow/overflow.responsive.css +110 -49
  26. package/src/lib/styles/overflow/overflow.responsive.min.css +1 -1
  27. package/src/lib/styles/scale/scale.responsive.css +1373 -652
  28. package/src/lib/styles/scale/scale.responsive.min.css +1 -1
  29. package/src/lib/styles/table/table.responsive.css +141 -67
  30. package/src/lib/styles/table/table.responsive.min.css +1 -1
  31. package/src/lib/styles/text/text.responsive.css +56 -7
  32. package/src/lib/styles/text/text.responsive.min.css +1 -1
  33. package/svelte.config.js +1 -2
package/src/lib/styles/overflow/overflow.responsive.css CHANGED
@@ -1,127 +1,127 @@
1
1
  /* css overflow rules */
2
- @media only screen and (max-width: 1300px) {
3
- .overflow-xxl-visible {
2
+ @media only screen and (min-width: 640px) {
3
+ .overflow-sm-visible {
4
4
  overflow: visible;
5
5
  }
6
6
 
7
- .overflow-xxl-hidden {
7
+ .overflow-sm-hidden {
8
8
  overflow: hidden;
9
9
  }
10
10
 
11
- .overflow-xxl-clip {
11
+ .overflow-sm-clip {
12
12
  overflow: clip;
13
13
  }
14
14
 
15
- .overflow-xxl-scroll {
15
+ .overflow-sm-scroll {
16
16
  overflow: scroll;
17
17
  }
18
18
 
19
- .overflow-xxl-auto {
19
+ .overflow-sm-auto {
20
20
  overflow: auto;
21
21
  }
22
22
 
23
- .overflow-x-xxl-visible {
23
+ .overflow-x-sm-visible {
24
24
  overflow: visible;
25
25
  }
26
26
 
27
- .overflow-x-xxl-hidden {
27
+ .overflow-x-sm-hidden {
28
28
  overflow: hidden;
29
29
  }
30
30
 
31
- .overflow-x-xxl-clip {
31
+ .overflow-x-sm-clip {
32
32
  overflow: clip;
33
33
  }
34
34
 
35
- .overflow-x-xxl-scroll {
35
+ .overflow-x-sm-scroll {
36
36
  overflow: scroll;
37
37
  }
38
38
 
39
- .overflow-x-xxl-auto {
39
+ .overflow-x-sm-auto {
40
40
  overflow: auto;
41
41
  }
42
42
 
43
- .overflow-y-xxl-visible {
43
+ .overflow-y-sm-visible {
44
44
  overflow: visible;
45
45
  }
46
46
 
47
- .overflow-y-xxl-hidden {
47
+ .overflow-y-sm-hidden {
48
48
  overflow: hidden;
49
49
  }
50
50
 
51
- .overflow-y-xxl-clip {
51
+ .overflow-y-sm-clip {
52
52
  overflow: clip;
53
53
  }
54
54
 
55
- .overflow-y-xxl-scroll {
55
+ .overflow-y-sm-scroll {
56
56
  overflow: scroll;
57
57
  }
58
58
 
59
- .overflow-y-xxl-auto {
59
+ .overflow-y-sm-auto {
60
60
  overflow: auto;
61
61
  }
62
62
  }
63
- @media only screen and (max-width: 1200px) {
64
- .overflow-xl-visible {
63
+ @media only screen and (min-width: 768px) {
64
+ .overflow-md-visible {
65
65
  overflow: visible;
66
66
  }
67
67
 
68
- .overflow-xl-hidden {
68
+ .overflow-md-hidden {
69
69
  overflow: hidden;
70
70
  }
71
71
 
72
- .overflow-xl-clip {
72
+ .overflow-md-clip {
73
73
  overflow: clip;
74
74
  }
75
75
 
76
- .overflow-xl-scroll {
76
+ .overflow-md-scroll {
77
77
  overflow: scroll;
78
78
  }
79
79
 
80
- .overflow-xl-auto {
80
+ .overflow-md-auto {
81
81
  overflow: auto;
82
82
  }
83
83
 
84
- .overflow-x-xl-visible {
84
+ .overflow-x-md-visible {
85
85
  overflow: visible;
86
86
  }
87
87
 
88
- .overflow-x-xl-hidden {
88
+ .overflow-x-md-hidden {
89
89
  overflow: hidden;
90
90
  }
91
91
 
92
- .overflow-x-xl-clip {
92
+ .overflow-x-md-clip {
93
93
  overflow: clip;
94
94
  }
95
95
 
96
- .overflow-x-xl-scroll {
96
+ .overflow-x-md-scroll {
97
97
  overflow: scroll;
98
98
  }
99
99
 
100
- .overflow-x-xl-auto {
100
+ .overflow-x-md-auto {
101
101
  overflow: auto;
102
102
  }
103
103
 
104
- .overflow-y-xl-visible {
104
+ .overflow-y-md-visible {
105
105
  overflow: visible;
106
106
  }
107
107
 
108
- .overflow-y-xl-hidden {
108
+ .overflow-y-md-hidden {
109
109
  overflow: hidden;
110
110
  }
111
111
 
112
- .overflow-y-xl-clip {
112
+ .overflow-y-md-clip {
113
113
  overflow: clip;
114
114
  }
115
115
 
116
- .overflow-y-xl-scroll {
116
+ .overflow-y-md-scroll {
117
117
  overflow: scroll;
118
118
  }
119
119
 
120
- .overflow-y-xl-auto {
120
+ .overflow-y-md-auto {
121
121
  overflow: auto;
122
122
  }
123
123
  }
124
- @media only screen and (max-width: 960px) {
124
+ @media only screen and (min-width: 1024px) {
125
125
  .overflow-lg-visible {
126
126
  overflow: visible;
127
127
  }
@@ -182,64 +182,125 @@
182
182
  overflow: auto;
183
183
  }
184
184
  }
185
- @media only screen and (max-width: 760px) {
186
- .overflow-md-visible {
185
+ @media only screen and (min-width: 1280px) {
186
+ .overflow-xl-visible {
187
187
  overflow: visible;
188
188
  }
189
189
 
190
- .overflow-md-hidden {
190
+ .overflow-xl-hidden {
191
191
  overflow: hidden;
192
192
  }
193
193
 
194
- .overflow-md-clip {
194
+ .overflow-xl-clip {
195
195
  overflow: clip;
196
196
  }
197
197
 
198
- .overflow-md-scroll {
198
+ .overflow-xl-scroll {
199
199
  overflow: scroll;
200
200
  }
201
201
 
202
- .overflow-md-auto {
202
+ .overflow-xl-auto {
203
203
  overflow: auto;
204
204
  }
205
205
 
206
- .overflow-x-md-visible {
206
+ .overflow-x-xl-visible {
207
207
  overflow: visible;
208
208
  }
209
209
 
210
- .overflow-x-md-hidden {
210
+ .overflow-x-xl-hidden {
211
211
  overflow: hidden;
212
212
  }
213
213
 
214
- .overflow-x-md-clip {
214
+ .overflow-x-xl-clip {
215
215
  overflow: clip;
216
216
  }
217
217
 
218
- .overflow-x-md-scroll {
218
+ .overflow-x-xl-scroll {
219
219
  overflow: scroll;
220
220
  }
221
221
 
222
- .overflow-x-md-auto {
222
+ .overflow-x-xl-auto {
223
223
  overflow: auto;
224
224
  }
225
225
 
226
- .overflow-y-md-visible {
226
+ .overflow-y-xl-visible {
227
227
  overflow: visible;
228
228
  }
229
229
 
230
- .overflow-y-md-hidden {
230
+ .overflow-y-xl-hidden {
231
231
  overflow: hidden;
232
232
  }
233
233
 
234
- .overflow-y-md-clip {
234
+ .overflow-y-xl-clip {
235
235
  overflow: clip;
236
236
  }
237
237
 
238
- .overflow-y-md-scroll {
238
+ .overflow-y-xl-scroll {
239
239
  overflow: scroll;
240
240
  }
241
241
 
242
- .overflow-y-md-auto {
242
+ .overflow-y-xl-auto {
243
+ overflow: auto;
244
+ }
245
+ }
246
+ @media only screen and (min-width: 1540px) {
247
+ .overflow-xxl-visible {
248
+ overflow: visible;
249
+ }
250
+
251
+ .overflow-xxl-hidden {
252
+ overflow: hidden;
253
+ }
254
+
255
+ .overflow-xxl-clip {
256
+ overflow: clip;
257
+ }
258
+
259
+ .overflow-xxl-scroll {
260
+ overflow: scroll;
261
+ }
262
+
263
+ .overflow-xxl-auto {
264
+ overflow: auto;
265
+ }
266
+
267
+ .overflow-x-xxl-visible {
268
+ overflow: visible;
269
+ }
270
+
271
+ .overflow-x-xxl-hidden {
272
+ overflow: hidden;
273
+ }
274
+
275
+ .overflow-x-xxl-clip {
276
+ overflow: clip;
277
+ }
278
+
279
+ .overflow-x-xxl-scroll {
280
+ overflow: scroll;
281
+ }
282
+
283
+ .overflow-x-xxl-auto {
284
+ overflow: auto;
285
+ }
286
+
287
+ .overflow-y-xxl-visible {
288
+ overflow: visible;
289
+ }
290
+
291
+ .overflow-y-xxl-hidden {
292
+ overflow: hidden;
293
+ }
294
+
295
+ .overflow-y-xxl-clip {
296
+ overflow: clip;
297
+ }
298
+
299
+ .overflow-y-xxl-scroll {
300
+ overflow: scroll;
301
+ }
302
+
303
+ .overflow-y-xxl-auto {
243
304
  overflow: auto;
244
305
  }
245
306
  }
package/src/lib/styles/overflow/overflow.responsive.min.css CHANGED
@@ -1 +1 @@
1
- @media only screen and (max-width: 1300px){.overflow-xxl-visible{overflow:visible}.overflow-xxl-hidden{overflow:hidden}.overflow-xxl-clip{overflow:clip}.overflow-xxl-scroll{overflow:scroll}.overflow-xxl-auto{overflow:auto}.overflow-x-xxl-visible{overflow:visible}.overflow-x-xxl-hidden{overflow:hidden}.overflow-x-xxl-clip{overflow:clip}.overflow-x-xxl-scroll{overflow:scroll}.overflow-x-xxl-auto{overflow:auto}.overflow-y-xxl-visible{overflow:visible}.overflow-y-xxl-hidden{overflow:hidden}.overflow-y-xxl-clip{overflow:clip}.overflow-y-xxl-scroll{overflow:scroll}.overflow-y-xxl-auto{overflow:auto}}@media only screen and (max-width: 1200px){.overflow-xl-visible{overflow:visible}.overflow-xl-hidden{overflow:hidden}.overflow-xl-clip{overflow:clip}.overflow-xl-scroll{overflow:scroll}.overflow-xl-auto{overflow:auto}.overflow-x-xl-visible{overflow:visible}.overflow-x-xl-hidden{overflow:hidden}.overflow-x-xl-clip{overflow:clip}.overflow-x-xl-scroll{overflow:scroll}.overflow-x-xl-auto{overflow:auto}.overflow-y-xl-visible{overflow:visible}.overflow-y-xl-hidden{overflow:hidden}.overflow-y-xl-clip{overflow:clip}.overflow-y-xl-scroll{overflow:scroll}.overflow-y-xl-auto{overflow:auto}}@media only screen and (max-width: 960px){.overflow-lg-visible{overflow:visible}.overflow-lg-hidden{overflow:hidden}.overflow-lg-clip{overflow:clip}.overflow-lg-scroll{overflow:scroll}.overflow-lg-auto{overflow:auto}.overflow-x-lg-visible{overflow:visible}.overflow-x-lg-hidden{overflow:hidden}.overflow-x-lg-clip{overflow:clip}.overflow-x-lg-scroll{overflow:scroll}.overflow-x-lg-auto{overflow:auto}.overflow-y-lg-visible{overflow:visible}.overflow-y-lg-hidden{overflow:hidden}.overflow-y-lg-clip{overflow:clip}.overflow-y-lg-scroll{overflow:scroll}.overflow-y-lg-auto{overflow:auto}}@media only screen and (max-width: 760px){.overflow-md-visible{overflow:visible}.overflow-md-hidden{overflow:hidden}.overflow-md-clip{overflow:clip}.overflow-md-scroll{overflow:scroll}.overflow-md-auto{overflow:auto}.overflow-x-md-visible{overflow:visible}.overflow-x-md-hidden{overflow:hidden}.overflow-x-md-clip{overflow:clip}.overflow-x-md-scroll{overflow:scroll}.overflow-x-md-auto{overflow:auto}.overflow-y-md-visible{overflow:visible}.overflow-y-md-hidden{overflow:hidden}.overflow-y-md-clip{overflow:clip}.overflow-y-md-scroll{overflow:scroll}.overflow-y-md-auto{overflow:auto}}
1
+ @media only screen and (min-width: 640px){.overflow-sm-visible{overflow:visible}.overflow-sm-hidden{overflow:hidden}.overflow-sm-clip{overflow:clip}.overflow-sm-scroll{overflow:scroll}.overflow-sm-auto{overflow:auto}.overflow-x-sm-visible{overflow:visible}.overflow-x-sm-hidden{overflow:hidden}.overflow-x-sm-clip{overflow:clip}.overflow-x-sm-scroll{overflow:scroll}.overflow-x-sm-auto{overflow:auto}.overflow-y-sm-visible{overflow:visible}.overflow-y-sm-hidden{overflow:hidden}.overflow-y-sm-clip{overflow:clip}.overflow-y-sm-scroll{overflow:scroll}.overflow-y-sm-auto{overflow:auto}}@media only screen and (min-width: 768px){.overflow-md-visible{overflow:visible}.overflow-md-hidden{overflow:hidden}.overflow-md-clip{overflow:clip}.overflow-md-scroll{overflow:scroll}.overflow-md-auto{overflow:auto}.overflow-x-md-visible{overflow:visible}.overflow-x-md-hidden{overflow:hidden}.overflow-x-md-clip{overflow:clip}.overflow-x-md-scroll{overflow:scroll}.overflow-x-md-auto{overflow:auto}.overflow-y-md-visible{overflow:visible}.overflow-y-md-hidden{overflow:hidden}.overflow-y-md-clip{overflow:clip}.overflow-y-md-scroll{overflow:scroll}.overflow-y-md-auto{overflow:auto}}@media only screen and (min-width: 1024px){.overflow-lg-visible{overflow:visible}.overflow-lg-hidden{overflow:hidden}.overflow-lg-clip{overflow:clip}.overflow-lg-scroll{overflow:scroll}.overflow-lg-auto{overflow:auto}.overflow-x-lg-visible{overflow:visible}.overflow-x-lg-hidden{overflow:hidden}.overflow-x-lg-clip{overflow:clip}.overflow-x-lg-scroll{overflow:scroll}.overflow-x-lg-auto{overflow:auto}.overflow-y-lg-visible{overflow:visible}.overflow-y-lg-hidden{overflow:hidden}.overflow-y-lg-clip{overflow:clip}.overflow-y-lg-scroll{overflow:scroll}.overflow-y-lg-auto{overflow:auto}}@media only screen and (min-width: 1280px){.overflow-xl-visible{overflow:visible}.overflow-xl-hidden{overflow:hidden}.overflow-xl-clip{overflow:clip}.overflow-xl-scroll{overflow:scroll}.overflow-xl-auto{overflow:auto}.overflow-x-xl-visible{overflow:visible}.overflow-x-xl-hidden{overflow:hidden}.overflow-x-xl-clip{overflow:clip}.overflow-x-xl-scroll{overflow:scroll}.overflow-x-xl-auto{overflow:auto}.overflow-y-xl-visible{overflow:visible}.overflow-y-xl-hidden{overflow:hidden}.overflow-y-xl-clip{overflow:clip}.overflow-y-xl-scroll{overflow:scroll}.overflow-y-xl-auto{overflow:auto}}@media only screen and (min-width: 1540px){.overflow-xxl-visible{overflow:visible}.overflow-xxl-hidden{overflow:hidden}.overflow-xxl-clip{overflow:clip}.overflow-xxl-scroll{overflow:scroll}.overflow-xxl-auto{overflow:auto}.overflow-x-xxl-visible{overflow:visible}.overflow-x-xxl-hidden{overflow:hidden}.overflow-x-xxl-clip{overflow:clip}.overflow-x-xxl-scroll{overflow:scroll}.overflow-x-xxl-auto{overflow:auto}.overflow-y-xxl-visible{overflow:visible}.overflow-y-xxl-hidden{overflow:hidden}.overflow-y-xxl-clip{overflow:clip}.overflow-y-xxl-scroll{overflow:scroll}.overflow-y-xxl-auto{overflow:auto}}