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