podemos-info/census

.header #utility_nav {
  #admin_jobs {
    a:before {
      @include icon("\f013");
    }

    &.running a:before {
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }
  }

  #admin_issues {
    a:before {
      @include icon("\f0f3");
    }

    &.unread a:before {
      color: $error-color;
      -webkit-animation: ring 4s .7s ease-in-out infinite;
      -webkit-transform-origin: 50% 4px;
      -moz-animation: ring 4s .7s ease-in-out infinite;
      -moz-transform-origin: 50% 4px;
      animation: ring 7.5s 0s ease-in-out infinite;
      transform-origin: 50% 4px;
    }

    @keyframes ring {
      0% { transform: rotate(15deg); }
      2% { transform: rotate(-13deg); }
      4% { transform: rotate(19deg); }
      6% { transform: rotate(-17deg); }
      8% { transform: rotate(15deg); }
      10% { transform: rotate(-13deg); }
      12% { transform: rotate(11deg); }
      14% { transform: rotate(-9deg); }
      16% { transform: rotate(7deg); }
      18% { transform: rotate(-5deg); }
      20% { transform: rotate(3deg); }
      22% { transform: rotate(-3deg); }
      24% { transform: rotate(2deg); }
      26% { transform: rotate(-1deg); }
      28% { transform: rotate(1deg); }
      32% { transform: rotate(0); }
      100% { transform: rotate(0); }
    }
  }

  #admin_downloads {
    a:before {
      @include icon("\f56d");
    }

    &.active a:before {
      color: $primary-color;
      transition: color 0.5s;
    }
  }

  #admin_jobs, #admin_issues, #admin_downloads, #current_user, #logout {
    a {
      visibility: hidden;
      position: relative;
      width: 35px;
      height: 49px;
      display: inline-block;

      &:before {
        display: inline;
        visibility: visible;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        color: $text-color;
        padding: 15px 0;
        text-align: center;
        width: 35px;
        font-size: 16px;
        line-heigth: 20px;
      }

      @media screen and (min-width: $sm-width) {
        width: 60px;
        height: 59px;

        &:before {
          padding: 20px 0;
          width: 60px;
          font-size: 20px !important;
        }
      }
    }
  }

  #logout {
    min-width: 35px;
  }
}