18F/continua11y-dashboard

$spacing: 1rem;
$tablet-break-point: 640px;
$desktop-break-point: 960px;

@mixin line {
  display: block;
  overflow: hidden;
  *overflow: visible;
  *zoom: 1;
}

.line, .row, .last-unit {
  width: 100%;
  @include line;
}
.unit{float:left;}
.unit-right{float:right;}
.size-1-1{width:100%;}
.size-1-2{width:50%;}
.size-1-3{width:33.33333%;}
.size-1-4{width:25%;}
.size-1-5{width:20%;}
.size-2-3{width:66.66666%;}
.size-2-5{width:40%;}
.size-3-4{width:75%;}
.size-3-5{width:60%;}
.size-4-5{width:80%;}

.last-unit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;}

.inner {
  padding: $spacing;
  @include line;
}

.inner-top {
  padding-top: $spacing;
  @include line;
}

.inner-bottom {
  padding-bottom: $spacing;
  @include line;
}

.spacer {
  width: $spacing;
  height: $spacing;
}

.m-hidden {
  display: none;
}

.m-row {
  width: 100%;
  @include line;
}

.right {
  float: right;
}

@media screen and (min-width: $tablet-break-point), screen and (max-height: $tablet-break-point) and (orientation: landscape) {
  $spacing: 2rem;
  // tablet
  .inner {
    padding: $spacing;
  }

  .spacer {
    width: $spacing;
    height: $spacing;
  }

  // mobile overrides
  .m-row { float: left; width: auto; }

  // creates a row in tablet mode only
  .t-row {
    width: 100%;
    @include line;
  }

  .m-hidden { display: block; }
  .d-hidden { display: block; }
  .t-hidden { display: none; }

  .t-unit{float:left;}
  .t-unit-right{float:right;}
  .t-size-1-1{width:100%;}
  .t-size-1-2{width:50%;}
  .t-size-1-3{width:33.33333%;}
  .t-size-1-4{width:25%;}
  .t-size-1-5{width:20%;}
  .t-size-2-3{width:66.66666%;}
  .t-size-2-5{width:40%;}
  .t-size-3-4{width:75%;}
  .t-size-3-5{width:60%;}
  .t-size-4-5{width:80%;}

  .right {
    float: right;
  }
}

@media screen and (min-width: $desktop-break-point), screen and (min-height: $desktop-break-point) and (orientation: landscape) {
  $spacing: 2.5rem;
  // desktop
  .inner {
    padding: $spacing;
  }

  .spacer {
    width: $spacing;
    height: $spacing;
  }

  .m-hidden { display: block; }
  .t-hidden { display: block; }
  .d-hidden { display: none; }

  .m-row { float: left; width: auto; }
  .t-row { float: left; width: auto; }
  .d-row {
    width: 100%;
    @include line;
  }

  .d-unit{float:left;}
  .d-unit-right{float:right;}
  .d-size-1-1{width:100%;}
  .d-size-1-2{width:50%;}
  .d-size-1-3{width:33.33333%;}
  .d-size-1-4{width:25%;}
  .d-size-1-5{width:20%;}
  .d-size-2-3{width:66.66666%;}
  .d-size-2-5{width:40%;}
  .d-size-3-4{width:75%;}
  .d-size-3-5{width:60%;}
  .d-size-4-5{width:80%;}

  .right {
    float: right;
  }
}