viur-ignite-css/less/wrap.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * WRAPPER AND BINDER
 */


// Container to wrap up chunks of content over the whole width of the page.
// Use it for different background colors oder images across the screen.
.wrap {
  width:100%;
}

// Container to center the content in the middle of the page.
.bind {
  max-width:@pageWidth;
  padding:0 3%;
  margin:0 auto;
  position: relative;
  &:after {
    content: '';
    display: block;
    clear: both; // Clearfix for the binding container.
    height: 0;
  }
}

.container {
  position: relative;
}

// Use .flex on the outer container to separate sidebar and content.
.flex {
  display: flex;
  flex-direction: row;
}

.sidebar {
  flex: 0 0 25%;
  order: 1;
  padding:40px 2em 20px .5em;
  &:after {
    content: '';
    display: block;
    clear: both; // Clearfix for the sidebar container.
    height: 0;
  }
  &:nth-of-type(2) {order:3} // Aside element on the right.
}

.content {
  flex: 1;
  order: 2;
  padding-bottom:20px;
  min-width:0; // Prevents overflows.
}

// Container to seperate chunks of content in the middle of the page.
.section {
  max-width:100%;
  padding:40px .5em 20px; // 40px padding-top helps with top navigation, .5em paddings prevent shadow overflow.
  &:after {
    content: '';
    display: block;
    clear: both; // Clearfix for sections.
    height: 0;
  }
}

.content:last-of-type,
.section.content:last-of-type {padding-bottom:40px;}


// => Wrapper and Binder Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
  .flex {flex-direction: column;}
  .sidebar {order: 2; padding: 0px .5em 40px .5em; flex:auto;}
  .content {order: 1;}
}

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

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

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