@patternfly/patternfly 6.6.0-prerelease.6 → 6.6.0-prerelease.8
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/assets/images/img_avatar-rhds.svg +22 -0
- package/components/Avatar/avatar.css +141 -0
- package/components/Avatar/avatar.scss +160 -0
- package/components/Table/table.css +27 -0
- package/components/Table/table.scss +43 -4
- package/components/_index.css +168 -0
- package/docs/components/Avatar/examples/Avatar.md +320 -7
- package/docs/components/MenuToggle/examples/MenuToggle.md +3 -3
- package/docs/components/Table/examples/Table.css +6 -0
- package/docs/components/Table/examples/Table.md +280 -0
- package/docs/demos/Compass/examples/Compass.md +4 -4
- package/package.json +1 -1
- package/patternfly-no-globals.css +168 -0
- package/patternfly.css +168 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
|
|
2
|
+
<g>
|
|
3
|
+
<rect width="48" height="48" fill="#147878"/>
|
|
4
|
+
<rect x="36" y="42" width="6" height="6" fill="#004D4D"/>
|
|
5
|
+
<rect x="6" y="42" width="6" height="6" fill="#004D4D"/>
|
|
6
|
+
<rect x="12" y="36" width="24" height="6" fill="#004D4D"/>
|
|
7
|
+
<rect x="18" y="30" width="12" height="6" fill="#004D4D"/>
|
|
8
|
+
<rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"/>
|
|
9
|
+
<rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"/>
|
|
10
|
+
<rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"/>
|
|
11
|
+
<rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"/>
|
|
12
|
+
<rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"/>
|
|
13
|
+
<rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"/>
|
|
14
|
+
<rect x="18" width="12" height="12" fill="#004D4D"/>
|
|
15
|
+
<rect x="6" y="30" width="6" height="6" fill="#004D4D"/>
|
|
16
|
+
<rect x="12" y="24" width="6" height="6" fill="#004D4D"/>
|
|
17
|
+
<rect x="6" y="18" width="6" height="6" fill="#004D4D"/>
|
|
18
|
+
<rect x="12" y="12" width="6" height="6" fill="#004D4D"/>
|
|
19
|
+
<rect x="6" y="6" width="6" height="6" fill="#004D4D"/>
|
|
20
|
+
<rect y="12" width="6" height="24" fill="#004D4D"/>
|
|
21
|
+
</g>
|
|
22
|
+
</svg>
|
|
@@ -4,21 +4,74 @@
|
|
|
4
4
|
--pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
5
5
|
--pf-v6-c-avatar--Width: 2.25rem;
|
|
6
6
|
--pf-v6-c-avatar--Height: 2.25rem;
|
|
7
|
+
--pf-v6-c-avatar--FontSize: 2.25rem;
|
|
7
8
|
--pf-v6-c-avatar--m-sm--Width: 1.5rem;
|
|
8
9
|
--pf-v6-c-avatar--m-sm--Height: 1.5rem;
|
|
10
|
+
--pf-v6-c-avatar--m-sm--FontSize: 1.5rem;
|
|
9
11
|
--pf-v6-c-avatar--m-md--Width: 2.25rem;
|
|
10
12
|
--pf-v6-c-avatar--m-md--Height: 2.25rem;
|
|
13
|
+
--pf-v6-c-avatar--m-md--FontSize: 2.25rem;
|
|
11
14
|
--pf-v6-c-avatar--m-lg--Width: 4.5rem;
|
|
12
15
|
--pf-v6-c-avatar--m-lg--Height: 4.5rem;
|
|
16
|
+
--pf-v6-c-avatar--m-lg--FontSize: 4.5rem;
|
|
13
17
|
--pf-v6-c-avatar--m-xl--Width: 8rem;
|
|
14
18
|
--pf-v6-c-avatar--m-xl--Height: 8rem;
|
|
19
|
+
--pf-v6-c-avatar--m-xl--FontSize: 8rem;
|
|
15
20
|
--pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
|
|
16
21
|
--pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
22
|
+
--pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
23
|
+
--pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
24
|
+
--pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
|
|
25
|
+
--pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
|
|
26
|
+
--pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
|
|
27
|
+
--pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
|
|
28
|
+
--pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
|
|
29
|
+
--pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
|
|
30
|
+
--pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
|
|
31
|
+
--pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
|
|
32
|
+
--pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
|
|
33
|
+
--pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
|
|
34
|
+
--pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
|
|
35
|
+
--pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
|
|
36
|
+
--pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
|
|
37
|
+
--pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
|
|
38
|
+
--pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
|
|
39
|
+
--pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
|
|
40
|
+
--pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
|
|
41
|
+
--pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
|
|
42
|
+
--pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
|
|
43
|
+
--pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
|
|
44
|
+
--pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
|
|
45
|
+
--pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
|
|
46
|
+
--pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
|
|
47
|
+
--pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
|
|
48
|
+
--pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
|
|
49
|
+
--pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
|
|
50
|
+
--pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
|
|
51
|
+
--pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
52
|
+
--pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
53
|
+
--pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
54
|
+
--pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
|
|
55
|
+
--pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
|
|
56
|
+
--pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
|
|
57
|
+
--pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
|
|
58
|
+
--pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
|
|
59
|
+
--pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
|
|
60
|
+
--pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
|
|
61
|
+
--pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
|
|
62
|
+
--pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
|
|
63
|
+
--pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
|
|
64
|
+
--pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
|
|
65
|
+
--pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
|
|
66
|
+
--pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
|
|
67
|
+
--pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
|
|
68
|
+
--pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
|
|
17
69
|
}
|
|
18
70
|
|
|
19
71
|
.pf-v6-c-avatar {
|
|
20
72
|
width: var(--pf-v6-c-avatar--Width);
|
|
21
73
|
height: var(--pf-v6-c-avatar--Height);
|
|
74
|
+
font-size: var(--pf-v6-c-avatar--FontSize);
|
|
22
75
|
border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
|
|
23
76
|
border-radius: var(--pf-v6-c-avatar--BorderRadius);
|
|
24
77
|
}
|
|
@@ -249,4 +302,92 @@
|
|
|
249
302
|
.pf-v6-c-avatar.pf-m-xl {
|
|
250
303
|
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
|
|
251
304
|
}
|
|
305
|
+
}
|
|
306
|
+
.pf-v6-c-avatar.pf-m-sm {
|
|
307
|
+
--pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
|
|
308
|
+
--pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
|
|
309
|
+
--pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
|
|
310
|
+
}
|
|
311
|
+
.pf-v6-c-avatar.pf-m-lg {
|
|
312
|
+
--pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
|
|
313
|
+
--pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
|
|
314
|
+
--pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
|
|
315
|
+
--pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
|
|
316
|
+
}
|
|
317
|
+
.pf-v6-c-avatar.pf-m-xl {
|
|
318
|
+
--pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
|
|
319
|
+
--pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
|
|
320
|
+
--pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
|
|
321
|
+
--pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
|
|
322
|
+
}
|
|
323
|
+
.pf-v6-c-avatar.pf-m-colorful {
|
|
324
|
+
--pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
|
|
325
|
+
display: inline-flex;
|
|
326
|
+
align-items: center;
|
|
327
|
+
justify-content: center;
|
|
328
|
+
overflow: clip;
|
|
329
|
+
vertical-align: middle;
|
|
330
|
+
color: var(--pf-v6-c-avatar--m-colorful--Color, inherit);
|
|
331
|
+
background-color: var(--pf-v6-c-avatar--m-colorful--BackgroundColor, transparent);
|
|
332
|
+
border-color: var(--pf-v6-c-avatar--m-colorful--BorderColor, transparent);
|
|
333
|
+
}
|
|
334
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-red {
|
|
335
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
|
|
336
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-red--Color);
|
|
337
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
|
|
338
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
|
|
339
|
+
}
|
|
340
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-orangered {
|
|
341
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
|
|
342
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orangered--Color);
|
|
343
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
|
|
344
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
|
|
345
|
+
}
|
|
346
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-orange {
|
|
347
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
|
|
348
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orange--Color);
|
|
349
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
|
|
350
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
|
|
351
|
+
}
|
|
352
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-yellow {
|
|
353
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
|
|
354
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-yellow--Color);
|
|
355
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
|
|
356
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
|
|
357
|
+
}
|
|
358
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-green {
|
|
359
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
|
|
360
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-green--Color);
|
|
361
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
|
|
362
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
|
|
363
|
+
}
|
|
364
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-teal {
|
|
365
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
|
|
366
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-teal--Color);
|
|
367
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
|
|
368
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
|
|
369
|
+
}
|
|
370
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-blue {
|
|
371
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
|
|
372
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-blue--Color);
|
|
373
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
|
|
374
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
|
|
375
|
+
}
|
|
376
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-purple {
|
|
377
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
|
|
378
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-purple--Color);
|
|
379
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
|
|
380
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
|
|
381
|
+
}
|
|
382
|
+
.pf-v6-c-avatar.pf-m-colorful.pf-m-gray {
|
|
383
|
+
--pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
|
|
384
|
+
--pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-gray--Color);
|
|
385
|
+
--pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
|
|
386
|
+
--pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
|
|
387
|
+
}
|
|
388
|
+
.pf-v6-c-avatar .pf-v6-c-avatar__initials {
|
|
389
|
+
font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
|
|
390
|
+
font-size: var(--pf-v6-c-avatar__initials--FontSize);
|
|
391
|
+
font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
|
|
392
|
+
color: var(--pf-v6-c-avatar__initials--Color);
|
|
252
393
|
}
|
|
@@ -9,23 +9,80 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
|
|
|
9
9
|
--#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
10
10
|
--#{$avatar}--Width: #{pf-size-prem(36px)};
|
|
11
11
|
--#{$avatar}--Height: #{pf-size-prem(36px)};
|
|
12
|
+
--#{$avatar}--FontSize: #{pf-size-prem(36px)};
|
|
12
13
|
--#{$avatar}--m-sm--Width: #{pf-size-prem(24px)};
|
|
13
14
|
--#{$avatar}--m-sm--Height: #{pf-size-prem(24px)};
|
|
15
|
+
--#{$avatar}--m-sm--FontSize: #{pf-size-prem(24px)};
|
|
14
16
|
--#{$avatar}--m-md--Width: #{pf-size-prem(36px)};
|
|
15
17
|
--#{$avatar}--m-md--Height: #{pf-size-prem(36px)};
|
|
18
|
+
--#{$avatar}--m-md--FontSize: #{pf-size-prem(36px)};
|
|
16
19
|
--#{$avatar}--m-lg--Width: #{pf-size-prem(72px)};
|
|
17
20
|
--#{$avatar}--m-lg--Height: #{pf-size-prem(72px)};
|
|
21
|
+
--#{$avatar}--m-lg--FontSize: #{pf-size-prem(72px)};
|
|
18
22
|
--#{$avatar}--m-xl--Width: #{pf-size-prem(128px)};
|
|
19
23
|
--#{$avatar}--m-xl--Height: #{pf-size-prem(128px)};
|
|
24
|
+
--#{$avatar}--m-xl--FontSize: #{pf-size-prem(128px)};
|
|
20
25
|
|
|
21
26
|
// Bordered
|
|
22
27
|
--#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
|
|
23
28
|
--#{$avatar}--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
29
|
+
|
|
30
|
+
// Colorful
|
|
31
|
+
--#{$avatar}--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
32
|
+
--#{$avatar}--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
33
|
+
--#{$avatar}--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
|
|
34
|
+
--#{$avatar}--m-gray--BorderColor: var(--pf-t--global--border--color--default);
|
|
35
|
+
--#{$avatar}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
|
|
36
|
+
--#{$avatar}--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
|
|
37
|
+
--#{$avatar}--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
|
|
38
|
+
--#{$avatar}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
|
|
39
|
+
--#{$avatar}--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
|
|
40
|
+
--#{$avatar}--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
|
|
41
|
+
--#{$avatar}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
|
|
42
|
+
--#{$avatar}--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
|
|
43
|
+
--#{$avatar}--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
|
|
44
|
+
--#{$avatar}--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
|
|
45
|
+
--#{$avatar}--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
|
|
46
|
+
--#{$avatar}--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
|
|
47
|
+
--#{$avatar}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
|
|
48
|
+
--#{$avatar}--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
|
|
49
|
+
--#{$avatar}--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
|
|
50
|
+
--#{$avatar}--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
|
|
51
|
+
--#{$avatar}--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
|
|
52
|
+
--#{$avatar}--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
|
|
53
|
+
--#{$avatar}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
|
|
54
|
+
--#{$avatar}--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
|
|
55
|
+
--#{$avatar}--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
|
|
56
|
+
--#{$avatar}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
|
|
57
|
+
--#{$avatar}--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
|
|
58
|
+
--#{$avatar}--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
|
|
59
|
+
|
|
60
|
+
// Initials
|
|
61
|
+
--#{$avatar}__initials--FontSize: var(--pf-t--global--font--size--body--lg);
|
|
62
|
+
--#{$avatar}__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
63
|
+
--#{$avatar}--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
64
|
+
--#{$avatar}--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
65
|
+
--#{$avatar}--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
|
|
66
|
+
--#{$avatar}--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
|
|
67
|
+
--#{$avatar}--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
|
|
68
|
+
--#{$avatar}--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
|
|
69
|
+
--#{$avatar}--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
|
|
70
|
+
--#{$avatar}--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
|
|
71
|
+
--#{$avatar}--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
|
|
72
|
+
--#{$avatar}--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
|
|
73
|
+
--#{$avatar}--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
|
|
74
|
+
--#{$avatar}--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
|
|
75
|
+
--#{$avatar}--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
|
|
76
|
+
--#{$avatar}--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
|
|
77
|
+
--#{$avatar}--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
|
|
78
|
+
--#{$avatar}--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
|
|
79
|
+
--#{$avatar}--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
|
|
24
80
|
}
|
|
25
81
|
|
|
26
82
|
.#{$avatar} {
|
|
27
83
|
width: var(--#{$avatar}--Width);
|
|
28
84
|
height: var(--#{$avatar}--Height);
|
|
85
|
+
font-size: var(--#{$avatar}--FontSize);
|
|
29
86
|
border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
|
|
30
87
|
border-radius: var(--#{$avatar}--BorderRadius);
|
|
31
88
|
|
|
@@ -40,4 +97,107 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
|
|
|
40
97
|
@include pf-v6-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v6-c-avatar--breakpoint-map);
|
|
41
98
|
}
|
|
42
99
|
}
|
|
100
|
+
|
|
101
|
+
&.pf-m-sm {
|
|
102
|
+
--#{$avatar}--FontSize: var(--#{$avatar}--m-sm--FontSize);
|
|
103
|
+
--#{$avatar}__initials--FontSize: var(--#{$avatar}--m-sm__initials--FontSize);
|
|
104
|
+
--#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-sm__initials--FontWeight);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&.pf-m-lg {
|
|
108
|
+
--#{$avatar}--FontSize: var(--#{$avatar}--m-lg--FontSize);
|
|
109
|
+
--#{$avatar}__initials--FontSize: var(--#{$avatar}--m-lg__initials--FontSize);
|
|
110
|
+
--#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-lg__initials--FontWeight);
|
|
111
|
+
--#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-lg__initials--FontFamily);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.pf-m-xl {
|
|
115
|
+
--#{$avatar}--FontSize: var(--#{$avatar}--m-xl--FontSize);
|
|
116
|
+
--#{$avatar}__initials--FontSize: var(--#{$avatar}--m-xl__initials--FontSize);
|
|
117
|
+
--#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-xl__initials--FontWeight);
|
|
118
|
+
--#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-xl__initials--FontFamily);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&.pf-m-colorful {
|
|
122
|
+
--#{$avatar}--BorderWidth: var(--#{$avatar}--m-colorful--BorderWidth);
|
|
123
|
+
|
|
124
|
+
display: inline-flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
justify-content: center;
|
|
127
|
+
overflow: clip;
|
|
128
|
+
vertical-align: middle;
|
|
129
|
+
color: var(--#{$avatar}--m-colorful--Color, inherit);
|
|
130
|
+
background-color: var(--#{$avatar}--m-colorful--BackgroundColor, transparent);
|
|
131
|
+
border-color: var(--#{$avatar}--m-colorful--BorderColor, transparent);
|
|
132
|
+
|
|
133
|
+
&.pf-m-red {
|
|
134
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-red--BackgroundColor);
|
|
135
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-red--Color);
|
|
136
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-red--BorderColor);
|
|
137
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-red__initials--Color);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&.pf-m-orangered {
|
|
141
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-orangered--BackgroundColor);
|
|
142
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-orangered--Color);
|
|
143
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-orangered--BorderColor);
|
|
144
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-orangered__initials--Color);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&.pf-m-orange {
|
|
148
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-orange--BackgroundColor);
|
|
149
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-orange--Color);
|
|
150
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-orange--BorderColor);
|
|
151
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-orange__initials--Color);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&.pf-m-yellow {
|
|
155
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-yellow--BackgroundColor);
|
|
156
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-yellow--Color);
|
|
157
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-yellow--BorderColor);
|
|
158
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-yellow__initials--Color);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&.pf-m-green {
|
|
162
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-green--BackgroundColor);
|
|
163
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-green--Color);
|
|
164
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-green--BorderColor);
|
|
165
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-green__initials--Color);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&.pf-m-teal {
|
|
169
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-teal--BackgroundColor);
|
|
170
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-teal--Color);
|
|
171
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-teal--BorderColor);
|
|
172
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-teal__initials--Color);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&.pf-m-blue {
|
|
176
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-blue--BackgroundColor);
|
|
177
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-blue--Color);
|
|
178
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-blue--BorderColor);
|
|
179
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-blue__initials--Color);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&.pf-m-purple {
|
|
183
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-purple--BackgroundColor);
|
|
184
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-purple--Color);
|
|
185
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-purple--BorderColor);
|
|
186
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-purple__initials--Color);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&.pf-m-gray {
|
|
190
|
+
--#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-gray--BackgroundColor);
|
|
191
|
+
--#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-gray--Color);
|
|
192
|
+
--#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-gray--BorderColor);
|
|
193
|
+
--#{$avatar}__initials--Color: var(--#{$avatar}--m-gray__initials--Color);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.#{$avatar}__initials {
|
|
198
|
+
font-family: var(--#{$avatar}__initials--FontFamily, revert);
|
|
199
|
+
font-size: var(--#{$avatar}__initials--FontSize);
|
|
200
|
+
font-weight: var(--#{$avatar}__initials--FontWeight);
|
|
201
|
+
color: var(--#{$avatar}__initials--Color);
|
|
202
|
+
}
|
|
43
203
|
}
|
|
@@ -175,6 +175,8 @@
|
|
|
175
175
|
--pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
176
176
|
--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
177
177
|
--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
178
|
+
--pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
179
|
+
--pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
178
180
|
}
|
|
179
181
|
:where(.pf-v6-theme-glass) .pf-v6-c-table {
|
|
180
182
|
--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
|
|
@@ -244,6 +246,26 @@
|
|
|
244
246
|
.pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
|
|
245
247
|
--pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
|
|
246
248
|
}
|
|
249
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
|
|
250
|
+
position: sticky;
|
|
251
|
+
inset-block-end: 0;
|
|
252
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
|
|
253
|
+
background: var(--pf-v6-c-table--BackgroundColor);
|
|
254
|
+
}
|
|
255
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
|
|
256
|
+
position: absolute;
|
|
257
|
+
inset: 0;
|
|
258
|
+
z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
|
|
259
|
+
pointer-events: none;
|
|
260
|
+
content: "";
|
|
261
|
+
border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
262
|
+
}
|
|
263
|
+
.pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
|
|
264
|
+
border-block-end: 0;
|
|
265
|
+
}
|
|
266
|
+
.pf-v6-c-table.pf-m-plain {
|
|
267
|
+
--pf-v6-c-table--BackgroundColor: transparent;
|
|
268
|
+
}
|
|
247
269
|
.pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
|
|
248
270
|
.pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
|
|
249
271
|
.pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
|
|
@@ -978,6 +1000,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
978
1000
|
border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
|
|
979
1001
|
}
|
|
980
1002
|
|
|
1003
|
+
.pf-v6-c-table__tfoot {
|
|
1004
|
+
--pf-v6-c-table__tr--BorderBlockEndWidth: 0;
|
|
1005
|
+
vertical-align: top;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
981
1008
|
.pf-v6-c-table__icon-inline {
|
|
982
1009
|
display: flex;
|
|
983
1010
|
align-items: center;
|
|
@@ -269,6 +269,10 @@
|
|
|
269
269
|
--#{$table}--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
|
|
270
270
|
--#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
|
|
271
271
|
--#{$table}--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
|
|
272
|
+
|
|
273
|
+
// * Table sticky footer
|
|
274
|
+
--#{$table}--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
|
|
275
|
+
--#{$table}--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
|
|
272
276
|
|
|
273
277
|
:where(.pf-v6-theme-glass) & {
|
|
274
278
|
--#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
|
|
@@ -373,6 +377,34 @@
|
|
|
373
377
|
}
|
|
374
378
|
}
|
|
375
379
|
|
|
380
|
+
// - Table sticky footer
|
|
381
|
+
&.pf-m-sticky-footer {
|
|
382
|
+
> .#{$table}__tfoot {
|
|
383
|
+
position: sticky;
|
|
384
|
+
inset-block-end: 0;
|
|
385
|
+
z-index: var(--#{$table}--m-sticky-footer--ZIndex);
|
|
386
|
+
background: var(--#{$table}--BackgroundColor);
|
|
387
|
+
|
|
388
|
+
&::before {
|
|
389
|
+
position: absolute;
|
|
390
|
+
inset: 0;
|
|
391
|
+
z-index: var(--#{$table}--m-sticky-footer--border--ZIndex);
|
|
392
|
+
pointer-events: none;
|
|
393
|
+
content: "";
|
|
394
|
+
border-block-start: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
> .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
|
|
399
|
+
border-block-end: 0;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
// - Table plain
|
|
404
|
+
&.pf-m-plain {
|
|
405
|
+
--#{$table}--BackgroundColor: transparent;
|
|
406
|
+
}
|
|
407
|
+
|
|
376
408
|
// - Table striped
|
|
377
409
|
// stylelint-disable
|
|
378
410
|
&.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
|
|
@@ -544,8 +576,8 @@
|
|
|
544
576
|
// }
|
|
545
577
|
|
|
546
578
|
.#{$table}__td.pf-m-action {
|
|
547
|
-
|
|
548
|
-
|
|
579
|
+
--#{$table}--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
|
|
580
|
+
--#{$table}--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
|
|
549
581
|
}
|
|
550
582
|
|
|
551
583
|
// - Table sort
|
|
@@ -1235,8 +1267,8 @@
|
|
|
1235
1267
|
}
|
|
1236
1268
|
|
|
1237
1269
|
.#{$table}__td.pf-m-action {
|
|
1238
|
-
|
|
1239
|
-
|
|
1270
|
+
--#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
|
|
1271
|
+
--#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
|
|
1240
1272
|
}
|
|
1241
1273
|
|
|
1242
1274
|
.#{$table}__icon {
|
|
@@ -1331,6 +1363,13 @@
|
|
|
1331
1363
|
}
|
|
1332
1364
|
}
|
|
1333
1365
|
|
|
1366
|
+
// - Table tfoot
|
|
1367
|
+
.#{$table}__tfoot {
|
|
1368
|
+
--#{$table}__tr--BorderBlockEndWidth: 0;
|
|
1369
|
+
|
|
1370
|
+
vertical-align: top;
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1334
1373
|
// - Table icon inline
|
|
1335
1374
|
.#{$table}__icon-inline {
|
|
1336
1375
|
display: flex;
|