viur-ignite-css/less/boxes.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * MEDIA BOXES
 */


.media {
  border: 1px solid #eee;
  padding: 15px;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 0 3px 0 #ddd;
  .media { // Nesting
    border: none;
    border-top: 1px solid #ddd;
    padding: 5px 0 0;
    padding: 10px 0 0;
    box-shadow: none;
  }
  &:not(:last-child) {
    margin-bottom: 15px;
  }
}

.media-image {
  margin-right: 15px;
  width: 20%;
  padding-bottom: 20%;
  background-size: cover;
}

.media-image-vSmall {
  width: 10%;
  padding-bottom: 10%;
}

.media-content {
  flex: 1;
  text-align: left;
}

.media-descr {
  font-size: .8em;
}

.media-headline {
  margin: 0;
}


// => Media Boxes Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
}

.media-mixin(@break) when (@break = @breakMedium) {
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @breakPrint) {
}