ildi-wp/dev/scss/components/_loop-row.scss

80 lines
1.3 KiB
SCSS
Raw Normal View History

2018-08-10 18:48:11 -05:00
.loop-row {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
grid-gap: 0;
> div {
flex: 1 1 100%;
2018-08-13 15:38:15 -05:00
}
.loop-content {
2018-08-10 18:48:11 -05:00
padding: $gutter;
}
.loop-image {
background-color: $di-purple;
2018-08-15 08:11:52 -05:00
background-image: linear-gradient(-110deg, $di-orange, $di-orange-light);
2018-08-10 18:48:11 -05:00
}
&:nth-of-type(even) {
.loop-image {
background-color: $di-orange;
background-image: linear-gradient(110deg, $di-purple, $di-purple-light);
}
}
}
2018-09-10 09:24:51 -05:00
@media screen and (max-width: $screen-tablet - 1) {
.loop-row {
.loop-image {
width: 100%;
min-height: 140px;
}
}
}
2018-08-10 18:48:11 -05:00
@media screen and (min-width: $screen-tablet) {
.loop-row {
flex-direction: row;
min-height: 300px;
> div { flex: 1 1 50%; }
.loop-image {
position: relative;
overflow: hidden;
&::before {
float: left;
margin-left: -1px;
padding-top: 70%;
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; }
}
}
}