KNACSS/sass/components/_media.scss
2020-11-26 08:46:55 +01:00

26 lines
575 B
SCSS
Executable file

/* ----------------------------- */
/* ==Media object */
/* ----------------------------- */
/* recommended HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
@media (min-width: $tiny) {
.media {
display: flex;
align-items: flex-start;
&-content {
flex: 1 1 0%;
}
// vertical align image
&-figure--center {
align-self: center;
}
// reverse variant
&--reverse {
flex-direction: row-reverse;
}
}
}