File: D:/HostingSpaces/SBogers10/stafa.komma.pro/resources/sass/site/6-Organisms/_organisms.contact.scss
.o-contact {
position: relative;
@include vspacing(
'margin-top' 0.75,
'margin-bottom' 0.75
);
// Larger view gets a grid layout
@include mq(l){
@include template(body, form, map, openinghours, bottom);
}
&::before {
@include mq(600) {
@include ornament-hex-filled();
content: '';
display: block;
top: 35vmax;
}
@include mq(l) {
top: 18vh;
}
}
}
.o-contact__main {
@include contain;
// In stacked view (smaller screens) create white space between blocks
> * + * {
@include vspacing-m-down(
'margin-top' 1
);
}
@include mq(l){
@include template(body, form, map, openinghours);
display: grid;
grid-template-columns: 5fr 1fr 1fr 1fr 4fr;
grid-template-areas:
"body . form form form"
"map map map . openinghours";
}
}
.o-contact__title {
@include text-style(5);
color: palette(secondary, 500);
}
.o-contact__heading {
@include text-style(1);
color: palette(primary, 500);
margin-top: space(3);
}
.o-contact__info {
margin-top: space(3);
}
.o-contact__business {
margin-top: space(6);
}
.o-contact__subheading {
@include text-style(2);
color: palette(text, 800);
margin-bottom: space(3);
}
.o-contact__row {
@include owl(space(3));
}
.o-contact__data {
display: flex;
}
.o-contact__label {
min-width: space(12);
}
.o-contact__link {
display: inline-block;
color: palette(action, 300);
text-decoration: none;
cursor: pointer;
transition: color 0.3s linear;
&:hover {
color: palette(action, 500);
}
}
.o-contact__map {
min-height: 580px;
@include vspacing-l-up(
'margin-top' 2
);
box-shadow: 0 12px 24px rgba(25,31,47,0.2);
}
.o-contact__openinghours {
@include vspacing-l-up(
'margin-top' 2
)
}
.o-contact__timeslot {
margin-top: space(3);
}
.o-contact__timeframe {
color: palette(primary, 500);
}
.o-contact__time {
color: palette(secondary, 500);
}
.o-contact__bottom {
height: space(22);
margin-top: space(-11);
background-color: palette(primary, 500);
}
.o-contact__ornament-triangle {
margin-top: 0 !important; // Override
z-index: -1;
}