@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.
Files changed (11) hide show
  1. package/build/main.css +105 -105
  2. package/build/styles/listItem/ListItem.css +105 -105
  3. package/build/styles/listItem/ListItem.grid.css +105 -105
  4. package/build/styles/main.css +105 -105
  5. package/package.json +1 -1
  6. package/src/listItem/ListItem.css +105 -105
  7. package/src/listItem/ListItem.grid.css +105 -105
  8. package/src/listItem/ListItem.grid.less +162 -159
  9. package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx +1 -1
  10. package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx +1 -1
  11. package/src/main.css +105 -105
package/src/listItem/ListItem.css CHANGED
@@ -9,54 +9,66 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 308px) {
12
+ @container (max-width: 240px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
- height: var(--wds-list-item-control-wrapper-height);
15
- align-content: center;
16
- }
17
- .wds-list-item-gridWrapper .wds-list-item-media-image {
18
- -o-object-position: center;
19
- object-position: center;
14
+ align-content: start;
20
15
  }
21
16
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
22
- grid-template-columns: auto 1fr auto;
17
+ grid-template-columns: 1fr auto;
23
18
  grid-template-rows: auto auto auto;
24
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
19
+ grid-template-areas: "body control" "info control" "prompt prompt";
20
+ }
21
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
22
+ grid-template-columns: 1fr;
23
+ grid-template-rows: auto;
24
+ grid-template-areas: "body" "info" "prompt" "control";
25
25
  }
26
26
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
27
- grid-template-columns: auto 1fr auto;
27
+ grid-template-columns: 1fr auto;
28
28
  grid-template-rows: auto auto;
29
- grid-template-areas: "media body control" ". info .";
29
+ grid-template-areas: "body control" "info control";
30
+ }
31
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
32
+ grid-template-columns: 1fr;
33
+ grid-template-areas: "body" "info" "control";
30
34
  }
31
35
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
32
- grid-template-columns: auto 1fr auto;
36
+ grid-template-columns: 1fr auto;
33
37
  grid-template-rows: auto auto;
34
- grid-template-areas: "media body control" ". prompt prompt";
38
+ grid-template-areas: "body control" "prompt prompt";
39
+ }
40
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
41
+ grid-template-columns: 1fr;
42
+ grid-template-areas: "body" "prompt" "control";
35
43
  }
36
44
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
37
- grid-template-columns: auto 1fr auto;
45
+ grid-template-columns: 1fr auto;
38
46
  grid-template-rows: auto;
39
- grid-template-areas: "media body control";
47
+ grid-template-areas: "body control";
48
+ }
49
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
50
+ grid-template-columns: 1fr;
51
+ grid-template-areas: "body" "control";
40
52
  }
41
53
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
42
- grid-template-columns: auto 1fr;
43
- grid-template-rows: auto auto;
44
- grid-template-areas: "media body" ". info" ". prompt";
54
+ grid-template-columns: 1fr;
55
+ grid-template-rows: auto auto auto;
56
+ grid-template-areas: "body" "info" "prompt";
45
57
  }
46
58
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
47
- grid-template-columns: auto 1fr;
48
- grid-template-rows: auto auto auto;
49
- grid-template-areas: "media body" ". info";
59
+ grid-template-columns: 1fr;
60
+ grid-template-rows: auto auto;
61
+ grid-template-areas: "body" "info";
50
62
  }
51
63
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
52
- grid-template-columns: auto 1fr;
64
+ grid-template-columns: 1fr;
53
65
  grid-template-rows: auto auto;
54
- grid-template-areas: "media body" ". prompt";
66
+ grid-template-areas: "body" "prompt";
55
67
  }
56
68
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
57
- grid-template-columns: auto 1fr;
69
+ grid-template-columns: 1fr;
58
70
  grid-template-rows: auto;
59
- grid-template-areas: "media body";
71
+ grid-template-areas: "body";
60
72
  }
61
73
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
62
74
  grid-column: 1 / -1;
@@ -64,23 +76,43 @@
64
76
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
65
77
  grid-template-columns: 1fr auto;
66
78
  grid-template-rows: auto auto auto;
67
- grid-template-areas: "body control" "info ." "prompt prompt";
79
+ grid-template-areas: "body control" "info control" "prompt prompt";
80
+ }
81
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
82
+ grid-template-columns: 1fr;
83
+ grid-template-rows: auto;
84
+ grid-template-areas: "body" "info" "prompt" "control";
68
85
  }
69
86
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
70
87
  grid-template-columns: 1fr auto;
71
88
  grid-template-rows: auto auto;
72
- grid-template-areas: "body control" "info .";
89
+ grid-template-areas: "body control" "info control";
90
+ }
91
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
92
+ grid-template-columns: 1fr;
93
+ grid-template-rows: auto;
94
+ grid-template-areas: "body" "info" "control";
73
95
  }
74
96
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
75
97
  grid-template-columns: 1fr auto;
76
98
  grid-template-rows: auto auto;
77
99
  grid-template-areas: "body control" "prompt prompt";
78
100
  }
101
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
102
+ grid-template-columns: 1fr;
103
+ grid-template-rows: auto;
104
+ grid-template-areas: "body" "prompt" "control";
105
+ }
79
106
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
80
107
  grid-template-columns: 1fr auto;
81
108
  grid-template-rows: auto;
82
109
  grid-template-areas: "body control";
83
110
  }
111
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
112
+ grid-template-columns: 1fr;
113
+ grid-template-rows: auto;
114
+ grid-template-areas: "body" "control";
115
+ }
84
116
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
85
117
  grid-column: 1 / -1;
86
118
  }
@@ -104,8 +136,26 @@
104
136
  grid-template-rows: auto;
105
137
  grid-template-areas: "body";
106
138
  }
139
+ .wds-list-item-gridWrapper .wds-list-item-media {
140
+ display: none;
141
+ }
142
+ .wds-list-item-gridWrapper .wds-list-item-body {
143
+ grid-area: body;
144
+ display: grid;
145
+ grid-template-columns: 1fr;
146
+ justify-items: start;
147
+ grid-gap: 0;
148
+ gap: 0;
149
+ }
150
+ .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
151
+ text-align: left;
152
+ }
153
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
154
+ margin-top: 4px;
155
+ margin-top: var(--size-4);
156
+ }
107
157
  }
108
- @container (min-width: 241px) and (max-width: 308px) {
158
+ @container (min-width: 240.01px) and (max-width: 308px) {
109
159
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
160
  -o-object-position: bottom left;
111
161
  object-position: bottom left;
@@ -236,66 +286,54 @@
236
286
  margin-top: var(--size-4);
237
287
  }
238
288
  }
239
- @container (max-width: 240px) {
289
+ @container (min-width: 308.01px) {
240
290
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
241
- align-content: start;
291
+ height: var(--wds-list-item-control-wrapper-height);
292
+ align-content: center;
293
+ }
294
+ .wds-list-item-gridWrapper .wds-list-item-media-image {
295
+ -o-object-position: center;
296
+ object-position: center;
242
297
  }
243
298
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
244
- grid-template-columns: 1fr auto;
299
+ grid-template-columns: auto 1fr auto;
245
300
  grid-template-rows: auto auto auto;
246
- grid-template-areas: "body control" "info control" "prompt prompt";
247
- }
248
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
249
- grid-template-columns: 1fr;
250
- grid-template-rows: auto;
251
- grid-template-areas: "body" "info" "prompt" "control";
301
+ grid-template-areas: "media body control" ". info ." ". prompt prompt";
252
302
  }
253
303
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
254
- grid-template-columns: 1fr auto;
304
+ grid-template-columns: auto 1fr auto;
255
305
  grid-template-rows: auto auto;
256
- grid-template-areas: "body control" "info control";
257
- }
258
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
259
- grid-template-columns: 1fr;
260
- grid-template-areas: "body" "info" "control";
306
+ grid-template-areas: "media body control" ". info .";
261
307
  }
262
308
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
263
- grid-template-columns: 1fr auto;
309
+ grid-template-columns: auto 1fr auto;
264
310
  grid-template-rows: auto auto;
265
- grid-template-areas: "body control" "prompt prompt";
266
- }
267
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
268
- grid-template-columns: 1fr;
269
- grid-template-areas: "body" "prompt" "control";
311
+ grid-template-areas: "media body control" ". prompt prompt";
270
312
  }
271
313
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
272
- grid-template-columns: 1fr auto;
314
+ grid-template-columns: auto 1fr auto;
273
315
  grid-template-rows: auto;
274
- grid-template-areas: "body control";
275
- }
276
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
277
- grid-template-columns: 1fr;
278
- grid-template-areas: "body" "control";
316
+ grid-template-areas: "media body control";
279
317
  }
280
318
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
281
- grid-template-columns: 1fr;
282
- grid-template-rows: auto auto auto;
283
- grid-template-areas: "body" "info" "prompt";
319
+ grid-template-columns: auto 1fr;
320
+ grid-template-rows: auto auto;
321
+ grid-template-areas: "media body" ". info" ". prompt";
284
322
  }
285
323
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
286
- grid-template-columns: 1fr;
287
- grid-template-rows: auto auto;
288
- grid-template-areas: "body" "info";
324
+ grid-template-columns: auto 1fr;
325
+ grid-template-rows: auto auto auto;
326
+ grid-template-areas: "media body" ". info";
289
327
  }
290
328
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
291
- grid-template-columns: 1fr;
329
+ grid-template-columns: auto 1fr;
292
330
  grid-template-rows: auto auto;
293
- grid-template-areas: "body" "prompt";
331
+ grid-template-areas: "media body" ". prompt";
294
332
  }
295
333
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
296
- grid-template-columns: 1fr;
334
+ grid-template-columns: auto 1fr;
297
335
  grid-template-rows: auto;
298
- grid-template-areas: "body";
336
+ grid-template-areas: "media body";
299
337
  }
300
338
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
301
339
  grid-column: 1 / -1;
@@ -303,43 +341,23 @@
303
341
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
304
342
  grid-template-columns: 1fr auto;
305
343
  grid-template-rows: auto auto auto;
306
- grid-template-areas: "body control" "info control" "prompt prompt";
307
- }
308
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
309
- grid-template-columns: 1fr;
310
- grid-template-rows: auto;
311
- grid-template-areas: "body" "info" "prompt" "control";
344
+ grid-template-areas: "body control" "info ." "prompt prompt";
312
345
  }
313
346
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
314
347
  grid-template-columns: 1fr auto;
315
348
  grid-template-rows: auto auto;
316
- grid-template-areas: "body control" "info control";
317
- }
318
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
319
- grid-template-columns: 1fr;
320
- grid-template-rows: auto;
321
- grid-template-areas: "body" "info" "control";
349
+ grid-template-areas: "body control" "info .";
322
350
  }
323
351
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
324
352
  grid-template-columns: 1fr auto;
325
353
  grid-template-rows: auto auto;
326
354
  grid-template-areas: "body control" "prompt prompt";
327
355
  }
328
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
329
- grid-template-columns: 1fr;
330
- grid-template-rows: auto;
331
- grid-template-areas: "body" "prompt" "control";
332
- }
333
356
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
334
357
  grid-template-columns: 1fr auto;
335
358
  grid-template-rows: auto;
336
359
  grid-template-areas: "body control";
337
360
  }
338
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
339
- grid-template-columns: 1fr;
340
- grid-template-rows: auto;
341
- grid-template-areas: "body" "control";
342
- }
343
361
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
344
362
  grid-column: 1 / -1;
345
363
  }
@@ -363,24 +381,6 @@
363
381
  grid-template-rows: auto;
364
382
  grid-template-areas: "body";
365
383
  }
366
- .wds-list-item-gridWrapper .wds-list-item-media {
367
- display: none;
368
- }
369
- .wds-list-item-gridWrapper .wds-list-item-body {
370
- grid-area: body;
371
- display: grid;
372
- grid-template-columns: 1fr;
373
- justify-items: start;
374
- grid-gap: 0;
375
- gap: 0;
376
- }
377
- .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
378
- text-align: left;
379
- }
380
- .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
381
- margin-top: 4px;
382
- margin-top: var(--size-4);
383
- }
384
384
  }
385
385
  .wds-list-item-prompt {
386
386
  grid-area: prompt;
package/src/listItem/ListItem.grid.css CHANGED
@@ -9,54 +9,66 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 308px) {
12
+ @container (max-width: 240px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
- height: var(--wds-list-item-control-wrapper-height);
15
- align-content: center;
16
- }
17
- .wds-list-item-gridWrapper .wds-list-item-media-image {
18
- -o-object-position: center;
19
- object-position: center;
14
+ align-content: start;
20
15
  }
21
16
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
22
- grid-template-columns: auto 1fr auto;
17
+ grid-template-columns: 1fr auto;
23
18
  grid-template-rows: auto auto auto;
24
- grid-template-areas: "media body control" ". info ." ". prompt prompt";
19
+ grid-template-areas: "body control" "info control" "prompt prompt";
20
+ }
21
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
22
+ grid-template-columns: 1fr;
23
+ grid-template-rows: auto;
24
+ grid-template-areas: "body" "info" "prompt" "control";
25
25
  }
26
26
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
27
- grid-template-columns: auto 1fr auto;
27
+ grid-template-columns: 1fr auto;
28
28
  grid-template-rows: auto auto;
29
- grid-template-areas: "media body control" ". info .";
29
+ grid-template-areas: "body control" "info control";
30
+ }
31
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
32
+ grid-template-columns: 1fr;
33
+ grid-template-areas: "body" "info" "control";
30
34
  }
31
35
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
32
- grid-template-columns: auto 1fr auto;
36
+ grid-template-columns: 1fr auto;
33
37
  grid-template-rows: auto auto;
34
- grid-template-areas: "media body control" ". prompt prompt";
38
+ grid-template-areas: "body control" "prompt prompt";
39
+ }
40
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
41
+ grid-template-columns: 1fr;
42
+ grid-template-areas: "body" "prompt" "control";
35
43
  }
36
44
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
37
- grid-template-columns: auto 1fr auto;
45
+ grid-template-columns: 1fr auto;
38
46
  grid-template-rows: auto;
39
- grid-template-areas: "media body control";
47
+ grid-template-areas: "body control";
48
+ }
49
+ .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
50
+ grid-template-columns: 1fr;
51
+ grid-template-areas: "body" "control";
40
52
  }
41
53
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
42
- grid-template-columns: auto 1fr;
43
- grid-template-rows: auto auto;
44
- grid-template-areas: "media body" ". info" ". prompt";
54
+ grid-template-columns: 1fr;
55
+ grid-template-rows: auto auto auto;
56
+ grid-template-areas: "body" "info" "prompt";
45
57
  }
46
58
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
47
- grid-template-columns: auto 1fr;
48
- grid-template-rows: auto auto auto;
49
- grid-template-areas: "media body" ". info";
59
+ grid-template-columns: 1fr;
60
+ grid-template-rows: auto auto;
61
+ grid-template-areas: "body" "info";
50
62
  }
51
63
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
52
- grid-template-columns: auto 1fr;
64
+ grid-template-columns: 1fr;
53
65
  grid-template-rows: auto auto;
54
- grid-template-areas: "media body" ". prompt";
66
+ grid-template-areas: "body" "prompt";
55
67
  }
56
68
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
57
- grid-template-columns: auto 1fr;
69
+ grid-template-columns: 1fr;
58
70
  grid-template-rows: auto;
59
- grid-template-areas: "media body";
71
+ grid-template-areas: "body";
60
72
  }
61
73
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
62
74
  grid-column: 1 / -1;
@@ -64,23 +76,43 @@
64
76
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
65
77
  grid-template-columns: 1fr auto;
66
78
  grid-template-rows: auto auto auto;
67
- grid-template-areas: "body control" "info ." "prompt prompt";
79
+ grid-template-areas: "body control" "info control" "prompt prompt";
80
+ }
81
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
82
+ grid-template-columns: 1fr;
83
+ grid-template-rows: auto;
84
+ grid-template-areas: "body" "info" "prompt" "control";
68
85
  }
69
86
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
70
87
  grid-template-columns: 1fr auto;
71
88
  grid-template-rows: auto auto;
72
- grid-template-areas: "body control" "info .";
89
+ grid-template-areas: "body control" "info control";
90
+ }
91
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
92
+ grid-template-columns: 1fr;
93
+ grid-template-rows: auto;
94
+ grid-template-areas: "body" "info" "control";
73
95
  }
74
96
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
75
97
  grid-template-columns: 1fr auto;
76
98
  grid-template-rows: auto auto;
77
99
  grid-template-areas: "body control" "prompt prompt";
78
100
  }
101
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
102
+ grid-template-columns: 1fr;
103
+ grid-template-rows: auto;
104
+ grid-template-areas: "body" "prompt" "control";
105
+ }
79
106
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
80
107
  grid-template-columns: 1fr auto;
81
108
  grid-template-rows: auto;
82
109
  grid-template-areas: "body control";
83
110
  }
111
+ .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
112
+ grid-template-columns: 1fr;
113
+ grid-template-rows: auto;
114
+ grid-template-areas: "body" "control";
115
+ }
84
116
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
85
117
  grid-column: 1 / -1;
86
118
  }
@@ -104,8 +136,26 @@
104
136
  grid-template-rows: auto;
105
137
  grid-template-areas: "body";
106
138
  }
139
+ .wds-list-item-gridWrapper .wds-list-item-media {
140
+ display: none;
141
+ }
142
+ .wds-list-item-gridWrapper .wds-list-item-body {
143
+ grid-area: body;
144
+ display: grid;
145
+ grid-template-columns: 1fr;
146
+ justify-items: start;
147
+ grid-gap: 0;
148
+ gap: 0;
149
+ }
150
+ .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
151
+ text-align: left;
152
+ }
153
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
154
+ margin-top: 4px;
155
+ margin-top: var(--size-4);
156
+ }
107
157
  }
108
- @container (min-width: 241px) and (max-width: 308px) {
158
+ @container (min-width: 240.01px) and (max-width: 308px) {
109
159
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
160
  -o-object-position: bottom left;
111
161
  object-position: bottom left;
@@ -236,66 +286,54 @@
236
286
  margin-top: var(--size-4);
237
287
  }
238
288
  }
239
- @container (max-width: 240px) {
289
+ @container (min-width: 308.01px) {
240
290
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
241
- align-content: start;
291
+ height: var(--wds-list-item-control-wrapper-height);
292
+ align-content: center;
293
+ }
294
+ .wds-list-item-gridWrapper .wds-list-item-media-image {
295
+ -o-object-position: center;
296
+ object-position: center;
242
297
  }
243
298
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
244
- grid-template-columns: 1fr auto;
299
+ grid-template-columns: auto 1fr auto;
245
300
  grid-template-rows: auto auto auto;
246
- grid-template-areas: "body control" "info control" "prompt prompt";
247
- }
248
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
249
- grid-template-columns: 1fr;
250
- grid-template-rows: auto;
251
- grid-template-areas: "body" "info" "prompt" "control";
301
+ grid-template-areas: "media body control" ". info ." ". prompt prompt";
252
302
  }
253
303
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
254
- grid-template-columns: 1fr auto;
304
+ grid-template-columns: auto 1fr auto;
255
305
  grid-template-rows: auto auto;
256
- grid-template-areas: "body control" "info control";
257
- }
258
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
259
- grid-template-columns: 1fr;
260
- grid-template-areas: "body" "info" "control";
306
+ grid-template-areas: "media body control" ". info .";
261
307
  }
262
308
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
263
- grid-template-columns: 1fr auto;
309
+ grid-template-columns: auto 1fr auto;
264
310
  grid-template-rows: auto auto;
265
- grid-template-areas: "body control" "prompt prompt";
266
- }
267
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
268
- grid-template-columns: 1fr;
269
- grid-template-areas: "body" "prompt" "control";
311
+ grid-template-areas: "media body control" ". prompt prompt";
270
312
  }
271
313
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
272
- grid-template-columns: 1fr auto;
314
+ grid-template-columns: auto 1fr auto;
273
315
  grid-template-rows: auto;
274
- grid-template-areas: "body control";
275
- }
276
- .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
277
- grid-template-columns: 1fr;
278
- grid-template-areas: "body" "control";
316
+ grid-template-areas: "media body control";
279
317
  }
280
318
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
281
- grid-template-columns: 1fr;
282
- grid-template-rows: auto auto auto;
283
- grid-template-areas: "body" "info" "prompt";
319
+ grid-template-columns: auto 1fr;
320
+ grid-template-rows: auto auto;
321
+ grid-template-areas: "media body" ". info" ". prompt";
284
322
  }
285
323
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
286
- grid-template-columns: 1fr;
287
- grid-template-rows: auto auto;
288
- grid-template-areas: "body" "info";
324
+ grid-template-columns: auto 1fr;
325
+ grid-template-rows: auto auto auto;
326
+ grid-template-areas: "media body" ". info";
289
327
  }
290
328
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
291
- grid-template-columns: 1fr;
329
+ grid-template-columns: auto 1fr;
292
330
  grid-template-rows: auto auto;
293
- grid-template-areas: "body" "prompt";
331
+ grid-template-areas: "media body" ". prompt";
294
332
  }
295
333
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
296
- grid-template-columns: 1fr;
334
+ grid-template-columns: auto 1fr;
297
335
  grid-template-rows: auto;
298
- grid-template-areas: "body";
336
+ grid-template-areas: "media body";
299
337
  }
300
338
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
301
339
  grid-column: 1 / -1;
@@ -303,43 +341,23 @@
303
341
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
304
342
  grid-template-columns: 1fr auto;
305
343
  grid-template-rows: auto auto auto;
306
- grid-template-areas: "body control" "info control" "prompt prompt";
307
- }
308
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
309
- grid-template-columns: 1fr;
310
- grid-template-rows: auto;
311
- grid-template-areas: "body" "info" "prompt" "control";
344
+ grid-template-areas: "body control" "info ." "prompt prompt";
312
345
  }
313
346
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
314
347
  grid-template-columns: 1fr auto;
315
348
  grid-template-rows: auto auto;
316
- grid-template-areas: "body control" "info control";
317
- }
318
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
319
- grid-template-columns: 1fr;
320
- grid-template-rows: auto;
321
- grid-template-areas: "body" "info" "control";
349
+ grid-template-areas: "body control" "info .";
322
350
  }
323
351
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
324
352
  grid-template-columns: 1fr auto;
325
353
  grid-template-rows: auto auto;
326
354
  grid-template-areas: "body control" "prompt prompt";
327
355
  }
328
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
329
- grid-template-columns: 1fr;
330
- grid-template-rows: auto;
331
- grid-template-areas: "body" "prompt" "control";
332
- }
333
356
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
334
357
  grid-template-columns: 1fr auto;
335
358
  grid-template-rows: auto;
336
359
  grid-template-areas: "body control";
337
360
  }
338
- .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
339
- grid-template-columns: 1fr;
340
- grid-template-rows: auto;
341
- grid-template-areas: "body" "control";
342
- }
343
361
  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
344
362
  grid-column: 1 / -1;
345
363
  }
@@ -363,22 +381,4 @@
363
381
  grid-template-rows: auto;
364
382
  grid-template-areas: "body";
365
383
  }
366
- .wds-list-item-gridWrapper .wds-list-item-media {
367
- display: none;
368
- }
369
- .wds-list-item-gridWrapper .wds-list-item-body {
370
- grid-area: body;
371
- display: grid;
372
- grid-template-columns: 1fr;
373
- justify-items: start;
374
- grid-gap: 0;
375
- gap: 0;
376
- }
377
- .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
378
- text-align: left;
379
- }
380
- .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
381
- margin-top: 4px;
382
- margin-top: var(--size-4);
383
- }
384
384
  }