KNACSS/sass/components/_media.scss

26 lines
574 B
SCSS
Raw Normal View History

2017-07-31 10:52:40 +02:00
/* ----------------------------- */
/* ==Media object */
/* ----------------------------- */
/* recommanded HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
2017-07-31 10:52:40 +02:00
2017-08-01 21:02:01 +02:00
@media (min-width: $tiny) {
2017-08-01 17:00:16 +02:00
.media {
2016-09-21 10:26:28 +02:00
display: flex;
align-items: flex-start;
&-content {
2017-09-13 12:19:07 +02:00
flex: 1 1 0%;
2017-08-01 17:00:16 +02:00
}
2017-08-01 17:00:16 +02:00
// vertical align image
&-figure--center {
align-self: center;
}
// reverse variant
&--reverse {
flex-direction: row-reverse;
}
2016-09-21 10:26:28 +02:00
}
}