openaustralia/publicwhip

View on GitHub
app/assets/stylesheets/global/_site-header.scss

Summary

Maintainability
Test Coverage
.site-header {
  background-color: $color-lemon;
  border-radius: 0;
  margin-bottom: 0;
  border: 0;

  @media (min-width: $screen-sm-min) {
    font-size: $font-size-small;
  }

  .navbar-brand {
    @media (min-width: $screen-sm-min) {
      font-size: $font-size-base;
    }
  }

  .navbar-toggle,
  a {
    color: #333;
  }

  .navbar-toggle {
    border-color: rgba(255,255,255,.6);

    .icon-bar {
      background-color: darken($color-lemon, 50%);
    }

    &:hover,
    &:focus {
      color: #111;
      background-color: $gray;
      border-color: darken($color-lemon, 50%);

      .icon-bar {
        background-color: $color-lemon-light;
      }
    }
  }

  a {
    &:hover,
    &:focus {
      color: #111;
      background-color: inherit !important;
      text-decoration: underline !important;
    }
  }

  .account-nav {
    li + li {
      a {
        @media ( min-width: $grid-float-breakpoint) {
          color: $gray;
        }

        &:hover,
        &:focus {
          @media ( min-width: $grid-float-breakpoint) {
            color: $text-color;
          }
        }
      }
    }
  }

  .navbar-form {
    @media ( min-width: $grid-float-breakpoint) {
      margin-top: 8px;
      padding-right: 0;
      padding-left: 30px;
    }

    .form-control {
      @media ( min-width: $grid-float-breakpoint) {
        width: 8em;
      }

      @media ( min-width: $screen-lg-min) {
        width: auto;
      }
    }
  }

  .open .dropdown-toggle {
    background: $color-lemon;
  }
}

.site-header-search {
  input[type="search"] {
    background-color: lighten($color-lemon-light, 5%);
    box-shadow: none;
    border-color: lighten($color-lemon-light, 5%);

    & + .input-group-btn button {
      background-color: lighten($color-lemon-light, 5%);
      border: 0;
    }

    &:focus {
      background-color: white;
    }
  }
}

.members .navlink-members,
.divisions .navlink-divisions,
.policies .navlink-policies,
.about .navlink-about {
  background-color: $color-lemon-light;

  &:hover,
  &:focus {
    background-color: $color-lemon-light !important;
  }
}