@randstad-design/orbit-multitheme
Version:
multitheme Front-end code based on Randstad Human Forward components
159 lines (138 loc) • 4.31 kB
CSS
.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 */