data8/_sass/components/_components.textbook__sidebar.scss

/**
 * Styling for the sidebar.
 *
 * [1]: The sidebar is implemented as ul and li elements so we need to remove
 *   the bullets and margins. Also make chapter fonts a bit bigger.
 * [2]: The entries are <a> tags so we need to remove the default styling.
 * [3]: The sidebar divider is just an empty element with a border.
 * [4]: The current section needs a higher specificity to override the :hover
 *   selectors used previously.
 * [5]: The logo displayed above the sidebar
 * [6]: The footer at the bottom of the sidebar
 */
$color-sidebar-bg: rgba(255, 255, 255, 0) !default;
$color-sidebar-entry: #364149 !default;
$color-sidebar-entry--active: $color-links !default;
$color-sidebar-divider: #bbb !default;

.c-textbook__sidebar {
  background-color: $color-sidebar-bg;
  padding: $spacing-unit-small;

  @include inuit-font-size(14px);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  opacity: 0.6;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;

  &:hover {
    opacity: 1;
  }
}

/* [1] */
.c-sidebar__chapters {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}

li.c-sidebar__chapter > a {
  font-size: 1.2em;
}

/* [1] */
.c-sidebar__sections {
  list-style: none;
  margin-left: $spacing-unit-small;
  margin-bottom: 0;
}

li.c-sidebar__subsection {
  margin-left: 20px;
}

/* [2] */
.c-sidebar__entry {
  display: block;

  padding: $spacing-unit-tiny;

  color: $color-sidebar-entry;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &:visited {
    color: $color-sidebar-entry;
  }
}

/* [4] */
.c-sidebar__entry--active.c-sidebar__entry--active {
  color: $color-sidebar-entry--active;
}

/* [3] */
.c-sidebar__divider {
  border-top: 1px solid $color-sidebar-divider;
  margin: $spacing-unit-tiny;
}

/* [5] */
img.textbook_logo {
  margin-top: 20px;
  max-height: 100px;
  margin: 0px auto 20px auto;
  display: block;
}

/* [6] */
p.sidebar_footer {
  text-align: center;
  padding: 10px 20px 0px 0px;
  font-size: .9em;
}