@capillarytech/blaze-ui 0.1.6-alpha.56 → 0.1.6-alpha.57
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.
|
@@ -229,15 +229,12 @@ const CapUnifiedSelect = ({
|
|
|
229
229
|
|
|
230
230
|
const suffix = useMemo(() => {
|
|
231
231
|
const displayValue = dropdownOpen ? tempValue : value;
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
displayValue?.length > 1 ? (
|
|
232
|
+
const showMore = isMulti && Array.isArray(displayValue) && displayValue.length > 1;
|
|
233
|
+
return (
|
|
235
234
|
<>
|
|
236
|
-
<span>+{displayValue.length - 1} more </span>
|
|
237
|
-
<CapIcon type={
|
|
235
|
+
{showMore && <span>+{displayValue.length - 1} more </span>}
|
|
236
|
+
<CapIcon className="cap-unified-select-suffix-icon" type={dropdownOpen ? 'up' : 'down'} size="s" />
|
|
238
237
|
</>
|
|
239
|
-
) : (
|
|
240
|
-
<CapIcon type={`${dropdownOpen ? 'up' : 'down'}`} size="s" />
|
|
241
238
|
);
|
|
242
239
|
}, [isMulti, value, tempValue, dropdownOpen]);
|
|
243
240
|
|
|
@@ -18,6 +18,19 @@ export const selectStyles = css`
|
|
|
18
18
|
&.disabled {
|
|
19
19
|
cursor: not-allowed;
|
|
20
20
|
}
|
|
21
|
+
.cap-unified-select-suffix-icon {
|
|
22
|
+
color: ${styledVars.CAP_G01};
|
|
23
|
+
}
|
|
24
|
+
.ant-select-outlined {
|
|
25
|
+
&:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) {
|
|
26
|
+
&:hover {
|
|
27
|
+
.ant-select-selector {
|
|
28
|
+
border-color: #7A869A;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
21
34
|
.ant-select-prefix {
|
|
22
35
|
font-size: 14px;
|
|
23
36
|
font-weight: 400;
|
|
@@ -76,16 +89,12 @@ export const selectStyles = css`
|
|
|
76
89
|
.ant-select-multiple .ant-select-selection-wrap {
|
|
77
90
|
align-self: center;
|
|
78
91
|
}
|
|
79
|
-
.cap-unified-tree-select .ant-select-selector:hover {
|
|
80
|
-
border: 1px solid #7a869a;
|
|
81
|
-
}
|
|
82
92
|
.cap-unified-tree-select .ant-select-selector:focus {
|
|
83
93
|
border: 1px solid #7a869a;
|
|
84
94
|
}
|
|
85
95
|
.cap-unified-tree-select .ant-select-tree-treenode {
|
|
86
96
|
padding-left: 4px;
|
|
87
97
|
}
|
|
88
|
-
|
|
89
98
|
.cap-unified-select-status {
|
|
90
99
|
color: #e83135;
|
|
91
100
|
}
|
|
@@ -124,7 +133,7 @@ export const selectStyles = css`
|
|
|
124
133
|
padding-left: 3px;
|
|
125
134
|
}
|
|
126
135
|
.ant-select-tree-indent {
|
|
127
|
-
margin-left:
|
|
136
|
+
margin-left: 12px;
|
|
128
137
|
}
|
|
129
138
|
.ant-select-tree-switcher:not(
|
|
130
139
|
.ant-select-tree-switcher-noop
|
|
@@ -143,12 +152,6 @@ export const selectStyles = css`
|
|
|
143
152
|
font-size: 12px;
|
|
144
153
|
}
|
|
145
154
|
}
|
|
146
|
-
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover
|
|
147
|
-
.ant-checkbox-checked:not(.ant-checkbox-disabled)
|
|
148
|
-
.ant-checkbox-inner {
|
|
149
|
-
background-color: #42b040;
|
|
150
|
-
border: 2px solid #42b040 !important;
|
|
151
|
-
}
|
|
152
155
|
.ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
|
|
153
156
|
.ant-select-tree-checkbox-inner {
|
|
154
157
|
background-color: #42b040 !important;
|
|
@@ -196,6 +199,12 @@ export const selectStyles = css`
|
|
|
196
199
|
border-radius: 4px;
|
|
197
200
|
}
|
|
198
201
|
}
|
|
202
|
+
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover
|
|
203
|
+
.ant-checkbox-checked:not(.ant-checkbox-disabled)
|
|
204
|
+
.ant-checkbox-inner {
|
|
205
|
+
background-color: #42b040;
|
|
206
|
+
border: 2px solid #42b040 !important;
|
|
207
|
+
}
|
|
199
208
|
.ant-checkbox-indeterminate .ant-checkbox-inner {
|
|
200
209
|
background-color: #42b040 !important;
|
|
201
210
|
border-color: #42b040 !important;
|
|
@@ -212,15 +221,8 @@ export const selectStyles = css`
|
|
|
212
221
|
border-radius: 1px;
|
|
213
222
|
}
|
|
214
223
|
}
|
|
215
|
-
.ant-select-outlined:not(.ant-select-disabled):not(
|
|
216
|
-
.ant-select-customize-input
|
|
217
|
-
):not(.ant-pagination-size-changer):hover
|
|
218
|
-
.ant-select-selector {
|
|
219
|
-
border-color: #7a869a !important;
|
|
220
|
-
}
|
|
221
224
|
.ant-select-tree-treenode.ant-select-tree-treenode-selected {
|
|
222
225
|
background-color: #e9f0fe;
|
|
223
|
-
color: #2466ea;
|
|
224
226
|
}
|
|
225
227
|
.ant-select-tree-list-holder-inner {
|
|
226
228
|
width: fit-content !important;
|
|
@@ -332,6 +334,9 @@ export const selectStyles = css`
|
|
|
332
334
|
}
|
|
333
335
|
}
|
|
334
336
|
}
|
|
337
|
+
.ant-select-tree-indent {
|
|
338
|
+
margin-left: 15px;
|
|
339
|
+
}
|
|
335
340
|
}
|
|
336
341
|
|
|
337
342
|
/* Single Select */
|
package/package.json
CHANGED