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 { | |
13 | @extend .wcfFontHeadline; | |
14 | ||
15 | & + .boxContent { | |
16 | margin-top: 10px; | |
17 | } | |
18 | } | |
19 | ||
20 | .boxContent { | |
21 | & + .boxContent, | |
22 | & + .boxTitle { | |
23 | margin-top: 20px; | |
24 | } | |
25 | } | |
26 | ||
27 | /* styling for boxes in <hero> position */ | |
28 | .boxesHero { | |
29 | .box { | |
30 | padding: 40px; | |
31 | text-align: center; | |
32 | } | |
33 | ||
34 | .boxTitle { | |
35 | @extend .wcfFontTitle; | |
36 | ||
37 | & + .boxContent { | |
38 | margin-top: 20px; | |
39 | } | |
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%; | |
bb6ef47e | 73 | padding-left: 10px; |
c734a302 MW |
74 | padding-right: 10px; |
75 | ||
bb6ef47e MW |
76 | &:nth-child(4n+1):not(:first-child) { |
77 | margin-top: 20px; | |
78 | } | |
79 | ||
80 | /* one item */ | |
81 | &:first-child:nth-last-child(1) { | |
82 | flex-basis: 100%; | |
83 | } | |
84 | ||
85 | /* two items */ | |
86 | &:first-child:nth-last-child(2), | |
87 | &:first-child:nth-last-child(2) ~ .box { | |
88 | flex-basis: 50%; | |
89 | } | |
90 | ||
91 | /* three items */ | |
92 | &:first-child:nth-last-child(3), | |
93 | &:first-child:nth-last-child(3) ~ .box { | |
94 | flex-basis: 33.3333%; | |
95 | } | |
96 | } | |
97 | ||
98 | .boxImage { | |
99 | margin-bottom: 10px; | |
100 | text-align: center; | |
101 | } | |
102 | } | |
103 | ||
104 | /* styling for boxes in <top>/<bottom> position */ | |
105 | .boxesTop, | |
106 | .boxesBottom { | |
107 | border-bottom: 1px solid $wcfContentBorderInner; | |
108 | ||
109 | .layoutBoundary { | |
110 | padding: 40px 0; | |
111 | } | |
112 | ||
113 | .box { | |
114 | &:not(:first-child) { | |
115 | margin-top: 40px; | |
116 | } | |
117 | } | |
118 | ||
119 | .boxWithImage { | |
120 | @extend .clearfix; | |
121 | ||
122 | .boxTitle, | |
123 | .boxContent { | |
124 | margin-left: calc(20% + 30px); | |
125 | } | |
126 | } | |
127 | ||
128 | .boxImage { | |
129 | float: left; | |
130 | width: 20%; | |
131 | } | |
132 | } | |
133 | ||
134 | .boxesTop { | |
135 | border-bottom: 1px solid $wcfContentBorderInner; | |
136 | } | |
137 | ||
138 | .boxesBottom { | |
139 | border-top: 1px solid $wcfContentBorderInner; | |
140 | } | |
141 | ||
142 | /* styling for boxes in <sidebarLeft>/<sidebarRight> position */ | |
143 | .boxesSidebarLeft, | |
144 | .boxesSidebarRight { | |
145 | color: $wcfSidebarText; | |
146 | ||
147 | a { | |
148 | color: $wcfSidebarLink; | |
149 | ||
150 | > .icon { | |
151 | color: $wcfSidebarLink; | |
152 | } | |
153 | ||
154 | &:hover { | |
155 | color: $wcfSidebarLinkActive; | |
156 | ||
157 | > .icon { | |
158 | color: $wcfSidebarLinkActive; | |
159 | } | |
160 | } | |
161 | } | |
162 | ||
163 | small, | |
164 | .dimmed { | |
165 | color: $wcfSidebarDimmedText; | |
166 | ||
167 | a { | |
168 | color: $wcfSidebarDimmedLink; | |
169 | ||
170 | &:hover { | |
171 | color: $wcfSidebarDimmedLinkActive; | |
172 | } | |
173 | } | |
174 | } | |
175 | ||
e9f3957f MW |
176 | .boxTitle { |
177 | color: $wcfSidebarHeadlineLink; | |
178 | ||
179 | &:hover { | |
180 | color: $wcfSidebarHeadlineLinkActive; | |
181 | } | |
182 | } | |
183 | ||
bb6ef47e MW |
184 | .box { |
185 | background-color: $wcfSidebarBackground; | |
186 | padding: 20px; | |
187 | ||
188 | &:not(:first-child) { | |
189 | margin-top: 20px; | |
190 | } | |
487db634 MW |
191 | |
192 | &.boxAlternative { | |
193 | background-color: transparent; | |
194 | border: 1px solid $wcfContentBorderInner; | |
195 | } | |
196 | ||
197 | &.boxError { | |
198 | background-color: $wcfStatusErrorBackground; | |
199 | color: $wcfStatusErrorText; | |
200 | } | |
201 | ||
202 | &.boxInfo { | |
203 | background-color: $wcfStatusInfoBackground; | |
204 | color: $wcfStatusInfoText; | |
205 | } | |
206 | ||
207 | &.boxSuccess { | |
208 | background-color: $wcfStatusSuccessBackground; | |
209 | color: $wcfStatusSuccessText; | |
210 | } | |
211 | ||
212 | &.boxWarning { | |
213 | background-color: $wcfStatusWarningBackground; | |
214 | color: $wcfStatusWarningText; | |
215 | } | |
bb6ef47e MW |
216 | } |
217 | ||
218 | .boxWithImage { | |
219 | @extend .clearfix; | |
220 | ||
221 | .boxTitle, | |
222 | .boxContent { | |
223 | margin-left: calc(20% + 10px); | |
224 | } | |
225 | } | |
226 | ||
227 | .boxImage { | |
228 | float: left; | |
229 | width: 20%; | |
230 | } | |
231 | } | |
232 | ||
233 | /* styling for boxes in <contentTop>/<contentBottom> position */ | |
234 | .boxesContentTop, | |
235 | .boxesContentBottom { | |
bb6ef47e MW |
236 | .box { |
237 | &:not(:first-child) { | |
238 | margin-top: 30px; | |
239 | } | |
240 | } | |
241 | ||
242 | .boxWithImage { | |
243 | @extend .clearfix; | |
244 | ||
245 | .boxTitle, | |
246 | .boxContent { | |
247 | margin-left: calc(20% + 20px); | |
248 | } | |
249 | } | |
250 | ||
72a7f9cd MW |
251 | .boxTitle { |
252 | color: $wcfContentHeadlineText; | |
253 | ||
254 | a { | |
255 | color: $wcfContentHeadlineLink; | |
256 | ||
257 | &:hover { | |
258 | color: $wcfContentHeadlineLinkActive; | |
259 | } | |
260 | } | |
261 | } | |
262 | ||
bb6ef47e MW |
263 | .boxImage { |
264 | float: left; | |
265 | width: 20%; | |
266 | } | |
267 | } | |
268 | ||
269 | .boxesContentTop { | |
270 | margin-bottom: 40px; | |
271 | } | |
272 | ||
273 | .boxesContentBottom { | |
274 | margin-top: 40px; | |
275 | } | |
276 | ||
277 | /* styling for boxes in <footerBoxes> position */ | |
278 | .boxesFooterBoxes { | |
279 | background-color: $wcfFooterBoxBackground; | |
280 | color: $wcfFooterBoxText; | |
281 | flex: 0 0 auto; | |
282 | z-index: 40; | |
283 | ||
284 | a { | |
285 | color: $wcfFooterBoxLink; | |
286 | ||
287 | .icon { | |
288 | color: $wcfFooterBoxLink; | |
289 | } | |
290 | ||
291 | &:hover { | |
292 | color: $wcfFooterBoxLinkActive; | |
293 | ||
294 | .icon { | |
295 | color: $wcfFooterBoxLinkActive; | |
296 | } | |
297 | } | |
298 | } | |
299 | ||
300 | .icon { | |
301 | color: $wcfFooterBoxText; | |
302 | } | |
303 | ||
c734a302 | 304 | .boxContainer { |
bb6ef47e MW |
305 | display: flex; |
306 | flex-wrap: wrap; | |
c734a302 MW |
307 | margin-left: -10px; |
308 | margin-right: -10px; | |
bb6ef47e MW |
309 | padding: 40px 0; |
310 | } | |
311 | ||
312 | .box { | |
313 | flex: 0 0 50%; | |
c734a302 MW |
314 | padding-left: 10px; |
315 | padding-right: 10px; | |
bb6ef47e MW |
316 | |
317 | &:nth-child(n+3) { | |
318 | margin-top: 40px; | |
319 | } | |
bb6ef47e MW |
320 | } |
321 | ||
72a7f9cd MW |
322 | .boxTitle { |
323 | color: $wcfFooterBoxHeadlineText; | |
324 | ||
325 | a { | |
326 | color: $wcfFooterBoxHeadlineLink; | |
327 | ||
328 | &:hover { | |
329 | color: $wcfFooterBoxHeadlineLinkActive; | |
330 | } | |
331 | } | |
332 | } | |
333 | ||
bb6ef47e MW |
334 | .boxImage { |
335 | margin-bottom: 10px; | |
336 | text-align: center; | |
337 | } | |
338 | } | |
339 | ||
340 | /* styling for boxes in <footer> position */ | |
341 | .boxesFooter { | |
342 | margin-bottom: 40px; | |
343 | ||
344 | .box { | |
345 | &:not(:first-child) { | |
346 | margin-top: 40px; | |
347 | } | |
348 | } | |
349 | ||
350 | .boxWithImage { | |
351 | @extend .clearfix; | |
352 | ||
353 | .boxTitle, | |
354 | .boxContent { | |
355 | margin-left: calc(20% + 30px); | |
356 | } | |
357 | } | |
358 | ||
359 | .boxImage { | |
360 | float: left; | |
361 | width: 20%; | |
362 | } | |
363 | } |