@capillarytech/blaze-ui 0.1.6-alpha.64 → 0.1.6-alpha.66

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 (8) hide show
  1. package/CapIcon/styles.js +15 -15
  2. package/CapInput/styles.js +2 -2
  3. package/CapLabel/styles.js +49 -49
  4. package/CapTable/styles.js +9 -9
  5. package/CapTooltip/styles.js +3 -3
  6. package/CapUnifiedSelect/CapUnifiedSelect.js +37 -5
  7. package/CapUnifiedSelect/styles.js +97 -64
  8. package/package.json +1 -1
package/CapIcon/styles.js CHANGED
@@ -9,33 +9,33 @@ export const IconWrapper = styled.span`
9
9
  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
10
10
 
11
11
  &.xs {
12
- font-size: 0.75rem;
13
- width: 0.75rem;
14
- height: 0.75rem;
12
+ font-size: 0.857rem;
13
+ width: 0.857rem;
14
+ height: 0.857rem;
15
15
  }
16
16
 
17
17
  &.s {
18
- font-size: 1rem;
19
- width: 1rem;
20
- height: 1rem;
18
+ font-size: 1.143rem;
19
+ width: 1.143rem;
20
+ height: 1.143rem;
21
21
  }
22
22
 
23
23
  &.m {
24
- font-size: 1.5rem;
25
- width: 1.5rem;
26
- height: 1.5rem;
24
+ font-size: 1.714rem;
25
+ width: 1.714rem;
26
+ height: 1.714rem;
27
27
  }
28
28
 
29
29
  &.l {
30
- font-size: 2rem;
31
- width: 2rem;
32
- height: 2rem;
30
+ font-size: 2.286rem;
31
+ width: 2.286rem;
32
+ height: 2.286rem;
33
33
  }
34
34
 
35
35
  &.with-text-label {
36
36
  display: inline-flex;
37
37
  align-items: center;
38
- gap: ${styledVars.SPACING_08};
38
+ gap: 0.571rem;
39
39
  }
40
40
  `;
41
41
 
@@ -45,8 +45,8 @@ export const BackgroundWrapper = styled.span`
45
45
  justify-content: center;
46
46
  border-radius: 50%;
47
47
  background-color: ${({ bgColor }) => bgColor || styledVars.CAP_G09};
48
- width: ${({ size }) => (size === 'xs' ? '1.25rem' : size === 's' ? '1.5rem' : size === 'l' ? '3rem' : '2.25rem')};
49
- height: ${({ size }) => (size === 'xs' ? '1.25rem' : size === 's' ? '1.5rem' : size === 'l' ? '3rem' : '2.25rem')};
48
+ width: ${({ size }) => (size === 'xs' ? '1.429rem' : size === 's' ? '1.714rem' : size === 'l' ? '3.429rem' : '2.571rem')};
49
+ height: ${({ size }) => (size === 'xs' ? '1.429rem' : size === 's' ? '1.714rem' : size === 'l' ? '3.429rem' : '2.571rem')};
50
50
  `;
51
51
 
52
52
  export const iconStyles = css`
package/CapInput/styles.js CHANGED
@@ -46,8 +46,8 @@ export const inputStyles = css`
46
46
  /* Size variations */
47
47
  &.ant-input-lg,
48
48
  &.ant-input-affix-wrapper-lg {
49
- font-size: 0.875rem;
50
- padding: 0.625rem 0.75rem;
49
+ font-size: 1rem;
50
+ padding: 0.714rem 0.857rem;
51
51
  }
52
52
 
53
53
  /* TextArea specific */
package/CapLabel/styles.js CHANGED
@@ -3,7 +3,7 @@ import * as styledVars from '../styled/variables';
3
3
 
4
4
  export const StyledLabelDiv = styled.div`
5
5
  font-family: ${styledVars.FONT_FAMILY};
6
- font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.75rem'};
6
+ font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
7
7
  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
8
8
  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
9
9
  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
@@ -13,7 +13,7 @@ export const StyledLabelDiv = styled.div`
13
13
 
14
14
  export const StyledLabelSpan = styled.span`
15
15
  font-family: ${styledVars.FONT_FAMILY};
16
- font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.75rem'};
16
+ font-size: ${({ typeStyles }) => typeStyles?.fontSize || '0.857rem'};
17
17
  font-weight: ${({ typeStyles, fontWeight }) => fontWeight || typeStyles?.fontWeight || styledVars.FONT_WEIGHT_REGULAR};
18
18
  color: ${({ typeStyles }) => typeStyles?.color || styledVars.CAP_G04};
19
19
  line-height: ${({ typeStyles, lineHeight }) => lineHeight || typeStyles?.lineHeight || 'normal'};
@@ -26,234 +26,234 @@ export const labelStyles = css`
26
26
  font-family: ${styledVars.FONT_FAMILY};
27
27
 
28
28
  &.label1 {
29
- font-size: 0.75rem;
29
+ font-size: 0.857rem;
30
30
  color: ${styledVars.CAP_G04};
31
31
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
32
32
  line-height: normal;
33
33
  }
34
34
 
35
35
  &.label2 {
36
- font-size: 0.75rem;
36
+ font-size: 0.857rem;
37
37
  color: ${styledVars.CAP_G01};
38
38
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
39
39
  line-height: normal;
40
40
  }
41
41
 
42
42
  &.label3 {
43
- font-size: 0.75rem;
43
+ font-size: 0.857rem;
44
44
  color: ${styledVars.CAP_G05};
45
45
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
46
46
  line-height: normal;
47
47
  }
48
48
 
49
49
  &.label4 {
50
- font-size: 0.75rem;
50
+ font-size: 0.857rem;
51
51
  color: ${styledVars.CAP_G01};
52
52
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
53
53
  line-height: normal;
54
54
  }
55
55
 
56
56
  &.label5 {
57
- font-size: 0.625rem;
57
+ font-size: 0.714rem;
58
58
  color: ${styledVars.CAP_G01};
59
59
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
60
60
  line-height: normal;
61
61
  }
62
62
 
63
63
  &.label6 {
64
- font-size: 0.75rem;
64
+ font-size: 0.857rem;
65
65
  color: ${styledVars.CAP_G06};
66
66
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
67
67
  line-height: normal;
68
68
  }
69
69
 
70
70
  &.label7 {
71
- font-size: 0.875rem;
71
+ font-size: 1rem;
72
72
  color: ${styledVars.CAP_G04};
73
73
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
74
74
  line-height: normal;
75
75
  }
76
76
 
77
77
  &.label8 {
78
- font-size: 0.75rem;
78
+ font-size: 0.857rem;
79
79
  color: ${styledVars.CAP_G01};
80
80
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
81
81
  line-height: normal;
82
82
  }
83
83
 
84
84
  &.label9 {
85
- font-size: 0.75rem;
85
+ font-size: 0.857rem;
86
86
  color: ${styledVars.CAP_G01};
87
- line-height: 1rem;
87
+ line-height: 1.143rem;
88
88
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
89
89
  }
90
90
 
91
91
  &.label10 {
92
- font-size: 0.75rem;
92
+ font-size: 0.857rem;
93
93
  color: ${styledVars.CAP_WHITE};
94
- line-height: 1rem;
94
+ line-height: 1.143rem;
95
95
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
96
96
  }
97
97
 
98
98
  &.label11 {
99
- font-size: 0.625rem;
99
+ font-size: 0.714rem;
100
100
  color: ${styledVars.CAP_G04};
101
101
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
102
102
  line-height: normal;
103
103
  }
104
104
 
105
105
  &.label12 {
106
- font-size: 0.75rem;
106
+ font-size: 0.857rem;
107
107
  color: ${styledVars.CAP_WHITE};
108
108
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
109
109
  line-height: normal;
110
110
  }
111
111
 
112
112
  &.label13 {
113
- font-size: 0.625rem;
113
+ font-size: 0.714rem;
114
114
  color: ${styledVars.CAP_G05};
115
115
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
116
116
  line-height: normal;
117
117
  }
118
118
 
119
119
  &.label14 {
120
- font-size: 0.875rem;
120
+ font-size: 1rem;
121
121
  color: #676e7c;
122
122
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
123
123
  line-height: normal;
124
124
  }
125
125
 
126
126
  &.label15 {
127
- font-size: 0.875rem;
127
+ font-size: 1rem;
128
128
  color: ${styledVars.CAP_G01};
129
129
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
130
130
  line-height: normal;
131
131
  }
132
132
 
133
133
  &.label16 {
134
- font-size: 0.875rem;
134
+ font-size: 1rem;
135
135
  color: ${styledVars.CAP_G01};
136
136
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
137
137
  line-height: normal;
138
138
  }
139
139
 
140
140
  &.label17 {
141
- font-size: 1rem;
141
+ font-size: 1.143rem;
142
142
  color: ${styledVars.CAP_G01};
143
143
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
144
144
  line-height: normal;
145
145
  }
146
146
 
147
147
  &.label18 {
148
- font-size: 0.875rem;
148
+ font-size: 1rem;
149
149
  color: ${styledVars.CAP_G04};
150
150
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
151
151
  line-height: normal;
152
152
  }
153
153
 
154
154
  &.label19 {
155
- font-size: 0.75rem;
156
- line-height: 1rem;
155
+ font-size: 0.857rem;
156
+ line-height: 1.143rem;
157
157
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
158
158
  color: rgba(0, 0, 0, 0.87);
159
159
  }
160
160
 
161
161
  &.label20 {
162
- font-size: 0.875rem;
162
+ font-size: 1rem;
163
163
  color: ${styledVars.CAP_BLUE01};
164
164
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
165
165
  line-height: normal;
166
166
  }
167
167
 
168
168
  &.label21 {
169
- font-size: 0.75rem;
169
+ font-size: 0.857rem;
170
170
  color: ${styledVars.CAP_BLUE01};
171
171
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
172
172
  line-height: normal;
173
173
  }
174
174
 
175
175
  &.label22 {
176
- font-size: 1.5rem;
176
+ font-size: 1.714rem;
177
177
  color: ${styledVars.CAP_G04};
178
- line-height: 1.75rem;
178
+ line-height: 2rem;
179
179
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
180
180
  }
181
181
 
182
182
  &.label23 {
183
- font-size: 0.875rem;
183
+ font-size: 1rem;
184
184
  color: ${styledVars.CAP_WHITE};
185
185
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
186
186
  line-height: normal;
187
187
  }
188
188
 
189
189
  &.label24 {
190
- font-size: 0.875rem;
190
+ font-size: 1rem;
191
191
  color: ${styledVars.CAP_G04};
192
192
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
193
- line-height: 1.25rem;
193
+ line-height: 1.429rem;
194
194
  }
195
195
 
196
196
  &.label25 {
197
- font-size: 0.875rem;
197
+ font-size: 1rem;
198
198
  color: ${styledVars.CAP_G04};
199
199
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
200
- line-height: 1.25rem;
200
+ line-height: 1.429rem;
201
201
  }
202
202
 
203
203
  &.label26 {
204
- font-size: 0.625rem;
204
+ font-size: 0.714rem;
205
205
  color: ${styledVars.CAP_G01};
206
206
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
207
- line-height: 0.75rem;
207
+ line-height: 0.857rem;
208
208
  }
209
209
 
210
210
  &.label27 {
211
- font-size: 0.75rem;
211
+ font-size: 0.857rem;
212
212
  color: ${styledVars.CAP_BLUE01};
213
213
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
214
- line-height: 1rem;
214
+ line-height: 1.143rem;
215
215
  }
216
216
 
217
217
  &.label28 {
218
218
  color: ${styledVars.CAP_WHITE};
219
- font-size: 0.75rem;
219
+ font-size: 0.857rem;
220
220
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
221
- line-height: 1rem;
221
+ line-height: 1.143rem;
222
222
  }
223
223
 
224
224
  &.label29 {
225
225
  color: ${styledVars.CAP_WHITE};
226
- font-size: 0.625rem;
226
+ font-size: 0.714rem;
227
227
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
228
- line-height: 0.75rem;
228
+ line-height: 0.857rem;
229
229
  }
230
230
 
231
231
  &.label30 {
232
232
  color: ${styledVars.CAP_WHITE};
233
- font-size: 0.625rem;
233
+ font-size: 0.714rem;
234
234
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
235
- line-height: 0.75rem;
235
+ line-height: 0.857rem;
236
236
  }
237
237
 
238
238
  &.label31 {
239
- font-size: 0.75rem;
239
+ font-size: 0.857rem;
240
240
  color: ${styledVars.CAP_G01};
241
241
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
242
- line-height: 1rem;
242
+ line-height: 1.143rem;
243
243
  }
244
244
 
245
245
  &.label32 {
246
- line-height: 1.25rem;
247
- font-size: 0.875rem;
246
+ line-height: 1.429rem;
247
+ font-size: 1rem;
248
248
  color: ${styledVars.CAP_WHITE};
249
249
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
250
250
  }
251
251
 
252
252
  &.label33 {
253
- font-size: 0.875rem;
253
+ font-size: 1rem;
254
254
  color: ${styledVars.CAP_BLUE01};
255
255
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
256
- line-height: 1.25rem;
256
+ line-height: 1.429rem;
257
257
  }
258
258
  }
259
259
  `;
package/CapTable/styles.js CHANGED
@@ -16,7 +16,7 @@ const {
16
16
  export const StyledTable = styled(Table)`
17
17
  &.cap-table-v2 {
18
18
  .ant-table {
19
- border: 0.0625rem solid ${CAP_G07};
19
+ border: 1px solid ${CAP_G07};
20
20
  }
21
21
  }
22
22
 
@@ -28,16 +28,16 @@ export const StyledTable = styled(Table)`
28
28
  position: absolute;
29
29
  width: 100%;
30
30
  align-items: center;
31
- height: 3.75rem;
31
+ height: 4.286rem;
32
32
  text-align: center;
33
- font-size: 1rem;
33
+ font-size: 1.143rem;
34
34
  color: gray;
35
- border-top: 0.0625rem solid ${CAP_G07};
35
+ border-top: 1px solid ${CAP_G07};
36
36
  }
37
37
  }
38
38
 
39
39
  .ant-table {
40
- border: 0.0625rem solid ${CAP_G07};
40
+ border: 1px solid ${CAP_G07};
41
41
 
42
42
  .ant-table-thead > tr > th {
43
43
  color: ${CAP_G01};
@@ -53,7 +53,7 @@ export const StyledTable = styled(Table)`
53
53
  }
54
54
 
55
55
  .ant-table-tbody > tr > td {
56
- border-bottom: 0.0625rem solid ${CAP_G07};
56
+ border-bottom: 1px solid ${CAP_G07};
57
57
  }
58
58
 
59
59
  .ant-table-tbody > tr:last-child > td {
@@ -79,7 +79,7 @@ export const StyledTable = styled(Table)`
79
79
 
80
80
  .ant-table-thead {
81
81
  .table-children {
82
- padding: 0.375rem ${SPACING_24} 1rem;
82
+ padding: 0.429rem ${SPACING_24} 1.143rem;
83
83
  position: relative;
84
84
  }
85
85
 
@@ -90,8 +90,8 @@ export const StyledTable = styled(Table)`
90
90
 
91
91
  .table-children.show-separator:not(:last-child)::after {
92
92
  content: '';
93
- height: 0.5rem;
94
- width: 0.0625rem;
93
+ height: 0.571rem;
94
+ width: 0.071rem;
95
95
  right: 0;
96
96
  top: 30%;
97
97
  background-color: ${CAP_G07};
package/CapTooltip/styles.js CHANGED
@@ -7,10 +7,10 @@ export const tooltipStyles = css`
7
7
  background-color: ${styledVars.CAP_G01};
8
8
  color: ${styledVars.CAP_WHITE};
9
9
  padding: ${styledVars.SPACING_08} ${styledVars.SPACING_12};
10
- font-size: 0.875rem;
11
- line-height: 1.25rem;
10
+ font-size: 1rem;
11
+ line-height: 1.429rem;
12
12
  border-radius: ${styledVars.RADIUS_04};
13
- max-width: 18.75rem;
13
+ max-width: 21.429rem;
14
14
  word-wrap: break-word;
15
15
  }
16
16
 
package/CapUnifiedSelect/CapUnifiedSelect.js CHANGED
@@ -4,7 +4,7 @@ import classnames from 'classnames';
4
4
  import { TreeSelect, Input, Button, Checkbox } from 'antd-v5';
5
5
  import styled from 'styled-components';
6
6
  import * as styledVars from '../styled/variables';
7
- import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon } from '../';
7
+ import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon, CapTooltip } from '../';
8
8
  import withStyles from '../utils/withStyles';
9
9
  import withMemo from '../utils/withMemo';
10
10
  import { HeaderWrapper, selectStyles } from './styles';
@@ -149,6 +149,7 @@ const CapUnifiedSelect = ({
149
149
  showUpload,
150
150
  customPopupRender,
151
151
  showSearch,
152
+ readOnly,
152
153
  searchBasedOn,
153
154
  onConfirm,
154
155
  clearText,
@@ -219,9 +220,30 @@ const CapUnifiedSelect = ({
219
220
 
220
221
  const suffix = useMemo(() => {
221
222
  const count = Array.isArray(displayValue) ? displayValue?.length : (displayValue ? 1 : 0);
223
+ const renderTooltipTitle = (values) => {
224
+ return (
225
+ <div className="cap-unified-select-more-tooltip-content">
226
+ {values.map((val, idx) => (
227
+ <div key={idx}>{val}</div>
228
+ ))}
229
+ </div>
230
+ );
231
+ };
232
+
222
233
  return (
223
234
  <>
224
- {isMulti && count > 1 && <span>+{count - 1} more </span>}
235
+ {isMulti && count > 1 && (
236
+ <span className="cap-unified-select-more-text">
237
+ <CapTooltip
238
+ title={renderTooltipTitle(displayValue.slice(1))}
239
+ placement="bottom"
240
+ overlayClassName="cap-unified-select-more-tooltip"
241
+ arrowPointAtCenter={true}
242
+ >
243
+ <span>+{count - 1} more</span>
244
+ </CapTooltip>
245
+ </span>
246
+ )}
225
247
  <CapIcon
226
248
  className="cap-unified-select-suffix-icon"
227
249
  type={dropdownOpen ? 'up' : 'down'}
@@ -255,13 +277,16 @@ const CapUnifiedSelect = ({
255
277
 
256
278
 
257
279
  const handleDropdownVisibilityChange = useCallback((open) => {
280
+ if (readOnly) {
281
+ return;
282
+ }
258
283
  if (!open && !customPopupRender) {
259
284
  onChange?.(tempValue);
260
285
  } else if (!open) {
261
286
  setTempValue(value);
262
287
  }
263
288
  setDropdownOpen(open);
264
- }, [customPopupRender, value, onChange, tempValue]);
289
+ }, [customPopupRender, value, onChange, tempValue, readOnly]);
265
290
 
266
291
  const renderHeader = useMemo(() => {
267
292
  if (!headerLabel && !tooltip) return null;
@@ -400,8 +425,13 @@ const CapUnifiedSelect = ({
400
425
  );
401
426
 
402
427
  const combinedClassName = useMemo(
403
- () => classnames(containerClassName, 'cap-unified-tree-select', className),
404
- [containerClassName, className]
428
+ () => classnames(
429
+ containerClassName,
430
+ 'cap-unified-tree-select',
431
+ { 'cap-unified-tree-select-readonly': readOnly },
432
+ className
433
+ ),
434
+ [containerClassName, className, readOnly]
405
435
  );
406
436
 
407
437
  return (
@@ -462,6 +492,7 @@ CapUnifiedSelect.propTypes = {
462
492
  headerLabel: PropTypes.string,
463
493
  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
464
494
  disabled: PropTypes.bool,
495
+ readOnly: PropTypes.bool,
465
496
  bylineText: PropTypes.string,
466
497
  customPopupRender: PropTypes.bool,
467
498
  showSearch: PropTypes.bool,
@@ -490,6 +521,7 @@ CapUnifiedSelect.defaultProps = {
490
521
  showSearch: true,
491
522
  className: '',
492
523
  disabled: false,
524
+ readOnly: false,
493
525
  showUpload: false,
494
526
  isError: false,
495
527
  onUpload: () => {},
package/CapUnifiedSelect/styles.js CHANGED
@@ -4,7 +4,6 @@ import * as styledVars from '../styled/variables';
4
4
  export const HeaderWrapper = styled.div`
5
5
  display: flex;
6
6
  align-items: center;
7
- gap: ${styledVars.SPACING_04};
8
7
 
9
8
  &.disabled {
10
9
  opacity: 0.5;
@@ -18,6 +17,12 @@ export const selectStyles = css`
18
17
  &.disabled {
19
18
  cursor: not-allowed;
20
19
  }
20
+ .cap-unified-select-more-text {
21
+ cursor: pointer;
22
+ color: ${styledVars.CAP_G01};
23
+ margin-right: ${styledVars.SPACING_04};
24
+ position: relative;
25
+ }
21
26
  .cap-unified-select-suffix-icon {
22
27
  color: ${styledVars.CAP_G01};
23
28
  }
@@ -30,26 +35,34 @@ export const selectStyles = css`
30
35
  }
31
36
  }
32
37
  }
38
+
39
+ .cap-unified-tree-select-readonly.ant-select-outlined {
40
+ &:hover .ant-select-selector,
41
+ &:active .ant-select-selector,
42
+ &:focus .ant-select-selector {
43
+ border-color: ${styledVars.CAP_G08} !important;
44
+ }
45
+ }
33
46
  .ant-select-selector .ant-select-selection-placeholder{
34
47
  pointer-events: unset;
35
48
  }
36
49
  .ant-select-prefix {
37
- font-size: 0.875rem;
50
+ font-size: 1rem;
38
51
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
39
52
  color: ${styledVars.CAP_G01};
40
- line-height: 1.25rem;
53
+ line-height: 1.429rem;
41
54
  }
42
55
  .cap-unified-select-header-label {
43
56
  font-family: ${styledVars.FONT_FAMILY};
44
57
  font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
45
- font-size: 0.875rem;
46
- line-height: 1.25rem;
58
+ font-size: 1rem;
59
+ line-height: 1.429rem;
47
60
  letter-spacing: 0;
48
61
  }
49
62
  .cap-unified-select-header-byline-text {
50
63
  font-family: ${styledVars.FONT_FAMILY};
51
64
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
52
- font-size: 0.75rem;
65
+ font-size: 0.857rem;
53
66
  letter-spacing: 0;
54
67
  color: ${styledVars.CAP_G05};
55
68
  }
@@ -57,11 +70,31 @@ export const selectStyles = css`
57
70
  left: ${styledVars.SPACING_12};
58
71
  }
59
72
  .cap-tooltip-with-info-icon {
60
- margin-top: 0.125rem;
73
+ margin-top: 0.143rem;
61
74
  }
62
75
 
63
76
  .cap-unified-tree-select {
64
- min-width: 12.5rem;
77
+ min-width: 14.286rem;
78
+ margin-top: 0.571rem;
79
+
80
+ &.cap-unified-tree-select-readonly {
81
+ pointer-events: none;
82
+ .ant-select-selector {
83
+ background-color: ${styledVars.CAP_WHITE};
84
+ border-color: ${styledVars.CAP_G08} !important;
85
+ cursor: default;
86
+ }
87
+ .ant-select-arrow {
88
+ pointer-events: auto;
89
+ color: ${styledVars.CAP_G06};
90
+ }
91
+ &:hover .ant-select-selector {
92
+ border-color: ${styledVars.CAP_G08} !important;
93
+ }
94
+ .cap-unified-select-more-text {
95
+ pointer-events: auto;
96
+ }
97
+ }
65
98
  }
66
99
 
67
100
  .ant-select.ant-select-focused.ant-select-outlined:not(.ant-select-disabled)
@@ -75,12 +108,12 @@ export const selectStyles = css`
75
108
  background-color: ${styledVars.CAP_PRIMARY.base};
76
109
  }
77
110
  .ant-select-dropdown {
78
- margin-top: -0.5rem !important;
111
+ margin-top: -0.571rem !important;
79
112
  border-radius: ${styledVars.RADIUS_04};
80
113
  box-shadow:
81
- 0 0.25rem 0.5rem -0.125rem ${styledVars.CAP_G01},
82
- 0 0 0.0625rem 0 ${styledVars.CAP_G01};
83
- max-height: 22.5rem;
114
+ 0 0.286rem 0.571rem -0.143rem ${styledVars.CAP_G01},
115
+ 0 0 0.071rem 0 ${styledVars.CAP_G01};
116
+ max-height: 25.714rem;
84
117
  overflow: visible;
85
118
  }
86
119
 
@@ -91,7 +124,7 @@ export const selectStyles = css`
91
124
  align-self: center;
92
125
  }
93
126
  .cap-unified-tree-select .ant-select-selector:focus {
94
- border: 0.0625rem solid ${styledVars.CAP_G11};
127
+ border: 1px solid ${styledVars.CAP_G11};
95
128
  }
96
129
  .cap-unified-tree-select .ant-select-tree-treenode {
97
130
  padding-left: ${styledVars.SPACING_04};
@@ -117,7 +150,7 @@ export const selectStyles = css`
117
150
  height: 100%;
118
151
  .cap-unified-select-option-label{
119
152
  flex: 1;
120
- max-width: 8.125rem;
153
+ max-width: 9.286rem;
121
154
  overflow: hidden;
122
155
  text-overflow: ellipsis;
123
156
  white-space: nowrap;
@@ -127,12 +160,12 @@ export const selectStyles = css`
127
160
  display: flex;
128
161
  align-items: center;
129
162
  padding: 0 ${styledVars.SPACING_08};
130
- max-height: 1.25rem;
163
+ max-height: 1.429rem;
131
164
  white-space: nowrap;
132
165
  margin-left: ${styledVars.SPACING_08};
133
166
  }
134
167
  .cap-tooltip-with-info-icon{
135
- margin-top: 0.3125rem;
168
+ margin-top: 0.357rem;
136
169
  }
137
170
  }
138
171
  }
@@ -140,12 +173,12 @@ export const selectStyles = css`
140
173
  background-color: transparent;
141
174
  }
142
175
  .ant-select-tree-treenode {
143
- height: 3rem;
176
+ height: 3.429rem;
144
177
  margin-bottom: 0;
145
178
  .ant-select-tree-checkbox .ant-select-tree-checkbox-inner {
146
- height: 1.125rem;
147
- width: 1.125rem;
148
- border: 0.125rem solid ${styledVars.CAP_G06};
179
+ height: 1.286rem;
180
+ width: 1.286rem;
181
+ border: 0.143rem solid ${styledVars.CAP_G06};
149
182
  border-radius: ${styledVars.RADIUS_04};
150
183
  }
151
184
  &:hover {
@@ -158,7 +191,7 @@ export const selectStyles = css`
158
191
  }
159
192
  .ant-select-tree-node-content-wrapper {
160
193
  border-radius: 0;
161
- padding-left: 0.1875rem;
194
+ padding-left: 3px;
162
195
  }
163
196
  .ant-select-tree-indent {
164
197
  margin-left: ${styledVars.SPACING_12};
@@ -170,15 +203,15 @@ export const selectStyles = css`
170
203
  }
171
204
  .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
172
205
  background-color: ${styledVars.CAP_PRIMARY.base};
173
- border: 0.125rem solid ${styledVars.CAP_PRIMARY.base} !important;
206
+ border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
174
207
  &:hover {
175
208
  background-color: ${styledVars.CAP_PRIMARY.base};
176
- border: 0.125rem solid ${styledVars.CAP_PRIMARY.base} !important;
209
+ border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
177
210
  }
178
211
  }
179
212
  .ant-select-tree-switcher .ant-select-tree-switcher-icon {
180
- font-size: 0.75rem;
181
- margin-top: 1.125rem;
213
+ font-size: 0.857rem;
214
+ margin-top: 1.286rem;
182
215
  }
183
216
  }
184
217
  .ant-select-tree-checkbox.ant-select-tree-checkbox-indeterminate
@@ -193,18 +226,18 @@ export const selectStyles = css`
193
226
  position: absolute;
194
227
  top: 50%;
195
228
  left: 50%;
196
- width: 0.625rem;
197
- height: 0.125rem;
229
+ width: 0.714rem;
230
+ height: 0.143rem;
198
231
  background-color: ${styledVars.CAP_WHITE};
199
232
  transform: translate(-50%, -50%);
200
- border-radius: 0.0625rem;
233
+ border-radius: 0.071rem;
201
234
  }
202
235
  .cap-unified-select-upload-container {
203
236
  cursor: pointer;
204
237
  display: flex;
205
238
  align-items: center;
206
- border-bottom: 0.0625rem solid ${styledVars.CAP_G08};
207
- height: 2.5rem;
239
+ border-bottom: 0.071rem solid ${styledVars.CAP_G08};
240
+ height: 2.857rem;
208
241
  padding-left: ${styledVars.SPACING_16};
209
242
 
210
243
  .cap-unified-select-upload-label {
@@ -213,18 +246,18 @@ export const selectStyles = css`
213
246
  }
214
247
  }
215
248
  .cap-unified-select-select-all-container {
216
- padding: 0.5625rem 0.9375rem;
249
+ padding: 0.643rem 1.071rem;
217
250
  cursor: pointer;
218
251
  display: flex;
219
252
  align-items: center;
220
- border-bottom: 0.0625rem solid ${styledVars.CAP_G08};
221
- height: 2.5rem;
253
+ border-bottom: 0.071rem solid ${styledVars.CAP_G08};
254
+ height: 2.857rem;
222
255
  .cap-unified-select-select-all-checkbox {
223
256
  display: contents !important;
224
257
  .ant-checkbox-inner {
225
- height: 1.125rem;
226
- width: 1.125rem;
227
- border: 0.125rem solid ${styledVars.CAP_G06};
258
+ height: 1.286rem;
259
+ width: 1.286rem;
260
+ border: 0.143rem solid ${styledVars.CAP_G06};
228
261
  border-radius: ${styledVars.RADIUS_04};
229
262
  }
230
263
  }
@@ -232,7 +265,7 @@ export const selectStyles = css`
232
265
  .ant-checkbox-checked:not(.ant-checkbox-disabled)
233
266
  .ant-checkbox-inner {
234
267
  background-color: ${styledVars.CAP_PRIMARY.base};
235
- border: 0.125rem solid ${styledVars.CAP_PRIMARY.base} !important;
268
+ border: 0.143rem solid ${styledVars.CAP_PRIMARY.base} !important;
236
269
  }
237
270
  .ant-checkbox-indeterminate .ant-checkbox-inner {
238
271
  background-color: ${styledVars.CAP_PRIMARY.base} !important;
@@ -243,11 +276,11 @@ export const selectStyles = css`
243
276
  position: absolute;
244
277
  top: 50%;
245
278
  left: 50%;
246
- width: 0.625rem;
247
- height: 0.125rem;
279
+ width: 0.714rem;
280
+ height: 0.143rem;
248
281
  background-color: ${styledVars.CAP_WHITE};
249
282
  transform: translate(-50%, -50%);
250
- border-radius: 0.0625rem;
283
+ border-radius: 0.071rem;
251
284
  }
252
285
  }
253
286
  .ant-select-tree-treenode.ant-select-tree-treenode-selected {
@@ -262,12 +295,12 @@ export const selectStyles = css`
262
295
  flex-direction: column;
263
296
  align-items: center;
264
297
  justify-content: center;
265
- height: 12.5rem;
298
+ height: 14.286rem;
266
299
  color: ${styledVars.CAP_G05};
267
- font-size: 0.875rem;
300
+ font-size: 1rem;
268
301
  }
269
302
  .cap-unified-select-no-result-icon {
270
- font-size: 2.25rem;
303
+ font-size: 2.571rem;
271
304
  margin-bottom: ${styledVars.SPACING_08};
272
305
  color: ${styledVars.CAP_G06};
273
306
  }
@@ -284,22 +317,22 @@ export const selectStyles = css`
284
317
  outline: none;
285
318
  }
286
319
  .cap-unified-select-search-container {
287
- border-bottom: 0.0625rem solid ${styledVars.CAP_G08} !important;
288
- line-height: 2.5rem !important;
320
+ border-bottom: 0.071rem solid ${styledVars.CAP_G08} !important;
321
+ line-height: 2.857rem !important;
289
322
  .ant-input-affix-wrapper {
290
323
  padding-left: ${styledVars.SPACING_08};
291
324
  }
292
325
  }
293
326
  .cap-unified-select-upload-button {
294
327
  border: none;
295
- padding-left: 0.9375rem;
328
+ padding-left: 1.071rem;
296
329
  }
297
330
  .cap-unified-select-confirm-container {
298
331
  display: flex;
299
332
  align-items: center;
300
- height: 3rem;
301
- padding: 0.4375rem;
302
- border-top: 0.0625rem solid ${styledVars.CAP_G08};
333
+ height: 3.429rem;
334
+ padding: 0.5rem;
335
+ border-top: 0.071rem solid ${styledVars.CAP_G08};
303
336
  }
304
337
  .cap-unified-select-confirm-button-group {
305
338
  display: flex;
@@ -307,21 +340,21 @@ export const selectStyles = css`
307
340
  align-items: center;
308
341
  .cap-unified-select-confirm-button {
309
342
  background-color: ${styledVars.CAP_GREEN01};
310
- height: 2rem;
311
- width: 5.875rem;
343
+ height: 2.286rem;
344
+ width: 6.714rem;
312
345
  }
313
346
  .cap-unified-select-cancel-button {
314
347
  border: transparent;
315
348
  box-shadow: none;
316
- width: 5rem;
349
+ width: 5.714rem;
317
350
  }
318
351
  }
319
352
  .cap-unified-select-selected-count {
320
353
  display: flex;
321
354
  margin-left: auto; /* pushes to far right */
322
- font-size: 0.75rem;
355
+ font-size: 0.857rem;
323
356
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
324
- line-height: 1rem;
357
+ line-height: 1.143rem;
325
358
  color: ${styledVars.CAP_G04};
326
359
  }
327
360
  .cap-unified-select-search-container {
@@ -329,17 +362,17 @@ export const selectStyles = css`
329
362
  border: none;
330
363
  box-shadow: none;
331
364
  border-radius: 0;
332
- border-bottom: 0.0625rem solid transparent;
333
- transition: border-color 0.2s ease;
365
+ border-bottom: 0.071rem solid transparent;
366
+ transition: border-color 0.2s ease;
334
367
  }
335
368
 
336
369
  .ant-input-affix-wrapper:hover {
337
- border-bottom: 0.0625rem solid ${styledVars.CAP_G11} !important;
370
+ border-bottom: 0.071rem solid ${styledVars.CAP_G11} !important;
338
371
  box-shadow: none;
339
372
  }
340
373
 
341
374
  .ant-input-affix-wrapper:focus-within {
342
- border-bottom: 0.0625rem solid ${styledVars.CAP_G01} !important;
375
+ border-bottom: 0.071rem solid ${styledVars.CAP_G01} !important;
343
376
  box-shadow: none;
344
377
  outline: none;
345
378
  }
@@ -353,15 +386,15 @@ export const selectStyles = css`
353
386
  display: flex;
354
387
  justify-content: center;
355
388
  align-items: center;
356
- height: 2.5rem;
357
- border-top: 0.0625rem solid #EBECF0;
389
+ height: 2.857rem;
390
+ border-top: 0.071rem solid #EBECF0;
358
391
  cursor: pointer;
359
392
  color: ${styledVars.CAP_G01};
360
393
  &:hover{
361
394
  background-color: ${styledVars.CAP_G08};
362
395
  }
363
396
  .cap-unified-select-tree-clear-label{
364
- font-size: 0.875rem;
397
+ font-size: 1rem;
365
398
  font-weight: ${styledVars.FONT_WEIGHT_REGULAR};
366
399
  }
367
400
  }
@@ -378,14 +411,14 @@ export const selectStyles = css`
378
411
  }
379
412
  }
380
413
  .ant-select-tree-indent {
381
- margin-left: 0.9375rem;
414
+ margin-left: 1.071rem;
382
415
  }
383
416
  }
384
417
  .multiTreeSelect-popup-container {
385
- min-width: 17.5rem;
418
+ min-width: 20rem;
386
419
  }
387
420
  .treeSelect-popup-container {
388
- min-width: 17.5rem;
421
+ min-width: 20rem;
389
422
  }
390
423
 
391
424
  /* Single Select */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/blaze-ui",
3
3
  "author": "Capillary Technologies",
4
- "version": "0.1.6-alpha.64",
4
+ "version": "0.1.6-alpha.66",
5
5
  "description": "Capillary UI component library with Ant Design v5",
6
6
  "main": "./index.js",
7
7
  "sideEffects": [