_layout.scss

@import 'grids';

/*
* Base Layout Styles
*
*/

.l-left {
  float: left;
}

.l-right {
  float: right;
}

.l-relative,
.docs-content {
  position: relative;
}

.l-absolute {
  position: absolute;
}

.l-fixed {
  position: fixed;
}
.l-clearfix:after,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


/*
* Pinned Layouts (fixed)
*
*/

.l-pinned-top {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
}

.l-pinned-left {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
}


/*
* Page & Element Specific Layouts
*
*/

.l-hr {
  margin: 0 ($unit * 0.5) ($unit * 5);
  padding: ($unit * 2) 0;
  border-bottom: 1px solid $fog;
  color: $heather;
}

.l-offset-nav {
  padding-top: 56px;
}

.l-offset-side-nav {
  padding-left: 240px;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    padding-left: 0px;
    padding-top: 104px;
  }
}

.l-offset-page-header {
  margin-left: $unit * 6 !important;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    margin: 0px !important;
  }
}

.l-docs-content {
  padding: $unit * 6;
}

.l-content {
  padding: ($unit * 8) ($unit * 12);
  max-width: 1200px;
  margin: 0 auto;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    padding: ($unit * 3) ($unit * 2);
  }
}

.l-content-small {
  padding: $unit * 6;
  max-width: 1100px;
  margin: 0;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    padding: 0;
    padding-top: ($unit * 3);
  }
}

.l-content-block {
  margin: 0px 0px ($unit * 8) 0px;
}

.l-main-section {
  margin: 0px 0px ($unit * 8) 0px;
}

.l-sub-section {
  color: $blue-grey-700;
  margin: 0px 0px ($unit * 4) 0px;
  padding: $unit * 4;
  background: rgba($blue-grey-50, .24);
  border-left: 4px solid $cyan-500;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    padding: ($unit * 3) ($unit * 1);
  }

  code {
    background: rgba($blue-grey-100, .56);
    color: $cyan-700;
  }

  p:last-child {
    margin: 0;
  }

  h3:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin: 0;
  }
}

.l-main-section,
.l-main-section {
  p:last-child {
    margin: 0;
  }
}

button.verbose {
  font-size: ($unit * 3);
  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    font-size: ($unit * 2);
  }
}
button.verbose.on {display: none}

.l-verbose-section {
  margin: 0px 0px ($unit * 4) 0px;
  padding-left: ($unit * 2);
  //background: lighten($light, 5%);
  border-left: ($unit / 6) solid $grey;
  border-radius: ($unit / 6);
}
.l-verbose-inherit {
  margin: 0;
  padding: 0;
  border-left: 0;
  border-radius: 0;
}

/*
* Margins & Padding
*
*/

@for $i from 0 through 10 {
  .l-space-#{$i} {
    margin: $i * 8px;
  }
  .l-space-top-#{$i} {
    margin-top: $i * 8px;
  }
  .l-space-bottom-#{$i} {
    margin-bottom: $i * 8px;
  }
  .l-space-left-#{$i} {
    margin-left: $i * 8px;
  }
  .l-space-right-#{$i} {
    margin-right: $i * 8px;
  }

  .l-pad-#{$i} {
    padding: $i * 8px;
  }
  .l-pad-top-#{$i} {
    padding-top: $i * 8px;
  }
  .l-pad-bottom-#{$i} {
    padding-bottom: $i * 8px;
  }
  .l-pad-left-#{$i} {
    padding-left: $i * 8px;
  }
  .l-pad-right-#{$i} {
    padding-right: $i * 8px;
  }

  .l-space-neg-top-#{$i} {
    margin-top: $i * -8px;
  }

  .l-space-neg-left-#{$i} {
    margin-left: $i * -8px;
  }
}


/*
* Layer Order (z-index)
*
*/

.l-layer-1 {
  z-index: $layer-1;
}

.l-layer-2 {
  z-index: $layer-2;
}

.l-layer-3 {
  z-index: $layer-3;
}

.l-layer-4 {
  z-index: $layer-4;
}

.l-layer-5 {
  z-index: $layer-5;
}

.l-layer-6 {
  z-index: $layer-6;
}

.l-layer-7 {
  z-index: $layer-7;
}

.l-layer-8 {
  z-index: $layer-8;
}

.l-layer-9 {
  z-index: $layer-9;
}

.l-layer-10 {
  z-index: $layer-10;
}

/*
 * Other
 */
.to-top {
  display: block;
  font-size: $unit * 2;
  margin-bottom: $unit;
  margin-top: $unit * 4;
}

.l-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.l-clear-left {
  clear: left;
}

.l-clear-right {
  clear: right;
}

.l-clear-both {
  clear: both;
}