@transferwise/components 0.0.0-experimental-fb351fb → 0.0.0-experimental-0fa786b
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/build/main.css +105 -105
- package/build/styles/listItem/ListItem.css +105 -105
- package/build/styles/listItem/ListItem.grid.css +105 -105
- package/build/styles/main.css +105 -105
- package/package.json +1 -1
- package/src/listItem/ListItem.css +105 -105
- package/src/listItem/ListItem.grid.css +105 -105
- package/src/listItem/ListItem.grid.less +162 -159
- package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx +1 -1
- package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx +1 -1
- package/src/main.css +105 -105
|
@@ -14,81 +14,109 @@
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
// 0 to 240px
|
|
18
|
+
@container (max-width: unit(@wds-list-item-cq-min, px)) {
|
|
18
19
|
.wds-list-item-control-wrapper {
|
|
19
|
-
|
|
20
|
-
align-content: center;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.wds-list-item-media-image{
|
|
24
|
-
object-position: center;
|
|
20
|
+
align-content: start;
|
|
25
21
|
}
|
|
26
|
-
|
|
27
22
|
&.wds-list-item-hasMedia-hasControl {
|
|
28
23
|
&.wds-list-item-hasInfo-hasPrompt {
|
|
29
|
-
grid-template-columns:
|
|
24
|
+
grid-template-columns: 1fr auto;
|
|
30
25
|
grid-template-rows: auto auto auto;
|
|
31
26
|
grid-template-areas:
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
27
|
+
"body control"
|
|
28
|
+
"info control"
|
|
29
|
+
"prompt prompt";
|
|
30
|
+
|
|
31
|
+
&:has(.wds-list-item-button-control) {
|
|
32
|
+
grid-template-columns: 1fr;
|
|
33
|
+
grid-template-rows: auto;
|
|
34
|
+
grid-template-areas:
|
|
35
|
+
"body"
|
|
36
|
+
"info"
|
|
37
|
+
"prompt"
|
|
38
|
+
"control";
|
|
39
|
+
}
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
&.wds-list-item-hasInfo-noPrompt {
|
|
38
|
-
grid-template-columns:
|
|
43
|
+
grid-template-columns: 1fr auto;
|
|
39
44
|
grid-template-rows: auto auto;
|
|
40
45
|
grid-template-areas:
|
|
41
|
-
"
|
|
42
|
-
"
|
|
46
|
+
"body control"
|
|
47
|
+
"info control";
|
|
48
|
+
|
|
49
|
+
&:has(.wds-list-item-button-control) {
|
|
50
|
+
grid-template-columns: 1fr;
|
|
51
|
+
grid-template-areas:
|
|
52
|
+
"body"
|
|
53
|
+
"info"
|
|
54
|
+
"control";
|
|
55
|
+
}
|
|
43
56
|
}
|
|
44
57
|
|
|
45
58
|
&.wds-list-item-noInfo-hasPrompt {
|
|
46
|
-
grid-template-columns:
|
|
59
|
+
grid-template-columns: 1fr auto;
|
|
47
60
|
grid-template-rows: auto auto;
|
|
48
61
|
grid-template-areas:
|
|
49
|
-
"
|
|
50
|
-
"
|
|
62
|
+
"body control"
|
|
63
|
+
"prompt prompt";
|
|
64
|
+
|
|
65
|
+
&:has(.wds-list-item-button-control) {
|
|
66
|
+
grid-template-columns: 1fr;
|
|
67
|
+
grid-template-areas:
|
|
68
|
+
"body"
|
|
69
|
+
"prompt"
|
|
70
|
+
"control";
|
|
71
|
+
}
|
|
51
72
|
}
|
|
52
73
|
|
|
53
74
|
&.wds-list-item-noInfo-noPrompt {
|
|
54
|
-
grid-template-columns:
|
|
75
|
+
grid-template-columns: 1fr auto;
|
|
55
76
|
grid-template-rows: auto;
|
|
56
77
|
grid-template-areas:
|
|
57
|
-
"
|
|
78
|
+
"body control";
|
|
79
|
+
|
|
80
|
+
&:has(.wds-list-item-button-control) {
|
|
81
|
+
grid-template-columns: 1fr;
|
|
82
|
+
grid-template-areas:
|
|
83
|
+
"body"
|
|
84
|
+
"control";
|
|
85
|
+
}
|
|
58
86
|
}
|
|
59
87
|
}
|
|
60
88
|
|
|
61
89
|
&.wds-list-item-hasMedia-noControl {
|
|
62
90
|
&.wds-list-item-hasInfo-hasPrompt {
|
|
63
|
-
grid-template-columns:
|
|
64
|
-
grid-template-rows: auto auto;
|
|
91
|
+
grid-template-columns: 1fr;
|
|
92
|
+
grid-template-rows: auto auto auto;
|
|
65
93
|
grid-template-areas:
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
94
|
+
"body"
|
|
95
|
+
"info"
|
|
96
|
+
"prompt";
|
|
69
97
|
}
|
|
70
98
|
|
|
71
99
|
&.wds-list-item-hasInfo-noPrompt {
|
|
72
|
-
grid-template-columns:
|
|
73
|
-
grid-template-rows: auto auto
|
|
100
|
+
grid-template-columns: 1fr;
|
|
101
|
+
grid-template-rows: auto auto;
|
|
74
102
|
grid-template-areas:
|
|
75
|
-
"
|
|
76
|
-
"
|
|
103
|
+
"body"
|
|
104
|
+
"info"
|
|
77
105
|
}
|
|
78
106
|
|
|
79
107
|
&.wds-list-item-noInfo-hasPrompt {
|
|
80
|
-
grid-template-columns:
|
|
108
|
+
grid-template-columns: 1fr;
|
|
81
109
|
grid-template-rows: auto auto;
|
|
82
110
|
grid-template-areas:
|
|
83
|
-
"
|
|
84
|
-
"
|
|
111
|
+
"body"
|
|
112
|
+
"prompt";
|
|
85
113
|
}
|
|
86
114
|
|
|
87
115
|
&.wds-list-item-noInfo-noPrompt {
|
|
88
|
-
grid-template-columns:
|
|
116
|
+
grid-template-columns: 1fr;
|
|
89
117
|
grid-template-rows: auto;
|
|
90
118
|
grid-template-areas:
|
|
91
|
-
"
|
|
119
|
+
"body"
|
|
92
120
|
}
|
|
93
121
|
}
|
|
94
122
|
|
|
@@ -102,8 +130,19 @@
|
|
|
102
130
|
grid-template-rows: auto auto auto;
|
|
103
131
|
grid-template-areas:
|
|
104
132
|
"body control"
|
|
105
|
-
"info
|
|
133
|
+
"info control"
|
|
106
134
|
"prompt prompt";
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
&:has(.wds-list-item-button-control) {
|
|
138
|
+
grid-template-columns: 1fr;
|
|
139
|
+
grid-template-rows: auto;
|
|
140
|
+
grid-template-areas:
|
|
141
|
+
"body"
|
|
142
|
+
"info"
|
|
143
|
+
"prompt"
|
|
144
|
+
"control";
|
|
145
|
+
}
|
|
107
146
|
}
|
|
108
147
|
|
|
109
148
|
&.wds-list-item-hasInfo-noPrompt {
|
|
@@ -111,7 +150,16 @@
|
|
|
111
150
|
grid-template-rows: auto auto;
|
|
112
151
|
grid-template-areas:
|
|
113
152
|
"body control"
|
|
114
|
-
"info
|
|
153
|
+
"info control";
|
|
154
|
+
|
|
155
|
+
&:has(.wds-list-item-button-control) {
|
|
156
|
+
grid-template-columns: 1fr;
|
|
157
|
+
grid-template-rows: auto;
|
|
158
|
+
grid-template-areas:
|
|
159
|
+
"body"
|
|
160
|
+
"info"
|
|
161
|
+
"control";
|
|
162
|
+
}
|
|
115
163
|
}
|
|
116
164
|
|
|
117
165
|
&.wds-list-item-noInfo-hasPrompt {
|
|
@@ -120,13 +168,30 @@
|
|
|
120
168
|
grid-template-areas:
|
|
121
169
|
"body control"
|
|
122
170
|
"prompt prompt";
|
|
171
|
+
|
|
172
|
+
&:has(.wds-list-item-button-control) {
|
|
173
|
+
grid-template-columns: 1fr;
|
|
174
|
+
grid-template-rows: auto;
|
|
175
|
+
grid-template-areas:
|
|
176
|
+
"body"
|
|
177
|
+
"prompt"
|
|
178
|
+
"control";
|
|
179
|
+
}
|
|
123
180
|
}
|
|
124
181
|
|
|
125
182
|
&.wds-list-item-noInfo-noPrompt {
|
|
126
183
|
grid-template-columns: 1fr auto;
|
|
127
184
|
grid-template-rows: auto;
|
|
128
185
|
grid-template-areas:
|
|
129
|
-
"body control"
|
|
186
|
+
"body control";
|
|
187
|
+
|
|
188
|
+
&:has(.wds-list-item-button-control) {
|
|
189
|
+
grid-template-columns: 1fr;
|
|
190
|
+
grid-template-rows: auto;
|
|
191
|
+
grid-template-areas:
|
|
192
|
+
"body"
|
|
193
|
+
"control";
|
|
194
|
+
}
|
|
130
195
|
}
|
|
131
196
|
}
|
|
132
197
|
|
|
@@ -167,9 +232,30 @@
|
|
|
167
232
|
"body"
|
|
168
233
|
}
|
|
169
234
|
}
|
|
235
|
+
|
|
236
|
+
.wds-list-item-media {
|
|
237
|
+
display: none;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.wds-list-item-body {
|
|
241
|
+
grid-area: body;
|
|
242
|
+
display: grid;
|
|
243
|
+
grid-template-columns: 1fr;
|
|
244
|
+
justify-items: start;
|
|
245
|
+
gap: 0;
|
|
246
|
+
|
|
247
|
+
.wds-list-item-value {
|
|
248
|
+
text-align: left;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.wds-list-item-button-control--hasPrompt{
|
|
253
|
+
margin-top: var(--size-4);
|
|
254
|
+
}
|
|
170
255
|
}
|
|
171
256
|
|
|
172
|
-
|
|
257
|
+
// 240 to 308px
|
|
258
|
+
@container (min-width: unit(@wds-list-item-cq-min + 0.01, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
|
|
173
259
|
.wds-list-item-media-image{
|
|
174
260
|
object-position: bottom left;
|
|
175
261
|
}
|
|
@@ -404,108 +490,82 @@
|
|
|
404
490
|
}
|
|
405
491
|
}
|
|
406
492
|
|
|
407
|
-
|
|
493
|
+
// 308px+
|
|
494
|
+
@container (min-width: unit(@wds-list-item-cq-max + 0.01, px)) {
|
|
408
495
|
.wds-list-item-control-wrapper {
|
|
409
|
-
|
|
496
|
+
height: var(--wds-list-item-control-wrapper-height);
|
|
497
|
+
align-content: center;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.wds-list-item-media-image{
|
|
501
|
+
object-position: center;
|
|
410
502
|
}
|
|
503
|
+
|
|
411
504
|
&.wds-list-item-hasMedia-hasControl {
|
|
412
505
|
&.wds-list-item-hasInfo-hasPrompt {
|
|
413
|
-
grid-template-columns: 1fr auto;
|
|
506
|
+
grid-template-columns: auto 1fr auto;
|
|
414
507
|
grid-template-rows: auto auto auto;
|
|
415
508
|
grid-template-areas:
|
|
416
|
-
"body control"
|
|
417
|
-
"info
|
|
418
|
-
"prompt prompt";
|
|
419
|
-
|
|
420
|
-
&:has(.wds-list-item-button-control) {
|
|
421
|
-
grid-template-columns: 1fr;
|
|
422
|
-
grid-template-rows: auto;
|
|
423
|
-
grid-template-areas:
|
|
424
|
-
"body"
|
|
425
|
-
"info"
|
|
426
|
-
"prompt"
|
|
427
|
-
"control";
|
|
428
|
-
}
|
|
509
|
+
"media body control"
|
|
510
|
+
". info ."
|
|
511
|
+
". prompt prompt";
|
|
429
512
|
}
|
|
430
513
|
|
|
431
514
|
&.wds-list-item-hasInfo-noPrompt {
|
|
432
|
-
grid-template-columns: 1fr auto;
|
|
515
|
+
grid-template-columns: auto 1fr auto;
|
|
433
516
|
grid-template-rows: auto auto;
|
|
434
517
|
grid-template-areas:
|
|
435
|
-
"body control"
|
|
436
|
-
"info
|
|
437
|
-
|
|
438
|
-
&:has(.wds-list-item-button-control) {
|
|
439
|
-
grid-template-columns: 1fr;
|
|
440
|
-
grid-template-areas:
|
|
441
|
-
"body"
|
|
442
|
-
"info"
|
|
443
|
-
"control";
|
|
444
|
-
}
|
|
518
|
+
"media body control"
|
|
519
|
+
". info ."
|
|
445
520
|
}
|
|
446
521
|
|
|
447
522
|
&.wds-list-item-noInfo-hasPrompt {
|
|
448
|
-
grid-template-columns: 1fr auto;
|
|
523
|
+
grid-template-columns: auto 1fr auto;
|
|
449
524
|
grid-template-rows: auto auto;
|
|
450
525
|
grid-template-areas:
|
|
451
|
-
"body control"
|
|
452
|
-
"prompt prompt";
|
|
453
|
-
|
|
454
|
-
&:has(.wds-list-item-button-control) {
|
|
455
|
-
grid-template-columns: 1fr;
|
|
456
|
-
grid-template-areas:
|
|
457
|
-
"body"
|
|
458
|
-
"prompt"
|
|
459
|
-
"control";
|
|
460
|
-
}
|
|
526
|
+
"media body control"
|
|
527
|
+
". prompt prompt";
|
|
461
528
|
}
|
|
462
529
|
|
|
463
530
|
&.wds-list-item-noInfo-noPrompt {
|
|
464
|
-
grid-template-columns: 1fr auto;
|
|
531
|
+
grid-template-columns: auto 1fr auto;
|
|
465
532
|
grid-template-rows: auto;
|
|
466
533
|
grid-template-areas:
|
|
467
|
-
"body control"
|
|
468
|
-
|
|
469
|
-
&:has(.wds-list-item-button-control) {
|
|
470
|
-
grid-template-columns: 1fr;
|
|
471
|
-
grid-template-areas:
|
|
472
|
-
"body"
|
|
473
|
-
"control";
|
|
474
|
-
}
|
|
534
|
+
"media body control"
|
|
475
535
|
}
|
|
476
536
|
}
|
|
477
537
|
|
|
478
538
|
&.wds-list-item-hasMedia-noControl {
|
|
479
539
|
&.wds-list-item-hasInfo-hasPrompt {
|
|
480
|
-
grid-template-columns: 1fr;
|
|
481
|
-
grid-template-rows: auto auto
|
|
540
|
+
grid-template-columns: auto 1fr;
|
|
541
|
+
grid-template-rows: auto auto;
|
|
482
542
|
grid-template-areas:
|
|
483
|
-
"body"
|
|
484
|
-
"info"
|
|
485
|
-
"prompt";
|
|
543
|
+
"media body"
|
|
544
|
+
". info"
|
|
545
|
+
". prompt";
|
|
486
546
|
}
|
|
487
547
|
|
|
488
548
|
&.wds-list-item-hasInfo-noPrompt {
|
|
489
|
-
grid-template-columns: 1fr;
|
|
490
|
-
grid-template-rows: auto auto;
|
|
549
|
+
grid-template-columns: auto 1fr;
|
|
550
|
+
grid-template-rows: auto auto auto;
|
|
491
551
|
grid-template-areas:
|
|
492
|
-
"body"
|
|
493
|
-
"info"
|
|
552
|
+
"media body"
|
|
553
|
+
". info"
|
|
494
554
|
}
|
|
495
555
|
|
|
496
556
|
&.wds-list-item-noInfo-hasPrompt {
|
|
497
|
-
grid-template-columns: 1fr;
|
|
557
|
+
grid-template-columns: auto 1fr;
|
|
498
558
|
grid-template-rows: auto auto;
|
|
499
559
|
grid-template-areas:
|
|
500
|
-
"body"
|
|
501
|
-
"prompt";
|
|
560
|
+
"media body"
|
|
561
|
+
". prompt";
|
|
502
562
|
}
|
|
503
563
|
|
|
504
564
|
&.wds-list-item-noInfo-noPrompt {
|
|
505
|
-
grid-template-columns: 1fr;
|
|
565
|
+
grid-template-columns: auto 1fr;
|
|
506
566
|
grid-template-rows: auto;
|
|
507
567
|
grid-template-areas:
|
|
508
|
-
"body"
|
|
568
|
+
"media body"
|
|
509
569
|
}
|
|
510
570
|
}
|
|
511
571
|
|
|
@@ -519,19 +579,8 @@
|
|
|
519
579
|
grid-template-rows: auto auto auto;
|
|
520
580
|
grid-template-areas:
|
|
521
581
|
"body control"
|
|
522
|
-
"info
|
|
582
|
+
"info ."
|
|
523
583
|
"prompt prompt";
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
&:has(.wds-list-item-button-control) {
|
|
527
|
-
grid-template-columns: 1fr;
|
|
528
|
-
grid-template-rows: auto;
|
|
529
|
-
grid-template-areas:
|
|
530
|
-
"body"
|
|
531
|
-
"info"
|
|
532
|
-
"prompt"
|
|
533
|
-
"control";
|
|
534
|
-
}
|
|
535
584
|
}
|
|
536
585
|
|
|
537
586
|
&.wds-list-item-hasInfo-noPrompt {
|
|
@@ -539,16 +588,7 @@
|
|
|
539
588
|
grid-template-rows: auto auto;
|
|
540
589
|
grid-template-areas:
|
|
541
590
|
"body control"
|
|
542
|
-
"info
|
|
543
|
-
|
|
544
|
-
&:has(.wds-list-item-button-control) {
|
|
545
|
-
grid-template-columns: 1fr;
|
|
546
|
-
grid-template-rows: auto;
|
|
547
|
-
grid-template-areas:
|
|
548
|
-
"body"
|
|
549
|
-
"info"
|
|
550
|
-
"control";
|
|
551
|
-
}
|
|
591
|
+
"info ."
|
|
552
592
|
}
|
|
553
593
|
|
|
554
594
|
&.wds-list-item-noInfo-hasPrompt {
|
|
@@ -557,30 +597,13 @@
|
|
|
557
597
|
grid-template-areas:
|
|
558
598
|
"body control"
|
|
559
599
|
"prompt prompt";
|
|
560
|
-
|
|
561
|
-
&:has(.wds-list-item-button-control) {
|
|
562
|
-
grid-template-columns: 1fr;
|
|
563
|
-
grid-template-rows: auto;
|
|
564
|
-
grid-template-areas:
|
|
565
|
-
"body"
|
|
566
|
-
"prompt"
|
|
567
|
-
"control";
|
|
568
|
-
}
|
|
569
600
|
}
|
|
570
601
|
|
|
571
602
|
&.wds-list-item-noInfo-noPrompt {
|
|
572
603
|
grid-template-columns: 1fr auto;
|
|
573
604
|
grid-template-rows: auto;
|
|
574
605
|
grid-template-areas:
|
|
575
|
-
"body control"
|
|
576
|
-
|
|
577
|
-
&:has(.wds-list-item-button-control) {
|
|
578
|
-
grid-template-columns: 1fr;
|
|
579
|
-
grid-template-rows: auto;
|
|
580
|
-
grid-template-areas:
|
|
581
|
-
"body"
|
|
582
|
-
"control";
|
|
583
|
-
}
|
|
606
|
+
"body control"
|
|
584
607
|
}
|
|
585
608
|
}
|
|
586
609
|
|
|
@@ -621,26 +644,6 @@
|
|
|
621
644
|
"body"
|
|
622
645
|
}
|
|
623
646
|
}
|
|
624
|
-
|
|
625
|
-
.wds-list-item-media {
|
|
626
|
-
display: none;
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
.wds-list-item-body {
|
|
630
|
-
grid-area: body;
|
|
631
|
-
display: grid;
|
|
632
|
-
grid-template-columns: 1fr;
|
|
633
|
-
justify-items: start;
|
|
634
|
-
gap: 0;
|
|
635
|
-
|
|
636
|
-
.wds-list-item-value {
|
|
637
|
-
text-align: left;
|
|
638
|
-
}
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
.wds-list-item-button-control--hasPrompt{
|
|
642
|
-
margin-top: var(--size-4);
|
|
643
|
-
}
|
|
644
647
|
}
|
|
645
648
|
}
|
|
646
649
|
}
|