@kdcloudjs/kdesign 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/kdesign-complete.less +304 -219
  3. package/dist/kdesign.css +167 -97
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +19 -10
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +4 -4
  8. package/dist/kdesign.min.js +3 -3
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/avatar/style/token.less +13 -8
  11. package/es/base-data/base-data.js +5 -1
  12. package/es/base-data/style/index.css +8 -3
  13. package/es/base-data/style/index.less +8 -3
  14. package/es/base-data/style/token.less +7 -0
  15. package/es/button/style/token.less +7 -5
  16. package/es/card/style/token.less +8 -8
  17. package/es/carousel/style/index.css +4 -4
  18. package/es/carousel/style/token.less +10 -9
  19. package/es/city-picker/style/token.less +7 -7
  20. package/es/form/Field.js +4 -2
  21. package/es/form/style/index.css +1 -2
  22. package/es/form/style/index.less +1 -2
  23. package/es/form/style/token.less +7 -12
  24. package/es/image/style/token.less +0 -13
  25. package/es/menu/menu.js +1 -1
  26. package/es/menu/style/index.css +113 -69
  27. package/es/menu/style/index.less +149 -61
  28. package/es/menu/style/mixin.less +1 -10
  29. package/es/menu/style/token.less +13 -13
  30. package/es/menu/subMenu.js +1 -2
  31. package/es/message/content.js +7 -3
  32. package/es/message/style/index.css +30 -13
  33. package/es/message/style/index.less +22 -9
  34. package/es/message/style/token.less +29 -5
  35. package/es/pagination/style/token.less +5 -3
  36. package/es/progress/style/token.less +0 -8
  37. package/es/radio/style/token.less +0 -16
  38. package/es/select/style/index.css +1 -1
  39. package/es/select/style/token.less +1 -1
  40. package/es/stepper/style/index.css +1 -0
  41. package/es/stepper/style/index.less +1 -0
  42. package/es/stepper/style/token.less +8 -10
  43. package/es/switch/style/token.less +0 -6
  44. package/es/timeline/style/token.less +0 -8
  45. package/es/tree/style/index.css +6 -3
  46. package/es/tree/style/index.less +4 -0
  47. package/es/tree/style/token.less +2 -2
  48. package/lib/avatar/style/token.less +13 -8
  49. package/lib/base-data/base-data.js +5 -1
  50. package/lib/base-data/style/index.css +8 -3
  51. package/lib/base-data/style/index.less +8 -3
  52. package/lib/base-data/style/token.less +7 -0
  53. package/lib/button/style/token.less +7 -5
  54. package/lib/card/style/token.less +8 -8
  55. package/lib/carousel/style/index.css +4 -4
  56. package/lib/carousel/style/token.less +10 -9
  57. package/lib/city-picker/style/token.less +7 -7
  58. package/lib/form/Field.js +4 -2
  59. package/lib/form/style/index.css +1 -2
  60. package/lib/form/style/index.less +1 -2
  61. package/lib/form/style/token.less +7 -12
  62. package/lib/image/style/token.less +0 -13
  63. package/lib/menu/menu.js +1 -1
  64. package/lib/menu/style/index.css +113 -69
  65. package/lib/menu/style/index.less +149 -61
  66. package/lib/menu/style/mixin.less +1 -10
  67. package/lib/menu/style/token.less +13 -13
  68. package/lib/menu/subMenu.js +1 -2
  69. package/lib/message/content.js +7 -3
  70. package/lib/message/style/index.css +30 -13
  71. package/lib/message/style/index.less +22 -9
  72. package/lib/message/style/token.less +29 -5
  73. package/lib/pagination/style/token.less +5 -3
  74. package/lib/progress/style/token.less +0 -8
  75. package/lib/radio/style/token.less +0 -16
  76. package/lib/select/style/index.css +1 -1
  77. package/lib/select/style/token.less +1 -1
  78. package/lib/stepper/style/index.css +1 -0
  79. package/lib/stepper/style/index.less +1 -0
  80. package/lib/stepper/style/token.less +8 -10
  81. package/lib/switch/style/token.less +0 -6
  82. package/lib/timeline/style/token.less +0 -8
  83. package/lib/tree/style/index.css +6 -3
  84. package/lib/tree/style/index.less +4 -0
  85. package/lib/tree/style/token.less +2 -2
  86. package/package.json +1 -1
@@ -120,13 +120,13 @@
120
120
  display: inline-block;
121
121
  -webkit-box-sizing: border-box;
122
122
  box-sizing: border-box;
123
- min-width: 280px;
124
- max-width: 1000px;
125
- margin: 0 auto 16px;
126
- padding: 10px 20px;
127
- color: var(--kd-c-message-info-color-text, var(--kd-g-color-text-link, #0e5fd8));
123
+ min-width: var(--kd-c-message-sizing-min-width, 280px);
124
+ max-width: var(--kd-c-message-sizing-max-width, 1000px);
125
+ margin: 0 auto var(--kd-c-message-spacing-margin-bottom, 16px);
126
+ padding: var(--kd-c-message-spacing-padding-horizontal, 10px) var(--kd-c-message-spacing-padding-vertical, 20px);
127
+ color: var(--kd-c-message-info-color-text, #0e5fd8);
128
128
  border: 1px solid var(--kd-c-message-info-color-border, #b3d5ff);
129
- border-radius: 4px;
129
+ border-radius: var(--kd-c-message-border-radius, 4px);
130
130
  background-color: var(--kd-c-message-info-color-background, #e0efff);
131
131
  pointer-events: all;
132
132
  -webkit-animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
@@ -139,37 +139,54 @@
139
139
  -webkit-box-pack: justify;
140
140
  -ms-flex-pack: justify;
141
141
  justify-content: space-between;
142
- font-size: 12px;
142
+ font-size: var(--kd-c-message-font-size, 14px);
143
+ line-height: var(--kd-c-message-line-height, 20px);
143
144
  }
144
145
  .kd-message-content-main {
145
146
  display: -webkit-box;
146
147
  display: -ms-flexbox;
147
148
  display: flex;
149
+ }
150
+ .kd-message-content-icon-wrapper {
151
+ font-size: var(--kd-c-message-icon-font-size, 16px);
152
+ margin-right: var(--kd-c-message-icon-spacing-margin-right, 8px);
153
+ -ms-flex-item-align: start;
154
+ align-self: flex-start;
155
+ display: -webkit-inline-box;
156
+ display: -ms-inline-flexbox;
157
+ display: inline-flex;
148
158
  -webkit-box-align: center;
149
159
  -ms-flex-align: center;
150
160
  align-items: center;
151
161
  }
152
- .kd-message-content-main > div:nth-child(1) {
153
- margin-right: 10px;
162
+ .kd-message-content-text {
163
+ max-height: var(--kd-c-message-text-sizing-max-height, 160px);
164
+ overflow: auto;
154
165
  }
155
166
  .kd-message-content-close {
156
167
  cursor: pointer;
168
+ color: var(--kd-c-message-close-color-text, #666);
169
+ font-size: var(--kd-c-message-font-size, 16px);
170
+ margin-left: var(--kd-c-message-close-spacing-margin-left, 12px);
171
+ display: -webkit-inline-box;
172
+ display: -ms-inline-flexbox;
173
+ display: inline-flex;
157
174
  }
158
175
  .kd-message-content-close:hover {
159
- color: var(--kd-c-message-icon-color-text-hover, var(--kd-g-color-border-ongoing, #85b8ff));
176
+ color: var(--kd-c-message-close-color-text-hover, var(--kd-g-color-theme-5, #87adff));
160
177
  }
161
178
  .kd-message-success {
162
- color: var(--kd-c-message-success-color-text, var(--kd-g-color-success, #1ba854));
179
+ color: var(--kd-c-message-success-color-text, #1BA854);
163
180
  background: var(--kd-c-message-success-color-background, #dcfae4);
164
181
  border: 1px solid var(--kd-c-message-success-color-border, #a1e6b5);
165
182
  }
166
183
  .kd-message-warning {
167
- color: var(--kd-c-message-warning-color-text, var(--kd-g-color-warning, #ff991c));
184
+ color: var(--kd-c-message-warning-color-text, #FF991C);
168
185
  background: var(--kd-c-message-warning-color-background, #fff1d4);
169
186
  border: 1px solid var(--kd-c-message-warning-color-border, #ffe0a6);
170
187
  }
171
188
  .kd-message-error {
172
- color: var(--kd-c-message-error-color-text, var(--kd-g-color-error, #fb2323));
189
+ color: var(--kd-c-message-error-color-text, #FB2323);
173
190
  background: var(--kd-c-message-error-color-background, #ffdbe0);
174
191
  border: 1px solid var(--kd-c-message-error-color-border, #ffadb6);
175
192
  }
@@ -17,13 +17,13 @@
17
17
  position: relative;
18
18
  display: inline-block;
19
19
  box-sizing: border-box;
20
- min-width: 280px;
21
- max-width: 1000px;
22
- margin: 0 auto 16px;
23
- padding: 10px 20px;
20
+ min-width: @message-sizing-min-width;
21
+ max-width: @message-sizing-max-width;
22
+ margin: 0 auto @message-spacing-margin-bottom;
23
+ padding: @message-spacing-padding-horizontal @message-spacing-padding-vertical;
24
24
  color: @message-info-text-color;
25
25
  border: 1px solid @message-info-color-border;
26
- border-radius: 4px;
26
+ border-radius: @message-border-radius;
27
27
  background-color: @message-info-color-background;
28
28
  pointer-events: all;
29
29
  animation: kdNoticeEffect calc(@transition-duration - 0.2s) @ease-out forwards;
@@ -31,19 +31,32 @@
31
31
  &-content {
32
32
  display: flex;
33
33
  justify-content: space-between;
34
- font-size: 12px;
34
+ font-size: @message-font-size;
35
+ line-height: @messgae-line-height;
35
36
 
36
37
  &-main{
37
38
  display: flex;
39
+ }
40
+
41
+ &-icon-wrapper{
42
+ font-size: @message-icon-font-size;
43
+ margin-right: @message-icon-spacing-margin-right;
44
+ align-self: flex-start;
45
+ display: inline-flex;
38
46
  align-items: center;
47
+ }
39
48
 
40
- &>div:nth-child(1){
41
- margin-right: 10px;
42
- }
49
+ &-text {
50
+ max-height: @message-text-sizing-max-height;
51
+ overflow: auto;
43
52
  }
44
53
 
45
54
  &-close{
46
55
  cursor: pointer;
56
+ color: @message-close-color-text;
57
+ font-size: @message-close-font-size;
58
+ margin-left: @message-close-spacing-margin-left;
59
+ display: inline-flex;
47
60
 
48
61
  &:hover {
49
62
  color: @message-icon-text-color-hover;
@@ -5,17 +5,41 @@
5
5
  // color
6
6
  @message-info-color-background: var(~'@{message-custom-prefix}-info-color-background', #e0efff);
7
7
  @message-info-color-border: var(~'@{message-custom-prefix}-info-color-border', #b3d5ff);
8
+ @message-info-text-color: var(~'@{message-custom-prefix}-info-color-text', #0e5fd8);
8
9
  @message-success-color-background: var(~'@{message-custom-prefix}-success-color-background', #dcfae4);
9
10
  @message-success-color-border: var(~'@{message-custom-prefix}-success-color-border', #a1e6b5);
10
- @message-success-text-color: var(~'@{message-custom-prefix}-success-color-text', @color-success);
11
+ @message-success-text-color: var(~'@{message-custom-prefix}-success-color-text', #1BA854);
11
12
  @message-warning-color-background: var(~'@{message-custom-prefix}-warning-color-background', #fff1d4);
12
13
  @message-warning-color-border: var(~'@{message-custom-prefix}-warning-color-border', #ffe0a6);
13
- @message-warning-text-color: var(~'@{message-custom-prefix}-warning-color-text', @color-warning);
14
+ @message-warning-text-color: var(~'@{message-custom-prefix}-warning-color-text', #FF991C);
14
15
  @message-error-color-background: var(~'@{message-custom-prefix}-error-color-background', #ffdbe0);
15
16
  @message-error-color-border: var(~'@{message-custom-prefix}-error-color-border', #ffadb6);
16
- @message-error-text-color: var(~'@{message-custom-prefix}-error-color-text', @color-error);
17
- @message-icon-text-color-hover: var(~'@{message-custom-prefix}-icon-color-text-hover', @color-border-ongoing);
18
- @message-info-text-color: var(~'@{message-custom-prefix}-info-color-text', @color-text-link);
17
+ @message-error-text-color: var(~'@{message-custom-prefix}-error-color-text', #FB2323);
18
+ @message-close-color-text: var(~'@{message-custom-prefix}-close-color-text', #666);
19
+ @message-icon-text-color-hover: var(~'@{message-custom-prefix}-close-color-text-hover', @color-theme-hover);
20
+
21
+ // font
22
+ @message-font-size: var(~'@{message-custom-prefix}-font-size', 14px);
23
+ @message-icon-font-size: var(~'@{message-custom-prefix}-icon-font-size', 16px);
24
+ @message-close-font-size: var(~'@{message-custom-prefix}-font-size', 16px);
25
+
26
+ // line-height
27
+ @messgae-line-height: var(~'@{message-custom-prefix}-line-height', 20px);
28
+
29
+ // radius
30
+ @message-border-radius: var(~'@{message-custom-prefix}-border-radius', 4px);
31
+
32
+ // sizing
33
+ @message-sizing-max-width: var(~'@{message-custom-prefix}-sizing-max-width', 1000px);
34
+ @message-sizing-min-width: var(~'@{message-custom-prefix}-sizing-min-width', 280px);
35
+ @message-text-sizing-max-height: var(~'@{message-custom-prefix}-text-sizing-max-height', 160px);
36
+
37
+ // spacing
38
+ @message-spacing-margin-bottom: var(~'@{message-custom-prefix}-spacing-margin-bottom', 16px);
39
+ @message-spacing-padding-horizontal: var(~'@{message-custom-prefix}-spacing-padding-horizontal', 10px);
40
+ @message-spacing-padding-vertical: var(~'@{message-custom-prefix}-spacing-padding-vertical', 20px);
41
+ @message-icon-spacing-margin-right: var(~'@{message-custom-prefix}-icon-spacing-margin-right', 8px);
42
+ @message-close-spacing-margin-left: var(~'@{message-custom-prefix}-close-spacing-margin-left', 12px);
19
43
 
20
44
  // z-index
21
45
  @message-z-index: var(~'@{message-custom-prefix}-z-index', @z-index-apex);
@@ -13,6 +13,10 @@
13
13
  @pagination-border-disabled-color: var(~'@{pagination-custom-prefix}-color-border-disabled', @color-border-strong);
14
14
  @pagination-button-disabled-background-color: var(~'@{pagination-custom-prefix}-button-color-background-disabled', @color-background-contain-disabled);
15
15
 
16
+ // font
17
+ @pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
18
+ @pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
19
+
16
20
  // sizing
17
21
  @pagination-size: var(~'@{pagination-custom-prefix}-sizing-square', 24px);
18
22
  @pagination-nicety-size: var(~'@{pagination-custom-prefix}-nicety-sizing-square', 30px);
@@ -21,8 +25,6 @@
21
25
  // spacing
22
26
  @pagination-button-spacing: var(~'@{pagination-custom-prefix}-button-spacing', 4px);
23
27
 
24
- // font
25
- @pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
26
- @pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
28
+
27
29
 
28
30
 
@@ -1,14 +1,7 @@
1
1
  @import '../../style/themes/token.less';
2
2
  @progress-prefix: '--@{kd-prefix}-c-progress';
3
-
4
-
5
-
6
3
  @progress-transition-fn: cubic-bezier(0.66, 0, 0.34, 1);
7
4
 
8
-
9
-
10
-
11
-
12
5
  // color
13
6
  @progress-remaining-color: var(~'@{progress-prefix}-color-remaining', #e5e5e5);//背景色
14
7
  @progress-default-color: var(~'@{progress-prefix}-color-default', #5582f3);//进度条 默认色
@@ -28,7 +21,6 @@
28
21
  @progress-border-radius: var(~'@{progress-prefix}-radius-border', 100px);//线性进度条圆角
29
22
 
30
23
 
31
-
32
24
  // sizing
33
25
  @progress-line-stroke-width: var(~'@{progress-prefix}-line-stroke-sizing-width', 8px);
34
26
  @progress-circle-stroke-width: var(~'@{progress-prefix}-circle-stroke-sizing-width', 4px);
@@ -1,19 +1,9 @@
1
1
  @import '../../style/themes/token.less';
2
2
  @import '../../style/mixins/index';
3
3
 
4
-
5
4
  @radio-prefix: '--@{kd-prefix}-c-radio';
6
-
7
-
8
-
9
-
10
-
11
-
12
5
  @radio-transition-fn: cubic-bezier(0.075, 0.82, 0.165, 1);
13
6
 
14
-
15
-
16
-
17
7
  // color
18
8
  @radio-font-color: var(~'@{radio-prefix}-color-font', @color-text-primary);//单选项字体颜色
19
9
  @radio-color-theme: var(~'@{radio-prefix}-color-theme', @color-theme);//悬停/选中跟随主题色
@@ -26,19 +16,13 @@
26
16
  // font
27
17
  @radio-font-size: var(~'@{radio-prefix}-font-size', @font-size-small);//单选项字体大小
28
18
 
29
-
30
-
31
-
32
19
  //radius
33
20
  @radio-border-width: var(~'@{radio-prefix}-radius-border-width',1px);
34
21
 
35
-
36
-
37
22
  // sizing
38
23
  @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',13px);//单选图标大小
39
24
  @radio-square-height: var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
40
25
 
41
-
42
26
  // spacing
43
27
  @radio-margin-right: var(~'@{radio-prefix}-spacing-margin-right',8px);
44
28
  @radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',0px); //内间距 纵向
@@ -413,7 +413,7 @@
413
413
  background-color: var(--kd-c-select-color-background, var(--kd-g-color-hover, #f5f5f5));
414
414
  }
415
415
  .kd-select-item-option-selected:not(.kd-select-item-option-disabled) {
416
- color: var(--kd-c-select-item-color-text-selected, var(--kd-g-color-ongoing, #276ff5));
416
+ color: var(--kd-c-select-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
417
417
  background-color: var(--kd-c-select-color-background-selected, #f2f9ff);
418
418
  }
419
419
  .kd-select-item-option-disabled {
@@ -13,7 +13,7 @@
13
13
  @select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
14
14
  @select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
15
15
  @select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', @color-text-third);
16
- @select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-ongoing);
16
+ @select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
17
17
  @select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
18
18
  @select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', @color-text-link);
19
19
  @select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
@@ -109,6 +109,7 @@
109
109
  text-align: center;
110
110
  color: var(--kd-c-stepper-input-color, var(--kd-g-color-text-primary, #212121));
111
111
  margin: 0 4px;
112
+ font-size: var(--kd-c-stepper-input-font-size, 12px);
112
113
  }
113
114
  .kd-inputNumber-icon {
114
115
  font-size: 14px;
@@ -10,6 +10,7 @@
10
10
  text-align: center;
11
11
  color: @stepper-input-color;
12
12
  margin: 0 4px;
13
+ font-size: @stepper-input-font-size;
13
14
  }
14
15
 
15
16
  &-icon {
@@ -1,8 +1,6 @@
1
1
  @import "../../style/themes/token.less";
2
-
3
2
  @stepper-prefix: '--@{kd-prefix}-c-stepper';
4
3
 
5
- // shadow
6
4
  // color
7
5
  @stepper-input-color: var(~'@{stepper-prefix}-input-color', @color-text-primary);
8
6
  @stepper-icon-color: var(~'@{stepper-prefix}-icon-color', @color-text-secondary);
@@ -10,6 +8,14 @@
10
8
  @stepper-color-border-strong: var(~'@{stepper-prefix}-color-border-strong', @color-border-strong);
11
9
  @stepper-embed-icon-color-background: var(~'@{stepper-prefix}-embed-icon-color-background', #f6f7f9);
12
10
 
11
+ // font
12
+ @stepper-input-font-size: var(~'@{stepper-prefix}-input-font-size', 12px);
13
+
14
+
15
+ // motion
16
+ @stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
17
+
18
+
13
19
  // sizing
14
20
  @stepper-input-small-sizing-height: var(~'@{stepper-prefix}-input-small-sizing-height', 20px);
15
21
  @stepper-input-middle-sizing-height: var(~'@{stepper-prefix}-input-middle-sizing-height', 28px);
@@ -18,11 +24,3 @@
18
24
  // spacing
19
25
  @stepper-input-spacing-padding-horizontal: var(~'@{stepper-prefix}-input-spacing-padding-horizontal', 9px);
20
26
 
21
- // motion
22
- @stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
23
-
24
- // font
25
- // radius
26
- // line-height
27
- // z-index
28
-
@@ -3,12 +3,6 @@
3
3
  @switch-prefix: '--@{kd-prefix}-c-switch';
4
4
 
5
5
 
6
-
7
-
8
-
9
-
10
-
11
-
12
6
  // color
13
7
  @switch-on-color: var(~'@{switch-prefix}-color-on', @color-theme);
14
8
  @switch-off-color: var(~'@{switch-prefix}-color-off', #999);
@@ -1,10 +1,6 @@
1
1
  @import '../../style/themes/token.less';
2
2
 
3
-
4
-
5
3
  @timeline-prefix: '--@{kd-prefix}-c-timeline';
6
-
7
-
8
4
  @timeline-gap: 8px;
9
5
 
10
6
  // @timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
@@ -12,10 +8,6 @@
12
8
 
13
9
 
14
10
 
15
-
16
-
17
-
18
-
19
11
  // color
20
12
  @timeline-finished-color: var(~'@{timeline-prefix}-finished-color',@color-theme);
21
13
  @timeline-error-color: var(~'@{timeline-prefix}-error-color',@color-error);
@@ -227,11 +227,14 @@
227
227
  margin-left: 6px;
228
228
  }
229
229
  .kd-tree-node-selected {
230
- background-color: var(--kd-c-tree-node-color-backgroung-checked, #E3EBFF) !important;
231
- color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme-6, #5582f3));
230
+ background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
231
+ color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
232
232
  }
233
233
  .kd-tree-node-selected .kd-tree-node-title {
234
- color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme-6, #5582f3));
234
+ color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
235
+ }
236
+ .kd-tree-node-selected .kd-tree-node-icon {
237
+ color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
235
238
  }
236
239
  .kd-tree-node-draggabled {
237
240
  display: -webkit-box;
@@ -105,6 +105,10 @@
105
105
  .@{tree-node-prefix-cls}-title {
106
106
  color: @tree-node-checked-text-color;
107
107
  }
108
+
109
+ .@{tree-node-prefix-cls}-icon {
110
+ color: @tree-node-checked-text-color;
111
+ }
108
112
  }
109
113
 
110
114
  &-draggabled {
@@ -7,8 +7,8 @@
7
7
  @tree-node-disabled-color: var(~'@{tree-prefix}-node-color-disabled', @color-disabled);
8
8
  @tree-node-disabled-border-color: var(~'@{tree-prefix}-node-color-border-disabled', @color-border-disabled);
9
9
  @tree-color-theme: var(~'@{tree-prefix}-color-theme', @color-theme);
10
- @tree-node-checked-bg-color: var(~'@{tree-prefix}-node-color-backgroung-checked', #E3EBFF);
11
- @tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme-6);
10
+ @tree-node-checked-bg-color: var(~'@{tree-prefix}-node-color-backgroung-checked', @color-theme-3);
11
+ @tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme);
12
12
  @tree-node-hover-bg-color: var(~'@{tree-prefix}-node-color-backgroung-hover', @color-hover);
13
13
  @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
14
14
 
@@ -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
+
@@ -673,7 +673,11 @@ var InternalBaseData = function InternalBaseData(props, ref) {
673
673
 
674
674
  return /*#__PURE__*/_react.default.createElement("div", {
675
675
  key: item.value,
676
- className: "".concat(advancedSelectorfixCls, "-dropdown-options"),
676
+ className: (0, _classnames.default)("".concat(advancedSelectorfixCls, "-dropdown-options"), {
677
+ selected: seletedOptions.some(function (v) {
678
+ return v.value === item.value;
679
+ })
680
+ }),
677
681
  onMouseDown: function onMouseDown() {
678
682
  return handleSelect(item);
679
683
  }
@@ -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);
@@ -56,17 +56,19 @@
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
73
  @btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border); //圆角
72
74
 
@@ -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
+