presidential-innovation-fellows/hack-the-paygap

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

Summary

Maintainability
Test Coverage
// Mobile-first media query helper
@mixin media($bp) {
  @media screen and (min-width: #{$bp}) {
    @content;
  }
}

// Clearfix helper
@mixin clearfix() {
  &:after {
    content: ".";  
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// Screen reader only helper
.usa-sr-only {
  position: absolute;
  left:-999em;
}

@mixin sr-only() {
  position: absolute;
  left:-999em;
}

// Unstyled list helper

@mixin unstyled-list() {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    display: list-item;
    margin: 0;

    &:before {
      display: none;
    }

    &:after {
      display: none;
    }
  }
}

// Content size helpers
@mixin allow-layout-classes {
  margin-left: auto;
  margin-right: auto;

  &.width-one-half {
    @include media($medium-screen) {
      width: 50%;
    }
  }

  &.width-one-third {
    @include media($medium-screen) {
      width: 33%;
    }
  }

  &.width-two-thirds {
    @include media($medium-screen) {
      width: 67%;
    }
  }

  &.width-one-fourth {
    @include media($medium-screen) {
      width: 25%;
    }
  }

  &.width-three-fourths {
    @include media($medium-screen) {
      width: 75%;
    }
  } 

  &.align-left {
    @include media($medium-screen) {
      float: left;
      margin-right: 2em;
      margin-top: 0.5em;
    }
  }

  &.align-right {
    @include media($medium-screen) {
      float: right;
      margin-left: 2em;
      margin-top: 0.5em;
    }
  }
}