18F/18f.gsa.gov

View on GitHub
_sass/_components/footer.scss

Summary

Maintainability
Test Coverage
// Footer
// ==========================

footer[role=contentinfo] {

  padding-top: 1rem;
  background-color: color('gray-cool-5');
  font-size: $tiny-font-size;
  font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;

  ul {
    @include unstyled-list;
  }

  li {
    font-weight: $theme-font-weight-bold;
    line-height: 2.1rem;
  }

  a {
    text-decoration: underline;

    &:visited {
      color: $color-medium;
    }

    &:hover {
      color: $color-medium-hover;
    }
  }

  .usa-sidenav-list {
    @include unstyled-list;

    > li {
      border-top-color: color('gray-cool-10');
      color: $color-medium;
    }

    a {
      @include u-padding-y(1);
      color: $color-medium;
      font-size: $h6-font-size;

      &:hover {
        background-color: color('gray-cool-10');
      }
    }
  }
  .usa-accordion {
    button {
      @include u-padding-y(1.5);
      @include u-padding-left(0);
      background-position: right 0 center;
    }

    [aria-expanded=false] {
      background-image: url("../img/global/plus-alt.png");
      background-image: url("../img/global/plus-alt.svg");
    }

    [aria-expanded=true] {
      background-image: url("../img/global/minus-alt.png");
      background-image: url("../img/global/minus-alt.svg");
    }
  }

  button {
    font-size: $h6-font-size;
    font-family: $font-sans;
    font-weight: $theme-font-weight-normal;
    text-align: left;
  }

  .usa-accordion-content {
    background-color: color('gray-cool-5');

    li {
      border-top: 1px solid color('gray-cool-10');
    }
  }
}

.footer-mobile {
  @include at-media('tablet') {
    display: none;
  }

  button,
  a,
  a:hover {
    padding-left: 0;
  }
}

.footer-desktop {
  display: none;

  @include at-media('tablet') {
    display: block;
  }
}

.footer-logo-links {
  @include at-media('tablet') {
    @include grid-col(2);
  }
}


.footer-links-wrapper {
  @include at-media('tablet') {
    @include grid-col(10);
    @include u-margin-bottom(0);

    display: flex;
    justify-content: flex-end;
  }
}

.footer-links {
  margin-top: 1em;

  @include at-media('tablet') {
    margin-top: 0;

    @include grid-col(2);
  }
}

.footer-links-heading {
  font-size: $tiny-font-size;
  font-weight: $theme-font-weight-normal;
  margin: 0;
}

.footer-logo {
  &:first-child {
    margin-right: 0.7rem;
  }

  img {
    width: 4.4rem;
  }
}