angular-cn/public/resources/css/module/_footer.scss

/*
* Main Site Footer
*
* This module contains styles for the main site footer. The
* footer contains a launchpad (lists of links) and general
* copyright and licensing information found at the bottom
* of each page
*/

.main-footer {
  .footer-feedback {
    cursor: pointer;
  }

  nav {
    h3 {
      font-size: 21px;
    }

    padding: $unit * 6;

    @include respond-to('mobile') {
      padding: ($unit * 3) 0px;
    }
  }

  .logo-inverse-large {
    background: url('/resources/images/logos/inverse/shield/shield-large.png') 0px 0px / contain no-repeat;
    height: 200px;
    width: 200px;
    max-width: 100%;

    @include respond-to('mobile') {
      display: none;
    }
  }

  h3 {
    font-size: 20px;

    @include respond-to('mobile') {
      margin-bottom: $unit;
    }
  }

  ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;

    @include respond-to('mobile') {
      margin-bottom: $unit * 5;
    }

    li {
      margin: 0px;
    }

    a {
      color: $snow;
      text-decoration: none;

      @include respond-to('mobile') {
        display: block;
        text-decoration: none;
        padding: 0px ($unit * 2);
        margin-bottom: $unit;
        border-radius: 3px;
        line-height: $unit * 5;
        font-size: 14px;
      }

      &:hover {
        text-decoration: underline;
        opacity: 1;
      }
    }
  }

  footer {
    text-align: left;
    padding: ($unit * 2) ($unit * 6);

    @include respond-to('mobile') {
      text-align: center;
    }

    a {
      color: $snow;
    }

    .styleguide-trigger {
      color: $darkgrey;
      text-decoration: none;
      float: right;
      transition: color .3s;

      @include respond-to('mobile') {
        display: block;
        margin-top: $unit;
        font-size: 18px;
        float: none;
      }

      &:hover {
        color: $red-600;
      }

      .icon-favorite {
        line-height: 20px;
      }
    }
  }
}