101 lines
1.8 KiB
SCSS
101 lines
1.8 KiB
SCSS
|
.promo {
|
||
|
|
@include hex__outer;
|
||
|
|
color: $brand-white;
|
||
|
|
margin-bottom: 25%;
|
||
|
|
|
||
|
|
@include breakpoint($sm) {
|
||
|
|
width: 33.333%;
|
||
|
|
margin-left: 0;
|
||
|
|
margin-bottom: 0;
|
||
|
|
|
||
|
|
&:nth-of-type(5n-4) {
|
||
|
|
margin-left: 16.666%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.hex-grid--offset & {
|
||
|
|
|
||
|
|
@include breakpoint($md) {
|
||
|
|
&:first-of-type {
|
||
|
|
margin-left: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(5n-4) {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(7n-3) {
|
||
|
|
margin-left: 16.66667%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.promo__inner {
|
||
|
|
@include hex__middle;
|
||
|
|
}
|
||
|
|
.promo__content {
|
||
|
|
@include hex__inner;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
.promo--closed & {
|
||
|
|
.promo__title,
|
||
|
|
.promo__body {
|
||
|
|
transform: translate3d(0,0,0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.promo__title,
|
||
|
|
.promo__body {
|
||
|
|
width: 100%;
|
||
|
|
padding: 5%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: fade-out($brand-color-e, 0.1);
|
||
|
|
font-weight: 300;
|
||
|
|
transition: transform .2s ease-in-out, opacity .3s ease-in-out;
|
||
|
|
}
|
||
|
|
.promo__title {
|
||
|
|
margin-bottom: 0;
|
||
|
|
bottom: 55%;
|
||
|
|
padding-top: 50%;
|
||
|
|
|
||
|
|
@include breakpoint($sm) {
|
||
|
|
transform: translate3d(0,-100%,0);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 45%;
|
||
|
|
width: 10%;
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 1px solid #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.promo__body {
|
||
|
|
top: 45%;
|
||
|
|
padding-bottom: 50%;
|
||
|
|
|
||
|
|
@include breakpoint($sm) {
|
||
|
|
transform: translate3d(0,100%,0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.promo__media {
|
||
|
|
mix-blend-mode: overlay;
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $index, $color in $brand-colors {
|
||
|
|
.promo--theme-#{$index} {
|
||
|
|
.promo__content {
|
||
|
|
background-color: fade-out($color, 0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.promo__title,
|
||
|
|
.promo__body {
|
||
|
|
background-color: fade-out(shade($color, 15%), 0.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|