Commit | Line | Data |
---|---|---|
4db4751b JR |
1 | .containerList { |
2 | > li { | |
3 | position: relative; | |
8a52619a TD |
4 | transition: background-color 0.2s; |
5 | ||
4db4751b JR |
6 | @include screen-md-down { |
7 | padding: 10px 0; | |
8 | } | |
8a52619a | 9 | |
4db4751b JR |
10 | @include screen-lg { |
11 | padding: 20px; | |
929f7e47 | 12 | } |
8a52619a | 13 | |
4db4751b | 14 | &:not(:last-child) { |
1a75e228 | 15 | border-bottom: 1px solid var(--wcfContentBorderInner); |
b8eab696 | 16 | } |
8a52619a | 17 | |
4db4751b | 18 | &:first-child { |
1a75e228 | 19 | border-top: 1px solid var(--wcfContentBorder); |
7dfd5afb | 20 | } |
8a52619a | 21 | |
4db4751b | 22 | &:last-child { |
1a75e228 | 23 | border-bottom: 1px solid var(--wcfContentBorder); |
7dfd5afb | 24 | } |
8a52619a | 25 | |
4db4751b | 26 | &:hover { |
1a75e228 | 27 | background-color: var(--wcfTabularBoxBackgroundActive); |
fde578c4 | 28 | } |
8a52619a | 29 | |
4db4751b JR |
30 | &.showMore { |
31 | text-align: center; | |
8a52619a | 32 | |
4db4751b JR |
33 | &:hover { |
34 | background-color: transparent; | |
35 | } | |
f5ba6d2c | 36 | } |
8a52619a | 37 | |
4db4751b JR |
38 | .containerHeadline { |
39 | position: relative; | |
8a52619a | 40 | |
4db4751b | 41 | > .containerContentType { |
1a75e228 | 42 | color: var(--wcfContentDimmedText); |
4db4751b JR |
43 | position: absolute; |
44 | top: 5px; | |
45 | right: 0; | |
8a52619a | 46 | |
4db4751b JR |
47 | @include screen-xs { |
48 | display: none; | |
929f7e47 | 49 | } |
f5ba6d2c | 50 | } |
4db4751b | 51 | } |
8a52619a | 52 | |
4db4751b JR |
53 | &.containerListButtonGroup { |
54 | text-align: right; | |
8a52619a | 55 | |
4db4751b JR |
56 | &:hover { |
57 | background-color: transparent; | |
f5ba6d2c | 58 | } |
8a52619a | 59 | |
4db4751b JR |
60 | > .buttonGroup { |
61 | display: inline-flex; | |
8a52619a | 62 | |
4db4751b JR |
63 | &:not(:first-child) { |
64 | margin-left: 5px; | |
929f7e47 | 65 | } |
f5ba6d2c | 66 | } |
4db4751b | 67 | } |
8a52619a | 68 | |
4db4751b JR |
69 | @include screen-md-down { |
70 | .hasMobileNavigation > .containerHeadline > h3 { | |
71 | padding-right: 30px; | |
3f1e37b5 | 72 | } |
8a52619a | 73 | |
4db4751b JR |
74 | .buttonGroupNavigation { |
75 | position: absolute; | |
76 | right: 0; | |
77 | top: 14px; | |
8a52619a | 78 | |
4db4751b JR |
79 | &.open { |
80 | left: 0; | |
8a52619a | 81 | |
4db4751b JR |
82 | // dropdown is contained within this element, required to have it stand |
83 | // above any succeeding siblings | |
84 | z-index: 10; | |
8a52619a | 85 | |
4db4751b JR |
86 | > .buttonList { |
87 | display: block; | |
88 | visibility: visible; | |
f5ba6d2c | 89 | } |
4db4751b | 90 | } |
8a52619a | 91 | |
4db4751b JR |
92 | > .dropdownLabel { |
93 | left: calc(100% - 24px); | |
94 | position: relative; | |
95 | } | |
8a52619a | 96 | |
4db4751b JR |
97 | > .buttonList { |
98 | @include dropdownMenu; | |
8a52619a | 99 | |
4db4751b JR |
100 | position: static !important; |
101 | top: 0; | |
8a52619a | 102 | |
4db4751b JR |
103 | > li { |
104 | .invisible { | |
105 | display: inline; | |
106 | padding-left: 5px; | |
f5ba6d2c AE |
107 | } |
108 | } | |
4db4751b JR |
109 | } |
110 | } | |
111 | } | |
8a52619a | 112 | |
4db4751b JR |
113 | @include screen-lg { |
114 | .buttonGroupNavigation { | |
115 | opacity: 0; | |
116 | position: absolute; | |
117 | right: 20px; | |
118 | top: 15px; | |
8a52619a TD |
119 | transition: opacity 0.12s; |
120 | ||
4db4751b JR |
121 | > .dropdownLabel { |
122 | display: none; | |
123 | } | |
8a52619a | 124 | |
4db4751b | 125 | > ul { |
1a75e228 | 126 | background-color: var(--wcfContentBackground); |
3a47fff9 AE |
127 | border-radius: var(--wcfBorderRadius); |
128 | box-shadow: var(--wcfBoxShadowCard); | |
8a52619a | 129 | |
4db4751b JR |
130 | > li { |
131 | margin-right: 0; | |
8a52619a | 132 | |
4db4751b | 133 | &:not(:last-child) { |
3a47fff9 | 134 | border-right: 1px solid var(--wcfContentContainerBorder); |
4db4751b | 135 | } |
8a52619a | 136 | |
053b68c6 AE |
137 | > a, |
138 | > button { | |
4db4751b JR |
139 | display: inline-block; |
140 | padding: 3px 5px; | |
8a52619a | 141 | |
053b68c6 | 142 | > fa-icon, |
d8684224 | 143 | > .invisible { |
e02ddc44 | 144 | opacity: 0.5; |
f5ba6d2c | 145 | } |
929f7e47 | 146 | } |
8a52619a | 147 | |
4db4751b JR |
148 | &.active, |
149 | &:hover { | |
053b68c6 AE |
150 | > a, |
151 | > button { | |
152 | > fa-icon, | |
4db4751b | 153 | > .invisible { |
1a75e228 | 154 | color: var(--wcfContentText); |
053b68c6 | 155 | opacity: 1; |
4db4751b JR |
156 | } |
157 | } | |
158 | } | |
159 | } | |
160 | } | |
161 | } | |
8a52619a | 162 | |
4db4751b JR |
163 | &:hover .buttonGroupNavigation { |
164 | opacity: 1; | |
165 | } | |
166 | } | |
167 | } | |
8a52619a | 168 | |
4db4751b JR |
169 | @include screen-sm-down { |
170 | &.doubleColumned, | |
171 | &.tripleColumned { | |
172 | > li + li { | |
173 | margin-top: 10px; | |
174 | } | |
175 | } | |
176 | } | |
8a52619a | 177 | |
4db4751b JR |
178 | @include screen-md-up { |
179 | &.doubleColumned, | |
180 | &.tripleColumned { | |
181 | display: flex; | |
182 | flex-wrap: wrap; | |
8a52619a | 183 | |
4db4751b | 184 | > li { |
9133f318 AE |
185 | // this will cause the mobile drop-down menu to be cut-off |
186 | // overflow: hidden; | |
4db4751b | 187 | padding-right: 15px; |
8a52619a | 188 | |
4db4751b JR |
189 | .containerBoxContent { |
190 | overflow: hidden; | |
8a52619a | 191 | |
4db4751b JR |
192 | h3 { |
193 | overflow: hidden; | |
194 | text-overflow: ellipsis; | |
195 | white-space: nowrap; | |
929f7e47 MW |
196 | } |
197 | } | |
8a52619a | 198 | |
4db4751b JR |
199 | &:first-child { |
200 | border-top: none; | |
201 | } | |
8a52619a | 202 | |
4db4751b JR |
203 | &:last-child { |
204 | border-bottom: none; | |
205 | } | |
929f7e47 | 206 | } |
8a52619a | 207 | |
1a75e228 AE |
208 | border-top: 1px solid var(--wcfContentBorder); |
209 | border-bottom: 1px solid var(--wcfContentBorder); | |
4db4751b | 210 | } |
8a52619a | 211 | |
4db4751b JR |
212 | &.doubleColumned > li { |
213 | flex: 0 0 50%; | |
214 | max-width: 50%; | |
8a52619a TD |
215 | |
216 | &:nth-child(2n + 1):nth-last-child(-n + 2) { | |
816336cc MW |
217 | border-bottom: none; |
218 | } | |
929f7e47 | 219 | } |
8a52619a | 220 | |
4db4751b | 221 | &.tripleColumned > li { |
212264b7 AE |
222 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
223 | flex-grow: 0; | |
224 | flex-shrink: 0; | |
225 | flex-basis: calc(100% / 3); | |
8a52619a TD |
226 | |
227 | &:nth-child(3n + 1):nth-last-child(-n + 3), | |
228 | &:nth-child(3n + 1):nth-last-child(-n + 3) ~ li { | |
816336cc MW |
229 | border-bottom: none; |
230 | } | |
f5ba6d2c | 231 | } |
929f7e47 | 232 | } |
b8eab696 AE |
233 | } |
234 | ||
3a47fff9 AE |
235 | @include screen-lg { |
236 | html[data-color-scheme="dark"] .containerList > li .buttonGroupNavigation > ul { | |
237 | border: 1px solid var(--wcfContentContainerBorder); | |
238 | } | |
239 | } | |
240 | ||
b8eab696 | 241 | .containerBoxList { |
f216765b AE |
242 | @include screen-sm-down { |
243 | &.doubleColumned, | |
244 | &.tripleColumned { | |
245 | > li + li { | |
246 | margin-top: 10px; | |
247 | } | |
248 | } | |
249 | } | |
8a52619a | 250 | |
f216765b | 251 | @include screen-md-up { |
63e2f52f AE |
252 | &.doubleColumned, |
253 | &.tripleColumned { | |
254 | display: flex; | |
255 | flex-wrap: wrap; | |
256 | margin-bottom: -15px; | |
8a52619a | 257 | |
63e2f52f | 258 | > li { |
95961bdf | 259 | overflow: hidden; |
63e2f52f AE |
260 | padding-right: 15px; |
261 | margin-bottom: 15px; | |
8a52619a | 262 | |
63e2f52f | 263 | .containerBoxContent { |
95961bdf | 264 | overflow: hidden; |
8a52619a | 265 | |
63e2f52f AE |
266 | h3 { |
267 | overflow: hidden; | |
268 | text-overflow: ellipsis; | |
269 | white-space: nowrap; | |
270 | } | |
95961bdf MW |
271 | } |
272 | } | |
b8eab696 | 273 | } |
8a52619a | 274 | |
63e2f52f AE |
275 | &.doubleColumned > li { |
276 | flex: 0 0 50%; | |
ce280017 | 277 | max-width: 50%; |
63e2f52f | 278 | } |
8a52619a | 279 | |
63e2f52f | 280 | &.tripleColumned > li { |
212264b7 AE |
281 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
282 | flex-grow: 0; | |
283 | flex-shrink: 0; | |
284 | flex-basis: calc(100% / 3); | |
63e2f52f | 285 | } |
b8eab696 | 286 | } |
b8eab696 | 287 | } |
5d8f8836 | 288 | |
f32b3ddd | 289 | .flexibleCategoryList { |
8a52619a TD |
290 | position: relative; |
291 | ||
292 | > li { | |
293 | margin-bottom: 14px; | |
294 | ||
295 | > ol { | |
296 | margin-left: 21px; | |
297 | } | |
298 | ||
299 | > ol > li > ol { | |
300 | margin-bottom: 7px; | |
301 | margin-left: 21px; | |
302 | ||
303 | > li { | |
1a75e228 | 304 | font-size: var(--wcfFontSizeSmall); |
8a52619a TD |
305 | } |
306 | } | |
307 | } | |
f32b3ddd G |
308 | } |
309 | ||
326db33c AE |
310 | .containerListDisplayOptions { |
311 | align-items: center; | |
312 | border-bottom: 2px solid currentColor; | |
1a75e228 | 313 | color: var(--wcfTabularBoxHeadline); |
326db33c AE |
314 | display: flex; |
315 | } | |
316 | ||
317 | .containerListSortOptions, | |
318 | .containerListActiveFilters, | |
319 | .containerListFilterOptions { | |
320 | padding: 5px 10px; | |
321 | } | |
322 | ||
323 | @include screen-sm-down { | |
324 | .containerListActiveFilters { | |
325 | display: none; | |
326 | } | |
327 | } | |
328 | ||
329 | .containerListSortOptions { | |
330 | flex: 1 auto; | |
8a52619a | 331 | |
326db33c AE |
332 | > .dropdown { |
333 | margin-left: 10px; | |
334 | } | |
f4625fe0 AE |
335 | |
336 | fa-icon { | |
1a75e228 | 337 | color: var(--wcfTabularBoxHeadline); |
f4625fe0 | 338 | } |
326db33c AE |
339 | } |
340 | ||
341 | .containerListActiveFilters, | |
342 | .containerListFilterOptions { | |
343 | flex: 0 auto; | |
344 | } | |
345 | ||
f32b3ddd | 346 | @include screen-md-up { |
8a52619a TD |
347 | .flexibleCategoryList:not(.flexibleCategoryListDisabled) { |
348 | /* WebKit */ | |
349 | -webkit-column-count: 2; | |
350 | ||
351 | /* Firefox */ | |
352 | -moz-column-count: 2; | |
353 | ||
354 | /* CSS 3 / Internet Explorer */ | |
355 | column-count: 2; | |
356 | ||
357 | > li { | |
358 | /* WebKit */ | |
359 | -webkit-column-break-inside: avoid; | |
360 | ||
361 | /* CSS 3 / Internet Explorer */ | |
362 | break-inside: avoid; | |
363 | ||
364 | > ol > li > ol { | |
365 | font-size: 0; | |
366 | ||
367 | > li { | |
368 | display: inline-block; | |
369 | @include wcfFontSmall; | |
370 | } | |
371 | } | |
372 | } | |
373 | } | |
374 | ||
375 | /* Firefox */ | |
376 | @-moz-document url-prefix() { | |
377 | .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li { | |
378 | display: block; | |
379 | overflow: hidden; | |
380 | } | |
381 | } | |
f32b3ddd | 382 | } |
b03aa025 | 383 | |
dc21e2b7 AE |
384 | .styleListPreviewImage { |
385 | text-align: center; | |
386 | } | |
387 | ||
b03aa025 MW |
388 | @include screen-md-down { |
389 | .styleList > li { | |
390 | padding: 10px; | |
391 | } | |
392 | } |