gitlab-org--gitlab-foss/app/assets/stylesheets/new_sidebar.scss

@import "framework/variables";
@import 'framework/tw_bootstrap_variables';
@import "bootstrap/variables";

$new-sidebar-width: 220px;

.page-with-new-sidebar {

  @media (min-width: $screen-sm-min) {
    padding-left: $new-sidebar-width;
  }

  .right-sidebar {
    position: fixed;
    height: 100%;
  }
}

.nav-sidebar {
  position: fixed;
  z-index: 400;
  width: $new-sidebar-width;
  top: 50px;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: $gray-light;
  border-right: 1px solid $border-color;

  ul {
    padding: 0;
    list-style: none;
  }

  li {
    a {
      display: block;
      padding: 12px 14px;
    }
  }

  a {
    color: $gl-text-color;
    text-decoration: none;
  }
}

.sidebar-sub-level-items {
  display: none;

  > li {
    a {
      padding: 12px 24px;
      color: $gl-text-color-light;

      &:hover {
        color: $gl-text-color;
        background-color: $border-color;
      }
    }

    &.active {
      > a {
        color: $purple-650;
        font-weight: 600;
      }
    }
  }
}

.sidebar-top-level-items {
  > li {
    .badge {
      float: right;
      background-color: $border-color;
      color: $gl-text-color;
    }

    &.active {
      > a {
        background-color: $purple-600;
        color: $white-light;
        font-weight: 600;
      }

      .badge {
        background-color: $purple-700;
        color: $white-light;
      }

      .sidebar-sub-level-items {
        background-color: $gray-normal;
        border-left: 6px solid $purple-600;
        display: block;
      }
    }

    &:not(.active) > a:hover {
      background-color: $border-color;

      .badge {
        transition: background-color 100ms linear;
        background-color: $gray-normal;
      }
    }
  }
}


// Make issue boards full-height now that sub-nav is gone

.boards-list {
  height: calc(100vh - 50px);

  @media (min-width: $screen-sm-min) {
    height: 475px; // Needed for PhantomJS
    // scss-lint:disable DuplicateProperty
    height: calc(100vh - 120px);
    // scss-lint:enable DuplicateProperty
  }
}