@king-design/intact 3.2.2-beta.0 → 3.3.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.
Files changed (96) hide show
  1. package/components/divider/demos/basic.md +35 -0
  2. package/components/divider/demos/horizontal.md +31 -0
  3. package/components/divider/demos/margin.md +32 -0
  4. package/components/divider/demos/text.md +27 -0
  5. package/components/divider/index.md +16 -0
  6. package/components/divider/index.spec.ts +0 -0
  7. package/components/divider/index.ts +36 -0
  8. package/components/divider/index.vdt +35 -0
  9. package/components/divider/styles.ts +109 -0
  10. package/components/dropdown/dropdown.ts +1 -1
  11. package/components/ellipsis/demos/basic.md +44 -0
  12. package/components/ellipsis/demos/custom.md +36 -0
  13. package/components/ellipsis/demos/position.md +24 -0
  14. package/components/ellipsis/index.md +14 -0
  15. package/components/ellipsis/index.spec.ts +58 -0
  16. package/components/ellipsis/index.ts +36 -0
  17. package/components/ellipsis/index.vdt +39 -0
  18. package/components/ellipsis/styles.ts +22 -0
  19. package/components/ellipsis/useEllipsis.ts +31 -0
  20. package/components/menu/demos/showCollapseArrow.md +7 -4
  21. package/components/menu/item.vdt +6 -3
  22. package/components/menu/styles.ts +8 -8
  23. package/components/menu/title.vdt +2 -1
  24. package/components/table/table.vdt +1 -1
  25. package/components/tag/index.spec.ts +1 -1
  26. package/components/tag/tags.vdt +1 -1
  27. package/components/view/index.ts +24 -0
  28. package/es/components/divider/index.d.ts +14 -0
  29. package/es/components/divider/index.js +38 -0
  30. package/es/components/divider/index.spec.d.ts +1 -0
  31. package/es/components/divider/index.spec.js +1 -0
  32. package/es/components/divider/index.vdt.js +31 -0
  33. package/es/components/divider/styles.d.ts +5 -0
  34. package/es/components/divider/styles.js +35 -0
  35. package/es/components/dropdown/dropdown.js +2 -2
  36. package/es/components/ellipsis/index.d.ts +16 -0
  37. package/es/components/ellipsis/index.js +36 -0
  38. package/es/components/ellipsis/index.spec.d.ts +1 -0
  39. package/es/components/ellipsis/index.spec.js +94 -0
  40. package/es/components/ellipsis/index.vdt.js +50 -0
  41. package/es/components/ellipsis/styles.d.ts +5 -0
  42. package/es/components/ellipsis/styles.js +10 -0
  43. package/es/components/ellipsis/useEllipsis.d.ts +4 -0
  44. package/es/components/ellipsis/useEllipsis.js +21 -0
  45. package/es/components/menu/item.vdt.js +8 -3
  46. package/es/components/menu/styles.d.ts +1 -1
  47. package/es/components/menu/styles.js +6 -5
  48. package/es/components/menu/title.vdt.js +6 -2
  49. package/es/components/table/table.vdt.js +1 -1
  50. package/es/components/tag/index.spec.js +4 -2
  51. package/es/components/tag/tags.vdt.js +2 -1
  52. package/es/components/view/index.d.ts +15 -0
  53. package/es/components/view/index.js +30 -0
  54. package/es/i18n/en-US.d.ts +1 -1
  55. package/es/i18n/en-US.js +1 -1
  56. package/es/index.d.ts +5 -2
  57. package/es/index.js +5 -2
  58. package/es/site/data/components/divider/demos/basic/index.d.ts +9 -0
  59. package/es/site/data/components/divider/demos/basic/index.js +18 -0
  60. package/es/site/data/components/divider/demos/basic/react.d.ts +9 -0
  61. package/es/site/data/components/divider/demos/basic/react.js +27 -0
  62. package/es/site/data/components/divider/demos/horizontal/index.d.ts +6 -0
  63. package/es/site/data/components/divider/demos/horizontal/index.js +14 -0
  64. package/es/site/data/components/divider/demos/horizontal/react.d.ts +5 -0
  65. package/es/site/data/components/divider/demos/horizontal/react.js +26 -0
  66. package/es/site/data/components/divider/demos/margin/index.d.ts +8 -0
  67. package/es/site/data/components/divider/demos/margin/index.js +18 -0
  68. package/es/site/data/components/divider/demos/margin/react.d.ts +7 -0
  69. package/es/site/data/components/divider/demos/margin/react.js +37 -0
  70. package/es/site/data/components/divider/demos/text/index.d.ts +5 -0
  71. package/es/site/data/components/divider/demos/text/index.js +13 -0
  72. package/es/site/data/components/divider/demos/text/react.d.ts +4 -0
  73. package/es/site/data/components/divider/demos/text/react.js +19 -0
  74. package/es/site/data/components/divider/index.d.ts +57 -0
  75. package/es/site/data/components/divider/index.js +32 -0
  76. package/es/site/data/components/ellipsis/demos/basic/index.d.ts +12 -0
  77. package/es/site/data/components/ellipsis/demos/basic/index.js +19 -0
  78. package/es/site/data/components/ellipsis/demos/basic/react.d.ts +12 -0
  79. package/es/site/data/components/ellipsis/demos/basic/react.js +40 -0
  80. package/es/site/data/components/ellipsis/demos/custom/index.d.ts +6 -0
  81. package/es/site/data/components/ellipsis/demos/custom/index.js +14 -0
  82. package/es/site/data/components/ellipsis/demos/custom/react.d.ts +5 -0
  83. package/es/site/data/components/ellipsis/demos/custom/react.js +42 -0
  84. package/es/site/data/components/ellipsis/demos/position/index.d.ts +6 -0
  85. package/es/site/data/components/ellipsis/demos/position/index.js +14 -0
  86. package/es/site/data/components/ellipsis/demos/position/react.d.ts +5 -0
  87. package/es/site/data/components/ellipsis/demos/position/react.js +26 -0
  88. package/es/site/data/components/ellipsis/index.d.ts +57 -0
  89. package/es/site/data/components/ellipsis/index.js +32 -0
  90. package/es/site/data/components/menu/demos/showCollapseArrow/react.js +7 -4
  91. package/es/styles/theme.d.ts +8 -0
  92. package/es/styles/theme.js +8 -4
  93. package/i18n/en-US.ts +1 -1
  94. package/index.ts +5 -2
  95. package/package.json +2 -2
  96. package/styles/theme.ts +4 -0
@@ -0,0 +1,40 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
3
+ import React from 'react';
4
+ import { Ellipsis, Split } from '@king-design/react';
5
+ import './index.styl';
6
+ var Demo = /*#__PURE__*/function (_React$Component) {
7
+ _inheritsLoose(Demo, _React$Component);
8
+ function Demo() {
9
+ var _context;
10
+ var _this;
11
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
12
+ args[_key] = arguments[_key];
13
+ }
14
+ _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
15
+ _this.state = {
16
+ disabled: true
17
+ };
18
+ return _this;
19
+ }
20
+ var _proto = Demo.prototype;
21
+ _proto.render = function render() {
22
+ return /*#__PURE__*/React.createElement(Split, {
23
+ style: {
24
+ "width": "400px"
25
+ },
26
+ slotFirst: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Ellipsis, {
27
+ className: "panel"
28
+ }, "\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5\u6D4B\u8BD5"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Ellipsis, {
29
+ className: "panel",
30
+ maxLines: 2
31
+ }, "\u6700\u5927\u51E0\u884C\u5FFD\u7565\u6700\u5927\u51E0\u884C\u5FFD\u7565\u6700\u5927\u51E0\u884C\u5FFD\u7565")),
32
+ slotLast: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Ellipsis, {
33
+ className: "panel",
34
+ disabled: this.state.disabled
35
+ }, "\u4E0D\u5C55\u793Atooltip\u4E0D\u5C55\u793Atooltip"))
36
+ });
37
+ };
38
+ return Demo;
39
+ }(React.Component);
40
+ export { Demo as default };
@@ -0,0 +1,6 @@
1
+ export { default as data } from './index.json';
2
+ import { Component } from 'intact';
3
+ import './index.styl';
4
+ export default class extends Component {
5
+ static template: string | import("intact").Template<any>;
6
+ }
@@ -0,0 +1,14 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ export { default as data } from './index.json';
3
+ import { Component } from 'intact';
4
+ import template from './index.vdt';
5
+ import './index.styl';
6
+ var default_1 = /*#__PURE__*/function (_Component) {
7
+ _inheritsLoose(default_1, _Component);
8
+ function default_1() {
9
+ return _Component.apply(this, arguments) || this;
10
+ }
11
+ return default_1;
12
+ }(Component);
13
+ default_1.template = template;
14
+ export { default_1 as default };
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import './index.styl';
3
+ export default class Demo extends React.Component {
4
+ render(): React.JSX.Element;
5
+ }
@@ -0,0 +1,42 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import React from 'react';
3
+ import { Ellipsis, Button, Icon } from '@king-design/react';
4
+ import './index.styl';
5
+ var Demo = /*#__PURE__*/function (_React$Component) {
6
+ _inheritsLoose(Demo, _React$Component);
7
+ function Demo() {
8
+ return _React$Component.apply(this, arguments) || this;
9
+ }
10
+ var _proto = Demo.prototype;
11
+ _proto.render = function render() {
12
+ return /*#__PURE__*/React.createElement("div", {
13
+ style: {
14
+ width: '200px'
15
+ }
16
+ }, /*#__PURE__*/React.createElement(Ellipsis, {
17
+ className: "panel tooltip-class"
18
+ }, /*#__PURE__*/React.createElement(Icon, {
19
+ className: "ion-heart"
20
+ }), /*#__PURE__*/React.createElement(Button, {
21
+ type: "primary"
22
+ }, "\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(Icon, {
23
+ className: "ion-heart"
24
+ }), /*#__PURE__*/React.createElement(Button, {
25
+ type: "primary"
26
+ }, "\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(Icon, {
27
+ className: "ion-heart"
28
+ }), /*#__PURE__*/React.createElement(Button, {
29
+ type: "primary"
30
+ }, "\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(Icon, {
31
+ className: "ion-heart"
32
+ }), /*#__PURE__*/React.createElement(Button, {
33
+ type: "primary"
34
+ }, "\u6D4B\u8BD5"), /*#__PURE__*/React.createElement(Icon, {
35
+ className: "ion-heart"
36
+ }), /*#__PURE__*/React.createElement(Button, {
37
+ type: "primary"
38
+ }, "\u6D4B\u8BD5")));
39
+ };
40
+ return Demo;
41
+ }(React.Component);
42
+ export { Demo as default };
@@ -0,0 +1,6 @@
1
+ export { default as data } from './index.json';
2
+ import { Component } from 'intact';
3
+ import './index.styl';
4
+ export default class extends Component {
5
+ static template: string | import("intact").Template<any>;
6
+ }
@@ -0,0 +1,14 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ export { default as data } from './index.json';
3
+ import { Component } from 'intact';
4
+ import template from './index.vdt';
5
+ import './index.styl';
6
+ var default_1 = /*#__PURE__*/function (_Component) {
7
+ _inheritsLoose(default_1, _Component);
8
+ function default_1() {
9
+ return _Component.apply(this, arguments) || this;
10
+ }
11
+ return default_1;
12
+ }(Component);
13
+ default_1.template = template;
14
+ export { default_1 as default };
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import './index.styl';
3
+ export default class Demo extends React.Component {
4
+ render(): React.JSX.Element;
5
+ }
@@ -0,0 +1,26 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import React from 'react';
3
+ import { Ellipsis } from '@king-design/react';
4
+ import './index.styl';
5
+ var Demo = /*#__PURE__*/function (_React$Component) {
6
+ _inheritsLoose(Demo, _React$Component);
7
+ function Demo() {
8
+ return _React$Component.apply(this, arguments) || this;
9
+ }
10
+ var _proto = Demo.prototype;
11
+ _proto.render = function render() {
12
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Ellipsis, {
13
+ position: "right",
14
+ style: {
15
+ width: '90px'
16
+ }
17
+ }, "tooltip\u5728\u53F3\u4FA7tooltip\u5728\u53F3\u4FA7"), /*#__PURE__*/React.createElement(Ellipsis, {
18
+ position: "bottom",
19
+ style: {
20
+ width: '90px'
21
+ }
22
+ }, "tooltip\u5728\u4E0B\u65B9tooltip\u5728\u4E0B\u65B9"));
23
+ };
24
+ return Demo;
25
+ }(React.Component);
26
+ export { Demo as default };
@@ -0,0 +1,57 @@
1
+ import { Component } from 'intact';
2
+ import Article from '~/../src/components/article';
3
+ export default class extends Article {
4
+ static sidebar: {
5
+ 组件: {
6
+ title: string;
7
+ category: string;
8
+ order: number;
9
+ sidebar: string;
10
+ path: string;
11
+ }[];
12
+ undefined: ({
13
+ title: string;
14
+ order: number;
15
+ sidebar: string;
16
+ disabled: boolean;
17
+ path: string;
18
+ } | {
19
+ title: string;
20
+ order: number;
21
+ sidebar: string;
22
+ path: string;
23
+ disabled?: undefined;
24
+ })[];
25
+ };
26
+ static data: {
27
+ setting: {
28
+ title: string;
29
+ category: string;
30
+ order: number;
31
+ sidebar: string;
32
+ };
33
+ contents: string;
34
+ index: string;
35
+ catalogs: {
36
+ text: string;
37
+ level: number;
38
+ id: string;
39
+ }[];
40
+ };
41
+ static defaults: () => {
42
+ demos: Component<any, {}, {}, {}>[];
43
+ setting: {
44
+ title: string;
45
+ category: string;
46
+ order: number;
47
+ sidebar: string;
48
+ };
49
+ contents: string;
50
+ index: string;
51
+ catalogs: {
52
+ text: string;
53
+ level: number;
54
+ id: string;
55
+ }[];
56
+ };
57
+ }
@@ -0,0 +1,32 @@
1
+ import _extends from "@babel/runtime-corejs3/helpers/extends";
2
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
3
+ import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
4
+ import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
5
+ import Article from '~/../src/components/article';
6
+ import data from './index.json';
7
+ import sidebar from '~/doc.json';
8
+ var r = require.context('./', true, /demos.*(index|demo).ts/);
9
+ var keys = _keysInstanceProperty(r).call(r);
10
+ var demos = [];
11
+ for (var i = 0; i < keys.length; i++) {
12
+ var file = keys[i];
13
+ if (!_startsWithInstanceProperty(file).call(file, '.')) continue;
14
+ // if we found demo.js then ignore index.js
15
+ if (/demo.ts$/.test(file)) i++;
16
+ demos.push(r(file));
17
+ }
18
+ var default_1 = /*#__PURE__*/function (_Article) {
19
+ _inheritsLoose(default_1, _Article);
20
+ function default_1() {
21
+ return _Article.apply(this, arguments) || this;
22
+ }
23
+ return default_1;
24
+ }(Article);
25
+ default_1.sidebar = sidebar;
26
+ default_1.data = data;
27
+ default_1.defaults = function () {
28
+ return _extends({}, Article.defaults, data, {
29
+ demos: demos
30
+ });
31
+ };
32
+ export { default_1 as default };
@@ -1,7 +1,7 @@
1
1
  import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
2
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
3
3
  import React from 'react';
4
- import { Menu, MenuItem, MenuTitle, Switch, ButtonGroup, Button } from '@king-design/react';
4
+ import { Menu, MenuItem, MenuTitle, Switch, ButtonGroup, Button, Divider } from '@king-design/react';
5
5
  import './index.styl';
6
6
  var Demo = /*#__PURE__*/function (_React$Component) {
7
7
  _inheritsLoose(Demo, _React$Component);
@@ -94,7 +94,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
94
94
  key: "2"
95
95
  }, "menu 2"), /*#__PURE__*/React.createElement(MenuItem, {
96
96
  key: "3"
97
- }, "menu 3"), /*#__PURE__*/React.createElement(MenuTitle, null, "title 2"), /*#__PURE__*/React.createElement(MenuItem, {
97
+ }, "menu 3menu 3menu 3menu 3menu 3menu 3"), /*#__PURE__*/React.createElement(MenuTitle, null, "title 2"), /*#__PURE__*/React.createElement(MenuItem, {
98
98
  key: "4"
99
99
  }, "menu 1"), /*#__PURE__*/React.createElement(MenuItem, {
100
100
  key: "5",
@@ -112,9 +112,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
112
112
  key: "6-4"
113
113
  }, "sub menu 7", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
114
114
  key: "6-7-1"
115
- }, "Option 1"), /*#__PURE__*/React.createElement(MenuItem, {
115
+ }, "option 1"), /*#__PURE__*/React.createElement(MenuItem, {
116
116
  key: "6-7-2"
117
- }, "Option 2"))))), /*#__PURE__*/React.createElement(MenuItem, {
117
+ }, "option 2"))))), /*#__PURE__*/React.createElement(Divider, {
118
+ theme: this.state.theme === 'white' ? 'light' : this.state.theme,
119
+ className: "divider-style"
120
+ }), /*#__PURE__*/React.createElement(MenuItem, {
118
121
  key: "8",
119
122
  to: "/"
120
123
  }, "menu 8")));
@@ -6,21 +6,25 @@ export declare function defaultTheme(): {
6
6
  height: string;
7
7
  fontSize: string;
8
8
  padding: string;
9
+ margin: string;
9
10
  };
10
11
  default: {
11
12
  height: string;
12
13
  fontSize: string;
13
14
  padding: string;
15
+ margin: string;
14
16
  };
15
17
  small: {
16
18
  height: string;
17
19
  fontSize: string;
18
20
  padding: string;
21
+ margin: string;
19
22
  };
20
23
  mini: {
21
24
  height: string;
22
25
  fontSize: string;
23
26
  padding: string;
27
+ margin: string;
24
28
  };
25
29
  color: {
26
30
  primary: string;
@@ -63,21 +67,25 @@ declare let theme: {
63
67
  height: string;
64
68
  fontSize: string;
65
69
  padding: string;
70
+ margin: string;
66
71
  };
67
72
  default: {
68
73
  height: string;
69
74
  fontSize: string;
70
75
  padding: string;
76
+ margin: string;
71
77
  };
72
78
  small: {
73
79
  height: string;
74
80
  fontSize: string;
75
81
  padding: string;
82
+ margin: string;
76
83
  };
77
84
  mini: {
78
85
  height: string;
79
86
  fontSize: string;
80
87
  padding: string;
88
+ margin: string;
81
89
  };
82
90
  color: {
83
91
  primary: string;
@@ -4,22 +4,26 @@ export function defaultTheme() {
4
4
  large: {
5
5
  height: '40px',
6
6
  fontSize: '14px',
7
- padding: '16px'
7
+ padding: '16px',
8
+ margin: '16px'
8
9
  },
9
10
  default: {
10
11
  height: '32px',
11
12
  fontSize: '12px',
12
- padding: '12px'
13
+ padding: '12px',
14
+ margin: '12px'
13
15
  },
14
16
  small: {
15
17
  height: '24px',
16
18
  fontSize: '12px',
17
- padding: '8px'
19
+ padding: '8px',
20
+ margin: '8px'
18
21
  },
19
22
  mini: {
20
23
  height: '20px',
21
24
  fontSize: '12px',
22
- padding: '8px'
25
+ padding: '8px',
26
+ margin: '8px'
23
27
  },
24
28
  color: {
25
29
  primary: '#0091ea',
package/i18n/en-US.ts CHANGED
@@ -86,7 +86,7 @@ const i18n = {
86
86
  '共 {n} 条': 'Total {n}',
87
87
 
88
88
  // table
89
- '/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~': '/(ㄒoㄒ)/~~ No data to display.',
89
+ '暂无数据': 'No data to display.',
90
90
  '重置': 'Reset',
91
91
 
92
92
  // transfer
package/index.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @king-design v3.2.2-beta.0
2
+ * @king-design v3.3.0
3
3
  *
4
4
  * Copyright (c) Kingsoft Cloud
5
5
  * Released under the MIT License
@@ -28,9 +28,11 @@ export * from './components/config';
28
28
  export * from './components/copy';
29
29
  export * from './components/datepicker';
30
30
  export * from './components/dialog';
31
+ export * from './components/divider';
31
32
  export * from './components/drawer';
32
33
  export * from './components/dropdown';
33
34
  export * from './components/editable';
35
+ export * from './components/ellipsis';
34
36
  export * from './components/form';
35
37
  export * from './components/grid';
36
38
  export * from './components/icon';
@@ -63,8 +65,9 @@ export * from './components/transfer';
63
65
  export * from './components/tree';
64
66
  export * from './components/treeSelect';
65
67
  export * from './components/upload';
68
+ export * from './components/view';
66
69
  export * from './components/wave';
67
70
 
68
- export const version = '3.2.2-beta.0';
71
+ export const version = '3.3.0';
69
72
 
70
73
  /* generate end */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@king-design/intact",
3
- "version": "3.2.2-beta.0",
3
+ "version": "3.3.0",
4
4
  "description": "A component library written in Intact for Intact, Vue, React and Angular",
5
5
  "main": "es/index.js",
6
6
  "engines": {
@@ -180,7 +180,7 @@
180
180
  "@emotion/css": "^11.5.0",
181
181
  "dayjs": "^1.10.7",
182
182
  "enquire.js": "^2.1.6",
183
- "intact": "^3.0.31",
183
+ "intact": "^3.0.33",
184
184
  "monaco-editor": "^0.26.1",
185
185
  "mxgraphx": "^4.0.7",
186
186
  "resize-observer-polyfill": "^1.5.1",
package/styles/theme.ts CHANGED
@@ -8,21 +8,25 @@ export function defaultTheme() {
8
8
  height: '40px',
9
9
  fontSize: '14px',
10
10
  padding: '16px',
11
+ margin: '16px',
11
12
  },
12
13
  default: {
13
14
  height: '32px',
14
15
  fontSize: '12px',
15
16
  padding: '12px',
17
+ margin: '12px',
16
18
  },
17
19
  small: {
18
20
  height: '24px',
19
21
  fontSize: '12px',
20
22
  padding: '8px',
23
+ margin: '8px',
21
24
  },
22
25
  mini: {
23
26
  height: '20px',
24
27
  fontSize: '12px',
25
28
  padding: '8px',
29
+ margin: '8px',
26
30
  },
27
31
  color: {
28
32
  primary: '#0091ea',