edx-platform/lms/static/sass/course/courseware/_sidebar.scss

.course-index {
  @include transition(all 0.2s $ease-in-out-quad 0s);
  @include border-right(1px solid $border-color-2);
  @include border-radius(3px, 0, 0, 3px);

  display: table-cell; // needed to extend the sidebar the full height of the area

  // provides sufficient contrast for all screen reader-only elements
  .sr,
  .sr-only {
    color: $black;
    background: $white;
  }

  // reseting bolded fonts for the course index
  .group-heading {
    @extend %t-regular;
  }

  // we're targetting the .class now, instead of the #id
  .accordion {
    @extend %t-copy-sub1;

    .course-navigation {
      .button-chapter {
        @include transition(all $tmg-s3 ease-in-out);

        box-sizing: border-box;

        @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
        @include transition(background-color 0.1s linear 0s);

        display: block;
        width: 100%;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
        background-color: $sidebar-chapter-bg;
        color: $link-color;
        -webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue

        .group-heading {
          @extend %t-title6;

          position: relative;
          display: block;
          padding: ($baseline*0.75) $baseline ($baseline*0.75) ($baseline*2);

          @include text-align(left);

          .icon {
            position: absolute;

            @include left($baseline);

            top: $baseline;
            font-size: $body-font-size;
            color: $gray-l3;
          }
        }

        &.is-open {
          background: $white;
          box-shadow: none;
        }

        &.active {
          .group-heading {
            @extend %t-strong;

            color: $body-color;
          }
        }

        &:hover,
        &:focus {
          background: $white;
        }

        &:active {
          outline: none;
        }
      }

      .chapter-content-container {
        background: $white;

        &.is-open {
          border-bottom: 1px solid $shadow-l1;
        }

        .chapter-menu {
          display: none;
          padding: 0 14px;
          overflow: hidden;

          .menu-item {
            @extend %t-strong;

            margin: ($baseline/5) 0;
            background: inherit;

            a {
              @extend %t-action3;
              @extend %t-strong;

              position: relative;
              display: block;

              @include padding(($baseline/4) ($baseline/2));

              border-radius: ($baseline/4);
              font-family: $font-family-sans-serif;
              color: $body-color;

              p {
                &.subtitle {
                  @extend %t-action4;
                  @extend %t-regular;

                  display: block;
                  margin: 0;
                  color: $gray-d1;

                  &:empty {
                    // hide empty subtitles
                    display: none;
                  }

                  // definitions for proctored exam attempt status indicators
                  .verified {
                    color: theme-color("success");
                  }

                  .rejected {
                    color: $alert-color;
                  }

                  .error {
                    color: $alert-color;
                  }
                }

                .subtitle-name {
                  margin-right: 5px;
                }
              }

              &:hover,
              &:focus {
                color: $body-color;
                background: $gray-l5;

                .subtitle {
                  color: $gray-d1;
                }
              }
            }

            &.graded {
              .menu-icon {
                @include right($baseline/2.5);

                position: absolute;
                bottom: ($baseline/2);
                color: $link-color;
              }
            }

            &.active {
              a {
                @extend %t-ultrastrong;

                background: $gray-l4;
              }
            }

            &:last-of-type {
              padding-bottom: ($baseline/2);
            }
          }
        }
      }
    }
  }

  @extend %ui-print-excluded;
}