215 |
215 |
}
|
216 |
216 |
}
|
217 |
217 |
|
218 |
|
div#steps {
|
219 |
|
padding: $custom-steps-container-padding;
|
220 |
|
|
221 |
|
ol li {
|
222 |
|
@include flexbox();
|
223 |
|
@include flex-direction(column);
|
224 |
|
margin: $custom-step-margin;
|
225 |
|
padding: $custom-step-padding;
|
226 |
|
position: relative;
|
227 |
|
border: 0;
|
228 |
|
|
229 |
|
span.marker {
|
230 |
|
@include justify-content(center);
|
231 |
|
@include vendor-prefix(align-items, center);
|
232 |
|
display: inline-flex;
|
233 |
|
margin: $custom-step-marker-margin;
|
234 |
|
position: relative;
|
235 |
|
color: $custom-step-marker-color;
|
236 |
|
background: $custom-step-marker-background;
|
237 |
|
border: 1px solid $custom-step-marker-border;
|
238 |
|
border-radius: 50%;
|
239 |
|
font-size: calc(12px + 1.2vw);
|
240 |
|
font-weight: bold;
|
241 |
|
text-align: center;
|
242 |
|
vertical-align: middle;
|
243 |
|
width: 4vw;
|
244 |
|
height: 4vw;
|
245 |
|
// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
|
246 |
|
max-width: 100%;
|
247 |
|
max-height: 100%;
|
248 |
|
box-sizing: border-box;
|
249 |
|
|
250 |
|
&::before {
|
251 |
|
display: block;
|
252 |
|
content: ' ';
|
253 |
|
border-radius: 50%;
|
254 |
|
position: absolute;
|
255 |
|
background: $button-background;
|
256 |
|
z-index: -1;
|
257 |
|
padding: 6px;
|
258 |
|
}
|
259 |
|
|
260 |
|
// vertical lines between circles
|
261 |
|
&::after {
|
262 |
|
content: ' ';
|
263 |
|
position: absolute;
|
264 |
|
height: 50%;
|
265 |
|
width: 1px;
|
266 |
|
bottom: 100%;
|
267 |
|
right: 50%;
|
268 |
|
background-color: $custom-step-marker-color;
|
269 |
|
padding: 0;
|
270 |
|
}
|
271 |
|
}
|
272 |
|
|
273 |
|
span.label {
|
274 |
|
margin: $custom-label-margin;
|
275 |
|
text-align: center;
|
276 |
|
text-transform: uppercase;
|
277 |
|
}
|
278 |
|
|
279 |
|
&.current {
|
280 |
|
background: $custom-step-current-background;
|
281 |
|
font-weight: bold;
|
282 |
|
|
283 |
|
span.label {
|
284 |
|
color: $title-color;
|
285 |
|
}
|
286 |
|
|
287 |
|
span.marker {
|
288 |
|
color: $custom-current-marker-color;
|
289 |
|
border-color: $custom-current-marker-background;
|
290 |
|
background: $custom-current-marker-background;
|
291 |
|
}
|
292 |
|
}
|
293 |
|
// hide the first vertical line
|
294 |
|
&.first {
|
295 |
|
span.marker::after {
|
296 |
|
display: none;
|
297 |
|
}
|
298 |
|
}
|
299 |
|
}
|
300 |
|
}
|
301 |
218 |
|
302 |
219 |
@media screen and (min-width: $mobile-limit+1px) {
|
303 |
220 |
#page #main-content-wrapper #main-content #content #columns {
|
... | ... | |
322 |
239 |
vertical-align: baseline;
|
323 |
240 |
}
|
324 |
241 |
}
|
325 |
|
|
326 |
|
#steps {
|
327 |
|
@include order(1);
|
328 |
|
padding: 0;
|
329 |
|
}
|
330 |
|
|
331 |
|
div#steps ol {
|
332 |
|
@include flexbox();
|
333 |
|
@include flex-direction(row);
|
334 |
|
@include vendor-prefix(flex-flow, nowrap);
|
335 |
|
@include justify-content(center);
|
336 |
|
@include vendor-prefix(align-items, center);
|
337 |
|
// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
|
338 |
|
max-width: 100%;
|
339 |
|
max-height: 100%;
|
340 |
|
box-sizing: border-box;
|
341 |
|
|
342 |
|
li {
|
343 |
|
padding: $custom-step-mobile-padding;
|
344 |
|
|
345 |
|
span.marker {
|
346 |
|
border-radius: 50%;
|
347 |
|
padding: 0.3em;
|
348 |
|
|
349 |
|
width: 4rem; // reset size without vw
|
350 |
|
height: 4rem;
|
351 |
|
// horizontal lines between circles
|
352 |
|
&::after {
|
353 |
|
content: ' ';
|
354 |
|
position: absolute;
|
355 |
|
height: 1px;
|
356 |
|
width: 10px;
|
357 |
|
bottom: 50%;
|
358 |
|
padding: 0;
|
359 |
|
left: -10px;
|
360 |
|
}
|
361 |
|
}
|
362 |
|
|
363 |
|
// hide labels on little screens
|
364 |
|
span.label {
|
365 |
|
display: none;
|
366 |
|
}
|
367 |
|
}
|
368 |
|
}
|
369 |
242 |
}
|
370 |
243 |
|
371 |
244 |
.has-sidebox {
|
... | ... | |
375 |
248 |
}
|
376 |
249 |
}
|
377 |
250 |
}
|
|
251 |
|
|
252 |
|
|
253 |
// Steps
|
|
254 |
.wcs-steps--list {
|
|
255 |
justify-content: center;
|
|
256 |
align-items: center;
|
|
257 |
}
|
|
258 |
.wcs-step {
|
|
259 |
font-size: 1.5em;
|
|
260 |
@include desktop-vertical-steps() {
|
|
261 |
width: 9em;
|
|
262 |
max-width: 100%;
|
|
263 |
}
|
|
264 |
|
|
265 |
&--marker {
|
|
266 |
font-weight: bold;
|
|
267 |
}
|
|
268 |
|
|
269 |
&--label {
|
|
270 |
text-transform: uppercase;
|
|
271 |
font-size: .55em;
|
|
272 |
@media ($mq-max--wcs-steps-small-layout) {
|
|
273 |
margin-left: $wcs-steps-spacing;
|
|
274 |
}
|
|
275 |
@media ($mq-min--wcs-steps-horizontal-layout) {
|
|
276 |
text-align: center;
|
|
277 |
}
|
|
278 |
@include desktop-vertical-steps() {
|
|
279 |
text-align: left;
|
|
280 |
}
|
|
281 |
}
|
|
282 |
|
|
283 |
&:not(.current) & {
|
|
284 |
&--marker {
|
|
285 |
border: 1px solid;
|
|
286 |
}
|
|
287 |
}
|
|
288 |
}
|