@medyll/cssfabric 0.2.0 → 0.2.1-beta.2

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 (173) hide show
  1. package/README.md +58 -38
  2. package/dist/NewMenu.svelte +41 -0
  3. package/dist/NewMenu.svelte.d.ts +19 -0
  4. package/dist/css/animation/animation.css +2 -0
  5. package/dist/css/base/base.css +47 -0
  6. package/dist/css/base/base.min.css +1 -0
  7. package/{styles → dist/css}/box/box.css +118 -0
  8. package/dist/css/box/box.min.css +1 -0
  9. package/{styles → dist/css}/box/box.responsive.css +3063 -1550
  10. package/dist/css/box/box.responsive.min.css +1 -0
  11. package/{styles → dist/css}/color/color.css +11 -9
  12. package/{styles → dist/css}/color/color.responsive.css +3446 -1932
  13. package/dist/css/color/color.responsive.min.css +1 -0
  14. package/dist/css/cssfabric.css +5167 -0
  15. package/dist/css/cssfabric.min.css +4877 -0
  16. package/dist/css/cssfabric.responsive.css +20419 -0
  17. package/dist/css/cssfabric.responsive.min.css +1 -0
  18. package/{styles → dist/css}/flex/flex.css +2 -0
  19. package/{styles → dist/css}/flex/flex.responsive.css +192 -114
  20. package/dist/css/flex/flex.responsive.min.css +1 -0
  21. package/{styles → dist/css}/grid/grid.css +2 -0
  22. package/{styles → dist/css}/grid/grid.responsive.css +230 -212
  23. package/dist/css/grid/grid.responsive.min.css +1 -0
  24. package/{styles → dist/css}/menu/menu.css +2 -0
  25. package/{styles → dist/css}/menu/menu.responsive.css +165 -78
  26. package/dist/css/menu/menu.responsive.min.css +1 -0
  27. package/{styles → dist/css}/overflow/overflow.css +2 -0
  28. package/{styles → dist/css}/overflow/overflow.responsive.css +98 -105
  29. package/dist/css/overflow/overflow.responsive.min.css +1 -0
  30. package/{styles → dist/css}/scale/scale.css +2 -0
  31. package/{styles → dist/css}/scale/scale.responsive.css +1520 -1152
  32. package/dist/css/scale/scale.responsive.min.css +1 -0
  33. package/{styles → dist/css}/table/table.css +2 -0
  34. package/{styles → dist/css}/table/table.responsive.css +162 -86
  35. package/dist/css/table/table.responsive.min.css +1 -0
  36. package/{styles → dist/css}/text/text.css +2 -0
  37. package/{styles → dist/css}/text/text.responsive.css +76 -55
  38. package/dist/css/text/text.responsive.min.css +1 -0
  39. package/{styles → dist/css}/theme/theme.css +51 -0
  40. package/{styles → dist/css}/theme/theme.min.css +1 -1
  41. package/{styles → dist/css}/vars.css +66 -67
  42. package/dist/css/vars.min.css +1 -0
  43. package/{styles → dist/css}/zindex/zindex.css +2 -0
  44. package/dist/cssFabric/config.d.ts +29 -0
  45. package/dist/cssFabric/config.js +29 -0
  46. package/dist/cssFabric/cssFabricSheet.d.ts +1226 -0
  47. package/dist/cssFabric/cssFabricSheet.js +1270 -0
  48. package/dist/cssFabric/cssProperties.d.ts +27 -0
  49. package/dist/cssFabric/cssProperties.js +343 -0
  50. package/dist/cssFabric/cssVariationsAi.d.ts +12 -0
  51. package/dist/cssFabric/cssVariationsAi.js +111 -0
  52. package/dist/cssFabric/index.d.ts +113 -0
  53. package/dist/cssFabric/index.js +341 -0
  54. package/dist/cssf/README.md +197 -0
  55. package/{init/importCssVars.d.ts → dist/cssf/cssf.d.ts} +1 -1
  56. package/dist/cssf/cssf.js +12 -0
  57. package/dist/cssf/cssfGuide.d.ts +14 -0
  58. package/dist/cssf/cssfGuide.js +50 -0
  59. package/dist/cssf/cssfLib.d.ts +134 -0
  60. package/dist/cssf/cssfLib.js +116 -0
  61. package/dist/cssf/cssfModel.d.ts +8 -0
  62. package/dist/cssf/cssfModel.js +59 -0
  63. package/dist/cssf/cssfPlugin.d.ts +3 -0
  64. package/dist/cssf/cssfPlugin.js +37 -0
  65. package/dist/cssf/cssfTransformer.d.ts +2 -0
  66. package/dist/cssf/cssfTransformer.js +100 -0
  67. package/dist/cssf/index.d.ts +6 -0
  68. package/dist/cssf/index.js +7 -0
  69. package/dist/cssfVsCode/.vscode/launch.json +17 -0
  70. package/dist/cssfVsCode/.vscodeignore +4 -0
  71. package/dist/cssfVsCode/CHANGELOG.md +9 -0
  72. package/dist/cssfVsCode/README.md +65 -0
  73. package/dist/cssfVsCode/language-configuration.json +36 -0
  74. package/dist/cssfVsCode/package.json +40 -0
  75. package/dist/cssfVsCode/syntaxes/cssf.tmLanguage.json +1868 -0
  76. package/dist/cssfVsCode/test.cssf +6 -0
  77. package/dist/cssfVsCode/vsc-extension-quickstart.md +29 -0
  78. package/{_generated → dist/generated}/cssFabric.vars.json +4 -4
  79. package/{_generated/export.variables.md → dist/generated/cssFabric.vars.md} +268 -240
  80. package/dist/index.d.ts +119 -0
  81. package/dist/index.js +120 -0
  82. package/dist/scripts/cssfabric.d.ts +24 -0
  83. package/{scripts → dist/scripts}/cssfabric.js +43 -43
  84. package/{scripts → dist/scripts}/cssfabricClassNames.d.ts +14 -14
  85. package/{scripts → dist/scripts}/cssfabricClassNames.js +146 -146
  86. package/dist/scripts/index.d.ts +2 -0
  87. package/{scripts → dist/scripts}/index.js +4 -4
  88. package/{scripts → dist/scripts}/utils.d.ts +5 -5
  89. package/{scripts → dist/scripts}/utils.js +38 -38
  90. package/dist/scss/_utils.scss +203 -0
  91. package/dist/scss/modules/_cssfabric-config.scss +178 -0
  92. package/dist/scss/modules/_mixins.scss +1 -0
  93. package/dist/scss/modules/animation/_animation-vars.scss +17 -0
  94. package/dist/scss/modules/animation/animation.scss +3 -0
  95. package/dist/scss/modules/base/_base-vars.scss +19 -0
  96. package/dist/scss/modules/base/base.scss +58 -0
  97. package/dist/scss/modules/box/_box-build.scss +305 -0
  98. package/dist/scss/modules/box/_box-vars.scss +121 -0
  99. package/dist/scss/modules/box/box-responsive.scss +18 -0
  100. package/dist/scss/modules/box/box.scss +3 -0
  101. package/dist/scss/modules/color/_color-build.scss +196 -0
  102. package/dist/scss/modules/color/_color-vars.scss +80 -0
  103. package/dist/scss/modules/color/color-responsive.scss +23 -0
  104. package/dist/scss/modules/color/color.scss +9 -0
  105. package/dist/scss/modules/css-fabric.scss +1 -0
  106. package/dist/scss/modules/flex/_flex-build.scss +150 -0
  107. package/dist/scss/modules/flex/_flex-vars.scss +84 -0
  108. package/dist/scss/modules/flex/flex-responsive.scss +25 -0
  109. package/dist/scss/modules/flex/flex.scss +3 -0
  110. package/dist/scss/modules/grid/_grid-build.scss +87 -0
  111. package/dist/scss/modules/grid/_grid-vars.scss +88 -0
  112. package/dist/scss/modules/grid/grid-responsive.scss +25 -0
  113. package/dist/scss/modules/grid/grid.scss +6 -0
  114. package/dist/scss/modules/menu/_menu-build.scss +120 -0
  115. package/dist/scss/modules/menu/_menu-vars.scss +29 -0
  116. package/dist/scss/modules/menu/menu-responsive.scss +19 -0
  117. package/dist/scss/modules/menu/menu.scss +6 -0
  118. package/dist/scss/modules/overflow/_overflow-build.scss +22 -0
  119. package/dist/scss/modules/overflow/_overflow-vars.scss +31 -0
  120. package/dist/scss/modules/overflow/overflow-responsive.scss +25 -0
  121. package/dist/scss/modules/overflow/overflow.scss +7 -0
  122. package/dist/scss/modules/scale/_scale-build.scss +142 -0
  123. package/dist/scss/modules/scale/_scale-vars.scss +84 -0
  124. package/dist/scss/modules/scale/scale-responsive.scss +23 -0
  125. package/dist/scss/modules/scale/scale.scss +8 -0
  126. package/dist/scss/modules/table/_table-build.scss +134 -0
  127. package/dist/scss/modules/table/_table-vars.scss +30 -0
  128. package/dist/scss/modules/table/table-responsive.scss +24 -0
  129. package/dist/scss/modules/table/table.scss +8 -0
  130. package/dist/scss/modules/text/_text-build.scss +166 -0
  131. package/dist/scss/modules/text/_text-vars.scss +87 -0
  132. package/dist/scss/modules/text/text-responsive.scss +26 -0
  133. package/dist/scss/modules/text/text.scss +6 -0
  134. package/dist/scss/modules/theme/_theme-build.scss +128 -0
  135. package/dist/scss/modules/theme/_theme-vars.scss +46 -0
  136. package/dist/scss/modules/theme/theme.scss +6 -0
  137. package/dist/scss/modules/vars.scss +46 -0
  138. package/dist/scss/modules/zindex/_zindex-vars.scss +14 -0
  139. package/dist/scss/modules/zindex/zindex.scss +15 -0
  140. package/package.json +70 -113
  141. package/_generated/readme.md +0 -0
  142. package/init/importCssVars.js +0 -2
  143. package/scripts/cssfabric.d.ts +0 -24
  144. package/scripts/index.d.ts +0 -2
  145. package/styles/animation/animation.css +0 -0
  146. package/styles/base/base.css +0 -215
  147. package/styles/base/base.min.css +0 -1
  148. package/styles/box/box.min.css +0 -1
  149. package/styles/box/box.responsive.min.css +0 -1
  150. package/styles/color/color.responsive.min.css +0 -1
  151. package/styles/cssfabric.css +0 -61792
  152. package/styles/cssfabric.min.css +0 -168
  153. package/styles/cssfabric.responsive.css +0 -200596
  154. package/styles/cssfabric.responsive.min.css +0 -108
  155. package/styles/flex/flex.responsive.min.css +0 -1
  156. package/styles/grid/grid.responsive.min.css +0 -1
  157. package/styles/menu/menu.responsive.min.css +0 -1
  158. package/styles/overflow/overflow.responsive.min.css +0 -1
  159. package/styles/scale/scale.responsive.min.css +0 -1
  160. package/styles/table/table.responsive.min.css +0 -1
  161. package/styles/text/text.responsive.min.css +0 -1
  162. package/styles/vars.min.css +0 -1
  163. /package/{styles → dist/css}/animation/animation.min.css +0 -0
  164. /package/{styles → dist/css}/color/color.min.css +0 -0
  165. /package/{styles → dist/css}/flex/flex.min.css +0 -0
  166. /package/{styles → dist/css}/grid/grid.min.css +0 -0
  167. /package/{styles → dist/css}/menu/menu.min.css +0 -0
  168. /package/{styles → dist/css}/overflow/overflow.min.css +0 -0
  169. /package/{styles → dist/css}/scale/scale.min.css +0 -0
  170. /package/{styles → dist/css}/table/table.min.css +0 -0
  171. /package/{styles → dist/css}/text/text.min.css +0 -0
  172. /package/{styles → dist/css}/zindex/zindex.min.css +0 -0
  173. /package/{_generated → dist/scss}/index.d.ts +0 -0
package/{styles → dist/css}/flex/flex.css RENAMED
@@ -1,3 +1,5 @@
1
+
2
+ /**---------------------flex.css---------------------*/
1
3
  .flex,
2
4
  .flex-h {
3
5
  display: flex;
package/{styles → dist/css}/flex/flex.responsive.css RENAMED
@@ -1,95 +1,93 @@
1
- @media only screen and (max-width: 1300px) {
1
+
2
+ /**---------------------flex.responsive.css---------------------*/
3
+ @media only screen and (min-width: 640px) {
2
4
  .flex,
3
- .flex-xxl-h {
5
+ .flex-sm-h {
4
6
  display: flex;
5
7
  flex-direction: row;
6
8
  }
7
9
  .flex > .flex-main,
8
- .flex-xxl-h > .flex-main {
10
+ .flex-sm-h > .flex-main {
9
11
  flex: 1 1 0;
10
12
  }
11
13
  .flex.flex-align-middle,
12
- .flex-xxl-h.flex-align-middle {
14
+ .flex-sm-h.flex-align-middle {
13
15
  align-items: center;
14
16
  }
15
17
  .flex.flex-align-top,
16
- .flex-xxl-h.flex-align-top {
18
+ .flex-sm-h.flex-align-top {
17
19
  align-items: flex-start;
18
20
  }
19
21
  .flex.flex-align-left,
20
- .flex-xxl-h.flex-align-left {
22
+ .flex-sm-h.flex-align-left {
21
23
  align-items: flex-start;
22
24
  }
23
25
  .flex.flex-align-right,
24
- .flex-xxl-h.flex-align-right {
26
+ .flex-sm-h.flex-align-right {
25
27
  justify-content: flex-end;
26
28
  }
27
29
  .flex.flex-align-bottom,
28
- .flex-xxl-h.flex-align-bottom {
30
+ .flex-sm-h.flex-align-bottom {
29
31
  align-items: flex-end;
30
32
  }
31
33
  .flex.flex-align-center,
32
- .flex-xxl-h.flex-align-center {
34
+ .flex-sm-h.flex-align-center {
33
35
  justify-content: center;
34
36
  }
35
37
  .flex.flex-align-middle-center,
36
- .flex-xxl-h.flex-align-middle-center {
38
+ .flex-sm-h.flex-align-middle-center {
37
39
  justify-content: center;
38
40
  align-content: center;
39
41
  align-items: center;
40
42
  }
41
43
  .flex.flex-align-stretch,
42
- .flex-xxl-h.flex-align-stretch {
44
+ .flex-sm-h.flex-align-stretch {
43
45
  color: blue;
44
46
  align-items: stretch;
45
47
  }
46
-
47
- .flex-xxl-v {
48
+ .flex-sm-v {
48
49
  display: flex;
49
50
  flex-direction: column;
50
51
  }
51
- .flex-xxl-v > .flex-main {
52
+ .flex-sm-v > .flex-main {
52
53
  flex: 1 1 0;
53
54
  max-height: 100%;
54
55
  }
55
- .flex-xxl-v.flex-align-middle {
56
+ .flex-sm-v.flex-align-middle {
56
57
  justify-content: center;
57
58
  }
58
- .flex-xxl-v.flex-align-top {
59
+ .flex-sm-v.flex-align-top {
59
60
  justify-content: flex-start;
60
61
  }
61
- .flex-xxl-v.flex-align-left {
62
+ .flex-sm-v.flex-align-left {
62
63
  align-items: flex-start;
63
64
  }
64
- .flex-xxl-v.flex-align-right {
65
+ .flex-sm-v.flex-align-right {
65
66
  align-items: flex-end;
66
67
  }
67
- .flex-xxl-v.flex-align-bottom {
68
+ .flex-sm-v.flex-align-bottom {
68
69
  justify-content: flex-end;
69
70
  }
70
- .flex-xxl-v.flex-align-center {
71
+ .flex-sm-v.flex-align-center {
71
72
  align-items: center;
72
73
  }
73
- .flex-xxl-v.flex-align-middle-center {
74
+ .flex-sm-v.flex-align-middle-center {
74
75
  align-items: center;
75
76
  justify-content: center;
76
77
  }
77
- .flex-xxl-v.flex-align-stretch {
78
+ .flex-sm-v.flex-align-stretch {
78
79
  color: red;
79
80
  align-items: stretch;
80
81
  }
81
-
82
82
  .flex-inline {
83
83
  display: inline-flex;
84
84
  }
85
-
86
85
  .flex-wrap {
87
86
  flex-wrap: wrap;
88
87
  }
89
88
  .flex-wrap-reverse {
90
89
  flex-wrap: wrap-reverse;
91
90
  }
92
-
93
91
  .self-start {
94
92
  align-self: flex-start;
95
93
  }
@@ -99,123 +97,113 @@
99
97
  .self-stretch {
100
98
  align-self: stretch;
101
99
  }
102
-
103
100
  .flex-grow-0 {
104
101
  flex-grow: 0;
105
102
  }
106
-
107
103
  .flex-shrink-0 {
108
104
  flex-shrink: 0;
109
105
  }
110
-
111
106
  .flex-grow-1 {
112
107
  flex-grow: 1;
113
108
  }
114
-
115
109
  .flex-shrink-1 {
116
110
  flex-shrink: 1;
117
111
  }
118
-
119
112
  .flex-grow-2 {
120
113
  flex-grow: 2;
121
114
  }
122
-
123
115
  .flex-shrink-2 {
124
116
  flex-shrink: 2;
125
117
  }
126
118
  }
127
- @media only screen and (max-width: 1200px) {
119
+ @media only screen and (min-width: 768px) {
128
120
  .flex,
129
- .flex-xl-h {
121
+ .flex-md-h {
130
122
  display: flex;
131
123
  flex-direction: row;
132
124
  }
133
125
  .flex > .flex-main,
134
- .flex-xl-h > .flex-main {
126
+ .flex-md-h > .flex-main {
135
127
  flex: 1 1 0;
136
128
  }
137
129
  .flex.flex-align-middle,
138
- .flex-xl-h.flex-align-middle {
130
+ .flex-md-h.flex-align-middle {
139
131
  align-items: center;
140
132
  }
141
133
  .flex.flex-align-top,
142
- .flex-xl-h.flex-align-top {
134
+ .flex-md-h.flex-align-top {
143
135
  align-items: flex-start;
144
136
  }
145
137
  .flex.flex-align-left,
146
- .flex-xl-h.flex-align-left {
138
+ .flex-md-h.flex-align-left {
147
139
  align-items: flex-start;
148
140
  }
149
141
  .flex.flex-align-right,
150
- .flex-xl-h.flex-align-right {
142
+ .flex-md-h.flex-align-right {
151
143
  justify-content: flex-end;
152
144
  }
153
145
  .flex.flex-align-bottom,
154
- .flex-xl-h.flex-align-bottom {
146
+ .flex-md-h.flex-align-bottom {
155
147
  align-items: flex-end;
156
148
  }
157
149
  .flex.flex-align-center,
158
- .flex-xl-h.flex-align-center {
150
+ .flex-md-h.flex-align-center {
159
151
  justify-content: center;
160
152
  }
161
153
  .flex.flex-align-middle-center,
162
- .flex-xl-h.flex-align-middle-center {
154
+ .flex-md-h.flex-align-middle-center {
163
155
  justify-content: center;
164
156
  align-content: center;
165
157
  align-items: center;
166
158
  }
167
159
  .flex.flex-align-stretch,
168
- .flex-xl-h.flex-align-stretch {
160
+ .flex-md-h.flex-align-stretch {
169
161
  color: blue;
170
162
  align-items: stretch;
171
163
  }
172
-
173
- .flex-xl-v {
164
+ .flex-md-v {
174
165
  display: flex;
175
166
  flex-direction: column;
176
167
  }
177
- .flex-xl-v > .flex-main {
168
+ .flex-md-v > .flex-main {
178
169
  flex: 1 1 0;
179
170
  max-height: 100%;
180
171
  }
181
- .flex-xl-v.flex-align-middle {
172
+ .flex-md-v.flex-align-middle {
182
173
  justify-content: center;
183
174
  }
184
- .flex-xl-v.flex-align-top {
175
+ .flex-md-v.flex-align-top {
185
176
  justify-content: flex-start;
186
177
  }
187
- .flex-xl-v.flex-align-left {
178
+ .flex-md-v.flex-align-left {
188
179
  align-items: flex-start;
189
180
  }
190
- .flex-xl-v.flex-align-right {
181
+ .flex-md-v.flex-align-right {
191
182
  align-items: flex-end;
192
183
  }
193
- .flex-xl-v.flex-align-bottom {
184
+ .flex-md-v.flex-align-bottom {
194
185
  justify-content: flex-end;
195
186
  }
196
- .flex-xl-v.flex-align-center {
187
+ .flex-md-v.flex-align-center {
197
188
  align-items: center;
198
189
  }
199
- .flex-xl-v.flex-align-middle-center {
190
+ .flex-md-v.flex-align-middle-center {
200
191
  align-items: center;
201
192
  justify-content: center;
202
193
  }
203
- .flex-xl-v.flex-align-stretch {
194
+ .flex-md-v.flex-align-stretch {
204
195
  color: red;
205
196
  align-items: stretch;
206
197
  }
207
-
208
198
  .flex-inline {
209
199
  display: inline-flex;
210
200
  }
211
-
212
201
  .flex-wrap {
213
202
  flex-wrap: wrap;
214
203
  }
215
204
  .flex-wrap-reverse {
216
205
  flex-wrap: wrap-reverse;
217
206
  }
218
-
219
207
  .self-start {
220
208
  align-self: flex-start;
221
209
  }
@@ -225,77 +213,70 @@
225
213
  .self-stretch {
226
214
  align-self: stretch;
227
215
  }
228
-
229
216
  .flex-grow-0 {
230
217
  flex-grow: 0;
231
218
  }
232
-
233
219
  .flex-shrink-0 {
234
220
  flex-shrink: 0;
235
221
  }
236
-
237
222
  .flex-grow-1 {
238
223
  flex-grow: 1;
239
224
  }
240
-
241
225
  .flex-shrink-1 {
242
226
  flex-shrink: 1;
243
227
  }
244
-
245
228
  .flex-grow-2 {
246
229
  flex-grow: 2;
247
230
  }
248
-
249
231
  .flex-shrink-2 {
250
232
  flex-shrink: 2;
251
233
  }
252
234
  }
253
- @media only screen and (max-width: 960px) {
235
+ @media only screen and (min-width: 1024px) {
254
236
  .flex,
255
- .flex-lg-h {
237
+ .flex-lg-h {
256
238
  display: flex;
257
239
  flex-direction: row;
258
240
  }
259
241
  .flex > .flex-main,
260
- .flex-lg-h > .flex-main {
242
+ .flex-lg-h > .flex-main {
261
243
  flex: 1 1 0;
262
244
  }
263
245
  .flex.flex-align-middle,
264
- .flex-lg-h.flex-align-middle {
246
+ .flex-lg-h.flex-align-middle {
265
247
  align-items: center;
266
248
  }
267
249
  .flex.flex-align-top,
268
- .flex-lg-h.flex-align-top {
250
+ .flex-lg-h.flex-align-top {
269
251
  align-items: flex-start;
270
252
  }
271
253
  .flex.flex-align-left,
272
- .flex-lg-h.flex-align-left {
254
+ .flex-lg-h.flex-align-left {
273
255
  align-items: flex-start;
274
256
  }
275
257
  .flex.flex-align-right,
276
- .flex-lg-h.flex-align-right {
258
+ .flex-lg-h.flex-align-right {
277
259
  justify-content: flex-end;
278
260
  }
279
261
  .flex.flex-align-bottom,
280
- .flex-lg-h.flex-align-bottom {
262
+ .flex-lg-h.flex-align-bottom {
281
263
  align-items: flex-end;
282
264
  }
283
265
  .flex.flex-align-center,
284
- .flex-lg-h.flex-align-center {
266
+ .flex-lg-h.flex-align-center {
285
267
  justify-content: center;
286
268
  }
287
269
  .flex.flex-align-middle-center,
288
- .flex-lg-h.flex-align-middle-center {
270
+ .flex-lg-h.flex-align-middle-center {
289
271
  justify-content: center;
290
272
  align-content: center;
291
273
  align-items: center;
292
274
  }
293
275
  .flex.flex-align-stretch,
294
- .flex-lg-h.flex-align-stretch {
276
+ .flex-lg-h.flex-align-stretch {
295
277
  color: blue;
296
278
  align-items: stretch;
297
279
  }
298
-
299
280
  .flex-lg-v {
300
281
  display: flex;
301
282
  flex-direction: column;
@@ -330,18 +311,15 @@
330
311
  color: red;
331
312
  align-items: stretch;
332
313
  }
333
-
334
314
  .flex-inline {
335
315
  display: inline-flex;
336
316
  }
337
-
338
317
  .flex-wrap {
339
318
  flex-wrap: wrap;
340
319
  }
341
320
  .flex-wrap-reverse {
342
321
  flex-wrap: wrap-reverse;
343
322
  }
344
-
345
323
  .self-start {
346
324
  align-self: flex-start;
347
325
  }
@@ -351,123 +329,229 @@
351
329
  .self-stretch {
352
330
  align-self: stretch;
353
331
  }
354
-
355
332
  .flex-grow-0 {
356
333
  flex-grow: 0;
357
334
  }
358
-
359
335
  .flex-shrink-0 {
360
336
  flex-shrink: 0;
361
337
  }
362
-
363
338
  .flex-grow-1 {
364
339
  flex-grow: 1;
365
340
  }
366
-
367
341
  .flex-shrink-1 {
368
342
  flex-shrink: 1;
369
343
  }
370
-
371
344
  .flex-grow-2 {
372
345
  flex-grow: 2;
373
346
  }
374
-
375
347
  .flex-shrink-2 {
376
348
  flex-shrink: 2;
377
349
  }
378
350
  }
379
- @media only screen and (max-width: 760px) {
351
+ @media only screen and (min-width: 1280px) {
380
352
  .flex,
381
- .flex-md-h {
353
+ .flex-xl-h {
382
354
  display: flex;
383
355
  flex-direction: row;
384
356
  }
385
357
  .flex > .flex-main,
386
- .flex-md-h > .flex-main {
358
+ .flex-xl-h > .flex-main {
387
359
  flex: 1 1 0;
388
360
  }
389
361
  .flex.flex-align-middle,
390
- .flex-md-h.flex-align-middle {
362
+ .flex-xl-h.flex-align-middle {
391
363
  align-items: center;
392
364
  }
393
365
  .flex.flex-align-top,
394
- .flex-md-h.flex-align-top {
366
+ .flex-xl-h.flex-align-top {
395
367
  align-items: flex-start;
396
368
  }
397
369
  .flex.flex-align-left,
398
- .flex-md-h.flex-align-left {
370
+ .flex-xl-h.flex-align-left {
399
371
  align-items: flex-start;
400
372
  }
401
373
  .flex.flex-align-right,
402
- .flex-md-h.flex-align-right {
374
+ .flex-xl-h.flex-align-right {
403
375
  justify-content: flex-end;
404
376
  }
405
377
  .flex.flex-align-bottom,
406
- .flex-md-h.flex-align-bottom {
378
+ .flex-xl-h.flex-align-bottom {
407
379
  align-items: flex-end;
408
380
  }
409
381
  .flex.flex-align-center,
410
- .flex-md-h.flex-align-center {
382
+ .flex-xl-h.flex-align-center {
411
383
  justify-content: center;
412
384
  }
413
385
  .flex.flex-align-middle-center,
414
- .flex-md-h.flex-align-middle-center {
386
+ .flex-xl-h.flex-align-middle-center {
415
387
  justify-content: center;
416
388
  align-content: center;
417
389
  align-items: center;
418
390
  }
419
391
  .flex.flex-align-stretch,
420
- .flex-md-h.flex-align-stretch {
392
+ .flex-xl-h.flex-align-stretch {
421
393
  color: blue;
422
394
  align-items: stretch;
423
395
  }
424
-
425
- .flex-md-v {
396
+ .flex-xl-v {
426
397
  display: flex;
427
398
  flex-direction: column;
428
399
  }
429
- .flex-md-v > .flex-main {
400
+ .flex-xl-v > .flex-main {
430
401
  flex: 1 1 0;
431
402
  max-height: 100%;
432
403
  }
433
- .flex-md-v.flex-align-middle {
404
+ .flex-xl-v.flex-align-middle {
434
405
  justify-content: center;
435
406
  }
436
- .flex-md-v.flex-align-top {
407
+ .flex-xl-v.flex-align-top {
437
408
  justify-content: flex-start;
438
409
  }
439
- .flex-md-v.flex-align-left {
410
+ .flex-xl-v.flex-align-left {
440
411
  align-items: flex-start;
441
412
  }
442
- .flex-md-v.flex-align-right {
413
+ .flex-xl-v.flex-align-right {
443
414
  align-items: flex-end;
444
415
  }
445
- .flex-md-v.flex-align-bottom {
416
+ .flex-xl-v.flex-align-bottom {
446
417
  justify-content: flex-end;
447
418
  }
448
- .flex-md-v.flex-align-center {
419
+ .flex-xl-v.flex-align-center {
449
420
  align-items: center;
450
421
  }
451
- .flex-md-v.flex-align-middle-center {
422
+ .flex-xl-v.flex-align-middle-center {
452
423
  align-items: center;
453
424
  justify-content: center;
454
425
  }
455
- .flex-md-v.flex-align-stretch {
426
+ .flex-xl-v.flex-align-stretch {
427
+ color: red;
428
+ align-items: stretch;
429
+ }
430
+ .flex-inline {
431
+ display: inline-flex;
432
+ }
433
+ .flex-wrap {
434
+ flex-wrap: wrap;
435
+ }
436
+ .flex-wrap-reverse {
437
+ flex-wrap: wrap-reverse;
438
+ }
439
+ .self-start {
440
+ align-self: flex-start;
441
+ }
442
+ .self-end {
443
+ align-self: flex-end;
444
+ }
445
+ .self-stretch {
446
+ align-self: stretch;
447
+ }
448
+ .flex-grow-0 {
449
+ flex-grow: 0;
450
+ }
451
+ .flex-shrink-0 {
452
+ flex-shrink: 0;
453
+ }
454
+ .flex-grow-1 {
455
+ flex-grow: 1;
456
+ }
457
+ .flex-shrink-1 {
458
+ flex-shrink: 1;
459
+ }
460
+ .flex-grow-2 {
461
+ flex-grow: 2;
462
+ }
463
+ .flex-shrink-2 {
464
+ flex-shrink: 2;
465
+ }
466
+ }
467
+ @media only screen and (min-width: 1540px) {
468
+ .flex,
469
+ .flex-xxl-h {
470
+ display: flex;
471
+ flex-direction: row;
472
+ }
473
+ .flex > .flex-main,
474
+ .flex-xxl-h > .flex-main {
475
+ flex: 1 1 0;
476
+ }
477
+ .flex.flex-align-middle,
478
+ .flex-xxl-h.flex-align-middle {
479
+ align-items: center;
480
+ }
481
+ .flex.flex-align-top,
482
+ .flex-xxl-h.flex-align-top {
483
+ align-items: flex-start;
484
+ }
485
+ .flex.flex-align-left,
486
+ .flex-xxl-h.flex-align-left {
487
+ align-items: flex-start;
488
+ }
489
+ .flex.flex-align-right,
490
+ .flex-xxl-h.flex-align-right {
491
+ justify-content: flex-end;
492
+ }
493
+ .flex.flex-align-bottom,
494
+ .flex-xxl-h.flex-align-bottom {
495
+ align-items: flex-end;
496
+ }
497
+ .flex.flex-align-center,
498
+ .flex-xxl-h.flex-align-center {
499
+ justify-content: center;
500
+ }
501
+ .flex.flex-align-middle-center,
502
+ .flex-xxl-h.flex-align-middle-center {
503
+ justify-content: center;
504
+ align-content: center;
505
+ align-items: center;
506
+ }
507
+ .flex.flex-align-stretch,
508
+ .flex-xxl-h.flex-align-stretch {
509
+ color: blue;
510
+ align-items: stretch;
511
+ }
512
+ .flex-xxl-v {
513
+ display: flex;
514
+ flex-direction: column;
515
+ }
516
+ .flex-xxl-v > .flex-main {
517
+ flex: 1 1 0;
518
+ max-height: 100%;
519
+ }
520
+ .flex-xxl-v.flex-align-middle {
521
+ justify-content: center;
522
+ }
523
+ .flex-xxl-v.flex-align-top {
524
+ justify-content: flex-start;
525
+ }
526
+ .flex-xxl-v.flex-align-left {
527
+ align-items: flex-start;
528
+ }
529
+ .flex-xxl-v.flex-align-right {
530
+ align-items: flex-end;
531
+ }
532
+ .flex-xxl-v.flex-align-bottom {
533
+ justify-content: flex-end;
534
+ }
535
+ .flex-xxl-v.flex-align-center {
536
+ align-items: center;
537
+ }
538
+ .flex-xxl-v.flex-align-middle-center {
539
+ align-items: center;
540
+ justify-content: center;
541
+ }
542
+ .flex-xxl-v.flex-align-stretch {
456
543
  color: red;
457
544
  align-items: stretch;
458
545
  }
459
-
460
546
  .flex-inline {
461
547
  display: inline-flex;
462
548
  }
463
-
464
549
  .flex-wrap {
465
550
  flex-wrap: wrap;
466
551
  }
467
552
  .flex-wrap-reverse {
468
553
  flex-wrap: wrap-reverse;
469
554
  }
470
-
471
555
  .self-start {
472
556
  align-self: flex-start;
473
557
  }
@@ -477,27 +561,21 @@
477
561
  .self-stretch {
478
562
  align-self: stretch;
479
563
  }
480
-
481
564
  .flex-grow-0 {
482
565
  flex-grow: 0;
483
566
  }
484
-
485
567
  .flex-shrink-0 {
486
568
  flex-shrink: 0;
487
569
  }
488
-
489
570
  .flex-grow-1 {
490
571
  flex-grow: 1;
491
572
  }
492
-
493
573
  .flex-shrink-1 {
494
574
  flex-shrink: 1;
495
575
  }
496
-
497
576
  .flex-grow-2 {
498
577
  flex-grow: 2;
499
578
  }
500
-
501
579
  .flex-shrink-2 {
502
580
  flex-shrink: 2;
503
581
  }
package/dist/css/flex/flex.responsive.min.css ADDED
@@ -0,0 +1 @@
1
+ @media only screen and (min-width: 640px){.flex,.flex-sm-h{display:flex;flex-direction:row}.flex>.flex-main,.flex-sm-h>.flex-main{flex:1 1 0}.flex.flex-align-middle,.flex-sm-h.flex-align-middle{align-items:center}.flex.flex-align-top,.flex-sm-h.flex-align-top{align-items:flex-start}.flex.flex-align-left,.flex-sm-h.flex-align-left{align-items:flex-start}.flex.flex-align-right,.flex-sm-h.flex-align-right{justify-content:flex-end}.flex.flex-align-bottom,.flex-sm-h.flex-align-bottom{align-items:flex-end}.flex.flex-align-center,.flex-sm-h.flex-align-center{justify-content:center}.flex.flex-align-middle-center,.flex-sm-h.flex-align-middle-center{justify-content:center;align-content:center;align-items:center}.flex.flex-align-stretch,.flex-sm-h.flex-align-stretch{color:blue;align-items:stretch}.flex-sm-v{display:flex;flex-direction:column}.flex-sm-v>.flex-main{flex:1 1 0;max-height:100%}.flex-sm-v.flex-align-middle{justify-content:center}.flex-sm-v.flex-align-top{justify-content:flex-start}.flex-sm-v.flex-align-left{align-items:flex-start}.flex-sm-v.flex-align-right{align-items:flex-end}.flex-sm-v.flex-align-bottom{justify-content:flex-end}.flex-sm-v.flex-align-center{align-items:center}.flex-sm-v.flex-align-middle-center{align-items:center;justify-content:center}.flex-sm-v.flex-align-stretch{color:red;align-items:stretch}.flex-inline{display:inline-flex}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.flex-grow-0{flex-grow:0}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.flex-shrink-1{flex-shrink:1}.flex-grow-2{flex-grow:2}.flex-shrink-2{flex-shrink:2}}@media only screen and (min-width: 768px){.flex,.flex-md-h{display:flex;flex-direction:row}.flex>.flex-main,.flex-md-h>.flex-main{flex:1 1 0}.flex.flex-align-middle,.flex-md-h.flex-align-middle{align-items:center}.flex.flex-align-top,.flex-md-h.flex-align-top{align-items:flex-start}.flex.flex-align-left,.flex-md-h.flex-align-left{align-items:flex-start}.flex.flex-align-right,.flex-md-h.flex-align-right{justify-content:flex-end}.flex.flex-align-bottom,.flex-md-h.flex-align-bottom{align-items:flex-end}.flex.flex-align-center,.flex-md-h.flex-align-center{justify-content:center}.flex.flex-align-middle-center,.flex-md-h.flex-align-middle-center{justify-content:center;align-content:center;align-items:center}.flex.flex-align-stretch,.flex-md-h.flex-align-stretch{color:blue;align-items:stretch}.flex-md-v{display:flex;flex-direction:column}.flex-md-v>.flex-main{flex:1 1 0;max-height:100%}.flex-md-v.flex-align-middle{justify-content:center}.flex-md-v.flex-align-top{justify-content:flex-start}.flex-md-v.flex-align-left{align-items:flex-start}.flex-md-v.flex-align-right{align-items:flex-end}.flex-md-v.flex-align-bottom{justify-content:flex-end}.flex-md-v.flex-align-center{align-items:center}.flex-md-v.flex-align-middle-center{align-items:center;justify-content:center}.flex-md-v.flex-align-stretch{color:red;align-items:stretch}.flex-inline{display:inline-flex}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.flex-grow-0{flex-grow:0}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.flex-shrink-1{flex-shrink:1}.flex-grow-2{flex-grow:2}.flex-shrink-2{flex-shrink:2}}@media only screen and (min-width: 1024px){.flex,.flex-lg-h{display:flex;flex-direction:row}.flex>.flex-main,.flex-lg-h>.flex-main{flex:1 1 0}.flex.flex-align-middle,.flex-lg-h.flex-align-middle{align-items:center}.flex.flex-align-top,.flex-lg-h.flex-align-top{align-items:flex-start}.flex.flex-align-left,.flex-lg-h.flex-align-left{align-items:flex-start}.flex.flex-align-right,.flex-lg-h.flex-align-right{justify-content:flex-end}.flex.flex-align-bottom,.flex-lg-h.flex-align-bottom{align-items:flex-end}.flex.flex-align-center,.flex-lg-h.flex-align-center{justify-content:center}.flex.flex-align-middle-center,.flex-lg-h.flex-align-middle-center{justify-content:center;align-content:center;align-items:center}.flex.flex-align-stretch,.flex-lg-h.flex-align-stretch{color:blue;align-items:stretch}.flex-lg-v{display:flex;flex-direction:column}.flex-lg-v>.flex-main{flex:1 1 0;max-height:100%}.flex-lg-v.flex-align-middle{justify-content:center}.flex-lg-v.flex-align-top{justify-content:flex-start}.flex-lg-v.flex-align-left{align-items:flex-start}.flex-lg-v.flex-align-right{align-items:flex-end}.flex-lg-v.flex-align-bottom{justify-content:flex-end}.flex-lg-v.flex-align-center{align-items:center}.flex-lg-v.flex-align-middle-center{align-items:center;justify-content:center}.flex-lg-v.flex-align-stretch{color:red;align-items:stretch}.flex-inline{display:inline-flex}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.flex-grow-0{flex-grow:0}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.flex-shrink-1{flex-shrink:1}.flex-grow-2{flex-grow:2}.flex-shrink-2{flex-shrink:2}}@media only screen and (min-width: 1280px){.flex,.flex-xl-h{display:flex;flex-direction:row}.flex>.flex-main,.flex-xl-h>.flex-main{flex:1 1 0}.flex.flex-align-middle,.flex-xl-h.flex-align-middle{align-items:center}.flex.flex-align-top,.flex-xl-h.flex-align-top{align-items:flex-start}.flex.flex-align-left,.flex-xl-h.flex-align-left{align-items:flex-start}.flex.flex-align-right,.flex-xl-h.flex-align-right{justify-content:flex-end}.flex.flex-align-bottom,.flex-xl-h.flex-align-bottom{align-items:flex-end}.flex.flex-align-center,.flex-xl-h.flex-align-center{justify-content:center}.flex.flex-align-middle-center,.flex-xl-h.flex-align-middle-center{justify-content:center;align-content:center;align-items:center}.flex.flex-align-stretch,.flex-xl-h.flex-align-stretch{color:blue;align-items:stretch}.flex-xl-v{display:flex;flex-direction:column}.flex-xl-v>.flex-main{flex:1 1 0;max-height:100%}.flex-xl-v.flex-align-middle{justify-content:center}.flex-xl-v.flex-align-top{justify-content:flex-start}.flex-xl-v.flex-align-left{align-items:flex-start}.flex-xl-v.flex-align-right{align-items:flex-end}.flex-xl-v.flex-align-bottom{justify-content:flex-end}.flex-xl-v.flex-align-center{align-items:center}.flex-xl-v.flex-align-middle-center{align-items:center;justify-content:center}.flex-xl-v.flex-align-stretch{color:red;align-items:stretch}.flex-inline{display:inline-flex}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.flex-grow-0{flex-grow:0}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.flex-shrink-1{flex-shrink:1}.flex-grow-2{flex-grow:2}.flex-shrink-2{flex-shrink:2}}@media only screen and (min-width: 1540px){.flex,.flex-xxl-h{display:flex;flex-direction:row}.flex>.flex-main,.flex-xxl-h>.flex-main{flex:1 1 0}.flex.flex-align-middle,.flex-xxl-h.flex-align-middle{align-items:center}.flex.flex-align-top,.flex-xxl-h.flex-align-top{align-items:flex-start}.flex.flex-align-left,.flex-xxl-h.flex-align-left{align-items:flex-start}.flex.flex-align-right,.flex-xxl-h.flex-align-right{justify-content:flex-end}.flex.flex-align-bottom,.flex-xxl-h.flex-align-bottom{align-items:flex-end}.flex.flex-align-center,.flex-xxl-h.flex-align-center{justify-content:center}.flex.flex-align-middle-center,.flex-xxl-h.flex-align-middle-center{justify-content:center;align-content:center;align-items:center}.flex.flex-align-stretch,.flex-xxl-h.flex-align-stretch{color:blue;align-items:stretch}.flex-xxl-v{display:flex;flex-direction:column}.flex-xxl-v>.flex-main{flex:1 1 0;max-height:100%}.flex-xxl-v.flex-align-middle{justify-content:center}.flex-xxl-v.flex-align-top{justify-content:flex-start}.flex-xxl-v.flex-align-left{align-items:flex-start}.flex-xxl-v.flex-align-right{align-items:flex-end}.flex-xxl-v.flex-align-bottom{justify-content:flex-end}.flex-xxl-v.flex-align-center{align-items:center}.flex-xxl-v.flex-align-middle-center{align-items:center;justify-content:center}.flex-xxl-v.flex-align-stretch{color:red;align-items:stretch}.flex-inline{display:inline-flex}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.flex-grow-0{flex-grow:0}.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.flex-shrink-1{flex-shrink:1}.flex-grow-2{flex-grow:2}.flex-shrink-2{flex-shrink:2}}
package/{styles → dist/css}/grid/grid.css RENAMED
@@ -1,3 +1,5 @@
1
+
2
+ /**---------------------grid.css---------------------*/
1
3
  .grid {
2
4
  display: grid;
3
5
  }