File: D:/HostingSpaces/SBogers10/ste.komma.pro/resources/sass/6-Organisms/_organisms.mainfooter.scss
$o-mainfooter-emblem-gap: space(1);
.o-mainfooter {
@include template(company, title1, title2, menu1, menu2, menu3, social, emblems);
display: grid;
grid-template-columns: 1fr 6fr 6fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
". menu2 company ."
". social company .";
padding-top: space(10);
padding-bottom: space(7);
@include mq($o-footer-bp-large) {
grid-template-columns: 1fr 2fr 2.75fr 2.25fr 2fr 3fr 1fr;
grid-template-rows: repeat(3, auto);
grid-template-areas:
". company title1 title2 . emblems ."
". company menu1 menu2 menu3 emblems .";
padding-top: space(10);
padding-bottom: space(7);
}
@include mq($bp-max) {
grid-template-columns: 1fr ($site-column-size*2px) ($site-column-size*2.75px) ($site-column-size*2.25px) ($site-column-size*2px) ($site-column-size*3px) 1fr;
}
}
// Hide all these divs on small screens
@include mq($max: $o-footer-bp-large) {
.o-mainfooter__title1,
.o-mainfooter__title2,
.o-mainfooter__menu1,
.o-mainfooter__menu3,
.o-mainfooter__emblems {
display: none !important;
}
}
.o-mainfooter__company {
display: flex;
flex-direction: column;
@include mq($max: $o-footer-bp-large) {
justify-self: end;
align-items: flex-end;
}
}
.o-mainfooter__brand {
margin-bottom: space(4);
@include mq($o-footer-bp-large) {
display: inline-flex;
align-items: flex-start;
width: 62.5%;
}
& svg { height: auto; }
}
.o-mainfooter__language {
margin-top: auto;
}
.o-mainfooter__heading {
@include mq($max: $o-footer-bp-large) {
display: none;
}
@include font-size(base);
@include font-weight(extraBold);
margin-bottom: space(2);
> a {
text-decoration: none;
color: white;
transition: color 0.2s;
&:hover {
color: rgba(palette(primary, 200), 0.75);
}
}
}
.o-mainfooter__list {
list-style: none;
margin: 0;
}
.o-mainfooter__item {}
.o-mainfooter__link {
display: inline-block;
position: relative;
z-index: 0;
color: palette(neutral, 0);
padding: space(0.5) 0;
text-decoration: none;
cursor: pointer;
transition: color 200ms;
&:hover {
color: rgba(palette(primary, 200), 0.75);
}
&:focus {
outline-color: palette(action);
}
}
.o-mainfooter__emblems {
//align-self: start;
//display: flex;
//flex-wrap: wrap;
//justify-content: flex-end;
//margin: -$o-mainfooter-emblem-gap;
}
.o-mainfooter__emblem-placeholder {
margin-left: auto;
text-align: center;
}
.o-mainfooter__emblem {
@include border-radius(xs);
flex: none;
display: flex;
align-items: center;
justify-content: center;
//width: calc(50% - #{double($o-mainfooter-emblem-gap)});
width: 120px;
//max-width: 96px;
margin: $o-mainfooter-emblem-gap 0 $o-mainfooter-emblem-gap auto;
padding: space(1);
//border: 1px solid rgba(palette(primary, 200), 0.5);
&.nrto {
img {
width: 64px;
}
}
}
// Hide on larger views
.o-mainfooter__social {
display: none;
@include mq($max: $o-footer-bp-large) {
display: flex;
list-style: none;
margin: space(3) 0 0;
}
}