@kdcloudjs/kdesign 1.0.4 → 1.1.2

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 (144) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/dist/kdesign-complete.less +230 -224
  3. package/dist/kdesign.css +127 -96
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +46 -52
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +4 -4
  8. package/dist/kdesign.min.js +6 -6
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/anchor/style/index.css +5 -0
  11. package/es/anchor/style/index.less +5 -0
  12. package/es/avatar/style/token.less +13 -8
  13. package/es/base-data/base-data.js +5 -1
  14. package/es/base-data/style/index.css +8 -3
  15. package/es/base-data/style/index.less +8 -3
  16. package/es/base-data/style/token.less +7 -0
  17. package/es/button/style/index.css +4 -4
  18. package/es/button/style/index.less +1 -1
  19. package/es/button/style/token.less +16 -14
  20. package/es/card/card.d.ts +1 -0
  21. package/es/card/card.js +4 -1
  22. package/es/card/style/index.css +16 -0
  23. package/es/card/style/index.less +19 -0
  24. package/es/card/style/token.less +8 -8
  25. package/es/carousel/style/index.css +4 -4
  26. package/es/carousel/style/token.less +10 -9
  27. package/es/city-picker/style/token.less +7 -7
  28. package/es/config-provider/compDefaultProps.d.ts +0 -1
  29. package/es/config-provider/compDefaultProps.js +1 -2
  30. package/es/date-picker/style/index.css +8 -8
  31. package/es/date-picker/style/index.less +8 -8
  32. package/es/date-picker/style/token.less +3 -21
  33. package/es/drawer/drawer.d.ts +0 -1
  34. package/es/drawer/drawer.js +6 -26
  35. package/es/drawer/style/index.css +8 -11
  36. package/es/drawer/style/index.less +7 -9
  37. package/es/drawer/style/token.less +3 -1
  38. package/es/dropdown/dropdown.d.ts +1 -0
  39. package/es/dropdown/dropdown.js +9 -6
  40. package/es/dropdown/menu.d.ts +1 -1
  41. package/es/dropdown/menu.js +3 -3
  42. package/es/form/Field.js +4 -2
  43. package/es/form/style/index.css +1 -2
  44. package/es/form/style/index.less +1 -2
  45. package/es/form/style/token.less +7 -12
  46. package/es/icon/interface.js +1 -1
  47. package/es/image/style/token.less +0 -13
  48. package/es/menu/menuItem.js +1 -2
  49. package/es/message/content.js +7 -3
  50. package/es/message/style/index.css +30 -13
  51. package/es/message/style/index.less +22 -9
  52. package/es/message/style/token.less +29 -5
  53. package/es/notification/content.js +1 -1
  54. package/es/notification/style/index.css +1 -1
  55. package/es/notification/style/index.less +1 -1
  56. package/es/pagination/pagination.js +2 -2
  57. package/es/pagination/style/token.less +5 -3
  58. package/es/progress/style/token.less +0 -8
  59. package/es/radio/style/token.less +0 -16
  60. package/es/select/style/index.css +2 -2
  61. package/es/select/style/token.less +2 -2
  62. package/es/split-panel/style/index.css +24 -42
  63. package/es/split-panel/style/index.less +14 -33
  64. package/es/split-panel/style/token.less +15 -4
  65. package/es/stepper/style/index.css +1 -0
  66. package/es/stepper/style/index.less +1 -0
  67. package/es/stepper/style/token.less +8 -10
  68. package/es/switch/style/token.less +0 -6
  69. package/es/timeline/style/token.less +0 -8
  70. package/es/transfer/operation.js +2 -2
  71. package/es/transfer/style/index.css +5 -1
  72. package/es/transfer/style/index.less +4 -0
  73. package/es/transfer/style/token.less +1 -1
  74. package/es/tree/style/index.css +6 -3
  75. package/es/tree/style/index.less +4 -0
  76. package/es/tree/style/token.less +2 -2
  77. package/lib/anchor/style/index.css +5 -0
  78. package/lib/anchor/style/index.less +5 -0
  79. package/lib/avatar/style/token.less +13 -8
  80. package/lib/base-data/base-data.js +5 -1
  81. package/lib/base-data/style/index.css +8 -3
  82. package/lib/base-data/style/index.less +8 -3
  83. package/lib/base-data/style/token.less +7 -0
  84. package/lib/button/style/index.css +4 -4
  85. package/lib/button/style/index.less +1 -1
  86. package/lib/button/style/token.less +16 -14
  87. package/lib/card/card.d.ts +1 -0
  88. package/lib/card/card.js +4 -1
  89. package/lib/card/style/index.css +16 -0
  90. package/lib/card/style/index.less +19 -0
  91. package/lib/card/style/token.less +8 -8
  92. package/lib/carousel/style/index.css +4 -4
  93. package/lib/carousel/style/token.less +10 -9
  94. package/lib/city-picker/style/token.less +7 -7
  95. package/lib/config-provider/compDefaultProps.d.ts +0 -1
  96. package/lib/config-provider/compDefaultProps.js +1 -2
  97. package/lib/date-picker/style/index.css +8 -8
  98. package/lib/date-picker/style/index.less +8 -8
  99. package/lib/date-picker/style/token.less +3 -21
  100. package/lib/drawer/drawer.d.ts +0 -1
  101. package/lib/drawer/drawer.js +6 -26
  102. package/lib/drawer/style/index.css +8 -11
  103. package/lib/drawer/style/index.less +7 -9
  104. package/lib/drawer/style/token.less +3 -1
  105. package/lib/dropdown/dropdown.d.ts +1 -0
  106. package/lib/dropdown/dropdown.js +9 -6
  107. package/lib/dropdown/menu.d.ts +1 -1
  108. package/lib/dropdown/menu.js +3 -3
  109. package/lib/form/Field.js +4 -2
  110. package/lib/form/style/index.css +1 -2
  111. package/lib/form/style/index.less +1 -2
  112. package/lib/form/style/token.less +7 -12
  113. package/lib/icon/interface.js +1 -1
  114. package/lib/image/style/token.less +0 -13
  115. package/lib/menu/menuItem.js +1 -2
  116. package/lib/message/content.js +7 -3
  117. package/lib/message/style/index.css +30 -13
  118. package/lib/message/style/index.less +22 -9
  119. package/lib/message/style/token.less +29 -5
  120. package/lib/notification/content.js +1 -1
  121. package/lib/notification/style/index.css +1 -1
  122. package/lib/notification/style/index.less +1 -1
  123. package/lib/pagination/pagination.js +2 -2
  124. package/lib/pagination/style/token.less +5 -3
  125. package/lib/progress/style/token.less +0 -8
  126. package/lib/radio/style/token.less +0 -16
  127. package/lib/select/style/index.css +2 -2
  128. package/lib/select/style/token.less +2 -2
  129. package/lib/split-panel/style/index.css +24 -42
  130. package/lib/split-panel/style/index.less +14 -33
  131. package/lib/split-panel/style/token.less +15 -4
  132. package/lib/stepper/style/index.css +1 -0
  133. package/lib/stepper/style/index.less +1 -0
  134. package/lib/stepper/style/token.less +8 -10
  135. package/lib/switch/style/token.less +0 -6
  136. package/lib/timeline/style/token.less +0 -8
  137. package/lib/transfer/operation.js +2 -2
  138. package/lib/transfer/style/index.css +5 -1
  139. package/lib/transfer/style/index.less +4 -0
  140. package/lib/transfer/style/token.less +1 -1
  141. package/lib/tree/style/index.css +6 -3
  142. package/lib/tree/style/index.less +4 -0
  143. package/lib/tree/style/token.less +2 -2
  144. package/package.json +1 -1
@@ -131,6 +131,7 @@
131
131
  margin-right: 10px;
132
132
  font-size: var(--kd-c-anchor-icon-font-size, 16px);
133
133
  color: #666;
134
+ cursor: pointer;
134
135
  }
135
136
  .kd-anchor-menu-left-arrows:hover:not(.kd-anchor-menu-left-arrows-disabled) {
136
137
  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -143,6 +144,7 @@
143
144
  margin-left: 10px;
144
145
  font-size: var(--kd-c-anchor-icon-font-size, 16px);
145
146
  color: #666;
147
+ cursor: pointer;
146
148
  }
147
149
  .kd-anchor-menu-right-arrows:hover:not(.kd-anchor-menu-right-arrows-disabled) {
148
150
  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -193,6 +195,7 @@
193
195
  .kd-anchor-advanced-arrows {
194
196
  color: var(--kd-c-anchor-advanced-arrows-color-text, #666);
195
197
  font-size: var(--kd-c-anchor-icon-font-size, 16px);
198
+ cursor: pointer;
196
199
  }
197
200
  .kd-anchor-advanced-arrows:hover {
198
201
  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -219,6 +222,7 @@
219
222
  padding: 0 8px 8px 0;
220
223
  font-size: var(--kd-c-anchor-advanced-lock-font-size, 16px);
221
224
  color: var(--kd-c-anchor-advanced-arrows-color-text, #666);
225
+ cursor: pointer;
222
226
  }
223
227
  .kd-anchor-advanced .kd-anchor {
224
228
  max-width: var(--kd-c-anchor-advanced-sizing-width, 160px);
@@ -262,6 +266,7 @@
262
266
  white-space: nowrap;
263
267
  text-overflow: ellipsis;
264
268
  line-height: 1.5;
269
+ cursor: pointer;
265
270
  }
266
271
  .kd-anchor-link-title:only-child {
267
272
  margin-bottom: 0;
@@ -28,6 +28,7 @@
28
28
  margin-right: 10px;
29
29
  font-size: @anchor-icon-font-size;
30
30
  color: #666;
31
+ cursor: pointer;
31
32
  &:hover:not(&-disabled) {
32
33
  color: @anchor-color-theme;
33
34
  }
@@ -38,6 +39,7 @@
38
39
  margin-left: 10px;
39
40
  font-size: @anchor-icon-font-size;
40
41
  color: #666;
42
+ cursor: pointer;
41
43
  &:hover:not(&-disabled) {
42
44
  color: @anchor-color-theme;
43
45
  }
@@ -89,6 +91,7 @@
89
91
  &-advanced-arrows {
90
92
  color: @anchor-advanced-arrows-color;
91
93
  font-size: @anchor-icon-font-size;
94
+ cursor: pointer;
92
95
  &:hover {
93
96
  color: @anchor-color-theme;
94
97
  }
@@ -112,6 +115,7 @@
112
115
  padding: 0 8px 8px 0;
113
116
  font-size: @anchor-advanced-lock-size;
114
117
  color: @anchor-advanced-arrows-color;
118
+ cursor: pointer;
115
119
  }
116
120
 
117
121
  .@{anchor-prefix-cls} {
@@ -159,6 +163,7 @@
159
163
  white-space: nowrap;
160
164
  text-overflow: ellipsis;
161
165
  line-height: 1.5;
166
+ cursor: pointer;
162
167
  &:only-child {
163
168
  margin-bottom: 0;
164
169
  }
@@ -1,11 +1,7 @@
1
1
  @avatar-custom-prefix: '--@{kd-prefix}-c-avatar';
2
2
 
3
-
4
- // sizing
5
- @avatar-size-x-small: var(~'@{avatar-custom-prefix}-size-x-small', 24px);
6
- @avatar-size-small: var(~'@{avatar-custom-prefix}-size-small', 32px);
7
- @avatar-size-base: var(~'@{avatar-custom-prefix}-size-base', 40px);
8
- @avatar-size-large: var(~'@{avatar-custom-prefix}-size-large', 60px);
3
+ // color
4
+ @avatar-color-background: var(~'@{avatar-custom-prefix}-color-background', #B2B2B2);
9
5
 
10
6
  // font
11
7
  @avatar-font-size-x-small: var(~'@{avatar-custom-prefix}-font-size-x-small', 14px);
@@ -13,8 +9,17 @@
13
9
  @avatar-font-size-base: var(~'@{avatar-custom-prefix}-font-size-base', 22px);
14
10
  @avatar-font-size-large: var(~'@{avatar-custom-prefix}-font-size-large', 36px);
15
11
 
12
+
16
13
  // radius
17
14
  @avatar-border-radius: var(~'@{avatar-custom-prefix}-border-radius', 2px);
18
15
 
19
- // color
20
- @avatar-color-background: var(~'@{avatar-custom-prefix}-color-background', #B2B2B2);
16
+ // sizing
17
+ @avatar-size-x-small: var(~'@{avatar-custom-prefix}-size-x-small', 24px);
18
+ @avatar-size-small: var(~'@{avatar-custom-prefix}-size-small', 32px);
19
+ @avatar-size-base: var(~'@{avatar-custom-prefix}-size-base', 40px);
20
+ @avatar-size-large: var(~'@{avatar-custom-prefix}-size-large', 60px);
21
+
22
+
23
+
24
+
25
+
@@ -640,7 +640,11 @@ var InternalBaseData = function InternalBaseData(props, ref) {
640
640
 
641
641
  return /*#__PURE__*/React.createElement("div", {
642
642
  key: item.value,
643
- className: "".concat(advancedSelectorfixCls, "-dropdown-options"),
643
+ className: classNames("".concat(advancedSelectorfixCls, "-dropdown-options"), {
644
+ selected: seletedOptions.some(function (v) {
645
+ return v.value === item.value;
646
+ })
647
+ }),
644
648
  onMouseDown: function onMouseDown() {
645
649
  return handleSelect(item);
646
650
  }
@@ -146,6 +146,7 @@
146
146
  background: var(--kd-c-base-data-dropdown-radius-border, var(--kd-g-color-background, #fff));
147
147
  overflow: auto;
148
148
  max-height: var(--kd-c-base-data-dropdown-sizing-height, 400px);
149
+ color: var(--kd-c-base-data-color-text, #212121);
149
150
  }
150
151
  .kd-baseData-dropdown-columns,
151
152
  .kd-baseData-dropdown-options {
@@ -156,12 +157,16 @@
156
157
  -ms-flex-align: center;
157
158
  align-items: center;
158
159
  }
160
+ .kd-baseData-dropdown-columns.selected,
161
+ .kd-baseData-dropdown-options.selected {
162
+ color: var(--kd-c-base-data-option-color-text-active, var(--kd-g-color-theme, #5582f3));
163
+ }
159
164
  .kd-baseData-dropdown-columns-item,
160
165
  .kd-baseData-dropdown-options-item {
161
166
  -webkit-box-flex: 1;
162
167
  -ms-flex: 1;
163
168
  flex: 1;
164
- padding: 0 12px;
169
+ padding: 0 var(--kd-c-base-data-option-spacing-padding-vertical, 12px);
165
170
  white-space: nowrap;
166
171
  overflow: hidden;
167
172
  text-overflow: ellipsis;
@@ -212,7 +217,7 @@
212
217
  height: 200px;
213
218
  }
214
219
  .kd-baseData-dropdown-columns {
215
- height: 36px;
220
+ height: var(--kd-c-base-data-dropdown-columns-height, 36px);
216
221
  background: var(--kd-c-base-data-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
217
222
  }
218
223
  .kd-baseData-dropdown-options {
@@ -225,7 +230,7 @@
225
230
  visibility: visible;
226
231
  }
227
232
  .kd-baseData-dropdown-footer {
228
- height: 40px;
233
+ height: var(--kd-c-base-data-dropdown-footer-height, 40px);
229
234
  border-top: 1px solid var(--kd-c-base-data-footer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
230
235
  }
231
236
  .kd-baseData-dropdown-footer-btn {
@@ -52,15 +52,20 @@
52
52
  background: @base-data-dropdown-color-background;
53
53
  overflow: auto;
54
54
  max-height: @base-data-dropdown-height;
55
+ color: @base-data-color-text;
55
56
 
56
57
  &-columns,
57
58
  &-options {
58
59
  display: flex;
59
60
  align-items: center;
60
61
 
62
+ &.selected {
63
+ color: @base-data-option-color-text-active;
64
+ }
65
+
61
66
  &-item {
62
67
  flex: 1;
63
- padding: 0 12px;
68
+ padding: 0 @base-data-option-spacing-padding-vertical;
64
69
  white-space: nowrap;
65
70
  overflow: hidden;
66
71
  text-overflow: ellipsis;
@@ -104,7 +109,7 @@
104
109
  }
105
110
 
106
111
  &-columns {
107
- height: 36px;
112
+ height: @base-data-dropdown-columns-height;
108
113
  background: @base-data-hover-bg;
109
114
  }
110
115
 
@@ -121,7 +126,7 @@
121
126
  }
122
127
 
123
128
  &-footer {
124
- height: 40px;
129
+ height: @base-data-dropdown-footer-height;
125
130
  border-top: 1px solid @base-data-footer-color-border;
126
131
 
127
132
  &-btn {
@@ -5,6 +5,7 @@
5
5
  // color
6
6
  @base-data-border-color: var(~'@{base-data-custom-prefix}-color-border', #999);
7
7
  @base-data-hover-bg: var(~'@{base-data-custom-prefix}-color-background-hover', @color-hover);
8
+ @base-data-color-text: var(~'@{base-data-custom-prefix}-color-text', #212121);
8
9
  @base-data-color-border-hover: var(~'@{base-data-custom-prefix}-border-color-hover', @color-theme);
9
10
  @base-data-dropdown-color-background: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @color-background);
10
11
  @base-data-dropdown-icon-text-color: var(~'@{base-data-custom-prefix}-dropdown-icon-color-text', @color-warning);
@@ -14,6 +15,7 @@
14
15
  @base-data-footer-color-border: var(~'@{base-data-custom-prefix}-footer-color-border', @color-border-strong);
15
16
  @base-data-icon-text-color-hover: var(~'@{base-data-custom-prefix}-icon-color-text-hover', @color-theme);
16
17
  @base-data-footer-btn-text-color: var(~'@{base-data-custom-prefix}-footer-btn-color-text', @color-text-link);
18
+ @base-data-option-color-text-active: var(~'@{base-data-custom-prefix}-option-color-text-active', @color-theme);
17
19
 
18
20
  // radius
19
21
  @base-data-dropdown-radius-border: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @radius-border);
@@ -22,6 +24,11 @@
22
24
  @base-data-width: var(~'@{base-data-custom-prefix}-sizing-width', 230px);
23
25
  @base-data-dropdown-height: var(~'@{base-data-custom-prefix}-dropdown-sizing-height', 400px);
24
26
  @base-data-dropdown-options-height: var(~'@{base-data-custom-prefix}-dropdown-options-sizing-height', 32px);
27
+ @base-data-dropdown-columns-height: var(~'@{base-data-custom-prefix}-dropdown-columns-height', 36px);
28
+ @base-data-dropdown-footer-height: var(~'@{base-data-custom-prefix}-dropdown-footer-height', 40px);
29
+
30
+ // spacing
31
+ @base-data-option-spacing-padding-vertical: var(~'@{base-data-custom-prefix}-option-spacing-padding-vertical', 12px);
25
32
 
26
33
  // z-index
27
34
  @base-data-dropdown-z-index: var(~'@{base-data-custom-prefix}-dropdown-z-index', @z-index-popper);
@@ -197,7 +197,7 @@
197
197
  .kd-btn-ghost:disabled {
198
198
  background-color: var(--kd-c-button-ghost-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
199
199
  border-color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
200
- color: var(--kd-c-button-ghost-color-border-active, var(--kd-g-color-theme-7, #375cca)) !important;
200
+ color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
201
201
  }
202
202
  .kd-btn-iconWrapper-left {
203
203
  display: -webkit-box;
@@ -231,21 +231,21 @@
231
231
  }
232
232
  .kd-btn-size-small {
233
233
  height: var(--kd-c-button-sizing-height-small, 24px);
234
- min-width: var(--kd-c-button-sizing-min-height-small, 60px);
234
+ min-width: var(--kd-c-button-sizing-min-width-small, 60px);
235
235
  line-height: calc(var(--kd-c-button-sizing-height-small, 24px) - (var(--kd-c-button-spacing-padding-vertical-small, 3px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
236
236
  font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
237
237
  padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
238
238
  }
239
239
  .kd-btn-size-middle {
240
240
  height: var(--kd-c-button-sizing-height-middle, 28px);
241
- min-width: var(--kd-c-button-sizing-min-height-middle, 60px);
241
+ min-width: var(--kd-c-button-sizing-min-width-middle, 60px);
242
242
  line-height: calc(var(--kd-c-button-sizing-height-middle, 28px) - (var(--kd-c-button-spacing-padding-vertical-middle, 5px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
243
243
  font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
244
244
  padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
245
245
  }
246
246
  .kd-btn-size-large {
247
247
  height: var(--kd-c-button-sizing-height-large, 32px);
248
- min-width: var(--kd-c-button-sizing-min-height-large, 80px);
248
+ min-width: var(--kd-c-button-sizing-min-width-large, 80px);
249
249
  line-height: calc(var(--kd-c-button-sizing-height-large, 32px) - (var(--kd-c-button-spacing-padding-vertical-large, 6px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
250
250
  font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
251
251
  padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
@@ -77,7 +77,7 @@
77
77
  &:disabled {
78
78
  background-color: @btn-ghost-background-color-disabled !important;
79
79
  border-color: @btn-ghost-border-color-disabled !important;
80
- color: @btn-ghost-border-color-active !important;
80
+ color: @btn-ghost-border-color-disabled !important;
81
81
  }
82
82
  }
83
83
  &-iconWrapper-left {
@@ -24,16 +24,16 @@
24
24
  @btn-ghost-border-color-disabled: var(~'@{button-custom-prefix}-ghost-color-border-disabled', @color-disabled); //幽灵disabled边框颜色
25
25
  @btn-ghost-font-color-disabled: var(~'@{button-custom-prefix}-ghost-color-text-disabled', @color-disabled); // 幽灵disabled按钮文字颜色
26
26
 
27
- @btn-second-background-color: var(~'@{button-custom-prefix}-second-color-background', @color-background-3); // 次要背景颜色
27
+ @btn-second-background-color: var(~'@{button-custom-prefix}-second-color-background', @color-background-3); // 次要背景颜色
28
28
  @btn-second-border-color: var(~'@{button-custom-prefix}-second-color-border', @color-border-strong-3); // 次要边框颜色
29
29
  @btn-second-font-color: var(~'@{button-custom-prefix}-second-color-text', @color-text-secondary-3); // 次要文字颜色
30
- @btn-second-background-color-hover: var(~'@{button-custom-prefix}-second-color-background-hover', @color-white); // 次要hover背景颜色
30
+ @btn-second-background-color-hover: var(~'@{button-custom-prefix}-second-color-background-hover', @color-white); // 次要hover背景颜色
31
31
  @btn-second-border-color-hover: var(~'@{button-custom-prefix}-second-color-border-hover', @color-border-strong); // 次要hover边框颜色
32
32
  @btn-second-font-color-hover: var(~'@{button-custom-prefix}-second-color-text-hover', @color-text-secondary); // 次要hover文字颜色
33
- @btn-second-background-color-active: var(~'@{button-custom-prefix}-second-color-background-active', @color-white); // 次要active背景颜色
33
+ @btn-second-background-color-active: var(~'@{button-custom-prefix}-second-color-background-active', @color-white); // 次要active背景颜色
34
34
  @btn-second-border-color-active: var(~'@{button-custom-prefix}-second-color-border-active', @color-border-strong); // 次要active边框颜色
35
35
  @btn-second-font-color-active: var(~'@{button-custom-prefix}-second-color-text-active', @color-text-secondary); // 次要active文字颜色
36
- @btn-second-background-color-disabled: var(~'@{button-custom-prefix}-second-color-background-disabled', @color-background-3); // 次要disabled背景颜色
36
+ @btn-second-background-color-disabled: var(~'@{button-custom-prefix}-second-color-background-disabled', @color-background-3); // 次要disabled背景颜色
37
37
  @btn-second-border-color-disabled: var(~'@{button-custom-prefix}-second-color-border-disabled', @color-text-secondary-3); // 次要disabled边框颜色
38
38
  @btn-second-font-color-disabled: var(~'@{button-custom-prefix}-second-color-text-disabled', @color-text-secondary-3); // 次要disabled文字颜色
39
39
 
@@ -56,28 +56,30 @@
56
56
  @btn-background-ghost-g-text-color: var(~'@{button-custom-prefix}-background-ghost-color-text', @color-theme);
57
57
  @btn-background-ghost-g-text-color-hover: var(~'@{button-custom-prefix}-background-ghost-color-text-hover', @color-white);
58
58
 
59
- // duration
60
- @btn-transition-fn: var(~'@{button-custom-prefix}-motion-timing-function', cubic-bezier(0.075, 0.82, 0.165, 1));
61
- @btn-duration-fade: var(~'@{button-custom-prefix}-motion-duration-fade', @duration-slowly);
62
- @btn-duration-wave: var(~'@{button-custom-prefix}-motion-duration-wave', @duration-quickly);
63
-
64
59
  // font
65
60
  @btn-g-font-weight: var(~'@{button-custom-prefix}-font-weight', @font-weight-light);
66
61
  @btn-small-font-size: var(~'@{button-custom-prefix}-font-size-small', @font-size-small); // 小号 文字大小
67
62
  @btn-middle-font-size: var(~'@{button-custom-prefix}-font-size-middle', @font-size-small); // 中号 文字大小
68
63
  @btn-large-font-size: var(~'@{button-custom-prefix}-font-size-large', @font-size-large); // 大号 文字大小
69
64
 
65
+ // motion
66
+ @btn-transition-fn: var(~'@{button-custom-prefix}-motion-timing-function', cubic-bezier(0.075, 0.82, 0.165, 1));
67
+ @btn-duration-fade: var(~'@{button-custom-prefix}-motion-duration-fade', @duration-slowly);
68
+ @btn-duration-wave: var(~'@{button-custom-prefix}-motion-duration-wave', @duration-quickly);
69
+
70
+
71
+
70
72
  // radius
71
- @btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border);//圆角
73
+ @btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border); //圆角
72
74
 
73
75
  // sizing
74
76
  @btn-border-width: var(~'@{button-custom-prefix}-sizing-border', 1px);
75
77
  @btn-small-height: var(~'@{button-custom-prefix}-sizing-height-small', 24px); // 小号 高度
76
- @btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-height-small', 60px); // 小号 最小宽度
78
+ @btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-width-small', 60px); // 小号 最小宽度
77
79
  @btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度 高度配置
78
- @btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-height-middle', 60px); // 中号 最小宽度
80
+ @btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
79
81
  @btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
80
- @btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-height-large', 80px); // 大号 最小宽度
82
+ @btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
81
83
 
82
84
  // spacing
83
85
  @btn-small-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-small', 3px); // 小号 内间距 纵向
@@ -85,4 +87,4 @@
85
87
  @btn-middle-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-middle', 5px); // 中号 内间距 纵向
86
88
  @btn-middle-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-middle', 8px); // 中号 内间距 纵向 宽度配置
87
89
  @btn-large-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-large', 6px); // 大号 内间距 纵向
88
- @btn-large-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-large', 8px); // 大号 内间距 横向
90
+ @btn-large-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-large', 8px); // 大号 内间距 横向
package/es/card/card.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface CardProps {
19
19
  headStyle?: React.CSSProperties;
20
20
  bodyStyle?: React.CSSProperties;
21
21
  actions?: Array<React.ReactNode>;
22
+ extra?: Array<React.ReactNode>;
22
23
  }
23
24
  declare const Card: React.FC<CardProps>;
24
25
  export default Card;
package/es/card/card.js CHANGED
@@ -18,6 +18,7 @@ var Card = function Card(props) {
18
18
  title = _getCompProps.title,
19
19
  avatar = _getCompProps.avatar,
20
20
  actions = _getCompProps.actions,
21
+ extra = _getCompProps.extra,
21
22
  children = _getCompProps.children,
22
23
  className = _getCompProps.className,
23
24
  hoverable = _getCompProps.hoverable,
@@ -57,7 +58,9 @@ var Card = function Card(props) {
57
58
  style: bodyStyle
58
59
  }, children), actions && /*#__PURE__*/React.createElement("div", {
59
60
  className: "".concat(prefixCls, "-actions")
60
- }, actions));
61
+ }, actions), extra && /*#__PURE__*/React.createElement("div", {
62
+ className: "".concat(prefixCls, "-extra")
63
+ }, extra));
61
64
  };
62
65
 
63
66
  Card.displayName = 'Card';
@@ -189,3 +189,19 @@
189
189
  .kd-card .kd-card-actions > a:active {
190
190
  color: var(--kd-c-card-actions-color-active, var(--kd-g-color-theme-7, #375cca));
191
191
  }
192
+ .kd-card-extra {
193
+ position: absolute;
194
+ top: 6px;
195
+ right: 4px;
196
+ }
197
+ .kd-card-extra i {
198
+ font-size: 22px;
199
+ width: 32px;
200
+ cursor: pointer;
201
+ }
202
+ .kd-card-lists-icon {
203
+ font-size: 32px;
204
+ position: absolute;
205
+ top: 6px;
206
+ right: 40px;
207
+ }
@@ -97,3 +97,22 @@
97
97
  }
98
98
  }
99
99
  }
100
+
101
+
102
+ .@{card-prefix-cls}-extra {
103
+ position: absolute;
104
+ top: 6px;
105
+ right: 4px;
106
+ i {
107
+ font-size: 22px;
108
+ width: 32px;
109
+ cursor: pointer;
110
+ }
111
+ }
112
+
113
+ .@{card-prefix-cls}-lists-icon {
114
+ font-size: 32px;
115
+ position: absolute;
116
+ top: 6px;
117
+ right: 40px;
118
+ }
@@ -2,7 +2,7 @@
2
2
 
3
3
  @card-prefix: '--@{kd-prefix}-c-card';
4
4
 
5
- // shadow
5
+
6
6
  // color
7
7
  @card-color-background: var(~'@{card-prefix}-color-background', @color-white);
8
8
  @card-actions-color: var(~'@{card-prefix}-actions-color', @color-theme);
@@ -11,18 +11,18 @@
11
11
  @card-title-color: var(~'@{card-prefix}-title-color', @color-text-primary);
12
12
  @card-content-color: var(~'@{card-prefix}-content-color', @color-text-secondary);
13
13
 
14
+ // font
15
+ @card-title-font-size: var(~'@{card-prefix}-title-font-size', @font-size-middle);
16
+ @card-content-font-size: var(~'@{card-prefix}-content-font-size', @font-size-small);
14
17
 
15
18
  // sizing
16
19
  @card-sizing-title-height: var(~'@{card-prefix}-sizing-title-height', 40px);
20
+
17
21
  // spacing
18
22
  @card-spacing-padding-horizontal: var(~'@{card-prefix}-spacing-padding-horizontal', 12px);
19
23
  @card-spacing-padding-vertical: var(~'@{card-prefix}-spacing-padding-vertical', 8px);
20
24
 
21
- // motion
22
- // font
23
- @card-title-font-size: var(~'@{card-prefix}-title-font-size', @font-size-middle);
24
- @card-content-font-size: var(~'@{card-prefix}-content-font-size', @font-size-small);
25
25
 
26
- // radius
27
- // line-height
28
- // z-index
26
+
27
+
28
+
@@ -204,7 +204,7 @@
204
204
  top: 50%;
205
205
  -webkit-transform: translateY(-50%);
206
206
  transform: translateY(-50%);
207
- left: var(--kd-c-carousel-spacing-margin-left, 15px);
207
+ left: var(--kd-c-carousel-spacing-margin-left, 12px);
208
208
  }
209
209
  .kd-carousel-slidebar-left > li {
210
210
  margin: var(--kd-c-carousel-dots-spacing-margin, 4px) 0;
@@ -222,7 +222,7 @@
222
222
  top: 50%;
223
223
  -webkit-transform: translateY(-50%);
224
224
  transform: translateY(-50%);
225
- right: var(--kd-c-carousel-spacing-margin-right, 15px);
225
+ right: var(--kd-c-carousel-spacing-margin-right, 12px);
226
226
  }
227
227
  .kd-carousel-slidebar-right > li {
228
228
  margin: var(--kd-c-carousel-dots-spacing-margin, 4px) 0;
@@ -240,7 +240,7 @@
240
240
  left: 50%;
241
241
  -webkit-transform: translateX(-50%);
242
242
  transform: translateX(-50%);
243
- bottom: var(--kd-c-carousel-spacing-margin-bottom, 15px);
243
+ bottom: var(--kd-c-carousel-spacing-margin-bottom, 12px);
244
244
  }
245
245
  .kd-carousel-slidebar-bottom > li {
246
246
  margin: 0 var(--kd-c-carousel-dots-spacing-margin, 4px);
@@ -258,7 +258,7 @@
258
258
  left: 50%;
259
259
  -webkit-transform: translateX(-50%);
260
260
  transform: translateX(-50%);
261
- top: var(--kd-c-carousel-spacing-margin-top, 15px);
261
+ top: var(--kd-c-carousel-spacing-margin-top, 12px);
262
262
  }
263
263
  .kd-carousel-slidebar-top > li {
264
264
  margin: 0 var(--kd-c-carousel-dots-spacing-margin, 4px);
@@ -1,11 +1,8 @@
1
1
  @carousel-prefix: '--@{kd-prefix}-c-carousel';
2
2
 
3
- // spacing
4
- @carousel-dots-margin-top: var(~'@{carousel-prefix}-spacing-margin-top', 15px); // 面板指示点到边界的边距
5
- @carousel-dots-margin-bottom: var(~'@{carousel-prefix}-spacing-margin-bottom', 15px); // 面板指示点到边界的边距
6
- @carousel-dots-margin-left: var(~'@{carousel-prefix}-spacing-margin-left', 15px); // 面板指示点到边界的边距
7
- @carousel-dots-margin-right: var(~'@{carousel-prefix}-spacing-margin-right', 15px); // 面板指示点到边界的边距
8
- @carousel-dots-marigin: var(~'@{carousel-prefix}-dots-spacing-margin', 4px); // 面板指示点的间距
3
+ // color
4
+ @carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
5
+ @carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
9
6
 
10
7
  // radius
11
8
  @carousel-dots-boder-radius: var(~'@{carousel-prefix}-dots-border-radius', 2px); // 面板指示点的圆角
@@ -15,6 +12,10 @@
15
12
  @carousel-dots-width: var(~'@{carousel-prefix}-dots-sizing-width', 12px); // 面板指示点的宽度
16
13
  @carousel-dots-height: var(~'@{carousel-prefix}-dots-sizing-height', 4px); // 面板指示点的高度
17
14
 
18
- // color
19
- @carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
20
- @carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
15
+ // spacing
16
+ @carousel-dots-margin-top: var(~'@{carousel-prefix}-spacing-margin-top', 12px); // 面板指示点到边界的边距
17
+ @carousel-dots-margin-bottom: var(~'@{carousel-prefix}-spacing-margin-bottom', 12px); // 面板指示点到边界的边距
18
+ @carousel-dots-margin-left: var(~'@{carousel-prefix}-spacing-margin-left', 12px); // 面板指示点到边界的边距
19
+ @carousel-dots-margin-right: var(~'@{carousel-prefix}-spacing-margin-right', 12px); // 面板指示点到边界的边距
20
+ @carousel-dots-marigin: var(~'@{carousel-prefix}-dots-spacing-margin', 4px); // 面板指示点的间距
21
+
@@ -10,16 +10,16 @@
10
10
  @city-picker-background-color: var(~'@{city-picker-prefix}-color-background', @color-background-contain);
11
11
  @city-picker-background-hover-color: var(~'@{city-picker-prefix}-color-background-hover', @color-hover);
12
12
 
13
- // sizing
14
- @city-picker-panel-sizing-width: var(~'@{city-picker-prefix}-panel-sizing-width', 460px);
15
- @city-picker-panel-sizing-height: var(~'@{city-picker-prefix}-panel-sizing-height', 373px);
16
- // spacing
17
- // motion
18
13
 
19
14
  // font
20
15
  @city-picker-panel-font-size: var(~'@{city-picker-prefix}-panel-font-size', 12px);
21
16
 
22
17
  // radius
23
18
  @city-picker-panel-radius-border: var(~'@{city-picker-prefix}-panel-radius-border', @radius-border);
24
- // line-height
25
- // z-index
19
+
20
+ // sizing
21
+ @city-picker-panel-sizing-width: var(~'@{city-picker-prefix}-panel-sizing-width', 460px);
22
+ @city-picker-panel-sizing-height: var(~'@{city-picker-prefix}-panel-sizing-height', 373px);
23
+
24
+
25
+
@@ -96,7 +96,6 @@ declare const compDefaultProps: {
96
96
  destroyOnClose: boolean;
97
97
  forceRender: boolean;
98
98
  getContainer: HTMLElement;
99
- height: number;
100
99
  keyboard: boolean;
101
100
  mask: boolean;
102
101
  maskClosable: boolean;
@@ -102,12 +102,11 @@ var compDefaultProps = {
102
102
  destroyOnClose: false,
103
103
  forceRender: false,
104
104
  getContainer: document.body,
105
- height: 220,
106
105
  keyboard: true,
107
106
  mask: true,
108
107
  maskClosable: true,
109
108
  placement: 'right',
110
- width: 365,
109
+ width: 320,
111
110
  zIndex: 1050
112
111
  },
113
112
  Empty: {},
@@ -263,7 +263,7 @@
263
263
  bottom: -1px;
264
264
  height: 2px;
265
265
  margin-left: 11px;
266
- background: #1890ff;
266
+ background: var(--kd-c-date-picker-bar-color-bg-active, var(--kd-g-color-theme, #5582f3));
267
267
  opacity: 0;
268
268
  -webkit-transition: all 0.3s ease-out;
269
269
  transition: all 0.3s ease-out;
@@ -375,7 +375,7 @@
375
375
  background: #f5f5f5;
376
376
  }
377
377
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item:hover:not(.kd-date-picker-year-item-disabled) .kd-date-picker-year-text-selected {
378
- background: #104ccc;
378
+ background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
379
379
  }
380
380
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item .kd-date-picker-year-text {
381
381
  position: relative;
@@ -420,7 +420,7 @@
420
420
  background: #f5f5f5;
421
421
  }
422
422
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item:hover:not(.kd-date-picker-month-item-disabled) .kd-date-picker-month-text-selected {
423
- background: #104ccc;
423
+ background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
424
424
  }
425
425
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item .kd-date-picker-month-text {
426
426
  position: relative;
@@ -470,7 +470,7 @@
470
470
  background: #f5f5f5;
471
471
  }
472
472
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item:hover:not(.kd-date-picker-quarter-item-disabled) .kd-date-picker-quarter-text-selected {
473
- background: #104ccc;
473
+ background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
474
474
  }
475
475
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item .kd-date-picker-quarter-text {
476
476
  position: relative;
@@ -540,7 +540,7 @@
540
540
  background: #f5f5f5;
541
541
  }
542
542
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item:not(.kd-date-picker-calendar-item-disabled):hover .kd-date-picker-calendar-text-selected {
543
- background: #104ccc !important;
543
+ background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff)) !important;
544
544
  }
545
545
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item-disabled {
546
546
  position: relative;
@@ -589,7 +589,7 @@
589
589
  background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
590
590
  }
591
591
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected:hover .kd-date-picker-calendar-item:not(.kd-date-picker-calendar-item-disabled) .kd-date-picker-calendar-week-text::before {
592
- background: #104ccc;
592
+ background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
593
593
  }
594
594
  .kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected .kd-date-picker-calendar-week-text {
595
595
  background: transparent !important;
@@ -694,7 +694,7 @@
694
694
  height: 24px;
695
695
  width: 100%;
696
696
  margin: 0 -4px;
697
- background: #e6f7ff;
697
+ background: var(--kd-c-date-picker-range-item-color-bg, var(--kd-g-color-theme-1, #f2f8ff));
698
698
  }
699
699
  .kd-date-picker-panel .kd-date-picker-header-icon {
700
700
  min-width: 1.6em;
@@ -787,7 +787,7 @@
787
787
  background: #f5f5f5;
788
788
  }
789
789
  .kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column .kd-date-picker-time-cell-selected .kd-date-picker-time-cell-inner {
790
- background: #e6f7ff;
790
+ background: var(--kd-c-date-picker-range-item-color-bg, var(--kd-g-color-theme-1, #f2f8ff));
791
791
  }
792
792
  .kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column .kd-date-picker-time-cell-disabled .kd-date-picker-time-cell-inner {
793
793
  color: rgba(0, 0, 0, 0.25);