landingpage/themes/app-landingpage/assets/scss/_section.scss

160 lines
3.9 KiB
SCSS
Raw Permalink Normal View History

2022-08-06 20:25:26 +02:00
section {
padding-top: ($spacer * 4);
padding-bottom: ($spacer * 4);
}
.section {
&-main {
padding-top: 6rem;
@media (min-width: $screen-md) {
padding-top: 8rem;
}
@media (min-width: $screen-lg) {
padding-top: 0;
}
&-image {
display: none;
@media (min-width: $screen-lg) {
display: block;
max-width: 100%;
height: auto;
position: relative;
top: 1.5rem;
}
}
}
&-intersect {
& + & {
margin-top: ($spacer * -5);
padding-top: ($spacer * 4.5);
}
}
&_bg {
&-light {
&,
&:before {
background-color: $light;
background-image: none;
}
}
&-white {
&,
&:before {
background-color: $white;
background-image: none;
}
}
&-gradient {
&,
&:before {
background-image: $background-image_gradient;
background-color: transparent;
}
color: $white;
h2.headline {
&:after {
border-color: $white;
}
}
.slick-dots li {
button:before {
background-color: $white;
opacity: 1;
}
.slick-active button:before {
background-color: $slick-dot-color-active;
}
}
.slick-arrow {
&,
&:hover,
&:focus {
background-color: $body-bg;
box-shadow: $box-shadow;
}
}
}
&-skew {
position: relative;
background: transparent;
padding-top: ($spacer * 6);
padding-bottom: ($spacer * 4.5);
&:before {
content: '';
display: block;
position: absolute;
top: $spacer;
left: 0;
height: 110%;
width: 100%;
transform: skewY(2deg);
z-index: -1;
margin-top: -2%;
}
}
&-featured {
z-index: 0;
}
}
&-sticky {
position: fixed;
bottom: 0;
display: block;
width: 100%;
box-shadow: $box-shadow;
z-index: 1;
padding-top: $spacer * 1.25;
padding-bottom: $spacer * 1.25;
opacity: 1;
transition: opacity 0.3s 0.05s ease-in-out, visibility 0s 0s ease-in;
visibility: visible;
&.invisible,
&.hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s ease-in-out, visibility 0s 0.3s ease-in;
}
}
&-container-close {
position: absolute;
text-align: right;
max-width: inherit;
width: inherit;
padding: inherit;
height: 0;
overflow: visible;
.btn_close {
position: relative;
margin: ($spacer * -1.5) 0 0;
padding: $spacer;
&:before {
content: "";
width: 16px;
height: 16px;
background: transparent url("../img/icons/cross_close.svg") center no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
@media (min-width: 360px){
margin: 0 $spacer;
}
&,
&:hover,
&:active,
&:focus {
outline: none;
box-shadow: none;
}
}
}
}