presidential-innovation-fellows/hack-the-paygap

View on GitHub
scss/web-design-standards/_scss/core/_grid.scss

Summary

Maintainability
Test Coverage
.usa-grid,
.usa-grid-full {
  @include outer-container();
  max-width: $site-max-width;

  @include media($medium) {
    .usa-width-one-whole {
      @include span-columns(6);
    }
    .usa-width-one-half {
      @include span-columns(3);
    }
    .usa-width-one-third {
      @include span-columns(2);
    }
    .usa-width-two-thirds {
      @include span-columns(4);
    }
    .usa-width-one-fourth {
      @include span-columns(3);

      &:nth-child(2n) {
        margin-right: 0;
      }
    }
    .usa-width-three-fourths {
      @include span-columns(6);
    }
    .usa-width-one-sixth {
      @include span-columns(2);

      &:nth-child(3n) {
        margin-right: 0;
      }
    }
    .usa-width-five-sixths {
      @include span-columns(5);
    }
    .usa-width-one-twelfth {
      @include span-columns(2);

      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }

  @include media($large) {
    .usa-width-one-whole {
      @include span-columns(12);
    }
    .usa-width-one-half {
      @include span-columns(6);
    }
    .usa-width-one-third {
      @include span-columns(4);
    }
    .usa-width-two-thirds {
      @include span-columns(8);
    }
    .usa-width-one-fourth {
      @include span-columns(3);

      &:nth-child(2n) {
        @include span-columns(3);
      }

      &:nth-child(4n) {
        margin-right: 0;
      }
    }
    .usa-width-three-fourths {
      @include span-columns(9);
    }
    .usa-width-one-sixth {
      @include span-columns(2);

      &:nth-child(3n) {
        @include span-columns(2);
      }

      &:nth-child(6n) {
        margin-right: 0;
      }
    }
    .usa-width-five-sixths {
      @include span-columns(10);
    }
    .usa-width-one-twelfth {
      @include span-columns(1);

      &:nth-child(3n) {
        @include span-columns(1);
      }

      &:nth-child(12n) {
        margin-right: 0;
      }
    }
  }

  // Specificies end of a row.
  // Required if grid-box contains multiple rows.
  // Required if browser does not support :last-child
  .usa-end-row {
    @include omega();
  }
}

.usa-grid {
  padding: 0 $grid-margins;
}

.usa-grid-full {
  padding: 0;
}