_structure.scss

// Structure


// Margins

.no-margin  { margin: 0; }

.m1  { margin:        1rem; }
.mt1 { margin-top:    1rem; }
.mr1 { margin-right:  1rem; }
.mb1 { margin-bottom: 1rem; }
.ml1 { margin-left:   1rem; }

@include break(medium) {
  .m1-responsive  { margin:        2rem; }
  .mt1-responsive { margin-top:    2rem; }
  .mr1-responsive { margin-right:  2rem; }
  .mb1-responsive { margin-bottom: 2rem; }
  .ml1-responsive { margin-left:   2rem; }
}

.m2  { margin:        2rem; }
.mt2 { margin-top:    2rem; }
.mr2 { margin-right:  2rem; }
.mb2 { margin-bottom: 2rem; }
.ml2 { margin-left:   2rem; }

@include break(medium) {
  .m2-responsive  { margin:        4rem; }
  .mt2-responsive { margin-top:    4rem; }
  .mr2-responsive { margin-right:  4rem; }
  .mb2-responsive { margin-bottom: 4rem; }
  .ml2-responsive { margin-left:   4rem; }
}


// Padding

.no-padding  { padding: 0; }

.pad        { padding:        1rem; }
.pad-top    { padding-top:    1rem; }
.pad-right  { padding-right:  1rem; }
.pad-bottom { padding-bottom: 1rem; }
.pad-left   { padding-left:   1rem; }
.pad-x {
  padding-right: 1rem;
  padding-left: 1rem;
}
.pad-y {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@include break(medium) {
  .pad-responsive        { padding:        2rem; }
  .pad-top-responsive    { padding-top:    2rem; }
  .pad-right-responsive  { padding-right:  2rem; }
  .pad-bottom-responsive { padding-bottom: 2rem; }
  .pad-left-responsive   { padding-left:   2rem; }
  .pad-x-responsive {
    padding-right: 2rem;
    padding-left: 2rem;
  }
  .pad-y-responsive {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.pad-2  { padding:        2rem; }
.pad-x-2 {
  padding-right: 2rem;
  padding-left: 2rem;
}
.pad-y-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

// Generic tappable padding (for links, etc.)
.tap-pad {
  line-height: 3rem;
}

// Mobile style full-width list item
.tap-pad-block {
  display: block;
  padding-right: 1rem;
  padding-left: 1rem;
  line-height: 3rem;
}

.border-box { box-sizing: border-box; }

// Display
.inline { display: inline; }
.block  { display: block; }
.inline-block { display: inline-block; }

.clearfix { overflow: hidden; }

.float-left { float: left; }
.float-right { float: right; }

.wrap {
  margin-right: auto;
  margin-left: auto;
}

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.top    { top:    0; }
.right  { right:  0; }
.bottom { bottom: 0; }
.left   { left:   0; }

.absolute-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }

.scroll-y {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

// Squares
.square-1 { width:  1rem; height:  1rem; } //  16px
.square-2 { width:  2rem; height:  2rem; } //  32px
.square-3 { width:  3rem; height:  3rem; } //  48px
.square-4 { width:  4rem; height:  4rem; } //  64px
.square-6 { width:  6rem; height:  6rem; } //  96px
.square-8 { width:  8rem; height:  8rem; } // 128px

// Max-widths to use for controlling typographic measure
.measure-1 { max-width: 24rem; } // 384px
.measure-2 { max-width: 32rem; } // 512px
.measure-3 { max-width: 40rem; } // 640px
.measure-4 { max-width: 48rem; } // 768px
.measure-5 { max-width: 60rem; } // 960px


// Aspect ratio classes are useful for things like fluid-width background images
// These fill the width of parent elements
.aspect-square {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.aspect-4o3 {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.aspect-16o9 {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

// Widths
.full-width  { width:     100%; }
.half-width  { width:     50%;  }
.max-width   { max-width: 100%; }