ildi-wp/dev/scss/components/_loop-row.scss
2018-09-11 14:30:45 -05:00

83 lines
1.3 KiB
SCSS

.loop-row {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
grid-gap: 0;
> div {
flex: 1 1 100%;
}
.loop-content {
padding: $gutter;
}
.loop-image {
background-color: $di-purple;
background-image: linear-gradient(-110deg, $di-orange, $di-orange-light);
}
&:nth-of-type(even) {
.loop-image {
background-color: $di-orange;
background-image: linear-gradient(110deg, $di-purple, $di-purple-light);
}
}
}
@media screen and (max-width: $screen-tablet - 1) {
.loop-row {
.loop-image {
width: 100%;
min-height: 140px;
}
}
}
@media screen and (min-width: $screen-tablet) {
.loop-row {
flex-direction: row;
min-height: 300px;
> div {
flex: 1 1 50%;
max-width: 50%;
}
.loop-image {
position: relative;
overflow: hidden;
&::before {
float: left;
margin-left: -1px;
padding-top: 66.5%;
width: 1px;
height: 0;
content: '';
}
&::after {
display: table;
clear: both;
content: '';
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
&:nth-of-type(even) {
.loop-image { order: 2; }
}
}
}