18F/18f.gsa.gov

View on GitHub
_sass/_core/mixins.scss

Summary

Maintainability
Test Coverage
$color-opaque: rgba(0, 0, 0, 0.2);

@mixin hover-box-shadow() {
  @include u-shadow(2);

  &:hover {
    @include u-shadow(3);
  }

  &:active {
    box-shadow: u-shadow(2);
  }
}

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

@mixin allow-layout-classes {
  @include u-margin-x(auto);

  &.width-one-half {
    @include at-media('tablet') {
      width: 50%;
    }
  }

  &.width-one-third {
    @include at-media('tablet') {
      width: 33%;
    }
  }

  &.width-two-thirds {
    @include at-media('tablet') {
      width: 67%;
    }
  }

  &.width-one-fourth {
    @include at-media('tablet') {
      width: 25%;
    }
  }

  &.width-three-fourths {
    @include at-media('tablet') {
      width: 75%;
    }
  }

  &.align-left {
    @include at-media('tablet') {
      float: left;
      margin-right: 2em;
      margin-top: 0.5em;
    }
  }

  &.align-right {
    @include at-media('tablet') {
      float: right;
      margin-left: 2em;
      margin-top: 0.5em;
    }
  }
}