_sidebar.scss

// stylelint-disable declaration-no-important

//
// Right side table of contents
//

.bd-toc {
  @supports (position: sticky) {
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
  }

  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: .875rem;

  @include media-breakpoint-up(md) {
    order: 2;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.section-nav {
  padding-left: 0;

  ul {
    display: block;
    padding-left: 1rem;

    ul {
      display: none;
    }
  }
}

.toc-title {
  font-size: .875rem;
}

.toc-entry {
  display: block;

  a {
    position: relative;
    display: inline-block;
    padding: .125rem 0;
    margin-top: 5px;
    line-height: 1.3;
    color: $cf-dark-alt;
    transition: color .2s linear, height .2s linear;

    &::before {
      position: absolute;
      top: 0;
      left: -15px;
      height: 0;
      content: "";
      border-left: 3px solid $bd-doc-toc-link-active;
      transition: height .2s linear;
      transition-delay: .1s;
    }

    &:hover {
      color: $bd-topaz-main;
      text-decoration: none;
    }

    &.active {
      color: $cf-dark;
      text-decoration: none;
      transition-delay: 0;

      &::before {
        top: 0;
        height: 100%;
      }
    }
  }
}

//
// Left side navigation
//
.bd-sidebar {
  position: relative;
  order: 1;
  background-color: $cf-light;
  border-right: 1px solid $cf-border-color;

  @include media-breakpoint-up(md) {
    @supports (position: sticky) {
      position: sticky;
      top: 60px;
      z-index: 1000;
      height: calc(100vh - 60px);
    }
  }

  @include media-breakpoint-up(xl) {
    flex: 0 1 320px;
  }

  @include media-breakpoint-up(xxl) {
    flex: 0 1 385px;
  }

  @media (min-width: 2000px) {
    position: fixed;
    left: 0;
    max-width: 380px;
  }
}

.bd-links {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-right: -15px;
  margin-left: -15px;

  @include media-breakpoint-up(md) {
    @supports (position: sticky) {
      max-height: calc(100vh - 60px);
      overflow-y: auto;
    }
  }

  // Override collapse behaviors
  @include media-breakpoint-up(md) {
    display: block !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  @include media-breakpoint-up(xl) {
    position: fixed;
    top: 60px;
    max-width: 1300px;
    height: 100%;
    padding-top: 2rem;
    padding-left: 999px;
    margin-left: -999px;
    background: $cf-light;
  }
}

.bd-search + .bd-links {
  @include media-breakpoint-up(md) {
    @supports (position: sticky) {
      max-height: calc(100vh - 8.5rem);
    }
  }
}

.bd-search {
  position: relative; // To contain the Algolia search
  padding: 1rem 15px;
  margin-right: -15px;
  margin-left: -15px;
  border-bottom: 1px solid rgba(0, 0, 0, .05);

  .form-control:focus {
    border-color: rgba($bd-topaz-main, .4);
    box-shadow: 0 0 0 3px rgba($bd-topaz-main, .22);
  }
}

.bd-search-docs-toggle {
  line-height: 1;
  color: $cf-light;

  @include hover {
    color: $bd-link-hover-color;
  }
}

.bd-toc-link {
  display: block;
  padding: .25rem 1.5rem;
  margin-bottom: 0;
  font-size: .75rem;
  color: $cf-dark-alt !important;
  text-transform: uppercase;
  transition: color 200ms linear;

  @include media-breakpoint-up(lg) {
    font-size: .875rem;
  }

  &:hover {
    text-decoration: none;
  }
}

.bd-nav-links-item {
  position: relative;
  padding-bottom: .4rem;

  &:not(:first-child) {
    margin-top: 1rem;
  }

  > .bd-nav-links-item-group {
    cursor: pointer;

    > span {
      display: inline-block;
      width: 15px;
      height: auto;
      margin-left: 3px;
      font-size: .75rem;
      text-align: center;

      .fa-cf-arrow {
        &::before {
          content: "\f078";
        }
      }
    }
  }

  > .bd-sidenav {
    display: block;
    margin-top: 1rem;
    margin-left: 23px;

    .bd-sidenav {
      > li {
        width: 100%;
        padding: 0 1.5rem;
      }
    }

    .opened {
      .bd-sidenav {
        display: block;
        width: 100%;
      }
    }
  }

  &.opened {
    padding-bottom: 1rem;

    &:not(:first-child) {
      margin-top: 1rem;
    }

    > .bd-nav-links-item-group {
      > span {
        .fa-cf-arrow {
          &::before {
            content: "\f077";
          }
        }
      }
    }
  }

  &.active {
    > .bd-toc-link {
      color: $cf-dark !important;

      &:hover {
        color: lighten(rgba($bd-doc-sidebar-link-active, 1), 5%);
        background-color: transparent;
      }
    }
  }
}

// All levels of nav
.bd-sidebar .nav > li {
  > a {
    display: block;
    padding: .21rem 1.5rem;
    font-size: .875rem; // =14px
    font-weight: 400;
    color: rgba($bd-doc-sidebar-link, 1);
    transition: color 200ms linear;

    &:hover {
      color: rgba($bd-doc-sidebar-link-active, 1);
      text-decoration: none;
      background-color: transparent;
    }

    > span {
      display: inline-block;
      width: 20px;
      height: auto;
      margin-left: 1px;
      font-size: .75rem;
      text-align: center;

      .fa-cf-arrow {
        &::before {
          content: "\f078";
        }
      }
    }
  }

  &.opened {
    > a {
      > span {
        .fa-cf-arrow {
          &::before {
            content: "\f077";
          }
        }
      }
    }
  }
  &.active {
    > a {
      position: relative;

      &::before {
        position: absolute;
        top: 10%;
        left: 5px;
        height: 80%;
        content: "";
        border-left: 3px solid $bd-topaz-main;
        transition: height 200ms linear;
      }
    }

    &.has-children {
      > a {
        margin-left: 0;

        &::before {
          left: 0;
          border-color: transparent;
        }
      }
    }
  }
}

/*
.bd-sidebar .nav > li > a {
  display: block;
  padding: .25rem 1.5rem;
  font-size: 90%;
  font-weight: 500;
  color: rgba($bd-doc-sidebar-link, 1);
  transition: color 200ms linear;
}
*/

/*
.bd-sidebar .nav > li > a:hover {
  color: rgba($bd-doc-sidebar-link-active, 1);
  text-decoration: none;
  background-color: transparent;
}
*/

/*
.bd-sidebar .nav > .active > a {
  position: relative;
  &::before {
    position: absolute;
    top: 10%;
    left: 5px;
    height: 80%;
    content: "";
    border-left: 3px solid rgba($bd-doc-sidebar-link-active, .4);
    transition: height 200ms linear;
  }
}
*/

.bd-sidebar .nav > .active > a,
.bd-sidebar .nav > .active:hover > a {
  font-weight: 600;
  color: $cf-dark;
  background-color: transparent;
}