@kdcloudjs/kdesign 1.3.6 → 1.3.9

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 (58) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/kdesign-complete.less +132 -127
  3. package/dist/kdesign.css +168 -121
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +55 -28
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +2 -2
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/anchor/anchor.js +3 -3
  11. package/es/anchor/style/index.css +7 -7
  12. package/es/anchor/style/index.less +5 -5
  13. package/es/anchor/style/token.less +1 -1
  14. package/es/button/style/index.css +36 -0
  15. package/es/button/style/index.less +14 -2
  16. package/es/checkbox/checkbox.js +7 -3
  17. package/es/config-provider/compDefaultProps.d.ts +1 -0
  18. package/es/config-provider/compDefaultProps.js +2 -1
  19. package/es/menu/menu.js +22 -8
  20. package/es/menu/style/index.css +122 -110
  21. package/es/menu/style/index.less +51 -73
  22. package/es/menu/style/mixin.less +59 -42
  23. package/es/menu/subMenu.js +5 -4
  24. package/es/radio/radio.js +7 -3
  25. package/es/select/select.js +6 -4
  26. package/es/switch/style/index.css +1 -1
  27. package/es/switch/style/token.less +1 -1
  28. package/es/table/table.js +2 -0
  29. package/es/tree/style/index.css +1 -2
  30. package/es/tree/style/index.less +1 -2
  31. package/es/tree/style/token.less +0 -1
  32. package/es/tree/tree.js +1 -2
  33. package/es/tree/treeNode.js +1 -1
  34. package/lib/anchor/anchor.js +3 -3
  35. package/lib/anchor/style/index.css +7 -7
  36. package/lib/anchor/style/index.less +5 -5
  37. package/lib/anchor/style/token.less +1 -1
  38. package/lib/button/style/index.css +36 -0
  39. package/lib/button/style/index.less +14 -2
  40. package/lib/checkbox/checkbox.js +7 -3
  41. package/lib/config-provider/compDefaultProps.d.ts +1 -0
  42. package/lib/config-provider/compDefaultProps.js +2 -1
  43. package/lib/menu/menu.js +22 -8
  44. package/lib/menu/style/index.css +122 -110
  45. package/lib/menu/style/index.less +51 -73
  46. package/lib/menu/style/mixin.less +59 -42
  47. package/lib/menu/subMenu.js +5 -4
  48. package/lib/radio/radio.js +7 -3
  49. package/lib/select/select.js +6 -4
  50. package/lib/switch/style/index.css +1 -1
  51. package/lib/switch/style/token.less +1 -1
  52. package/lib/table/table.js +2 -0
  53. package/lib/tree/style/index.css +1 -2
  54. package/lib/tree/style/index.less +1 -2
  55. package/lib/tree/style/token.less +0 -1
  56. package/lib/tree/tree.js +1 -2
  57. package/lib/tree/treeNode.js +1 -1
  58. package/package.json +1 -1
package/lib/menu/menu.js CHANGED
@@ -105,8 +105,13 @@ var Menu = function Menu(props) {
105
105
 
106
106
  var _React$useState3 = _react.default.useState([]),
107
107
  _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
108
- openKeys = _React$useState4[0],
109
- setOpenKeys = _React$useState4[1];
108
+ selectedKeyPath = _React$useState4[0],
109
+ setSelectedKeyPath = _React$useState4[1];
110
+
111
+ var _React$useState5 = _react.default.useState([]),
112
+ _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
113
+ openKeys = _React$useState6[0],
114
+ setOpenKeys = _React$useState6[1];
110
115
 
111
116
  if (mode === 'inline') {
112
117
  restProps.triggerSubMenuAction = 'click';
@@ -115,6 +120,7 @@ var Menu = function Menu(props) {
115
120
  (0, _react.useEffect)(function () {
116
121
  setOpenKeys([]);
117
122
  setSelectedKey('');
123
+ setSelectedKeyPath([]);
118
124
  openSubMenuSet.clear();
119
125
  }, [mode]);
120
126
  (0, _react.useEffect)(function () {
@@ -125,22 +131,29 @@ var Menu = function Menu(props) {
125
131
  (0, _react.useEffect)(function () {
126
132
  if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
127
133
  setOpenKeys(userOpenKeys);
128
- openSubMenuSet.clear();
129
- userOpenKeys.forEach(function (d) {
130
- openSubMenuSet.add(d);
134
+ }
135
+ }, [userOpenKeys]);
136
+ (0, _react.useEffect)(function () {
137
+ if (userSelectedKey !== undefined && userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
138
+ setSelectedKeyPath(userOpenKeys);
139
+ setTimeout(function () {
140
+ userOpenKeys.forEach(function (d) {
141
+ openSubMenuSet.add(d);
142
+ });
131
143
  });
132
144
  }
133
- }, [userOpenKeys]); // React.useEffect(() => {
134
- // setCollapsed(restProps.collapsed)
135
- // }, [restProps.collapsed])
145
+ }, []);
136
146
 
137
147
  var handleOnClick = function handleOnClick(info) {
138
148
  if (userSelectedKey === undefined) {
139
149
  setSelectedKey(info.key);
140
150
  }
141
151
 
152
+ setSelectedKeyPath(info.keyPath);
153
+
142
154
  if (mode !== 'inline' && openKeys.length > 0) {
143
155
  setOpenKeys([]);
156
+ openSubMenuSet.clear();
144
157
  }
145
158
 
146
159
  onClick && onClick(info);
@@ -192,6 +205,7 @@ var Menu = function Menu(props) {
192
205
  mode: mode,
193
206
  openKeys: openKeys,
194
207
  selectedKey: selectedKey,
208
+ selectedKeyPath: selectedKeyPath,
195
209
  theme: theme,
196
210
  triggerSubMenuAction: restProps.triggerSubMenuAction,
197
211
  forceSubMenuRender: forceSubMenuRender,
package/lib/menu/style/index.css CHANGED
@@ -108,37 +108,62 @@
108
108
  background-color: var(--kd-c-menu-sub-color-background, #121319);
109
109
  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
110
110
  }
111
- .light-hover {
112
- background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
113
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
114
- }
115
- .light-active {
116
- background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
117
- color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
111
+ .active {
112
+ background-color: var(--kd-c-menu-sub-color-background, #121319);
113
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
118
114
  }
119
- .light-default {
120
- color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
121
- background: #ffffff;
115
+ .active-inline-title {
116
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
117
+ background: var(--kd-c-menu-color-background, #343848) !important;
118
+ border: none;
122
119
  }
123
120
  .light {
124
121
  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
125
122
  background: #ffffff;
126
123
  }
127
- .light .kd-menu-submenu-hover,
124
+ .light .kd-menu-item-disabled,
125
+ .light .kd-menu-submenu-disabled {
126
+ background-color: #fff !important;
127
+ }
128
128
  .light .kd-menu-submenu-sub {
129
129
  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
130
- background: #ffffff;
130
+ background: #FAFAFA;
131
131
  }
132
- .light .kd-menu-submenu-title:hover {
132
+ .light .kd-menu-item:hover {
133
+ background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
133
134
  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
135
+ border: none;
134
136
  }
135
- .light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
137
+ .light .kd-menu-item-hover,
138
+ .light .kd-menu-submenu-hover {
136
139
  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
137
140
  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
141
+ border: none;
138
142
  }
139
- .light .kd-menu-item:not(.kd-menu-item-disabled):hover {
143
+ .light .kd-menu-item-active,
144
+ .light .kd-menu-submenu-active {
145
+ background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
146
+ color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
147
+ border: none;
148
+ }
149
+ .light-default {
150
+ color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
151
+ background: #ffffff;
152
+ }
153
+ .light-hover {
140
154
  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
141
155
  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
156
+ border: none;
157
+ }
158
+ .light-active {
159
+ background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
160
+ color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
161
+ border: none;
162
+ }
163
+ .light-active-inline-title {
164
+ color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
165
+ background: #ffffff !important;
166
+ border: none;
142
167
  }
143
168
  .kd-menu {
144
169
  position: relative;
@@ -153,58 +178,13 @@
153
178
  overflow: hidden;
154
179
  text-overflow: ellipsis;
155
180
  }
156
- .kd-menu-inline .kd-menu-item-active {
157
- color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
158
- }
159
181
  .kd-menu-inline .kd-menu-submenu {
160
182
  padding-right: 0;
161
183
  }
162
- .kd-menu-inline .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
163
- color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
164
- }
165
184
  .kd-menu-collapsed {
166
185
  width: 50px;
167
186
  min-width: auto;
168
187
  }
169
- .kd-menu-vertical .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
170
- .kd-menu-vertical .kd-menu-submenu-hover {
171
- background-color: var(--kd-c-menu-sub-color-background, #121319);
172
- color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
173
- }
174
- .kd-menu-light {
175
- color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
176
- background: #ffffff;
177
- }
178
- .kd-menu-light .kd-menu-submenu-hover,
179
- .kd-menu-light .kd-menu-submenu-sub {
180
- color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
181
- background: #ffffff;
182
- }
183
- .kd-menu-light .kd-menu-submenu-title:hover {
184
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
185
- }
186
- .kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
187
- background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
188
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
189
- }
190
- .kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):hover {
191
- background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
192
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
193
- }
194
- .kd-menu-light.kd-menu-vertical .kd-menu-submenu-sub {
195
- -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
196
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
197
- }
198
- .kd-menu-light.kd-menu-vertical .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
199
- background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
200
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
201
- border: none;
202
- }
203
- .kd-menu-light.kd-menu-vertical .kd-menu-item-active {
204
- color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
205
- background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
206
- border: none !important;
207
- }
208
188
  .kd-menu-item {
209
189
  position: relative;
210
190
  cursor: pointer;
@@ -231,8 +211,6 @@
231
211
  white-space: nowrap;
232
212
  overflow: hidden;
233
213
  text-overflow: ellipsis;
234
- }
235
- .kd-menu-item-title > span {
236
214
  opacity: 1;
237
215
  -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
238
216
  transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -258,11 +236,8 @@
258
236
  }
259
237
  .kd-menu-item-disabled {
260
238
  cursor: not-allowed;
261
- color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
262
- }
263
- .kd-menu-item-active {
264
- background-color: var(--kd-c-menu-sub-color-background, #121319);
265
- color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
239
+ color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
240
+ background-color: var(--kd-c-menu-color-background, #343848) !important;
266
241
  }
267
242
  .kd-menu-item-arrow {
268
243
  margin-left: auto;
@@ -284,10 +259,6 @@
284
259
  transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
285
260
  transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
286
261
  }
287
- .kd-menu-item:not(.kd-menu-item-disabled):hover {
288
- background-color: var(--kd-c-menu-sub-color-background, #121319);
289
- color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
290
- }
291
262
  .kd-menu-submenu {
292
263
  position: static;
293
264
  cursor: pointer;
@@ -314,8 +285,6 @@
314
285
  white-space: nowrap;
315
286
  overflow: hidden;
316
287
  text-overflow: ellipsis;
317
- }
318
- .kd-menu-submenu-title > span {
319
288
  opacity: 1;
320
289
  -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
321
290
  transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -341,11 +310,8 @@
341
310
  }
342
311
  .kd-menu-submenu-disabled {
343
312
  cursor: not-allowed;
344
- color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
345
- }
346
- .kd-menu-submenu-active {
347
- background-color: var(--kd-c-menu-sub-color-background, #121319);
348
- color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
313
+ color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
314
+ background-color: var(--kd-c-menu-color-background, #343848) !important;
349
315
  }
350
316
  .kd-menu-submenu-arrow {
351
317
  margin-left: auto;
@@ -367,13 +333,8 @@
367
333
  transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
368
334
  transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
369
335
  }
370
- .kd-menu-submenu-hover {
371
- background-color: var(--kd-c-menu-sub-color-background, #121319);
372
- color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
373
- }
374
336
  .kd-menu-submenu-sub {
375
337
  line-height: var(--kd-c-menu-item-sizing-height, 50px);
376
- color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
377
338
  }
378
339
  .kd-menu-submenu-thrid {
379
340
  display: -webkit-box;
@@ -468,18 +429,78 @@
468
429
  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
469
430
  }
470
431
  .kd-menu-dark .kd-menu-submenu-sub {
432
+ color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
471
433
  background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
472
434
  }
473
435
  .kd-menu-dark .kd-menu-submenu-sub-second,
474
436
  .kd-menu-dark .kd-menu-submenu-sub-third {
475
437
  background: var(--kd-c-menu-sub-color-background, #121319);
476
438
  }
477
- .kd-menu-light .kd-menu-submenu-active,
478
- .kd-menu-light .kd-menu-item-active {
479
- background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
480
- color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
439
+ .kd-menu-dark .kd-menu-item:hover {
440
+ background-color: var(--kd-c-menu-sub-color-background, #121319);
441
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
442
+ }
443
+ .kd-menu-dark .kd-menu-item-active {
444
+ background-color: var(--kd-c-menu-sub-color-background, #121319);
445
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
446
+ }
447
+ .kd-menu-dark .kd-menu-item-active,
448
+ .kd-menu-dark .kd-menu-submenu-active {
449
+ background-color: var(--kd-c-menu-sub-color-background, #121319);
450
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
451
+ }
452
+ .kd-menu-dark .kd-menu-item-hover,
453
+ .kd-menu-dark .kd-menu-submenu-hover {
454
+ background-color: var(--kd-c-menu-sub-color-background, #121319);
455
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
456
+ }
457
+ .kd-menu-inline.kd-menu-dark .kd-menu-item-active .kd-menu-submenu-title,
458
+ .kd-menu-inline.kd-menu-dark .kd-menu-submenu-active .kd-menu-submenu-title {
459
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
460
+ background: var(--kd-c-menu-color-background, #343848) !important;
461
+ border: none;
462
+ }
463
+ .kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled) > .kd-menu-submenu-title:hover {
464
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
465
+ background: var(--kd-c-menu-color-background, #343848) !important;
466
+ border: none;
467
+ }
468
+ .kd-menu-light {
469
+ color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
470
+ background: #ffffff;
471
+ }
472
+ .kd-menu-light .kd-menu-item-disabled,
473
+ .kd-menu-light .kd-menu-submenu-disabled {
474
+ background-color: #fff !important;
475
+ }
476
+ .kd-menu-light .kd-menu-submenu-sub {
477
+ color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
478
+ background: #FAFAFA;
481
479
  }
482
- .kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
480
+ .kd-menu-light .kd-menu-item:hover {
481
+ background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
482
+ color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
483
+ border: none;
484
+ }
485
+ .kd-menu-light .kd-menu-item-hover,
486
+ .kd-menu-light .kd-menu-submenu-hover {
487
+ background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
488
+ color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
489
+ border: none;
490
+ }
491
+ .kd-menu-light .kd-menu-item-active,
492
+ .kd-menu-light .kd-menu-submenu-active {
493
+ background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
494
+ color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
495
+ border: none;
496
+ }
497
+ .kd-menu-inline.kd-menu-light .kd-menu-item-active .kd-menu-submenu-title,
498
+ .kd-menu-inline.kd-menu-light .kd-menu-submenu-active .kd-menu-submenu-title {
499
+ color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
500
+ background: #ffffff !important;
501
+ border: none;
502
+ }
503
+ .kd-menu-popper .kd-menu-submenu:hover,
483
504
  .kd-menu-popper .kd-menu-submenu-hover {
484
505
  background-color: var(--kd-c-menu-sub-color-background, #121319);
485
506
  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -501,11 +522,15 @@
501
522
  padding-right: 0;
502
523
  }
503
524
  .kd-menu-popper .kd-menu-submenu-sub {
525
+ color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
504
526
  background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
527
+ -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
528
+ box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
505
529
  }
506
530
  .kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:hover,
507
531
  .kd-menu-popper .kd-menu-submenu-sub .kd-menu-item-active {
508
- color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
532
+ background-color: var(--kd-c-menu-sub-color-background, #121319);
533
+ color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
509
534
  }
510
535
  .kd-menu-popper .kd-menu-submenu-sub-second,
511
536
  .kd-menu-popper .kd-menu-submenu-sub-third {
@@ -536,28 +561,15 @@
536
561
  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
537
562
  background: #ffffff;
538
563
  }
539
- .kd-menu-popper.light .kd-menu-submenu-hover,
540
- .kd-menu-popper.light .kd-menu-submenu-sub {
541
- color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
542
- background: #ffffff;
543
- }
544
- .kd-menu-popper.light .kd-menu-submenu-title:hover {
545
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
546
- }
547
- .kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
548
- background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
549
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
550
- }
551
- .kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):hover {
552
- background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
553
- color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
564
+ .kd-menu-popper.light .kd-menu-item-disabled,
565
+ .kd-menu-popper.light .kd-menu-submenu-disabled {
566
+ background-color: #fff !important;
554
567
  }
555
568
  .kd-menu-popper.light .kd-menu-submenu-sub {
556
- -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
557
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
569
+ color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
570
+ background: #FAFAFA;
558
571
  }
559
- .kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
560
- .kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
572
+ .kd-menu-popper.light .kd-menu-item:hover {
561
573
  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
562
574
  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
563
575
  border: none;
@@ -570,7 +582,7 @@
570
582
  }
571
583
  .kd-menu-popper.light .kd-menu-item-active,
572
584
  .kd-menu-popper.light .kd-menu-submenu-active {
573
- background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
574
- color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
585
+ background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
586
+ color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
575
587
  border: none;
576
588
  }
package/lib/menu/style/index.less CHANGED
@@ -6,6 +6,8 @@
6
6
  @menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
7
7
  @menu-dark-prefix-cls: ~'@{menu-prefix-cls}-dark';
8
8
  @menu-light-prefix-cls: ~'@{menu-prefix-cls}-light';
9
+ @menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
10
+ @menu-inline-prefix-cls: ~'@{menu-prefix-cls}-inline';
9
11
  @menu-popper-prefix-cls: ~'@{menu-prefix-cls}-popper';
10
12
  @submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
11
13
 
@@ -15,56 +17,17 @@
15
17
  &-inline {
16
18
  .@{menuitem-prefix-cls} {
17
19
  .ellipsis();
18
-
19
- &-active {
20
- color: @menu-inline-color-active;
21
- }
22
20
  }
23
21
 
24
22
  .@{submenu-prefix-cls} {
25
23
  padding-right: 0;
26
24
  }
27
-
28
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
29
- color: @menu-inline-color-active;
30
- }
31
25
  }
32
26
 
33
27
  &-collapsed {
34
28
  width: 50px;
35
29
  min-width: auto;
36
30
  }
37
-
38
- &-vertical {
39
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
40
- .@{submenu-prefix-cls}-hover {
41
- .hover();
42
- }
43
- }
44
-
45
- &-light {
46
- .light()
47
- }
48
-
49
- &-light&-vertical {
50
- .@{submenu-prefix-cls}-sub {
51
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
52
- 0 9px 28px 8px rgba(0, 0, 0, 0.05);
53
- }
54
-
55
- .@{menuitem-prefix-cls} {
56
- &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
57
- .light-hover();
58
- border: none;
59
- }
60
-
61
- &-active {
62
- color: @menu-light-color-active;
63
- background-color: @menu-light-color-background-active;
64
- border: none !important;
65
- }
66
- }
67
- }
68
31
  }
69
32
 
70
33
  .@{menuitem-prefix-cls} {
@@ -73,10 +36,6 @@
73
36
  transition: color, background-color;
74
37
  transition-duration: calc(@menu-motion-duration - 0.1s);
75
38
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
76
-
77
- &:not(&-disabled):hover {
78
- .hover();
79
- }
80
39
  }
81
40
 
82
41
  .@{submenu-prefix-cls} {
@@ -86,13 +45,8 @@
86
45
  transition-duration: calc(@menu-motion-duration - 0.1s);
87
46
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
88
47
 
89
- &-hover {
90
- .hover();
91
- }
92
-
93
48
  &-sub {
94
49
  line-height: @menu-item-height;
95
- color: @menu-sub-color;
96
50
  }
97
51
 
98
52
  &-thrid {
@@ -168,24 +122,66 @@
168
122
  }
169
123
  }
170
124
 
125
+ // dark
171
126
  .@{menu-dark-prefix-cls} {
127
+
172
128
  .@{submenu-prefix-cls}-sub {
129
+ color: @menu-sub-color;
173
130
  background: @menu-sub-inline-color-background;
174
131
  }
175
132
 
176
133
  .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
177
134
  background: @menu-sub-color-background;
178
135
  }
136
+
137
+ .@{menuitem-prefix-cls} {
138
+ &:hover {
139
+ .hover();
140
+ }
141
+
142
+ &-active {
143
+ .active()
144
+ }
145
+ }
146
+
147
+ .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
148
+ .active()
149
+ }
150
+
151
+ .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
152
+ .hover()
153
+ }
179
154
  }
180
155
 
156
+ .@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
157
+ .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
158
+ .@{submenu-prefix-cls}-title {
159
+ .active-inline-title()
160
+ }
161
+ }
162
+
163
+ .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled) {
164
+ > .@{submenu-prefix-cls}-title:hover {
165
+ .active-inline-title()
166
+ }
167
+ }
168
+ }
169
+
170
+ // light
181
171
  .@{menu-light-prefix-cls} {
182
- .@{submenu-prefix-cls}-active,.@{menuitem-prefix-cls}-active {
183
- .light-active()
172
+ .light();
173
+ }
174
+
175
+ .@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
176
+ .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
177
+ .@{submenu-prefix-cls}-title {
178
+ .light-active-inline-title()
179
+ }
184
180
  }
185
181
  }
186
182
 
187
183
  .@{menu-popper-prefix-cls} {
188
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
184
+ .@{submenu-prefix-cls}:hover,
189
185
  .@{submenu-prefix-cls}-hover {
190
186
  .hover();
191
187
  }
@@ -204,12 +200,15 @@
204
200
  padding-right: 0;
205
201
 
206
202
  &-sub {
203
+ color: @menu-sub-color;
207
204
  background: @menu-sub-inline-color-background;
205
+ box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
206
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05);
208
207
 
209
208
  .@{menuitem-prefix-cls} {
210
209
  &:hover,
211
210
  &-active {
212
- color: @menu-sub-color-active;
211
+ .hover()
213
212
  }
214
213
  }
215
214
 
@@ -236,27 +235,6 @@
236
235
 
237
236
  &.light {
238
237
  .light();
239
-
240
- .@{submenu-prefix-cls}-sub {
241
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
242
- 0 9px 28px 8px rgba(0, 0, 0, 0.05);
243
- }
244
-
245
- .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
246
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
247
- .light-hover();
248
- border: none;
249
- }
250
-
251
- .@{menuitem-prefix-cls}-hover,.@{submenu-prefix-cls}-hover {
252
- .light-hover();
253
- border: none;
254
- }
255
-
256
- .@{menuitem-prefix-cls}-active,.@{submenu-prefix-cls}-active {
257
- .light-active();
258
- border: none;
259
- }
260
238
  }
261
239
  }
262
240