@rescui/chip-list 0.9.10 → 0.10.0
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.
- package/lib/index.css +86 -60
- package/lib/parts/chip-list.p.module.css.js +22 -22
- package/lib/parts/chip.js +3 -2
- package/lib/public-api.p.css +12 -6
- package/lib/public-api.pcss +12 -6
- package/package.json +3 -3
package/lib/index.css
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
.
|
|
1
|
+
._light_1ateqg6_8{
|
|
2
2
|
--rs-theme-dark:0;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._dark_1ateqg6_11{
|
|
5
5
|
--rs-theme-dark:1;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
._alignLeft_1ateqg6_15{
|
|
8
8
|
--_rs-cl-align:left;
|
|
9
9
|
}
|
|
10
|
-
.
|
|
10
|
+
._alignCenter_1ateqg6_18{
|
|
11
11
|
--_rs-cl-align:center;
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
._alignRight_1ateqg6_21{
|
|
14
14
|
--_rs-cl-align:right;
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
._sizeXs_1ateqg6_25{
|
|
17
17
|
--_rs-cl-chip-base-border-radius:4px;
|
|
18
18
|
--_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
|
|
19
19
|
--_rs-cl-chip-vertical-padding:2px;
|
|
20
|
-
--_rs-cl-chip-base-horizontal-padding:
|
|
20
|
+
--_rs-cl-chip-base-horizontal-padding:8px;
|
|
21
21
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
22
|
+
--_rs-cl-chip-icon-only-padding:4px;
|
|
22
23
|
--_rs-cl-chip-icon-size:16px;
|
|
23
|
-
--_rs-cl-chip-icon-offset:
|
|
24
|
-
--_rs-cl-chip-icon-margin-top:2px;
|
|
24
|
+
--_rs-cl-chip-icon-offset:4px;
|
|
25
25
|
--_rs-cl-vertical-gap:8px;
|
|
26
26
|
--_rs-cl-base-horizontal-gap:8px;
|
|
27
27
|
--_rs-cl-compact-horizontal-gap:4px;
|
|
28
28
|
--_rs-cl-sparse-horizontal-gap:12px;
|
|
29
29
|
}
|
|
30
|
-
.
|
|
30
|
+
._sizeXs_1ateqg6_25 [data-rs-internal='chip-list__chip']{
|
|
31
31
|
--_rs-typography-letter-spacing:0.0045em;
|
|
32
32
|
--_rs-typography-text-transform:initial;
|
|
33
33
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -61,12 +61,13 @@
|
|
|
61
61
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
62
62
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
63
63
|
}
|
|
64
|
-
.
|
|
64
|
+
._sizeS_1ateqg6_28{
|
|
65
65
|
--_rs-cl-chip-base-border-radius:16px;
|
|
66
66
|
--_rs-cl-chip-compact-border-radius:4px;
|
|
67
67
|
--_rs-cl-chip-vertical-padding:6px;
|
|
68
68
|
--_rs-cl-chip-base-horizontal-padding:16px;
|
|
69
69
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
70
|
+
--_rs-cl-chip-icon-only-padding:6px;
|
|
70
71
|
--_rs-cl-chip-icon-size:20px;
|
|
71
72
|
--_rs-cl-chip-icon-offset:8px;
|
|
72
73
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -74,7 +75,7 @@
|
|
|
74
75
|
--_rs-cl-compact-horizontal-gap:6px;
|
|
75
76
|
--_rs-cl-sparse-horizontal-gap:12px;
|
|
76
77
|
}
|
|
77
|
-
.
|
|
78
|
+
._sizeS_1ateqg6_28 [data-rs-internal='chip-list__chip']{
|
|
78
79
|
--_rs-typography-letter-spacing:0.0045em;
|
|
79
80
|
--_rs-typography-text-transform:initial;
|
|
80
81
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -108,12 +109,13 @@
|
|
|
108
109
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
109
110
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
110
111
|
}
|
|
111
|
-
.
|
|
112
|
+
._sizeM_1ateqg6_31{
|
|
112
113
|
--_rs-cl-chip-base-border-radius:20px;
|
|
113
114
|
--_rs-cl-chip-compact-border-radius:8px;
|
|
114
115
|
--_rs-cl-chip-vertical-padding:8px;
|
|
115
116
|
--_rs-cl-chip-base-horizontal-padding:24px;
|
|
116
117
|
--_rs-cl-chip-compact-horizontal-padding:12px;
|
|
118
|
+
--_rs-cl-chip-icon-only-padding:8px;
|
|
117
119
|
--_rs-cl-chip-icon-size:24px;
|
|
118
120
|
--_rs-cl-chip-icon-offset:8px;
|
|
119
121
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -121,7 +123,7 @@
|
|
|
121
123
|
--_rs-cl-compact-horizontal-gap:6px;
|
|
122
124
|
--_rs-cl-sparse-horizontal-gap:16px;
|
|
123
125
|
}
|
|
124
|
-
.
|
|
126
|
+
._sizeM_1ateqg6_31 [data-rs-internal='chip-list__chip']{
|
|
125
127
|
--_rs-typography-letter-spacing:0.0015em;
|
|
126
128
|
--_rs-typography-text-transform:initial;
|
|
127
129
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -156,16 +158,17 @@
|
|
|
156
158
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
157
159
|
}
|
|
158
160
|
@media screen and (max-width: 640px){
|
|
159
|
-
.
|
|
161
|
+
._sizeM_1ateqg6_31 [data-rs-internal='chip-list__chip']{
|
|
160
162
|
--_rs-typography-list-li-margin-top-from-text:12px;
|
|
161
163
|
}
|
|
162
164
|
}
|
|
163
|
-
.
|
|
165
|
+
._sizeL_1ateqg6_34{
|
|
164
166
|
--_rs-cl-chip-base-border-radius:26px;
|
|
165
167
|
--_rs-cl-chip-compact-border-radius:12px;
|
|
166
168
|
--_rs-cl-chip-vertical-padding:12px;
|
|
167
169
|
--_rs-cl-chip-base-horizontal-padding:32px;
|
|
168
170
|
--_rs-cl-chip-compact-horizontal-padding:16px;
|
|
171
|
+
--_rs-cl-chip-icon-only-padding:12px;
|
|
169
172
|
--_rs-cl-chip-icon-size:28px;
|
|
170
173
|
--_rs-cl-chip-icon-offset:16px;
|
|
171
174
|
--_rs-cl-vertical-gap:16px;
|
|
@@ -174,11 +177,11 @@
|
|
|
174
177
|
--_rs-cl-sparse-horizontal-gap:16px;
|
|
175
178
|
}
|
|
176
179
|
@media screen and (max-width: 640px){
|
|
177
|
-
.
|
|
180
|
+
._sizeL_1ateqg6_34{
|
|
178
181
|
--_rs-cl-vertical-gap:12px;
|
|
179
182
|
}
|
|
180
183
|
}
|
|
181
|
-
.
|
|
184
|
+
._sizeL_1ateqg6_34 [data-rs-internal='chip-list__chip']{
|
|
182
185
|
--_rs-typography-letter-spacing:normal;
|
|
183
186
|
--_rs-typography-text-transform:initial;
|
|
184
187
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -213,34 +216,34 @@
|
|
|
213
216
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
214
217
|
}
|
|
215
218
|
@media screen and (max-width: 640px){
|
|
216
|
-
.
|
|
219
|
+
._sizeL_1ateqg6_34 [data-rs-internal='chip-list__chip']{
|
|
217
220
|
--_rs-typography-list-li-margin-top-from-text:16px;
|
|
218
221
|
}
|
|
219
222
|
}
|
|
220
|
-
.
|
|
223
|
+
._innerOffsetL_1ateqg6_38{
|
|
221
224
|
--_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
|
|
222
225
|
}
|
|
223
226
|
@media screen and (max-width: 640px){
|
|
224
|
-
.
|
|
227
|
+
._innerOffsetL_1ateqg6_38{
|
|
225
228
|
--_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
|
|
226
229
|
}
|
|
227
230
|
}
|
|
228
|
-
.
|
|
231
|
+
._innerOffsetM_1ateqg6_41{
|
|
229
232
|
--_rs-cl-horizontal-gap-from-sparse:initial;
|
|
230
233
|
}
|
|
231
|
-
.
|
|
234
|
+
._classic_1ateqg6_45{
|
|
232
235
|
--_rs-cl-chip-active-border-color:var(--_rs-color-primary);
|
|
233
236
|
--_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
|
|
234
237
|
--_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
|
|
235
238
|
--_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
|
|
236
239
|
}
|
|
237
|
-
.
|
|
240
|
+
._rock_1ateqg6_48{
|
|
238
241
|
--_rs-cl-chip-active-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
239
242
|
--_rs-cl-chip-selected-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
240
243
|
--_rs-cl-chip-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
|
|
241
244
|
--_rs-cl-chip-active-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
|
|
242
245
|
}
|
|
243
|
-
.
|
|
246
|
+
._compact_1ateqg6_52{
|
|
244
247
|
--_rs-cl-chip-border-radius-from-compact:var(
|
|
245
248
|
--_rs-cl-chip-compact-border-radius
|
|
246
249
|
);
|
|
@@ -249,7 +252,7 @@
|
|
|
249
252
|
);
|
|
250
253
|
--_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
|
|
251
254
|
}
|
|
252
|
-
.
|
|
255
|
+
._main_1ateqg6_56{
|
|
253
256
|
--_rs-theme-dark:var(
|
|
254
257
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
255
258
|
var(--rs-theme-dark, 0)
|
|
@@ -259,7 +262,7 @@
|
|
|
259
262
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
260
263
|
}
|
|
261
264
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
262
|
-
.
|
|
265
|
+
._main_1ateqg6_56{
|
|
263
266
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
264
267
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
265
268
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -268,7 +271,7 @@
|
|
|
268
271
|
}
|
|
269
272
|
}
|
|
270
273
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
271
|
-
.
|
|
274
|
+
._main_1ateqg6_56{
|
|
272
275
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
273
276
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
274
277
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -276,7 +279,7 @@
|
|
|
276
279
|
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
277
280
|
}
|
|
278
281
|
}
|
|
279
|
-
.
|
|
282
|
+
._main_1ateqg6_56 {
|
|
280
283
|
--_rs-cl-chip-border-radius:var(
|
|
281
284
|
--_rs-cl-chip-border-radius-from-compact,
|
|
282
285
|
var(--_rs-cl-chip-base-border-radius)
|
|
@@ -290,7 +293,7 @@
|
|
|
290
293
|
var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
|
|
291
294
|
);
|
|
292
295
|
}
|
|
293
|
-
.
|
|
296
|
+
._chipsContainer_1ateqg6_62{
|
|
294
297
|
position:relative;
|
|
295
298
|
|
|
296
299
|
display:-webkit-box;
|
|
@@ -306,19 +309,17 @@
|
|
|
306
309
|
|
|
307
310
|
gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
|
|
308
311
|
}
|
|
309
|
-
.
|
|
312
|
+
._alignIconLeft_1ateqg6_72{
|
|
310
313
|
--_rs-cl-chip-icon-flex-direction:row;
|
|
311
314
|
--_rs-cl-chip-icon-position-multiplier-left:1;
|
|
312
315
|
--_rs-cl-chip-icon-position-multiplier-right:0;
|
|
313
316
|
}
|
|
314
|
-
.
|
|
317
|
+
._alignIconRight_1ateqg6_75{
|
|
315
318
|
--_rs-cl-chip-icon-flex-direction:row-reverse;
|
|
316
319
|
--_rs-cl-chip-icon-position-multiplier-left:0;
|
|
317
320
|
--_rs-cl-chip-icon-position-multiplier-right:1;
|
|
318
321
|
}
|
|
319
|
-
.
|
|
320
|
-
--_rs-cl-chip-icon-margin-right:calc(var(--_rs-cl-chip-icon-offset)*(1 - var(--_rs-cl-chip-icon-position-multiplier-right)) + -2px*var(--_rs-cl-chip-icon-position-multiplier-right));
|
|
321
|
-
--_rs-cl-chip-icon-margin-left:calc(var(--_rs-cl-chip-icon-offset)*(1 - var(--_rs-cl-chip-icon-position-multiplier-left)) + -2px*var(--_rs-cl-chip-icon-position-multiplier-left));
|
|
322
|
+
._chip_1ateqg6_62{
|
|
322
323
|
letter-spacing:var(
|
|
323
324
|
--rs-text-base-letter-spacing,
|
|
324
325
|
var(--_rs-typography-letter-spacing)
|
|
@@ -332,6 +333,12 @@
|
|
|
332
333
|
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
333
334
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
334
335
|
|
|
336
|
+
--_rs-cl-chip-border-width:1px;
|
|
337
|
+
--_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3);
|
|
338
|
+
|
|
339
|
+
--_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-horizontal-padding);
|
|
340
|
+
--_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-vertical-padding);
|
|
341
|
+
|
|
335
342
|
position:relative;
|
|
336
343
|
z-index:1;
|
|
337
344
|
|
|
@@ -348,6 +355,7 @@
|
|
|
348
355
|
-webkit-box-direction:normal;
|
|
349
356
|
-ms-flex-direction:var(--_rs-cl-chip-icon-flex-direction);
|
|
350
357
|
flex-direction:var(--_rs-cl-chip-icon-flex-direction);
|
|
358
|
+
gap:var(--_rs-cl-chip-icon-offset);
|
|
351
359
|
-webkit-box-pack:center;
|
|
352
360
|
-ms-flex-pack:center;
|
|
353
361
|
justify-content:center;
|
|
@@ -359,9 +367,9 @@
|
|
|
359
367
|
|
|
360
368
|
box-sizing:border-box;
|
|
361
369
|
margin:0;
|
|
362
|
-
padding:
|
|
370
|
+
padding:var(--_rs-cl-chip-vertical-real-padding) var(--_rs-cl-chip-horizontal-real-padding);
|
|
363
371
|
|
|
364
|
-
border:
|
|
372
|
+
border:none;
|
|
365
373
|
border-radius:var(--_rs-cl-chip-border-radius);
|
|
366
374
|
outline:none;
|
|
367
375
|
|
|
@@ -375,31 +383,31 @@
|
|
|
375
383
|
-webkit-box-shadow:none;
|
|
376
384
|
box-shadow:none;
|
|
377
385
|
|
|
378
|
-
-webkit-transition:color 100ms, background-color 100ms
|
|
386
|
+
-webkit-transition:color 100ms, background-color 100ms;
|
|
379
387
|
|
|
380
|
-
transition:color 100ms, background-color 100ms
|
|
388
|
+
transition:color 100ms, background-color 100ms;
|
|
381
389
|
-webkit-font-smoothing:inherit;
|
|
382
390
|
-moz-osx-font-smoothing:inherit;
|
|
383
391
|
-webkit-appearance:none;
|
|
384
392
|
}
|
|
385
|
-
.
|
|
393
|
+
._chip_1ateqg6_62::-moz-focus-inner{
|
|
386
394
|
padding:0;
|
|
387
395
|
|
|
388
396
|
border:none;
|
|
389
397
|
}
|
|
390
|
-
.
|
|
391
|
-
.
|
|
392
|
-
.
|
|
398
|
+
._chip_1ateqg6_62:hover,
|
|
399
|
+
._chip_1ateqg6_62:focus,
|
|
400
|
+
._chip_1ateqg6_62:active{
|
|
393
401
|
outline:none;
|
|
394
402
|
|
|
395
403
|
text-decoration:none;
|
|
396
404
|
}
|
|
397
|
-
.
|
|
405
|
+
._chip_1ateqg6_62:focus[data-focus-method='key']{
|
|
398
406
|
-webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
399
407
|
box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
400
408
|
}
|
|
401
|
-
.
|
|
402
|
-
border-color:rgba(
|
|
409
|
+
._chip_1ateqg6_62:focus{
|
|
410
|
+
--_rs-cl-chip-border-color:rgba(
|
|
403
411
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
404
412
|
calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
|
|
405
413
|
);
|
|
@@ -407,8 +415,8 @@
|
|
|
407
415
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
408
416
|
}
|
|
409
417
|
@media (hover: hover){
|
|
410
|
-
.
|
|
411
|
-
border-color:rgba(
|
|
418
|
+
._chip_1ateqg6_62:hover{
|
|
419
|
+
--_rs-cl-chip-border-color:rgba(
|
|
412
420
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
413
421
|
calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
|
|
414
422
|
);
|
|
@@ -418,22 +426,39 @@
|
|
|
418
426
|
background:var(--_rs-cl-chip-hover-background);
|
|
419
427
|
}
|
|
420
428
|
}
|
|
421
|
-
.
|
|
422
|
-
border-color:var(--_rs-cl-chip-active-border-color);
|
|
429
|
+
._chip_1ateqg6_62:active{
|
|
430
|
+
--_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
|
|
423
431
|
|
|
424
432
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
425
433
|
|
|
426
434
|
background:var(--_rs-cl-chip-active-background);
|
|
427
435
|
}
|
|
428
|
-
.
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
border-width:2px;
|
|
432
|
-
border-color:var(--_rs-cl-chip-selected-border-color);
|
|
436
|
+
._chip_1ateqg6_62._selected_1ateqg6_172{
|
|
437
|
+
--_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
|
|
438
|
+
--_rs-cl-chip-border-width:2px;
|
|
433
439
|
|
|
434
440
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
435
441
|
}
|
|
436
|
-
.
|
|
442
|
+
._chip_1ateqg6_62::before{
|
|
443
|
+
position:absolute;
|
|
444
|
+
top:0;
|
|
445
|
+
right:0;
|
|
446
|
+
bottom:0;
|
|
447
|
+
left:0;
|
|
448
|
+
|
|
449
|
+
display:block;
|
|
450
|
+
|
|
451
|
+
border:var(--_rs-cl-chip-border-width) solid var(--_rs-cl-chip-border-color);
|
|
452
|
+
border-radius:inherit;
|
|
453
|
+
|
|
454
|
+
content:'';
|
|
455
|
+
pointer-events:none;
|
|
456
|
+
|
|
457
|
+
-webkit-transition:border-color 100ms;
|
|
458
|
+
|
|
459
|
+
transition:border-color 100ms;
|
|
460
|
+
}
|
|
461
|
+
._chip_1ateqg6_62 ._icon_1ateqg6_198{
|
|
437
462
|
-webkit-box-flex:0;
|
|
438
463
|
-ms-flex:0 0 auto;
|
|
439
464
|
flex:0 0 auto;
|
|
@@ -441,9 +466,10 @@
|
|
|
441
466
|
width:auto;
|
|
442
467
|
height:var(--_rs-cl-chip-icon-size);
|
|
443
468
|
|
|
444
|
-
margin:0 var(--_rs-cl-chip-icon-margin-right) 0 var(--_rs-cl-chip-icon-margin-left);
|
|
445
|
-
fill:currentColor;
|
|
446
|
-
}
|
|
447
|
-
._chip_1wrsgkl_62._withoutText_1wrsgkl_187 ._icon_1wrsgkl_176{
|
|
448
469
|
margin:0;
|
|
470
|
+
fill:currentColor;
|
|
449
471
|
}
|
|
472
|
+
._withoutText_1ateqg6_209{
|
|
473
|
+
--_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
|
|
474
|
+
--_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
|
|
475
|
+
}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"light": "
|
|
3
|
-
"dark": "
|
|
4
|
-
"alignLeft": "
|
|
5
|
-
"alignCenter": "
|
|
6
|
-
"alignRight": "
|
|
7
|
-
"sizeXs": "
|
|
8
|
-
"sizeS": "
|
|
9
|
-
"sizeM": "
|
|
10
|
-
"sizeL": "
|
|
11
|
-
"innerOffsetL": "
|
|
12
|
-
"innerOffsetM": "
|
|
13
|
-
"classic": "
|
|
14
|
-
"rock": "
|
|
15
|
-
"compact": "
|
|
16
|
-
"main": "
|
|
17
|
-
"chipsContainer": "
|
|
18
|
-
"alignIconLeft": "
|
|
19
|
-
"alignIconRight": "
|
|
20
|
-
"chip": "
|
|
21
|
-
"selected": "
|
|
22
|
-
"icon": "
|
|
23
|
-
"withoutText": "
|
|
2
|
+
"light": "_light_1ateqg6_8",
|
|
3
|
+
"dark": "_dark_1ateqg6_11",
|
|
4
|
+
"alignLeft": "_alignLeft_1ateqg6_15",
|
|
5
|
+
"alignCenter": "_alignCenter_1ateqg6_18",
|
|
6
|
+
"alignRight": "_alignRight_1ateqg6_21",
|
|
7
|
+
"sizeXs": "_sizeXs_1ateqg6_25",
|
|
8
|
+
"sizeS": "_sizeS_1ateqg6_28",
|
|
9
|
+
"sizeM": "_sizeM_1ateqg6_31",
|
|
10
|
+
"sizeL": "_sizeL_1ateqg6_34",
|
|
11
|
+
"innerOffsetL": "_innerOffsetL_1ateqg6_38",
|
|
12
|
+
"innerOffsetM": "_innerOffsetM_1ateqg6_41",
|
|
13
|
+
"classic": "_classic_1ateqg6_45",
|
|
14
|
+
"rock": "_rock_1ateqg6_48",
|
|
15
|
+
"compact": "_compact_1ateqg6_52",
|
|
16
|
+
"main": "_main_1ateqg6_56",
|
|
17
|
+
"chipsContainer": "_chipsContainer_1ateqg6_62",
|
|
18
|
+
"alignIconLeft": "_alignIconLeft_1ateqg6_72",
|
|
19
|
+
"alignIconRight": "_alignIconRight_1ateqg6_75",
|
|
20
|
+
"chip": "_chip_1ateqg6_62",
|
|
21
|
+
"selected": "_selected_1ateqg6_172",
|
|
22
|
+
"icon": "_icon_1ateqg6_198",
|
|
23
|
+
"withoutText": "_withoutText_1ateqg6_209"
|
|
24
24
|
};
|
|
25
25
|
export { styles as default };
|
package/lib/parts/chip.js
CHANGED
|
@@ -59,8 +59,9 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
59
59
|
|
|
60
60
|
var selected = _includesInstanceProperty(selectedIds).call(selectedIds, itemId);
|
|
61
61
|
|
|
62
|
+
var isWithoutText = isWithoutChildren(children);
|
|
62
63
|
return /*#__PURE__*/React.createElement(ChipTag, _objectSpread(_objectSpread({}, restProps), {}, {
|
|
63
|
-
className: cn(styles.chip, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.withoutText,
|
|
64
|
+
className: cn(styles.chip, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.withoutText, isWithoutText), _cn), iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, className),
|
|
64
65
|
onClick: function onClick(e) {
|
|
65
66
|
if (_onClick) {
|
|
66
67
|
_onClick(e);
|
|
@@ -86,7 +87,7 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
86
87
|
"data-rs-internal": 'chip-list__chip'
|
|
87
88
|
}), icon && /*#__PURE__*/cloneElement(icon, {
|
|
88
89
|
className: cn(icon.props.className, styles.icon)
|
|
89
|
-
}), /*#__PURE__*/React.createElement("span", null, children));
|
|
90
|
+
}), !isWithoutText && /*#__PURE__*/React.createElement("span", null, children));
|
|
90
91
|
});
|
|
91
92
|
Chip.displayName = 'Chip';
|
|
92
93
|
Chip.propTypes = {
|
package/lib/public-api.p.css
CHANGED
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
--_rs-cl-chip-base-border-radius:4px;
|
|
34
34
|
--_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
|
|
35
35
|
--_rs-cl-chip-vertical-padding:2px;
|
|
36
|
-
--_rs-cl-chip-base-horizontal-padding:
|
|
36
|
+
--_rs-cl-chip-base-horizontal-padding:8px;
|
|
37
37
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
38
|
+
--_rs-cl-chip-icon-only-padding:4px;
|
|
38
39
|
--_rs-cl-chip-icon-size:16px;
|
|
39
|
-
--_rs-cl-chip-icon-offset:
|
|
40
|
-
--_rs-cl-chip-icon-margin-top:2px;
|
|
40
|
+
--_rs-cl-chip-icon-offset:4px;
|
|
41
41
|
--_rs-cl-vertical-gap:8px;
|
|
42
42
|
--_rs-cl-base-horizontal-gap:8px;
|
|
43
43
|
--_rs-cl-compact-horizontal-gap:4px;
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
--_rs-cl-chip-vertical-padding:6px;
|
|
86
86
|
--_rs-cl-chip-base-horizontal-padding:16px;
|
|
87
87
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
88
|
+
--_rs-cl-chip-icon-only-padding:6px;
|
|
88
89
|
--_rs-cl-chip-icon-size:20px;
|
|
89
90
|
--_rs-cl-chip-icon-offset:8px;
|
|
90
91
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -134,6 +135,7 @@
|
|
|
134
135
|
--_rs-cl-chip-vertical-padding:8px;
|
|
135
136
|
--_rs-cl-chip-base-horizontal-padding:24px;
|
|
136
137
|
--_rs-cl-chip-compact-horizontal-padding:12px;
|
|
138
|
+
--_rs-cl-chip-icon-only-padding:8px;
|
|
137
139
|
--_rs-cl-chip-icon-size:24px;
|
|
138
140
|
--_rs-cl-chip-icon-offset:8px;
|
|
139
141
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -188,6 +190,7 @@
|
|
|
188
190
|
--_rs-cl-chip-vertical-padding:12px;
|
|
189
191
|
--_rs-cl-chip-base-horizontal-padding:32px;
|
|
190
192
|
--_rs-cl-chip-compact-horizontal-padding:16px;
|
|
193
|
+
--_rs-cl-chip-icon-only-padding:12px;
|
|
191
194
|
--_rs-cl-chip-icon-size:28px;
|
|
192
195
|
--_rs-cl-chip-icon-offset:16px;
|
|
193
196
|
--_rs-cl-vertical-gap:16px;
|
|
@@ -305,11 +308,11 @@
|
|
|
305
308
|
--_rs-cl-chip-base-border-radius:4px;
|
|
306
309
|
--_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
|
|
307
310
|
--_rs-cl-chip-vertical-padding:2px;
|
|
308
|
-
--_rs-cl-chip-base-horizontal-padding:
|
|
311
|
+
--_rs-cl-chip-base-horizontal-padding:8px;
|
|
309
312
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
313
|
+
--_rs-cl-chip-icon-only-padding:4px;
|
|
310
314
|
--_rs-cl-chip-icon-size:16px;
|
|
311
|
-
--_rs-cl-chip-icon-offset:
|
|
312
|
-
--_rs-cl-chip-icon-margin-top:2px;
|
|
315
|
+
--_rs-cl-chip-icon-offset:4px;
|
|
313
316
|
--_rs-cl-vertical-gap:8px;
|
|
314
317
|
--_rs-cl-base-horizontal-gap:8px;
|
|
315
318
|
--_rs-cl-compact-horizontal-gap:4px;
|
|
@@ -357,6 +360,7 @@
|
|
|
357
360
|
--_rs-cl-chip-vertical-padding:6px;
|
|
358
361
|
--_rs-cl-chip-base-horizontal-padding:16px;
|
|
359
362
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
363
|
+
--_rs-cl-chip-icon-only-padding:6px;
|
|
360
364
|
--_rs-cl-chip-icon-size:20px;
|
|
361
365
|
--_rs-cl-chip-icon-offset:8px;
|
|
362
366
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -406,6 +410,7 @@
|
|
|
406
410
|
--_rs-cl-chip-vertical-padding:8px;
|
|
407
411
|
--_rs-cl-chip-base-horizontal-padding:24px;
|
|
408
412
|
--_rs-cl-chip-compact-horizontal-padding:12px;
|
|
413
|
+
--_rs-cl-chip-icon-only-padding:8px;
|
|
409
414
|
--_rs-cl-chip-icon-size:24px;
|
|
410
415
|
--_rs-cl-chip-icon-offset:8px;
|
|
411
416
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -460,6 +465,7 @@
|
|
|
460
465
|
--_rs-cl-chip-vertical-padding:12px;
|
|
461
466
|
--_rs-cl-chip-base-horizontal-padding:32px;
|
|
462
467
|
--_rs-cl-chip-compact-horizontal-padding:16px;
|
|
468
|
+
--_rs-cl-chip-icon-only-padding:12px;
|
|
463
469
|
--_rs-cl-chip-icon-size:28px;
|
|
464
470
|
--_rs-cl-chip-icon-offset:16px;
|
|
465
471
|
--_rs-cl-vertical-gap:16px;
|
package/lib/public-api.pcss
CHANGED
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
--_rs-cl-chip-base-border-radius:4px;
|
|
34
34
|
--_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
|
|
35
35
|
--_rs-cl-chip-vertical-padding:2px;
|
|
36
|
-
--_rs-cl-chip-base-horizontal-padding:
|
|
36
|
+
--_rs-cl-chip-base-horizontal-padding:8px;
|
|
37
37
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
38
|
+
--_rs-cl-chip-icon-only-padding:4px;
|
|
38
39
|
--_rs-cl-chip-icon-size:16px;
|
|
39
|
-
--_rs-cl-chip-icon-offset:
|
|
40
|
-
--_rs-cl-chip-icon-margin-top:2px;
|
|
40
|
+
--_rs-cl-chip-icon-offset:4px;
|
|
41
41
|
--_rs-cl-vertical-gap:8px;
|
|
42
42
|
--_rs-cl-base-horizontal-gap:8px;
|
|
43
43
|
--_rs-cl-compact-horizontal-gap:4px;
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
--_rs-cl-chip-vertical-padding:6px;
|
|
86
86
|
--_rs-cl-chip-base-horizontal-padding:16px;
|
|
87
87
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
88
|
+
--_rs-cl-chip-icon-only-padding:6px;
|
|
88
89
|
--_rs-cl-chip-icon-size:20px;
|
|
89
90
|
--_rs-cl-chip-icon-offset:8px;
|
|
90
91
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -134,6 +135,7 @@
|
|
|
134
135
|
--_rs-cl-chip-vertical-padding:8px;
|
|
135
136
|
--_rs-cl-chip-base-horizontal-padding:24px;
|
|
136
137
|
--_rs-cl-chip-compact-horizontal-padding:12px;
|
|
138
|
+
--_rs-cl-chip-icon-only-padding:8px;
|
|
137
139
|
--_rs-cl-chip-icon-size:24px;
|
|
138
140
|
--_rs-cl-chip-icon-offset:8px;
|
|
139
141
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -188,6 +190,7 @@
|
|
|
188
190
|
--_rs-cl-chip-vertical-padding:12px;
|
|
189
191
|
--_rs-cl-chip-base-horizontal-padding:32px;
|
|
190
192
|
--_rs-cl-chip-compact-horizontal-padding:16px;
|
|
193
|
+
--_rs-cl-chip-icon-only-padding:12px;
|
|
191
194
|
--_rs-cl-chip-icon-size:28px;
|
|
192
195
|
--_rs-cl-chip-icon-offset:16px;
|
|
193
196
|
--_rs-cl-vertical-gap:16px;
|
|
@@ -305,11 +308,11 @@
|
|
|
305
308
|
--_rs-cl-chip-base-border-radius:4px;
|
|
306
309
|
--_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
|
|
307
310
|
--_rs-cl-chip-vertical-padding:2px;
|
|
308
|
-
--_rs-cl-chip-base-horizontal-padding:
|
|
311
|
+
--_rs-cl-chip-base-horizontal-padding:8px;
|
|
309
312
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
313
|
+
--_rs-cl-chip-icon-only-padding:4px;
|
|
310
314
|
--_rs-cl-chip-icon-size:16px;
|
|
311
|
-
--_rs-cl-chip-icon-offset:
|
|
312
|
-
--_rs-cl-chip-icon-margin-top:2px;
|
|
315
|
+
--_rs-cl-chip-icon-offset:4px;
|
|
313
316
|
--_rs-cl-vertical-gap:8px;
|
|
314
317
|
--_rs-cl-base-horizontal-gap:8px;
|
|
315
318
|
--_rs-cl-compact-horizontal-gap:4px;
|
|
@@ -357,6 +360,7 @@
|
|
|
357
360
|
--_rs-cl-chip-vertical-padding:6px;
|
|
358
361
|
--_rs-cl-chip-base-horizontal-padding:16px;
|
|
359
362
|
--_rs-cl-chip-compact-horizontal-padding:8px;
|
|
363
|
+
--_rs-cl-chip-icon-only-padding:6px;
|
|
360
364
|
--_rs-cl-chip-icon-size:20px;
|
|
361
365
|
--_rs-cl-chip-icon-offset:8px;
|
|
362
366
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -406,6 +410,7 @@
|
|
|
406
410
|
--_rs-cl-chip-vertical-padding:8px;
|
|
407
411
|
--_rs-cl-chip-base-horizontal-padding:24px;
|
|
408
412
|
--_rs-cl-chip-compact-horizontal-padding:12px;
|
|
413
|
+
--_rs-cl-chip-icon-only-padding:8px;
|
|
409
414
|
--_rs-cl-chip-icon-size:24px;
|
|
410
415
|
--_rs-cl-chip-icon-offset:8px;
|
|
411
416
|
--_rs-cl-vertical-gap:12px;
|
|
@@ -460,6 +465,7 @@
|
|
|
460
465
|
--_rs-cl-chip-vertical-padding:12px;
|
|
461
466
|
--_rs-cl-chip-base-horizontal-padding:32px;
|
|
462
467
|
--_rs-cl-chip-compact-horizontal-padding:16px;
|
|
468
|
+
--_rs-cl-chip-icon-only-padding:12px;
|
|
463
469
|
--_rs-cl-chip-icon-size:28px;
|
|
464
470
|
--_rs-cl-chip-icon-offset:16px;
|
|
465
471
|
--_rs-cl-vertical-gap:16px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/chip-list",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@rescui/colors": "^0.2.5",
|
|
29
29
|
"@rescui/scripts": "^0.3.4",
|
|
30
|
-
"@rescui/typography": "^0.
|
|
30
|
+
"@rescui/typography": "^0.19.0",
|
|
31
31
|
"@rescui/visual-regression": "^0.1.2"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
36
36
|
},
|
|
37
37
|
"nx": {},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "d9e048366cc911a0868bca9bb6974b2b667174a5"
|
|
39
39
|
}
|