@kdcloudjs/kdesign 1.3.8 → 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 (38) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/kdesign-complete.less +111 -118
  3. package/dist/kdesign.css +124 -113
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +40 -21
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +2 -2
  8. package/dist/kdesign.min.js +2 -2
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/config-provider/compDefaultProps.d.ts +1 -0
  11. package/es/config-provider/compDefaultProps.js +2 -1
  12. package/es/menu/menu.js +22 -8
  13. package/es/menu/style/index.css +122 -110
  14. package/es/menu/style/index.less +51 -73
  15. package/es/menu/style/mixin.less +59 -42
  16. package/es/menu/subMenu.js +5 -4
  17. package/es/select/select.js +6 -4
  18. package/es/table/table.js +2 -0
  19. package/es/tree/style/index.css +1 -2
  20. package/es/tree/style/index.less +1 -2
  21. package/es/tree/style/token.less +0 -1
  22. package/es/tree/tree.js +1 -2
  23. package/es/tree/treeNode.js +1 -1
  24. package/lib/config-provider/compDefaultProps.d.ts +1 -0
  25. package/lib/config-provider/compDefaultProps.js +2 -1
  26. package/lib/menu/menu.js +22 -8
  27. package/lib/menu/style/index.css +122 -110
  28. package/lib/menu/style/index.less +51 -73
  29. package/lib/menu/style/mixin.less +59 -42
  30. package/lib/menu/subMenu.js +5 -4
  31. package/lib/select/select.js +6 -4
  32. package/lib/table/table.js +2 -0
  33. package/lib/tree/style/index.css +1 -2
  34. package/lib/tree/style/index.less +1 -2
  35. package/lib/tree/style/token.less +0 -1
  36. package/lib/tree/tree.js +1 -2
  37. package/lib/tree/treeNode.js +1 -1
  38. package/package.json +1 -1
package/es/config-provider/compDefaultProps.d.ts CHANGED
@@ -305,6 +305,7 @@ declare const compDefaultProps: {
305
305
  draggable: boolean;
306
306
  virtual: boolean;
307
307
  switcherIcon: () => JSX.Element;
308
+ estimatedItemSize: number;
308
309
  };
309
310
  TreeNode: {};
310
311
  ToolTip: {
package/es/config-provider/compDefaultProps.js CHANGED
@@ -319,7 +319,8 @@ var compDefaultProps = {
319
319
  return /*#__PURE__*/React.createElement(Icon, {
320
320
  type: "arrow-right-solid"
321
321
  });
322
- }
322
+ },
323
+ estimatedItemSize: 32
323
324
  },
324
325
  TreeNode: {},
325
326
  ToolTip: {
package/es/menu/menu.js CHANGED
@@ -72,8 +72,13 @@ var Menu = function Menu(props) {
72
72
 
73
73
  var _React$useState3 = React.useState([]),
74
74
  _React$useState4 = _slicedToArray(_React$useState3, 2),
75
- openKeys = _React$useState4[0],
76
- setOpenKeys = _React$useState4[1];
75
+ selectedKeyPath = _React$useState4[0],
76
+ setSelectedKeyPath = _React$useState4[1];
77
+
78
+ var _React$useState5 = React.useState([]),
79
+ _React$useState6 = _slicedToArray(_React$useState5, 2),
80
+ openKeys = _React$useState6[0],
81
+ setOpenKeys = _React$useState6[1];
77
82
 
78
83
  if (mode === 'inline') {
79
84
  restProps.triggerSubMenuAction = 'click';
@@ -82,6 +87,7 @@ var Menu = function Menu(props) {
82
87
  useEffect(function () {
83
88
  setOpenKeys([]);
84
89
  setSelectedKey('');
90
+ setSelectedKeyPath([]);
85
91
  openSubMenuSet.clear();
86
92
  }, [mode]);
87
93
  useEffect(function () {
@@ -92,22 +98,29 @@ var Menu = function Menu(props) {
92
98
  useEffect(function () {
93
99
  if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
94
100
  setOpenKeys(userOpenKeys);
95
- openSubMenuSet.clear();
96
- userOpenKeys.forEach(function (d) {
97
- openSubMenuSet.add(d);
101
+ }
102
+ }, [userOpenKeys]);
103
+ useEffect(function () {
104
+ if (userSelectedKey !== undefined && userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
105
+ setSelectedKeyPath(userOpenKeys);
106
+ setTimeout(function () {
107
+ userOpenKeys.forEach(function (d) {
108
+ openSubMenuSet.add(d);
109
+ });
98
110
  });
99
111
  }
100
- }, [userOpenKeys]); // React.useEffect(() => {
101
- // setCollapsed(restProps.collapsed)
102
- // }, [restProps.collapsed])
112
+ }, []);
103
113
 
104
114
  var handleOnClick = function handleOnClick(info) {
105
115
  if (userSelectedKey === undefined) {
106
116
  setSelectedKey(info.key);
107
117
  }
108
118
 
119
+ setSelectedKeyPath(info.keyPath);
120
+
109
121
  if (mode !== 'inline' && openKeys.length > 0) {
110
122
  setOpenKeys([]);
123
+ openSubMenuSet.clear();
111
124
  }
112
125
 
113
126
  onClick && onClick(info);
@@ -159,6 +172,7 @@ var Menu = function Menu(props) {
159
172
  mode: mode,
160
173
  openKeys: openKeys,
161
174
  selectedKey: selectedKey,
175
+ selectedKeyPath: selectedKeyPath,
162
176
  theme: theme,
163
177
  triggerSubMenuAction: restProps.triggerSubMenuAction,
164
178
  forceSubMenuRender: forceSubMenuRender,
package/es/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/es/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