nav.scss

@mixin fade($gradient-direction) {
  visibility: visible;
  opacity: 1;
  position: absolute;
  bottom: 16px;
  width: 43px;
  height: 30px;
  transition-duration: .3s;
  -webkit-transform: translateZ(0);
  background: -webkit-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
  background: -o-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
  background: -moz-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
  background: linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);

  &.end-scroll {
    visibility: hidden;
    opacity: 0;
    transition-duration: .3s;
  }
}

.nav-links {
  padding: 0;
  margin: 0;
  list-style: none;
  height: auto;
  border-bottom: 1px solid $border-color;

  li {
    display: inline-block;

    a {
      display: inline-block;
      padding: 14px;
      padding-top: $gl-padding;
      padding-bottom: 11px;
      margin-bottom: -1px;
      font-size: 15px;
      line-height: 28px;
      color: #959494;
      border-bottom: 2px solid transparent;

      &:hover, &:active, &:focus {
        text-decoration: none;
        outline: none;
      }
    }

    &.active a {
      border-bottom: 2px solid $link-underline-blue;
      color: $black;
    }

    .badge {
      font-weight: normal;
      background-color: #eee;
      color: #78a;
    }
  }
}

.top-area {
  @include clearfix;

  border-bottom: 1px solid #eee;

  .nav-text {
    padding-top: 16px;
    padding-bottom: 11px;
    display: inline-block;
    width: 50%;
    line-height: 28px;

    /* Small devices (phones, tablets, 768px and lower) */
    @media (max-width: $screen-sm-min) {
      width: 100%;
    }
  }

  .nav-search {
    display: inline-block;
    width: 100%;
    padding: 11px 0;

    /* Small devices (phones, tablets, 768px and lower) */
    @media (min-width: $screen-sm-min) {
      width: 50%;
    }
  }

  .nav-links {
    display: inline-block;
    width: 50%;
    margin-bottom: 0;
    border-bottom: none;

    /* Small devices (phones, tablets, 768px and lower) */
    @media (max-width: $screen-sm-max) {
      width: 100%;
    }
  }

  .nav-controls {
    width: 50%;
    display: inline-block;
    float: right;
    text-align: right;
    padding: 11px 0;
    margin-bottom: 0;

    > .dropdown {
      margin-right: $gl-padding-top;
      display: inline-block;

      &:last-child {
        margin-right: 0;
      }
    }

    > .btn {
      margin-right: $gl-padding-top;
      display: inline-block;

      &:last-child {
        margin-right: 0;
      }
    }

    > .btn-grouped {
      float: none;
    }

    > form {
      display: inline-block;
      margin-top: -1px;
    }

    .icon-label {
      display: none;
    }

    input {
      height: 35px;
      display: inline-block;
      position: relative;
      top: 2px;
      margin-right: $gl-padding-top;

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: $screen-md-min) { width: 200px; }

      /* Large devices (large desktops, 1200px and up) */
      @media (min-width: $screen-lg-min) { width: 250px; }

      &.input-short {
        /* Medium devices (desktops, 992px and up) */
        @media (min-width: $screen-md-min) { width: 170px; }

        /* Large devices (large desktops, 1200px and up) */
        @media (min-width: $screen-lg-min) { width: 210px; }
      }
    }

    .project-filter-form {
      input {
        background-color: $background-color;
      }
    }

    @media (max-width: $screen-xs-max) {
      padding-bottom: 0;

      .btn, form, .dropdown, .dropdown-menu-toggle, .form-control {
        margin: 0 0 10px;
        display: block;
        width: 100%;
      }

      form {
        display: block;
        height: auto;

        input {
          width: 100%;
          margin: 0 0 10px;
        }
      }

      .input-short {
        width: 100%;
      }

      .icon-label {
        display: inline-block;
      }

      // Applies on /dashboard/issues
      .project-item-select-holder {
        display: block;
        margin: 0;
      }
    }

    /* Small devices (tablets, 768px and lower) */
    @media (max-width: $screen-sm-max) {
      width: 100%;
      text-align: left;

      input {
        width: 300px;
      }
    }
  }
}

.layout-nav {
  position: fixed;
  top: $header-height;
  width: 100%;
  z-index: 11;
  background: $background-color;
  border-bottom: 1px solid $border-color;
  transition-duration: .3s;

  .container-fluid {
    position: relative;
  }

  .controls {
    float: right;
    padding: 7px 0 0;

    @media (max-width: $screen-xs-min) {
      display: none;
    }

    i {
      color: $layout-link-gray;
    }

    .fa-rss,
    .fa-cog {
      font-size: 16px;
    }

    .fa-caret-down {
      margin-left: 5px;
      color: $gl-icon-color;
    }

    .dropdown {
      margin-left: 7px;

      @media (max-width: $screen-xs-min) {
        margin-left: 0;
      }

      li.active {
        font-weight: bold;
      }
    }
  }

  .nav-links {
    border-bottom: none;
    height: 51px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }

    .fade-right {
      @include fade(left);
      right: 58px;

      @media (min-width: $screen-xs-max) {
        right: 67px;
      }
      @media (max-width: $screen-xs-min) {
        right: 0;
      }
    }

    .fade-left {
      @include fade(right);
      left: 0;
    }

    li {

      a {
        padding-top: 10px;
      }

      a, i {
        color: $layout-link-gray;
      }

      &.active {
        a, i {
          color: $black;
        }
      }

      .badge {
        color: $gl-icon-color;
      }
    }
  }
}

.page-with-layout-nav {
  margin-top: $header-height + 2;

  .right-sidebar {
    top: ($header-height * 2) + 2;
  }
}