@symbo.ls/preview 2.11.269 → 2.11.270

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 (2) hide show
  1. package/package.json +2 -2
  2. package/pages/Components.js +41 -69
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@symbo.ls/preview",
3
- "version": "2.11.269",
3
+ "version": "2.11.270",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "9539c62d29cc279dbe7e149aa96bb8ee019c7119",
6
+ "gitHead": "4694cb8cc07ed7dd10624ad23e3ea5de7f45881a",
7
7
  "dependencies": {
8
8
  "@symbo.ls/atoms": "latest",
9
9
  "@symbo.ls/button": "latest"
package/pages/Components.js CHANGED
@@ -10,73 +10,7 @@ export const ComponentsPage = {
10
10
  value: ''
11
11
  },
12
12
 
13
- props: {
14
- fontFamily: 'avenir',
15
- ':before': {
16
- content: '""',
17
- boxSize: 'E 100%',
18
- position: 'fixed',
19
- top: '0',
20
- left: '0',
21
- zIndex: '10',
22
- background: ' linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)',
23
- pointerEvents: 'none'
24
- },
25
- ':after': {
26
- content: '""',
27
- boxSize: 'E 100%',
28
- position: 'fixed',
29
- bottom: '0',
30
- left: '0',
31
- zIndex: '10',
32
- background: ' linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)',
33
- pointerEvents: 'none'
34
- },
35
-
36
- footer: {
37
- position: 'fixed',
38
- width: 'calc(100% - 70px)',
39
- zIndex: '100',
40
- bottom: '0',
41
- right: '0',
42
- align: 'center flex-end',
43
- padding: '- B B -',
44
- '@media only screen and (max-width: 480px)': {
45
- justifyContent: 'center',
46
- padding: '- 20px 30px 20px'
47
- },
48
- search: {
49
- fontFamily: 'avenir',
50
- fontWeight: '400',
51
- round: 'D',
52
- flow: 'row',
53
- border: 'solid, #252527',
54
- borderWidth: '1px',
55
- width: 'G+D',
56
- padding: 'Z A Z B',
57
- position: 'relative',
58
- Icon: {
59
- boxSize: 'A+V A+V',
60
- color: '#3F3F43'
61
- },
62
- input: {
63
- fontFamily: 'avenir',
64
- placeholder: 'find component . . .',
65
- fontSize: 'A',
66
- ':focus ~ svg': { opacity: '0' }
67
- },
68
- x: {
69
- color: 'white',
70
- position: 'absolute',
71
- right: 'A'
72
- }
73
- }
74
- }
75
- },
76
-
77
- cnt: {
78
- extend: 'Flex',
79
-
13
+ Flex: {
80
14
  props: {
81
15
  flow: 'column',
82
16
  padding: 'F E E D',
@@ -243,8 +177,46 @@ export const ComponentsPage = {
243
177
  TimePicker: {}
244
178
  },
245
179
 
246
- footer: {
247
- extend: 'Flex',
180
+ Flex_footer: {
181
+ props: {
182
+ position: 'fixed',
183
+ width: 'calc(100% - 70px)',
184
+ zIndex: '100',
185
+ bottom: '0',
186
+ right: '0',
187
+ align: 'center flex-end',
188
+ padding: '- B B -',
189
+ '@mobile': {
190
+ justifyContent: 'center',
191
+ padding: '- 20px 30px 20px'
192
+ },
193
+ search: {
194
+ fontFamily: 'avenir',
195
+ fontWeight: '400',
196
+ round: 'D',
197
+ flow: 'row',
198
+ border: 'solid, #252527',
199
+ borderWidth: '1px',
200
+ width: 'G+D',
201
+ padding: 'Z A Z B',
202
+ position: 'relative',
203
+ Icon: {
204
+ boxSize: 'A+V A+V',
205
+ color: '#3F3F43'
206
+ },
207
+ input: {
208
+ fontFamily: 'avenir',
209
+ placeholder: 'find component . . .',
210
+ fontSize: 'A',
211
+ ':focus ~ svg': { opacity: '0' }
212
+ },
213
+ x: {
214
+ color: 'white',
215
+ position: 'absolute',
216
+ right: 'A'
217
+ }
218
+ }
219
+ },
248
220
  Search: {
249
221
  extend: SearchWithButton,
250
222
  props: {