Commit | Line | Data |
---|---|---|
bb6ef47e MW |
1 | /* default styling for all boxes */ |
2 | .box { | |
3 | box-sizing: border-box; | |
4 | } | |
5 | ||
6 | .boxImage { | |
7 | img { | |
8 | max-width: 100%; | |
9 | } | |
10 | } | |
11 | ||
12 | .boxTitle { | |
5908f54f | 13 | @include wcfFontHeadline; |
bb6ef47e MW |
14 | |
15 | & + .boxContent { | |
95961bdf MW |
16 | margin-top: 20px; |
17 | } | |
18 | ||
19 | .badge { | |
20 | top: -2px; | |
bb6ef47e MW |
21 | } |
22 | } | |
23 | ||
24 | .boxContent { | |
25 | & + .boxContent, | |
26 | & + .boxTitle { | |
27 | margin-top: 20px; | |
28 | } | |
29 | } | |
30 | ||
31 | /* styling for boxes in <hero> position */ | |
32 | .boxesHero { | |
33 | .box { | |
34 | padding: 40px; | |
35 | text-align: center; | |
36 | } | |
37 | ||
38 | .boxTitle { | |
5908f54f | 39 | @include wcfFontTitle; |
bb6ef47e MW |
40 | } |
41 | ||
42 | .boxWithImage { | |
43 | display: flex; | |
44 | flex-wrap: wrap; | |
45 | ||
46 | .boxImage, | |
47 | .boxTitle, | |
48 | .boxContent { | |
49 | flex: 0 0 100%; | |
50 | } | |
51 | ||
52 | .boxImage { | |
53 | order: 3; | |
54 | margin-top: 40px; | |
55 | } | |
56 | } | |
57 | } | |
58 | ||
59 | /* styling for boxes in <headerBoxes> position */ | |
60 | .boxesHeaderBoxes { | |
61 | background-color: rgb(247, 248, 250); // @todo | |
62 | ||
c734a302 | 63 | .boxContainer { |
bb6ef47e MW |
64 | display: flex; |
65 | flex-wrap: wrap; | |
c734a302 MW |
66 | margin-left: -10px; |
67 | margin-right: -10px; | |
bb6ef47e MW |
68 | padding: 40px 0; |
69 | } | |
70 | ||
71 | .box { | |
72 | flex: 0 0 25%; | |
95961bdf | 73 | overflow: hidden; |
bb6ef47e | 74 | padding-left: 10px; |
c734a302 | 75 | padding-right: 10px; |
95961bdf | 76 | |
bb6ef47e MW |
77 | &:nth-child(4n+1):not(:first-child) { |
78 | margin-top: 20px; | |
79 | } | |
80 | ||
81 | /* one item */ | |
82 | &:first-child:nth-last-child(1) { | |
83 | flex-basis: 100%; | |
84 | } | |
85 | ||
86 | /* two items */ | |
87 | &:first-child:nth-last-child(2), | |
88 | &:first-child:nth-last-child(2) ~ .box { | |
89 | flex-basis: 50%; | |
90 | } | |
91 | ||
92 | /* three items */ | |
93 | &:first-child:nth-last-child(3), | |
94 | &:first-child:nth-last-child(3) ~ .box { | |
95 | flex-basis: 33.3333%; | |
96 | } | |
937f57cf AE |
97 | |
98 | a:hover { | |
99 | text-decoration: underline; | |
100 | } | |
bb6ef47e MW |
101 | } |
102 | ||
103 | .boxImage { | |
104 | margin-bottom: 10px; | |
105 | text-align: center; | |
106 | } | |
107 | } | |
108 | ||
109 | /* styling for boxes in <top>/<bottom> position */ | |
110 | .boxesTop, | |
111 | .boxesBottom { | |
67778bff AE |
112 | flex: 0 0 auto; |
113 | ||
bb6ef47e | 114 | .box { |
41ec911a MW |
115 | margin-bottom: 40px; |
116 | margin-top: 40px; | |
bb6ef47e MW |
117 | } |
118 | ||
10ff3d63 MW |
119 | .boxTitle { |
120 | color: $wcfContentHeadlineText; | |
121 | ||
5908f54f | 122 | @include wcfFontSection; |
10ff3d63 MW |
123 | |
124 | a { | |
125 | color: $wcfContentHeadlineLink; | |
126 | ||
127 | &:hover { | |
128 | color: $wcfContentHeadlineLinkActive; | |
129 | } | |
130 | } | |
131 | } | |
132 | ||
bb6ef47e | 133 | .boxWithImage { |
5908f54f | 134 | @include clearfix; |
bb6ef47e MW |
135 | |
136 | .boxTitle, | |
137 | .boxContent { | |
138 | margin-left: calc(20% + 30px); | |
139 | } | |
140 | } | |
141 | ||
142 | .boxImage { | |
143 | float: left; | |
144 | width: 20%; | |
145 | } | |
146 | } | |
147 | ||
148 | .boxesTop { | |
149 | border-bottom: 1px solid $wcfContentBorderInner; | |
150 | } | |
151 | ||
152 | .boxesBottom { | |
153 | border-top: 1px solid $wcfContentBorderInner; | |
154 | } | |
155 | ||
156 | /* styling for boxes in <sidebarLeft>/<sidebarRight> position */ | |
157 | .boxesSidebarLeft, | |
158 | .boxesSidebarRight { | |
159 | color: $wcfSidebarText; | |
160 | ||
161 | a { | |
162 | color: $wcfSidebarLink; | |
163 | ||
164 | > .icon { | |
165 | color: $wcfSidebarLink; | |
166 | } | |
167 | ||
168 | &:hover { | |
169 | color: $wcfSidebarLinkActive; | |
170 | ||
171 | > .icon { | |
172 | color: $wcfSidebarLinkActive; | |
173 | } | |
174 | } | |
175 | } | |
176 | ||
177 | small, | |
178 | .dimmed { | |
179 | color: $wcfSidebarDimmedText; | |
180 | ||
181 | a { | |
182 | color: $wcfSidebarDimmedLink; | |
183 | ||
184 | &:hover { | |
185 | color: $wcfSidebarDimmedLinkActive; | |
186 | } | |
187 | } | |
188 | } | |
189 | ||
e9f3957f MW |
190 | .boxTitle { |
191 | color: $wcfSidebarHeadlineLink; | |
192 | ||
193 | &:hover { | |
194 | color: $wcfSidebarHeadlineLinkActive; | |
195 | } | |
196 | } | |
197 | ||
bb6ef47e | 198 | .box { |
0e8421c9 MW |
199 | &:not(.boxBorderless) { |
200 | background-color: $wcfSidebarBackground; | |
0e8421c9 | 201 | |
63e2f52f AE |
202 | @include large-screen-only { |
203 | padding: 20px; | |
204 | ||
205 | .boxMenu { | |
206 | margin-left: -20px; | |
207 | margin-right: -20px; | |
208 | } | |
209 | } | |
210 | ||
211 | @include small-screen-only { | |
212 | padding: 20px 10px; | |
213 | ||
214 | .boxMenu { | |
215 | margin-left: -10px; | |
216 | margin-right: -10px; | |
217 | } | |
0e8421c9 MW |
218 | } |
219 | } | |
bb6ef47e MW |
220 | |
221 | &:not(:first-child) { | |
95961bdf | 222 | margin-top: 30px; |
bb6ef47e | 223 | } |
487db634 MW |
224 | |
225 | &.boxAlternative { | |
226 | background-color: transparent; | |
227 | border: 1px solid $wcfContentBorderInner; | |
228 | } | |
229 | ||
230 | &.boxError { | |
231 | background-color: $wcfStatusErrorBackground; | |
232 | color: $wcfStatusErrorText; | |
233 | } | |
234 | ||
235 | &.boxInfo { | |
236 | background-color: $wcfStatusInfoBackground; | |
237 | color: $wcfStatusInfoText; | |
238 | } | |
239 | ||
240 | &.boxSuccess { | |
241 | background-color: $wcfStatusSuccessBackground; | |
242 | color: $wcfStatusSuccessText; | |
243 | } | |
244 | ||
245 | &.boxWarning { | |
246 | background-color: $wcfStatusWarningBackground; | |
247 | color: $wcfStatusWarningText; | |
248 | } | |
0e8421c9 MW |
249 | |
250 | .boxMenu { | |
251 | .boxMenuLink { | |
252 | display: block; | |
253 | padding: 5px 20px; | |
254 | ||
255 | .badge { | |
256 | float: right; | |
257 | } | |
258 | } | |
259 | ||
260 | li.active > .boxMenuLink { | |
261 | background-color: $wcfContentBackground; | |
262 | } | |
263 | ||
264 | .boxMenuDepth1 .boxMenuLink { | |
265 | padding-left: 40px; | |
266 | } | |
267 | ||
268 | .boxMenuDepth2 .boxMenuLink { | |
269 | padding-left: 60px; | |
270 | } | |
271 | } | |
bb6ef47e MW |
272 | } |
273 | ||
274 | .boxWithImage { | |
5908f54f | 275 | @include clearfix; |
bb6ef47e MW |
276 | |
277 | .boxTitle, | |
278 | .boxContent { | |
279 | margin-left: calc(20% + 10px); | |
280 | } | |
281 | } | |
282 | ||
283 | .boxImage { | |
284 | float: left; | |
285 | width: 20%; | |
286 | } | |
287 | } | |
288 | ||
289 | /* styling for boxes in <contentTop>/<contentBottom> position */ | |
290 | .boxesContentTop, | |
291 | .boxesContentBottom { | |
bb6ef47e MW |
292 | .box { |
293 | &:not(:first-child) { | |
10ff3d63 | 294 | margin-top: 40px; |
bb6ef47e MW |
295 | } |
296 | } | |
297 | ||
298 | .boxWithImage { | |
5908f54f | 299 | @include clearfix; |
bb6ef47e MW |
300 | |
301 | .boxTitle, | |
302 | .boxContent { | |
303 | margin-left: calc(20% + 20px); | |
304 | } | |
305 | } | |
306 | ||
72a7f9cd MW |
307 | .boxTitle { |
308 | color: $wcfContentHeadlineText; | |
309 | ||
5908f54f | 310 | @include wcfFontSection; |
10ff3d63 | 311 | |
72a7f9cd MW |
312 | a { |
313 | color: $wcfContentHeadlineLink; | |
314 | ||
315 | &:hover { | |
316 | color: $wcfContentHeadlineLinkActive; | |
317 | } | |
318 | } | |
319 | } | |
320 | ||
bb6ef47e MW |
321 | .boxImage { |
322 | float: left; | |
323 | width: 20%; | |
324 | } | |
325 | } | |
326 | ||
327 | .boxesContentTop { | |
10ff3d63 | 328 | margin-bottom: 40px; |
bb6ef47e MW |
329 | } |
330 | ||
331 | .boxesContentBottom { | |
10ff3d63 | 332 | margin-top: 40px; |
bb6ef47e MW |
333 | } |
334 | ||
335 | /* styling for boxes in <footerBoxes> position */ | |
336 | .boxesFooterBoxes { | |
337 | background-color: $wcfFooterBoxBackground; | |
338 | color: $wcfFooterBoxText; | |
339 | flex: 0 0 auto; | |
340 | z-index: 40; | |
341 | ||
342 | a { | |
343 | color: $wcfFooterBoxLink; | |
344 | ||
345 | .icon { | |
346 | color: $wcfFooterBoxLink; | |
347 | } | |
348 | ||
349 | &:hover { | |
350 | color: $wcfFooterBoxLinkActive; | |
b4f2a6be | 351 | text-decoration: underline; |
bb6ef47e MW |
352 | |
353 | .icon { | |
354 | color: $wcfFooterBoxLinkActive; | |
355 | } | |
356 | } | |
357 | } | |
358 | ||
359 | .icon { | |
360 | color: $wcfFooterBoxText; | |
361 | } | |
362 | ||
c734a302 | 363 | .boxContainer { |
c734a302 MW |
364 | margin-left: -10px; |
365 | margin-right: -10px; | |
bb6ef47e | 366 | padding: 40px 0; |
63e2f52f AE |
367 | |
368 | @include large-screen-only { | |
369 | display: flex; | |
370 | flex-wrap: wrap; | |
371 | margin-bottom: -40px; | |
372 | } | |
bb6ef47e MW |
373 | } |
374 | ||
375 | .box { | |
95961bdf | 376 | overflow: hidden; |
c734a302 MW |
377 | padding-left: 10px; |
378 | padding-right: 10px; | |
bb6ef47e | 379 | |
63e2f52f AE |
380 | @include large-screen-only { |
381 | flex: 0 0 50%; | |
382 | margin-bottom: 40px; | |
383 | ||
384 | &.boxFullWidth { | |
385 | flex-basis: 100%; | |
386 | } | |
387 | } | |
388 | ||
389 | @include small-screen-only { | |
390 | & + .box { | |
391 | margin-top: 40px; | |
392 | } | |
bb6ef47e | 393 | } |
bb6ef47e MW |
394 | } |
395 | ||
72a7f9cd MW |
396 | .boxTitle { |
397 | color: $wcfFooterBoxHeadlineText; | |
398 | ||
399 | a { | |
400 | color: $wcfFooterBoxHeadlineLink; | |
401 | ||
402 | &:hover { | |
403 | color: $wcfFooterBoxHeadlineLinkActive; | |
404 | } | |
405 | } | |
406 | } | |
407 | ||
bb6ef47e MW |
408 | .boxImage { |
409 | margin-bottom: 10px; | |
410 | text-align: center; | |
411 | } | |
412 | } | |
413 | ||
414 | /* styling for boxes in <footer> position */ | |
415 | .boxesFooter { | |
bb6ef47e MW |
416 | .box { |
417 | &:not(:first-child) { | |
95961bdf | 418 | margin-top: 20px; |
bb6ef47e MW |
419 | } |
420 | } | |
421 | ||
422 | .boxWithImage { | |
5908f54f | 423 | @include clearfix; |
bb6ef47e MW |
424 | |
425 | .boxTitle, | |
426 | .boxContent { | |
427 | margin-left: calc(20% + 30px); | |
428 | } | |
429 | } | |
430 | ||
431 | .boxImage { | |
432 | float: left; | |
433 | width: 20%; | |
434 | } | |
948d7051 MW |
435 | |
436 | .boxMenu { | |
437 | display: flex; | |
438 | flex-wrap: wrap; | |
439 | margin-bottom: -20px; | |
440 | margin-left: -10px; | |
441 | margin-right: -10px; | |
442 | ||
443 | .boxMenuLink { | |
444 | display: inline-block; | |
445 | } | |
446 | ||
447 | > li { | |
448 | flex: 0 0 25%; | |
449 | margin-bottom: 20px; | |
450 | padding-left: 10px; | |
451 | padding-right: 10px; | |
452 | ||
453 | &.boxMenuHasChildren { | |
454 | > .boxMenuLink { | |
5908f54f | 455 | @include wcfFontHeadline; |
948d7051 MW |
456 | |
457 | margin-bottom: 10px; | |
458 | } | |
459 | ||
460 | > ol { | |
461 | a { | |
462 | // use text color instead | |
463 | color: $wcfFooterText; | |
464 | } | |
465 | } | |
466 | } | |
467 | } | |
468 | } | |
bb6ef47e | 469 | } |