UNPKG

@randstad-design/orbit-multitheme

Version:

multitheme Front-end code based on Randstad Human Forward components

159 lines (138 loc) 4.31 kB
.footer__wrapper { font-size: 16px; letter-spacing: 0; line-height: 25px; padding-bottom: 40px; padding-top: 25px; } .footer__grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .footer__grid:first-child { padding-bottom: 50px; } .footer__column { width: 100%; } .footer__info { margin-bottom: 30px; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; width: 100%; } .footer__info p:last-child { margin-bottom: 0; } .footer__info a[href^='tel'] { color: inherit; text-decoration: inherit; } .footer__info svg { margin-right: 5px; } .footer__bottom-nav { margin-bottom: 0; -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; width: 100%; } .footer__bottom-nav li { margin-bottom: 10px; } .footer .social__list { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-bottom: 30px; width: 100%; } .footer .social__list svg { -webkit-transition: fill 0.2s ease-out; transition: fill 0.2s ease-out; } .footer--s .footer__wrapper { padding-bottom: 40px; padding-top: 40px; } .footer--s .footer__grid:first-child { border-bottom: 0; padding-bottom: 0; } @media (max-width: 940px) { .footer__grid.divider { border-bottom: 0; } } @media (min-width: 941px) { .footer__wrapper { padding-bottom: 50px; padding-top: 80px; } .footer__grid + .footer__grid { margin-top: 30px; } .footer__column { width: calc((13/58) * 100%); } .footer__column .collapsible__button { display: none; } .footer .social__list { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer__info p { margin-bottom: 30px; width: 100%; } .footer__bottom-nav ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: -10px; } .footer__bottom-nav ul li { margin-top: 0; margin-right: 30px; } .footer--s .footer__wrapper { padding-bottom: 50px; padding-top: 50px; } } .footer__column .extensive-link-list__item { width: 100%; } .footer__grid li a, .footer__grid li a:visited, .footer__grid li a:active, .footer__info p, .footer__info p:visited, .footer__info p:active { color: var(--color-brand-secondary-tint-60); fill: var(--color-brand-secondary-tint-60); } .bg-variant-brand-secondary .footer__grid li a, .bg-variant-brand-secondary .footer__grid li a:visited, .bg-variant-brand-secondary .footer__grid li a:active, .bg-variant-brand-secondary .footer__info p, .bg-variant-brand-secondary .footer__info p:visited, .bg-variant-brand-secondary .footer__info p:active { color: var(--color-white-alpha-50); } .bg-variant-white .footer__grid li a, .bg-variant-white .footer__grid li a:visited, .bg-variant-white .footer__grid li a:active, .bg-variant-white .footer__info p, .bg-variant-white .footer__info p:visited, .bg-variant-white .footer__info p:active { color: var(--color-brand-secondary-tint-60); } .footer .social__list svg:hover { fill: var(--color-brand-secondary); } .bg-variant-brand-secondary .footer .social__list svg:hover { fill: var(--color-white); } .bg-variant-white .footer .social__list svg:hover { fill: var(--color-brand-secondary); } .bg-brand--dark-blue .footer__grid li a { color: rgba(247, 245, 240, 0.5); } .bg-brand--dark-blue .footer__info svg, .footer__info p { color: var(--color-brand-secondary-tint-60); fill: var(--color-brand-secondary-tint-60); } .bg-brand--dark-blue .footer__grid svg { color: #fff; } .bg-brand--dark-blue .footer .divider { border-color: #3c4464; } .footer .social__list svg { color: var(--color-brand-secondary-tint-60); fill: var(--color-brand-secondary-tint-60); } .bg-brand--white .footer .social__list svg:hover { fill: #0f1941; } .bg-brand--dark-blue .footer .social__list svg:hover { fill: #f7f5f0; } /*# sourceMappingURL=footer.css.map */