File: D:/HostingSpaces/SBogers10/shop.komma.nl/resources/sass/6-Organisms/_organisms.footer.scss
.o-footer {
@include z(z-footer);
background-color: palette(neutral, 0);
padding-bottom: 0;
transition: padding 0.6s;
.is-cookie-bar-visible & {
padding-bottom: $site-cookieBar-height;
}
}
.o-footer__main {
@include contain;
@include vspacing(
'padding-top' 0.5,
'padding-bottom' 0.5
);
}
.o-footer__columns {
@include mq(m) {
display: flex;
}
}
.o-footer__brand {
@include vspacing(
'margin-bottom' 0.33
);
display: block;
width: 100%;
transition: opacity 200ms linear;
&:hover {
opacity: 0.5;
}
}
.o-footer__logo {
width: 152px;
}
// Left column
.o-footer__info {
@include owl-children(space(4));
@include mq(m) {
width: column(4, 10);
}
@include mq(l) {
width: column(5, 12);
}
}
// Right column
.o-footer__nav {
@include mq(m) {
margin-left: column(1, 10);
}
@include mq(l) {
margin-left: column(1, 12);
}
}
.o-footer__list {
list-style: none;
margin: 0;
}
.o-footer__link {
display: inline-block;
position: relative;
z-index: 0;
text-decoration: none;
cursor: pointer;
transition: color 0.3s;
&::before {
content: '';
display: block;
position: absolute;
z-index: -1;
left: -10px;
bottom: 0;
width: 100%;
height: 50%;
transform: scaleX(0) skew(0deg);
transform-origin: bottom left;
transition: transform 0.35s cubic-bezier(0.86, 0, 0.07, 1);
}
&:hover {
&::before {
transform: scaleX(1) skew(-37deg);
}
}
&:focus {
outline-color: palette(action, 500);
}
}
.o-footer__social {
display: flex;
list-style: none;
margin: space(4) 0 0;
}
.o-footer__channel {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
margin-right: space(2);
}
.o-footer__icon {
flex: auto;
display: block;
height: 100%;
background-repeat: no-repeat;
background-position: center;
transition-property: opacity;
transition-duration: 0.3s;
&:hover {
opacity: 0.5;
}
&:focus {
outline-color: palette(action, 500);
}
}