1/**
2 * @file
3 * Cards list.
4 */
5
6@import "../base/variables.pcss.css";
7
8:root {
9  --card-list-spacing: var(--space-m);
10  /* Using 100% as base causes issues in IE11. */
11  --cards-two-cols-width: calc(((99.9% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
12  --cards-three-cols-width: calc(((99.9% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
13  --cards-four-cols-width: calc(((99.9% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
14}
15
16.card-list {
17  display: flex;
18  flex-direction: column;
19}
20
21.card-list--two-cols,
22.card-list--four-cols {
23  flex-direction: row;
24  flex-wrap: wrap;
25  align-items: stretch;
26  justify-content: flex-start;
27}
28
29.card-list__item {
30  box-sizing: border-box;
31  margin-bottom: var(--card-list-spacing);
32}
33
34.card-list--two-cols .card-list__item,
35.card-list--four-cols .card-list__item {
36  flex-basis: 100%;
37}
38
39/* 36.75rem theme screenshot width */
40@media screen and (min-width: 36.75rem) {
41  .card-list--four-cols .card-list__item {
42    flex-basis: var(--cards-two-cols-width);
43    max-width: var(--cards-two-cols-width);
44  }
45
46  .card-list--four-cols .card-list__item {
47    margin-right: var(--card-list-spacing);
48  }
49  [dir="rtl"] .card-list--four-cols .card-list__item {
50    margin-right: 0;
51    margin-left: var(--card-list-spacing);
52  }
53
54  .card-list--four-cols .card-list__item:nth-child(even) {
55    margin-right: 0;
56  }
57  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
58    margin-right: 0;
59    margin-left: 0;
60  }
61}
62
63/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
64@media screen and (max-width: 53.75rem) {
65  .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card-list--four-cols .card-list__item {
66    flex-basis: 100%;
67    max-width: 100%;
68    margin-right: 0;
69    margin-left: 0;
70  }
71}
72
73@media screen and (min-width: 70rem) {
74  .card-list--four-cols .card-list__item {
75    flex-basis: var(--cards-three-cols-width);
76    max-width: var(--cards-three-cols-width);
77  }
78
79  .card-list--four-cols .card-list__item:nth-child(even) {
80    margin-right: var(--card-list-spacing);
81  }
82  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
83    margin-right: 0;
84    margin-left: var(--card-list-spacing);
85  }
86
87  .card-list--four-cols .card-list__item:nth-child(3n) {
88    margin-right: 0;
89  }
90  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
91    margin-right: 0;
92    margin-left: 0;
93  }
94}
95
96@media screen and (min-width: 85.375rem) {
97  .card-list--two-cols .card-list__item {
98    flex-basis: var(--cards-two-cols-width);
99    max-width: var(--cards-two-cols-width);
100    margin-right: var(--card-list-spacing);
101  }
102  [dir="rtl"] .card-list--two-cols .card-list__item {
103    margin-right: 0;
104    margin-left: var(--card-list-spacing);
105  }
106
107  .card-list--two-cols .card-list__item:nth-child(even) {
108    margin-right: 0;
109  }
110  [dir="rtl"] .card-list--two-cols .card-list__item:nth-child(even) {
111    margin-right: 0;
112    margin-left: 0;
113  }
114
115  .card-list--four-cols .card-list__item {
116    flex-basis: var(--cards-four-cols-width);
117    max-width: var(--cards-four-cols-width);
118  }
119
120  .card-list--four-cols .card-list__item:nth-child(even) {
121    margin-right: var(--card-list-spacing);
122  }
123  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
124    margin-right: 0;
125    margin-left: var(--card-list-spacing);
126  }
127
128  .card-list--four-cols .card-list__item:nth-child(3n) {
129    margin-right: var(--card-list-spacing);
130  }
131  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
132    margin-right: 0;
133    margin-left: var(--card-list-spacing);
134  }
135
136  .card-list--four-cols .card-list__item:nth-child(4n) {
137    margin-right: 0;
138  }
139  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(4n) {
140    margin-right: 0;
141    margin-left: 0;
142  }
143}
144