@qn-pandora/pandora-component 4.0.0 → 4.0.1

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 (124) hide show
  1. package/CHANGELOG.json +17 -0
  2. package/CHANGELOG.md +9 -1
  3. package/README.md +36 -36
  4. package/es/components/AutoComplete/style.less +8 -8
  5. package/es/components/Breadcrumb/style.less +9 -9
  6. package/es/components/Button/style.less +51 -51
  7. package/es/components/Card/RowExtra/style.less +8 -8
  8. package/es/components/Card/SearchInput/style.less +8 -8
  9. package/es/components/Card/style.less +11 -11
  10. package/es/components/CheckTransformList/style.less +35 -35
  11. package/es/components/Checkbox/style.less +5 -5
  12. package/es/components/CheckboxList/style.less +11 -11
  13. package/es/components/Collapse/style.less +57 -57
  14. package/es/components/CollapsiblePanel/style.less +63 -63
  15. package/es/components/DateTimePicker/Base/style.less +160 -160
  16. package/es/components/DateTimePicker/BaseMobile/Absolute/style.less +35 -35
  17. package/es/components/DateTimePicker/BaseMobile/style.less +32 -32
  18. package/es/components/DateTimePicker/Collapse/Panel/style.less +26 -26
  19. package/es/components/DateTimePicker/DisplayInput/style.less +9 -9
  20. package/es/components/DateTimePicker/style.less +19 -19
  21. package/es/components/Drawer/index.d.ts +55 -2
  22. package/es/components/Drawer/index.js +3 -1
  23. package/es/components/Drawer/style.less +17 -17
  24. package/es/components/Input/style.less +12 -12
  25. package/es/components/KeyValuePair/style.less +21 -21
  26. package/es/components/Menu/Option.d.ts +6 -0
  27. package/es/components/Menu/Option.js +16 -1
  28. package/es/components/Menu/index.js +3 -3
  29. package/es/components/Menu/style.less +18 -18
  30. package/es/components/Modal/style.less +30 -30
  31. package/es/components/NameExplainTooltip/style.less +10 -10
  32. package/es/components/NameLimiter/style.less +19 -19
  33. package/es/components/OptionList/InlineOptionList/style.less +16 -16
  34. package/es/components/OptionList/OptionItem/style.less +25 -25
  35. package/es/components/OptionList/PopoverOptionList/style.less +30 -30
  36. package/es/components/OptionList/style.less +3 -3
  37. package/es/components/RadioGroup/style.less +32 -32
  38. package/es/components/RangeInput/style.less +37 -37
  39. package/es/components/RemarkName/style.less +2 -2
  40. package/es/components/Selector/style.less +99 -99
  41. package/es/components/Spin/style.less +26 -26
  42. package/es/components/Steps/ControlButton/style.less +5 -5
  43. package/es/components/Steps/style.less +48 -48
  44. package/es/components/Table/ColumnTag/style.less +40 -40
  45. package/es/components/Table/index.js +7 -4
  46. package/es/components/Table/style.css +4 -4
  47. package/es/components/Table/style.less +306 -306
  48. package/es/components/Tabs/style.less +33 -33
  49. package/es/components/TagList/Tag/style.less +72 -72
  50. package/es/components/TagList/TagSwitch/style.less +28 -28
  51. package/es/components/TagList/style.less +28 -28
  52. package/es/components/Timeline/TimelineItem/style.less +49 -49
  53. package/es/components/Timeline/style.less +23 -23
  54. package/es/components/Transfer/List/style.less +19 -19
  55. package/es/components/Transfer/ListBody/style.less +18 -18
  56. package/es/components/Transfer/style.less +14 -14
  57. package/es/components/TreeSelector/style.less +56 -56
  58. package/es/hoc/popContainer.d.ts +5 -0
  59. package/es/hoc/popContainer.js +37 -0
  60. package/es/index.css +1498 -1498
  61. package/es/index.less +49 -49
  62. package/es/style/mixin.less +45 -45
  63. package/es/style/theme.less +389 -381
  64. package/lib/components/AutoComplete/style.less +8 -8
  65. package/lib/components/Breadcrumb/style.less +9 -9
  66. package/lib/components/Button/style.less +51 -51
  67. package/lib/components/Card/RowExtra/style.less +8 -8
  68. package/lib/components/Card/SearchInput/style.less +8 -8
  69. package/lib/components/Card/style.less +11 -11
  70. package/lib/components/CheckTransformList/style.less +35 -35
  71. package/lib/components/Checkbox/style.less +5 -5
  72. package/lib/components/CheckboxList/style.less +11 -11
  73. package/lib/components/Collapse/style.less +57 -57
  74. package/lib/components/CollapsiblePanel/style.less +63 -63
  75. package/lib/components/DateTimePicker/Base/style.less +160 -160
  76. package/lib/components/DateTimePicker/BaseMobile/Absolute/style.less +35 -35
  77. package/lib/components/DateTimePicker/BaseMobile/style.less +32 -32
  78. package/lib/components/DateTimePicker/Collapse/Panel/style.less +26 -26
  79. package/lib/components/DateTimePicker/DisplayInput/style.less +9 -9
  80. package/lib/components/DateTimePicker/style.less +19 -19
  81. package/lib/components/Drawer/index.d.ts +55 -2
  82. package/lib/components/Drawer/index.js +3 -1
  83. package/lib/components/Drawer/style.less +17 -17
  84. package/lib/components/Input/style.less +12 -12
  85. package/lib/components/KeyValuePair/style.less +21 -21
  86. package/lib/components/Menu/Option.d.ts +6 -0
  87. package/lib/components/Menu/Option.js +16 -1
  88. package/lib/components/Menu/index.js +3 -3
  89. package/lib/components/Menu/style.less +18 -18
  90. package/lib/components/Modal/style.less +30 -30
  91. package/lib/components/NameExplainTooltip/style.less +10 -10
  92. package/lib/components/NameLimiter/style.less +19 -19
  93. package/lib/components/OptionList/InlineOptionList/style.less +16 -16
  94. package/lib/components/OptionList/OptionItem/style.less +25 -25
  95. package/lib/components/OptionList/PopoverOptionList/style.less +30 -30
  96. package/lib/components/OptionList/style.less +3 -3
  97. package/lib/components/RadioGroup/style.less +32 -32
  98. package/lib/components/RangeInput/style.less +37 -37
  99. package/lib/components/RemarkName/style.less +2 -2
  100. package/lib/components/Selector/style.less +99 -99
  101. package/lib/components/Spin/style.less +26 -26
  102. package/lib/components/Steps/ControlButton/style.less +5 -5
  103. package/lib/components/Steps/style.less +48 -48
  104. package/lib/components/Table/ColumnTag/style.less +40 -40
  105. package/lib/components/Table/index.js +6 -3
  106. package/lib/components/Table/style.css +4 -4
  107. package/lib/components/Table/style.less +306 -306
  108. package/lib/components/Tabs/style.less +33 -33
  109. package/lib/components/TagList/Tag/style.less +72 -72
  110. package/lib/components/TagList/TagSwitch/style.less +28 -28
  111. package/lib/components/TagList/style.less +28 -28
  112. package/lib/components/Timeline/TimelineItem/style.less +49 -49
  113. package/lib/components/Timeline/style.less +23 -23
  114. package/lib/components/Transfer/List/style.less +19 -19
  115. package/lib/components/Transfer/ListBody/style.less +18 -18
  116. package/lib/components/Transfer/style.less +14 -14
  117. package/lib/components/TreeSelector/style.less +56 -56
  118. package/lib/hoc/popContainer.d.ts +5 -0
  119. package/lib/hoc/popContainer.js +47 -0
  120. package/lib/index.css +1313 -1313
  121. package/lib/index.less +49 -49
  122. package/lib/style/mixin.less +45 -45
  123. package/lib/style/theme.less +389 -381
  124. package/package.json +79 -79
@@ -1,381 +1,389 @@
1
- @ant-prefix: ant;
2
-
3
- @root-entry-name: 'default';
4
-
5
- // classname前后缀变量=========================================================
6
- @sdk-prefix: pandora-sdk; // 多个使用
7
-
8
- // 基础颜色变量=========================================================
9
- // antd覆盖色
10
- @black: #000000; // phoenix antd
11
- // pandora色
12
- @gray-bg-color: #f4f5f7; // pandora-component pandora-visualization phoenix
13
-
14
- // 基础功能色变量=========================================================
15
-
16
- // 主题色------------------------
17
- // antd覆盖色
18
- @primary-color: #7a869a; // pandora-component antd phoenix
19
- @normal-color: #ffffff; // pandora-component antd 多 phoenix
20
- // pandora色
21
- @second-primary-color: #7a869b; // pandora-component 多
22
- @theme-color: #2c6dd2; // pandora-component 多 phoenix
23
- @theme-color-005: fade(
24
- @theme-color,
25
- 5%
26
- ); // pandora-component pandora-visualization phoenix
27
- @theme-color-008: fade(@theme-color, 8%);
28
- @theme-color-010: fade(@theme-color, 10%); // pandora-component 多 phoenix
29
- @theme-color-015: fade(@theme-color, 15%); // pandora-component 多 phoenix
30
- @theme-color-020: fade(
31
- @theme-color,
32
- 20%
33
- ); // pandora-component pandora-visualization phoenix
34
- @theme-color-060: fade(
35
- @theme-color,
36
- 60%
37
- ); // pandora-component pandora-visualization phoenix
38
- @theme-color-070: fade(@theme-color, 70%); // pandora-component 多 phoenix
39
- @theme-color-080: fade(
40
- @theme-color,
41
- 80%
42
- ); // pandora-component pandora-visualization phoenix
43
- @theme-color-030: fade(@theme-color, 30%); // 多个
44
- @theme-color-050: fade(@theme-color, 50%); // 多个
45
- @theme-color-090: fade(@theme-color, 90%); // 多个
46
-
47
- // 背景阴影色------------------------
48
- @transparent-bg: transparent; // phoenix
49
- @background-secondary: @normal-color; // phoenix
50
- @shadow-bg-color: rgba(0, 0, 0, 0.4); // phoenix
51
- // 深色主题
52
- @dark-background-color: #19202b; // 多个
53
- @dark-item-background-color: #2c2c31; // pandora-visualization
54
-
55
- // 字体------------------------
56
- // antd覆盖色
57
- @text-color: fade(#000, 65%); // 默认字体颜色 // pandora-component antd phoenix
58
- @font-size-base: 14px; // phoenix antd
59
- @text-color-secondary: fade(@black, 45%); // phoenix 跟antd一样
60
- // pandora色
61
- @font-color-1: #232c3b; // pandora-component phoenix
62
- @font-color-2: #42526e; // pandora-component pandora-visualization phoenix
63
- @font-color-3: #7a869a; // pandora-component 多 phoenix
64
- @font-disable-color: #d9d9d9; // pandora-component 多 phoenix
65
- @font-disable-color-2: #bfbfbf;
66
- @font-color-4: #b3bac5; // 多个
67
- @font-color-5: #8d9199; // phoenix
68
- @font-color-6: #666;
69
- @font-color-9: #999;
70
- @font-color-7: #333;
71
- @secondary-font-color: #c1c7d0; // phoenix
72
- @disabled-text-color: #9eaec5; // pandora-visualization pheonix
73
- @log-font-family: 'Droid Sans Mono', 'Consolas', 'Monaco', 'Courier New',
74
- Courier, monospace; // pandora-app-component phoenix
75
-
76
- // 布局------------------------
77
- // antd覆盖色
78
- @body-background: @normal-color; // pandora-component antd pandora-app-component phoenix
79
- @component-background: @normal-color; // pandora-component antd phoenix
80
- // pandora色
81
- @content-color: #42526e; // pandora-component pandora-visualization phoenix
82
- @title-color: rgba(35, 44, 59, 1); // pandora-component phoenix
83
- @title-dark-color: #c1c7d0; // pandora-app-component!!!!!!!
84
- @heading-color: #333;
85
- @off-color: #ebecf0; // phoenix
86
-
87
- // 提示------------------------
88
- // antd覆盖色
89
- @error-color: #f5222d; // pandora-component antd 多 phoenix
90
- @warning-color: #f0a818; // pandora-component antd phoenix
91
- @success-color: #20c997; // pandora-component antd pandora-visualization phoenix
92
- @highlight-color: @warning-color; // phoenix antd
93
- // pandora
94
- @delete-color: #ff6b6b; // pandora-component phoenix
95
- @delete-color-030: rgba(255, 107, 107, 0.3); // phoenix
96
- @delete-color-010: rgba(255, 107, 107, 0.1); // pandora-app-component phoenix
97
- @font-warning-color: #faad14; // phoenix
98
-
99
- // 边框------------------------
100
- // antd覆盖色
101
- @border-color-base: #e5e5e5; // pandora-component antd 多 phoenix
102
- @border-radius-base: 2px; // antd
103
- @border-radius-sm: 2px; // antd
104
- @border-color-split: @border-color-base; // antd
105
- // pandora
106
- @border-color-normal: #e5e5e5;
107
- @border-color-1: #d9d9d9;
108
- @modal-header-border-color: rgba(0, 0, 0, 0.09);
109
-
110
- // icon------------------------
111
- // antd覆盖色
112
- @icon-color: #bfbfbf; // pandora-component antd 多 phoenix
113
- // pandora色
114
- @icon-color-2: rgba(
115
- 66,
116
- 82,
117
- 110,
118
- 1
119
- ); // pandora-component pandora-visualization phoenix
120
-
121
- // z-index------------------------
122
- // antd覆盖色
123
- @zindex-modal: 1200; // pandora-app-component phoenix antd
124
- @zindex-modal-mask: 1200; // antd
125
- @zindex-popover: 1200; // antd
126
- @zindex-tooltip: 1300; // antd
127
- // pandora
128
- @zindex-layout-navbar: 1100; // phoenix
129
- @zindex-layout-sidebar: 1000; // phoenix
130
- @zindex-toaster: 3000; // app-platform phoenix
131
-
132
- // 组件色变量=========================================================
133
-
134
- // Common Button------------------------
135
- // antd覆盖色
136
- @btn-primary-color: @normal-color; // antd
137
- @btn-primary-bg: @theme-color; // antd
138
- @btn-default-color: rgba(0, 0, 0, 0.65); // antd
139
- @btn-default-bg: @body-background; // antd
140
- @btn-disable-color: rgb(238, 238, 238); // antd
141
- @btn-disable-bg: @theme-color-070; // antd
142
- // pandora色
143
- @button-disabled-bg: #eee; // pandora-component pandora-visualization phoenix
144
- @button-disabled-color: #bfbfbf; // pandora-component pandora-visualization phoenix
145
- @button-disabled-border-color: #eee; // pandora-component pandora-visualization phoenix
146
- @button-default-bg: @normal-color; // pandora-component pandora-visualization phoenix
147
- @button-default-color: rgba(
148
- 0,
149
- 0,
150
- 0,
151
- 0.65
152
- ); // pandora-component pandora-visualization phoenix
153
- @button-default-border-color: @input-border-color; // pandora-component pandora-visualization phoenix
154
- @button-default-hover-bg: @table-thead-bg; // pandora-component pandora-visualization phoenix
155
- @button-default-hover-color: @theme-color; // pandora-component pandora-visualization phoenix
156
- @button-default-hover-border-color: @input-border-color; // pandora-component pandora-visualization phoenix
157
- @button-primary-bg: @theme-color; // pandora-component pandora-visualization phoenix
158
- @button-primary-color: @normal-color; // pandora-component pandora-visualization phoenix
159
- @button-primary-border-color: @theme-color; // pandora-component pandora-visualization phoenix
160
- @button-primary-hover-bg: @theme-color-080; // pandora-component pandora-visualization phoenix
161
- @button-primary-hover-color: @normal-color; // pandora-component pandora-visualization phoenix
162
- @button-primary-hover-border-color: @theme-color-080; // pandora-component pandora-visualization phoenix
163
- @button-ghost-bg: transparent; // pandora-component pandora-visualization phoenix
164
- @button-ghost-color: @theme-color; // pandora-component pandora-visualization phoenix
165
- @button-ghost-border-color: @theme-color; // pandora-component pandora-visualization phoenix
166
- @button-ghost-hover-bg: @theme-color; // pandora-component pandora-visualization phoenix
167
- @button-ghost-hover-color: @normal-color; // pandora-component pandora-visualization phoenix
168
- @button-ghost-hover-border-color: @theme-color; // pandora-component pandora-visualization phoenix
169
- @btn-cancel-color: @theme-color; // pandora-component phoenix
170
- @btn-cancel-bg: #e9f0fa; // pandora-component phoenix
171
-
172
- // Input和label------------------------
173
- // antd覆盖色
174
- @input-placeholder-color: #bfbfbf; // pandora-component antd 多 phoenix
175
- @input-border-color: #bfbfbf; // pandora-component antd
176
- @input-height-base: 32px; // phoenix antd
177
- @input-height-lg: 40px; // antd
178
- @input-height-sm: 26px; // antd
179
- @input-padding-vertical-base: 4px;
180
- @input-bg: transparent; // 多个 antd
181
- @input-disabled-bg: #f5f5f5; // antd
182
- @input-disabled-border-color: #d9d9d9; // pandora-app-component
183
- @input-color: #333333; // antd
184
- @input-hover-border-color: @theme-color; // 本文件 antd
185
- // pandora色
186
- @input-error-color: fade(@delete-color, 15); // phoenix
187
- @input-light-bg: #c1c7d0; // pandora-app-component
188
- @input-dark-bg: rgba(44, 109, 210, 0.1); // pandora-app-component
189
- @label-dark-bg: rgba(44, 109, 210, 0.3); // pandora-app-component
190
-
191
- // Select------------------------
192
- // antd覆盖色
193
- @select-border-color: @input-border-color; // antd
194
- // pandora色
195
- @select-bg: @input-bg; // pandora-component pandora-visualization phoenix
196
- @select-popover-hover-color: @theme-color-005; // pandora-component pandora-visualization phoenix
197
- @select-item-selected-bg: @select-popover-hover-color;
198
- @select-item-active-bg: @select-popover-hover-color;
199
- @select-dropdown-line-height: 24px;
200
- @item-hover-bg: @select-popover-hover-color;
201
- @select-dropdown-edge-child-vertical-padding: 4px;
202
- @select-selection-bg: #f5f5f5;
203
-
204
- // Table------------------------
205
- // antd覆盖色
206
- // TODO: 暂时写死,后续通过函数计算@theme-color-010得到
207
- @table-row-hover-bg: #e9f0fa;
208
- @table-selected-row-bg: @theme-color; // antd
209
- @table-padding-vertical: 14px; // antd
210
- @table-padding-horizontal: 12px; // antd
211
- // pandora色
212
- @table-row-odd-bg: @normal-color; // pandora-component phoenix
213
- @table-row-even-bg: #fafafa; // pandora-component phoenix
214
- @table-thead-color: #333; // pandora-component phoenix
215
- @table-thead-bg: #fafafa; // pandora-component
216
- @table-link-color: @theme-color; // pandora-component phoenix
217
- @table-border-color: rgba(235, 236, 240, 1); // phoenix
218
- @table-search-icon-color: #bfbfbf; // phoenix
219
- @table-sorter-icon-color: #bfbfbf; // phoenix
220
-
221
- // Tabs------------------------
222
- @tabs-ink-bar-color: @theme-color;
223
- @tabs-highlight-color: @theme-color;
224
- @tabs-hover-color: @theme-color;
225
- @tabs-active-color: @theme-color;
226
-
227
- // Tag------------------------
228
- // antd覆盖色
229
- // pandora色
230
- @tag-green: @success-color; // pandora-component phoenix
231
- @tag-primary: @theme-color; // pandora-component phoenix
232
- @tag-yellow: @warning-color; // pandora-component phoenix
233
- @tag-blue: #03a9f4; // pandora-component phoenix
234
- @tag-grey: #ebecf0; // pandora-component phoenix
235
- @tag-bg-primary-color: @success-color; // phoenix
236
-
237
- //移动端绝对时间选择组件------------------------
238
- // antd覆盖色
239
- // pandora色
240
- @time-absolute-sub-title: rgba(235, 236, 240, 1); // pandora-component
241
- @time-absolute-am-picker-col-indicator: rgba(
242
- 235,
243
- 236,
244
- 240,
245
- 0.5
246
- ); // pandora-component
247
- @time-absolute-picker-title-div: #939393; // pandora-component
248
-
249
- // sidebar------------------------
250
- @layout-sidebar-width: 240px; // phoenix
251
- @layout-sidebar-collapsed-width: 0px; // phoenix
252
- @layout-navbar-height: 52px; // phoenix
253
- @layout-navbar-sub-height: 56px; // phoenix
254
- // 深色主题
255
- @side-bar-active-color: #6ac73c; // pandora-visualization
256
-
257
- // Tooltip------------------------
258
- // antd覆盖色
259
- @tooltip-bg: fade(@font-color-1, 80); // antd
260
- @tooltip-color: @normal-color; // 跟antd一样
261
- @tooltip-arrow-color: @tooltip-bg; // antd
262
- // pandora色
263
- @tooltip-shadow-color-1: rgba(35, 44, 59, 0.2); // phoenix
264
-
265
- // toaster // pheonix app-platform均有一份toaster组件,其实都差不多的------------------------
266
- // antd覆盖色
267
- // pandora色
268
- @toaster-error-bg: rgba(250, 100, 100, 0.8);
269
- @toaster-success-bg: rgba(32, 201, 151, 0.8);
270
- @toaster-warning-bg: rgba(252, 196, 25, 0.8);
271
- @toaster-info-bg: @theme-color-080;
272
- @toaster-error-shadow: rgba(255, 107, 107, 0.3);
273
- @toaster-success-shadow: rgba(32, 201, 151, 0.3);
274
- @toaster-warning-shadow: rgba(252, 196, 25, 0.3);
275
- @toaster-info-shadow: rgba(44, 109, 210, 0.3);
276
-
277
- // tree------------------------
278
- // antd覆盖色
279
- @tree-title-height: 24px; // antd
280
- @tree-child-padding: 8px; // antd
281
- @tree-node-hover-bg: @theme-color-005; // pheonix antd
282
- @tree-node-selected-bg: @theme-color-005; // pheonix antd
283
- // pandora色
284
- @tree-node-hover-color: @theme-color; // pheonix
285
- @tree-node-selected-color: @theme-color; // pheonix
286
-
287
- // pagination------------------------
288
- // antd覆盖色
289
- @pagination-item-size: 32px; // 跟antd一样
290
- // pandora色
291
- @pagination-item-text-color: @font-color-6;
292
- @pagination-item-border-color: @border-color-1;
293
-
294
- // form------------------------
295
- // antd覆盖色
296
- @form-item-margin-bottom: 20px; // antd
297
- // pandora色
298
-
299
- // outline------------------------
300
- // antd覆盖色
301
- @outline-color: @input-hover-border-color; // antd
302
- // pandora色
303
-
304
- // Slider // antd------------------------
305
- // antd覆盖色
306
- @slider-rail-background-color: @input-bg; // antd
307
- @slider-rail-background-color-hover: @input-bg; // antd
308
- @slider-track-background-color: @theme-color-090; // antd
309
- @slider-track-background-color-hover: @theme-color;
310
- @slider-handle-color: @theme-color-090;
311
- @slider-handle-color-hover: @theme-color;
312
- @slider-handle-color-focus: @theme-color;
313
- @slider-handle-color-focus-shadow: @theme-color;
314
- @slider-handle-color-tooltip-open: @theme-color;
315
- // pandora色
316
-
317
- // Card------------------------
318
- @card-padding-base: 20px;
319
- @card-radius: 2px;
320
-
321
- // Checkbox-------------------------------------------
322
- // antd覆盖色
323
- @checkbox-color: @theme-color; // antd
324
- @checkbox-check-color: #fff; // antd
325
- // pandora色
326
-
327
- // Breadcrumb-------------------------------------------
328
- // antd覆盖色
329
- @breadcrumb-font-size: 16px;
330
- @breadcrumb-icon-font-size: @breadcrumb-font-size;
331
- @breadcrumb-base-color: #999999; // antd
332
- @breadcrumb-last-item-color: rgba(0, 0, 0, 0.85); // antd
333
- @breadcrumb-link-color: @breadcrumb-base-color; // antd
334
- @breadcrumb-link-color-hover: @breadcrumb-base-color; // antd
335
- // pandora色
336
-
337
- // LINK-------------------------------------------
338
- // antd覆盖色
339
- @link-color: @primary-color; // antd
340
- @link-hover-color: @theme-color; // antd
341
- @link-active-color: @theme-color; // phoenix antd
342
- @link-decoration: none; // antd
343
- @link-hover-decoration: none; // antd
344
- // pandora色
345
-
346
- // Menu-------------------------------------------
347
- // antd覆盖色
348
- @menu-inline-toplevel-item-height: 32px; // antd
349
- @menu-item-height: 32px; // antd
350
- @menu-collapsed-width: 100px; // antd
351
- @menu-bg: @component-background; // antd
352
- @menu-item-color: @font-color-3; // antd
353
- @menu-highlight-color: @theme-color; // antd
354
- @menu-item-active-bg: rgba(255, 255, 255, 0.1); // antd
355
- @menu-item-group-title-color: @icon-color; // antd
356
- @menu-item-hover-bg: #ccd3d9; // phoenix
357
- // pandora色
358
- @menu-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
359
- // dark theme
360
- @menu-dark-color: @normal-color; // antd
361
- @menu-dark-bg: @theme-color; // phoenix antd
362
- @menu-dark-arrow-color: @normal-color; // antd
363
- @menu-dark-submenu-bg: #2967c7; // antd
364
- @menu-dark-highlight-color: @normal-color; // antd
365
- @menu-dark-item-active-bg: rgba(255, 255, 255, 0.1); // phoenix antd
366
-
367
- .@{ant-prefix}-btn {
368
- padding: 4px 15px;
369
- }
370
- .@{ant-prefix}-btn-sm {
371
- padding: 0 7px;
372
- }
373
-
374
- @icon-hover-color: rgba(19, 107, 255, 0.1);
375
-
376
- // radio--------------
377
- // antd覆盖色
378
- @radio-dot-color: @theme-color;
379
- @radio-button-color: @heading-color;
380
- @radio-button-active-color: @theme-color;
381
- @radio-button-hover-color: @theme-color;
1
+ @ant-prefix: ant;
2
+
3
+ @root-entry-name: 'default';
4
+
5
+ // classname前后缀变量=========================================================
6
+ @sdk-prefix: pandora-sdk; // 多个使用
7
+
8
+ // 基础颜色变量=========================================================
9
+ // antd覆盖色
10
+ @black: #000000; // phoenix antd
11
+ // pandora色
12
+ @gray-bg-color: #f4f5f7; // pandora-component pandora-visualization phoenix
13
+
14
+ // 基础功能色变量=========================================================
15
+
16
+ // 主题色------------------------
17
+ // antd覆盖色
18
+ @primary-color: #7a869a; // pandora-component antd phoenix
19
+ @normal-color: #ffffff; // pandora-component antd 多 phoenix
20
+ // pandora色
21
+ @second-primary-color: #7a869b; // pandora-component 多
22
+ @theme-color: #2c6dd2; // pandora-component 多 phoenix
23
+ @theme-color-005: fade(
24
+ @theme-color,
25
+ 5%
26
+ ); // pandora-component pandora-visualization phoenix
27
+ @theme-color-008: fade(@theme-color, 8%);
28
+ @theme-color-010: fade(@theme-color, 10%); // pandora-component 多 phoenix
29
+ @theme-color-015: fade(@theme-color, 15%); // pandora-component 多 phoenix
30
+ @theme-color-020: fade(
31
+ @theme-color,
32
+ 20%
33
+ ); // pandora-component pandora-visualization phoenix
34
+ @theme-color-060: fade(
35
+ @theme-color,
36
+ 60%
37
+ ); // pandora-component pandora-visualization phoenix
38
+ @theme-color-070: fade(@theme-color, 70%); // pandora-component 多 phoenix
39
+ @theme-color-080: fade(
40
+ @theme-color,
41
+ 80%
42
+ ); // pandora-component pandora-visualization phoenix
43
+ @theme-color-030: fade(@theme-color, 30%); // 多个
44
+ @theme-color-050: fade(@theme-color, 50%); // 多个
45
+ @theme-color-090: fade(@theme-color, 90%); // 多个
46
+
47
+ // hover时背景颜色
48
+ @hover-bg: #f3f7fd;
49
+
50
+ // 背景阴影色------------------------
51
+ @transparent-bg: transparent; // phoenix
52
+ @background-secondary: @normal-color; // phoenix
53
+ @shadow-bg-color: rgba(0, 0, 0, 0.4); // phoenix
54
+ @shadow-bg-color-light: rgba(51, 51, 51, 0.08); // phoenix
55
+ // 深色主题
56
+ @dark-background-color: #19202b; // 多个
57
+ @dark-item-background-color: #2c2c31; // pandora-visualization
58
+
59
+ // 字体------------------------
60
+ // antd覆盖色
61
+ @text-color: fade(#000, 65%); // 默认字体颜色 // pandora-component antd phoenix
62
+ @font-size-base: 14px; // phoenix antd
63
+ @text-color-secondary: fade(@black, 45%); // phoenix 跟antd一样
64
+ // pandora
65
+ @font-color-1: #232c3b; // pandora-component 多 phoenix
66
+ @font-color-2: #42526e; // pandora-component pandora-visualization phoenix
67
+ @font-color-3: #7a869a; // pandora-component 多 phoenix
68
+ @font-disable-color: #d9d9d9; // pandora-component 多 phoenix
69
+ @font-disable-color-2: #bfbfbf;
70
+ @font-color-4: #b3bac5; // 多个
71
+ @font-color-5: #8d9199; // phoenix
72
+ @font-color-6: #666;
73
+ @font-color-9: #999;
74
+ @font-color-7: #333;
75
+ @secondary-font-color: #c1c7d0; // phoenix
76
+ @disabled-text-color: #9eaec5; // pandora-visualization pheonix
77
+ @log-font-family: 'Droid Sans Mono', 'Consolas', 'Monaco', 'Courier New',
78
+ Courier, monospace; // pandora-app-component phoenix
79
+
80
+ // 布局------------------------
81
+ // antd覆盖色
82
+ @body-background: @normal-color; // pandora-component antd pandora-app-component phoenix
83
+ @component-background: @normal-color; // pandora-component antd phoenix
84
+ // pandora色
85
+ @content-color: #42526e; // pandora-component pandora-visualization phoenix
86
+ @title-color: rgba(35, 44, 59, 1); // pandora-component phoenix
87
+ @title-dark-color: #c1c7d0; // pandora-app-component!!!!!!!
88
+ @heading-color: #333;
89
+ @off-color: #ebecf0; // phoenix
90
+
91
+ // 提示------------------------
92
+ // antd覆盖色
93
+ @error-color: #f5222d; // pandora-component antd 多 phoenix
94
+ @warning-color: #f0a818; // pandora-component antd phoenix
95
+ @success-color: #20c997; // pandora-component antd pandora-visualization phoenix
96
+ @highlight-color: @warning-color; // phoenix antd
97
+ // pandora色
98
+ @delete-color: #ff6b6b; // pandora-component 多 phoenix
99
+ @delete-color-030: rgba(255, 107, 107, 0.3); // phoenix
100
+ @delete-color-010: rgba(255, 107, 107, 0.1); // pandora-app-component phoenix
101
+ @font-warning-color: #faad14; // phoenix
102
+
103
+ // 边框------------------------
104
+ // antd覆盖色
105
+ @border-color-base: #e5e5e5; // pandora-component antd 多 phoenix
106
+ @border-radius-base: 2px; // antd
107
+ @border-radius-sm: 2px; // antd
108
+ @border-color-split: @border-color-base; // antd
109
+ // pandora色
110
+ @border-color-normal: #e5e5e5;
111
+ @border-color-1: #d9d9d9;
112
+ @modal-header-border-color: rgba(0, 0, 0, 0.09);
113
+
114
+ // icon------------------------
115
+ // antd覆盖色
116
+ @icon-color: #bfbfbf; // pandora-component antd 多 phoenix
117
+ // pandora色
118
+ @icon-color-2: rgba(
119
+ 66,
120
+ 82,
121
+ 110,
122
+ 1
123
+ ); // pandora-component pandora-visualization phoenix
124
+
125
+ // z-index------------------------
126
+ // antd覆盖色
127
+ @zindex-modal: 1200; // pandora-app-component phoenix antd
128
+ @zindex-modal-mask: 1200; // antd
129
+ @zindex-popover: 1200; // antd
130
+ @zindex-tooltip: 1300; // antd
131
+ // pandora色
132
+ @zindex-layout-navbar: 1100; // phoenix
133
+ @zindex-layout-sidebar: 1000; // phoenix
134
+ @zindex-toaster: 3000; // app-platform phoenix
135
+
136
+ // 组件色变量=========================================================
137
+
138
+ // Common Button------------------------
139
+ // antd覆盖色
140
+ @btn-primary-color: @normal-color; // antd
141
+ @btn-primary-bg: @theme-color; // antd
142
+ @btn-default-color: rgba(0, 0, 0, 0.65); // antd
143
+ @btn-default-bg: @body-background; // antd
144
+ @btn-disable-color: rgb(238, 238, 238); // antd
145
+ @btn-disable-bg: @theme-color-070; // antd
146
+ // pandora
147
+ @button-disabled-bg: #eee; // pandora-component pandora-visualization phoenix
148
+ @button-disabled-color: #bfbfbf; // pandora-component pandora-visualization phoenix
149
+ @button-disabled-border-color: #eee; // pandora-component pandora-visualization phoenix
150
+ @button-default-bg: @normal-color; // pandora-component pandora-visualization phoenix
151
+ @button-default-color: rgba(
152
+ 0,
153
+ 0,
154
+ 0,
155
+ 0.65
156
+ ); // pandora-component pandora-visualization phoenix
157
+ @button-default-border-color: @input-border-color; // pandora-component pandora-visualization phoenix
158
+ @button-default-hover-bg: @table-thead-bg; // pandora-component pandora-visualization phoenix
159
+ @button-default-hover-color: @theme-color; // pandora-component pandora-visualization phoenix
160
+ @button-default-hover-border-color: @input-border-color; // pandora-component pandora-visualization phoenix
161
+ @button-primary-bg: @theme-color; // pandora-component pandora-visualization phoenix
162
+ @button-primary-color: @normal-color; // pandora-component pandora-visualization phoenix
163
+ @button-primary-border-color: @theme-color; // pandora-component pandora-visualization phoenix
164
+ @button-primary-hover-bg: @theme-color-080; // pandora-component pandora-visualization phoenix
165
+ @button-primary-hover-color: @normal-color; // pandora-component pandora-visualization phoenix
166
+ @button-primary-hover-border-color: @theme-color-080; // pandora-component pandora-visualization phoenix
167
+ @button-ghost-bg: transparent; // pandora-component pandora-visualization phoenix
168
+ @button-ghost-color: @theme-color; // pandora-component pandora-visualization phoenix
169
+ @button-ghost-border-color: @theme-color; // pandora-component pandora-visualization phoenix
170
+ @button-ghost-hover-bg: @theme-color; // pandora-component pandora-visualization phoenix
171
+ @button-ghost-hover-color: @normal-color; // pandora-component pandora-visualization phoenix
172
+ @button-ghost-hover-border-color: @theme-color; // pandora-component pandora-visualization phoenix
173
+ @btn-cancel-color: @theme-color; // pandora-component 多 phoenix
174
+ @btn-cancel-bg: #e9f0fa; // pandora-component 多 phoenix
175
+
176
+ // Input和label------------------------
177
+ // antd覆盖色
178
+ @input-placeholder-color: #bfbfbf; // pandora-component antd 多 phoenix
179
+ @input-border-color: #bfbfbf; // pandora-component antd
180
+ @input-height-base: 32px; // phoenix antd
181
+ @input-height-lg: 40px; // antd
182
+ @input-height-sm: 26px; // antd
183
+ @input-padding-vertical-base: 4px;
184
+ @input-bg: transparent; // 多个 antd
185
+ @input-disabled-bg: #f5f5f5; // antd
186
+ @input-disabled-border-color: #d9d9d9; // pandora-app-component
187
+ @input-color: #333333; // antd
188
+ @input-hover-border-color: @theme-color; // 本文件 antd
189
+ // pandora
190
+ @input-error-color: fade(@delete-color, 15); // phoenix
191
+ @input-light-bg: #c1c7d0; // pandora-app-component
192
+ @input-dark-bg: rgba(44, 109, 210, 0.1); // pandora-app-component
193
+ @label-dark-bg: rgba(44, 109, 210, 0.3); // pandora-app-component
194
+
195
+ // Select------------------------
196
+ // antd覆盖色
197
+ @select-border-color: @input-border-color; // antd
198
+ // pandora色
199
+ @select-bg: @input-bg; // pandora-component pandora-visualization phoenix
200
+ @select-popover-hover-color: @theme-color-005; // pandora-component pandora-visualization phoenix
201
+ @select-item-selected-bg: @select-popover-hover-color;
202
+ @select-item-active-bg: @select-popover-hover-color;
203
+ @select-dropdown-line-height: 24px;
204
+ @item-hover-bg: @select-popover-hover-color;
205
+ @select-dropdown-edge-child-vertical-padding: 4px;
206
+ @select-selection-bg: #f5f5f5;
207
+
208
+ // Table------------------------
209
+ // antd覆盖色
210
+ // TODO: 暂时写死,后续通过函数计算@theme-color-010得到
211
+ @table-row-hover-bg: @hover-bg;
212
+ @table-selected-row-bg: @theme-color; // antd
213
+ @table-padding-vertical: 14px; // antd
214
+ @table-padding-horizontal: 12px; // antd
215
+ // pandora
216
+ @table-row-odd-bg: @normal-color; // pandora-component phoenix
217
+ @table-row-even-bg: #fafafa; // pandora-component phoenix
218
+ @table-thead-color: #333; // pandora-component phoenix
219
+ @table-thead-bg: #fafafa; // pandora-component
220
+ @table-link-color: @theme-color; // pandora-component phoenix
221
+ @table-border-color: rgba(235, 236, 240, 1); // phoenix
222
+ @table-search-icon-color: #bfbfbf; // phoenix
223
+ @table-sorter-icon-color: #bfbfbf; // phoenix
224
+
225
+ // Tabs------------------------
226
+ @tabs-ink-bar-color: @theme-color;
227
+ @tabs-highlight-color: @theme-color;
228
+ @tabs-hover-color: @theme-color;
229
+ @tabs-active-color: @theme-color;
230
+
231
+ // Tag------------------------
232
+ // antd覆盖色
233
+ // pandora
234
+ @tag-green: @success-color; // pandora-component phoenix
235
+ @tag-primary: @theme-color; // pandora-component phoenix
236
+ @tag-yellow: @warning-color; // pandora-component phoenix
237
+ @tag-blue: #03a9f4; // pandora-component phoenix
238
+ @tag-grey: #ebecf0; // pandora-component phoenix
239
+ @tag-bg-primary-color: @success-color; // phoenix
240
+
241
+ //移动端绝对时间选择组件------------------------
242
+ // antd覆盖色
243
+ // pandora色
244
+ @time-absolute-sub-title: rgba(235, 236, 240, 1); // pandora-component
245
+ @time-absolute-am-picker-col-indicator: rgba(
246
+ 235,
247
+ 236,
248
+ 240,
249
+ 0.5
250
+ ); // pandora-component
251
+ @time-absolute-picker-title-div: #939393; // pandora-component
252
+
253
+ // sidebar------------------------
254
+ @layout-sidebar-width: 240px; // phoenix
255
+ @layout-sidebar-collapsed-width: 0px; // phoenix
256
+ @layout-navbar-height: 52px; // phoenix
257
+ @layout-navbar-sub-height: 56px; // phoenix
258
+ // 深色主题
259
+ @side-bar-active-color: #6ac73c; // pandora-visualization
260
+
261
+ // Tooltip------------------------
262
+ // antd覆盖色
263
+ @tooltip-bg: fade(@font-color-1, 80); // antd
264
+ @tooltip-color: @normal-color; // 跟antd一样
265
+ @tooltip-arrow-color: @tooltip-bg; // antd
266
+ // pandora色
267
+ @tooltip-shadow-color-1: rgba(35, 44, 59, 0.2); // phoenix
268
+
269
+ // toaster // pheonix app-platform均有一份toaster组件,其实都差不多的------------------------
270
+ // antd覆盖色
271
+ // pandora色
272
+ @toaster-error-bg: rgba(250, 100, 100, 0.8);
273
+ @toaster-success-bg: rgba(32, 201, 151, 0.8);
274
+ @toaster-warning-bg: rgba(252, 196, 25, 0.8);
275
+ @toaster-info-bg: @theme-color-080;
276
+ @toaster-error-shadow: rgba(255, 107, 107, 0.3);
277
+ @toaster-success-shadow: rgba(32, 201, 151, 0.3);
278
+ @toaster-warning-shadow: rgba(252, 196, 25, 0.3);
279
+ @toaster-info-shadow: rgba(44, 109, 210, 0.3);
280
+
281
+ // tree------------------------
282
+ // antd覆盖色
283
+ @tree-title-height: 24px; // antd
284
+ @tree-child-padding: 8px; // antd
285
+ @tree-node-hover-bg: @theme-color-005; // pheonix antd
286
+ @tree-node-selected-bg: @theme-color-005; // pheonix antd
287
+ // pandora色
288
+ @tree-node-hover-color: @theme-color; // pheonix
289
+ @tree-node-selected-color: @theme-color; // pheonix
290
+
291
+ // pagination------------------------
292
+ // antd覆盖色
293
+ @pagination-item-size: 32px; // 跟antd一样
294
+ // pandora色
295
+ @pagination-item-text-color: @font-color-6;
296
+ @pagination-item-border-color: @border-color-1;
297
+
298
+ // form------------------------
299
+ // antd覆盖色
300
+ @form-item-margin-bottom: 20px; // antd
301
+ // pandora色
302
+
303
+ // outline------------------------
304
+ // antd覆盖色
305
+ @outline-color: @input-hover-border-color; // antd
306
+ // pandora色
307
+
308
+ // Slider // antd------------------------
309
+ // antd覆盖色
310
+ @slider-rail-background-color: @input-bg; // antd
311
+ @slider-rail-background-color-hover: @input-bg; // antd
312
+ @slider-track-background-color: @theme-color-090; // antd
313
+ @slider-track-background-color-hover: @theme-color;
314
+ @slider-handle-color: @theme-color-090;
315
+ @slider-handle-color-hover: @theme-color;
316
+ @slider-handle-color-focus: @theme-color;
317
+ @slider-handle-color-focus-shadow: @theme-color;
318
+ @slider-handle-color-tooltip-open: @theme-color;
319
+ // pandora色
320
+
321
+ // Card------------------------
322
+ @card-padding-base: 20px;
323
+ @card-radius: 2px;
324
+
325
+ // Checkbox-------------------------------------------
326
+ // antd覆盖色
327
+ @checkbox-color: @theme-color; // antd
328
+ @checkbox-check-color: #fff; // antd
329
+ // pandora色
330
+
331
+ // Breadcrumb-------------------------------------------
332
+ // antd覆盖色
333
+ @breadcrumb-font-size: 16px;
334
+ @breadcrumb-icon-font-size: @breadcrumb-font-size;
335
+ @breadcrumb-base-color: #999999; // antd
336
+ @breadcrumb-last-item-color: rgba(0, 0, 0, 0.85); // antd
337
+ @breadcrumb-link-color: @breadcrumb-base-color; // antd
338
+ @breadcrumb-link-color-hover: @breadcrumb-base-color; // antd
339
+ // pandora色
340
+
341
+ // LINK-------------------------------------------
342
+ // antd覆盖色
343
+ @link-color: @primary-color; // antd
344
+ @link-hover-color: @theme-color; // antd
345
+ @link-active-color: @theme-color; // phoenix antd
346
+ @link-decoration: none; // antd
347
+ @link-hover-decoration: none; // antd
348
+ // pandora色
349
+
350
+ // Menu-------------------------------------------
351
+ // antd覆盖色
352
+ @menu-inline-toplevel-item-height: 32px; // antd
353
+ @menu-item-height: 32px; // antd
354
+ @menu-collapsed-width: 100px; // antd
355
+ @menu-bg: @component-background; // antd
356
+ @menu-item-color: @font-color-3; // antd
357
+ @menu-highlight-color: @theme-color; // antd
358
+ @menu-item-active-bg: rgba(255, 255, 255, 0.1); // antd
359
+ @menu-item-group-title-color: @icon-color; // antd
360
+ @menu-item-hover-bg: #ccd3d9; // phoenix
361
+ // pandora色
362
+ @menu-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
363
+ // dark theme
364
+ @menu-dark-color: @normal-color; // antd
365
+ @menu-dark-bg: @theme-color; // phoenix antd
366
+ @menu-dark-arrow-color: @normal-color; // antd
367
+ @menu-dark-submenu-bg: #2967c7; // antd
368
+ @menu-dark-highlight-color: @normal-color; // antd
369
+ @menu-dark-item-active-bg: rgba(255, 255, 255, 0.1); // phoenix antd
370
+
371
+ .@{ant-prefix}-btn {
372
+ padding: 4px 15px;
373
+ }
374
+ .@{ant-prefix}-btn-sm {
375
+ padding: 0 7px;
376
+ }
377
+
378
+ @icon-hover-color: rgba(19, 107, 255, 0.1);
379
+
380
+ // radio--------------
381
+ // antd覆盖色
382
+ @radio-dot-color: @theme-color;
383
+ @radio-button-color: @heading-color;
384
+ @radio-button-active-color: @theme-color;
385
+ @radio-button-hover-color: @theme-color;
386
+
387
+ @editor-nav-background-color: #f5f5f5;
388
+ @editor_nav_border_color: #d8d8d8;
389
+ @editor_nav_line_color: #fcce72;