frontend/app/assets/stylesheets/archivesspace/sidebar.scss
/* Record sidebar navigation */

.as-nav-list {
  width: 228px;
  margin: 0;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

  > li[class^='sidebar-heading'],
  li[class*=' sidebar-heading'] {
    > a {
      background-color: #f6f6f6;
    }
  }

  > li {
    > a {
      display: block;
      *width: 190px;
      margin: 0 0 -1px;
      border: 1px solid #e5e5e5;
      padding: 5px 10px !important;
      font-size: 12px;
      overflow: hidden;
      background-color: #fff;
      @include transition(background-color 0.5s);

      &:hover {
        background-color: #f5f5f5;

        > .glyphicon-chevron-right {
          color: #bbb;
        }
      }

      > .glyphicon-chevron-right {
        float: right;
        margin-top: 2px;
        margin-right: -6px;
        color: #eee;
        @include transition(color 0.5s);
      }
    }

    &:first-child > a {
      @include border-radius(6px 6px 0 0);
    }

    &:last-child > a {
      @include border-radius(0 0 6px 6px);
    }

    &:first-child:last-child > a {
      @include border-radius(6px);
    }

    &.active > a {
      position: relative;
      z-index: 2;
      padding: 10px 14px;
      color: #fff;
      background-color: #196076;
      border: 1px solid transparent;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
      box-shadow: inset 1px 0 0 rgba(236, 128, 128, 0.1),
        inset -1px 0 0 rgba(0, 0, 0, 0.1);

      &:hover,
      &:focus {
        background-color: #196076;
      }

      .glyphicon-chevron-right {
        color: white;
      }
    }
  }

  .alert-error a {
    @include transition(background-color 1s, color 1s);
  }

  .alert {
    padding: 8px 14px 8px 14px;
    margin: 0;

    .btn {
      width: 100%;
    }
  }

  .form-actions {
    margin: 0;
    padding: 10px !important;
    border: 1px solid #e5e5e5;
    @include border-radius(0 0 4px 4px);

    .btn-primary {
      width: 100%;
    }

    .btn-cancel {
      width: auto;
      float: right;
      padding: 4px 14px;
    }

    .btn-group {
      width: 100%;
    }

    .btn-submit-group {
      width: 100%;
      button:first-child {
        width: 80%;
      }
      .createPlusOneBtn {
        width: 20%;
      }
    }
  }
}

.nav-list-record-count {
  float: right;
  margin-right: 5px;
}

.nav-list-submenu {
  list-style: none;
  margin: 0;
  -webkit-padding-start: 0;

  li {
    display: block;
  }

  a {
    @include transition(opacity 0.5s, background-color 0.5s);

    width: 6px;
    height: 6px;
    border: 1px solid #ccc;
    float: left;
    margin-right: 2px;
    margin-top: 2px;
    @include border-radius(3px);
    @include opacity(50);
  }

  a:hover {
    @include transition(background-color 0.5s);

    background-color: #aaa;
  }
}
.alert-error {
  a {
    background-color: #f2dede !important;
    border-color: #eed3d7 !important;
    color: #b94a48 !important;
  }
  &.active {
    a {
      background-color: #b94a48 !important;
      color: #fff !important;
    }
  }
}

.nav-list-submenu-link {
  &.has-errors {
    background-color: #f2dede;
    border-color: #b94a48;
  }
}

.as-nav-list.affix-bottom {
  position: fixed;
  top: auto;
  bottom: 75px;
}

/* ANW-1821 Copy `li.active > a` above for Bootstrap 4 `.active` placement */
.as-nav-list > li > a.active {
  color: #fff;
  background-color: #196076;
  border: 1px solid transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 1px 0 0 rgba(236, 128, 128, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

/* Desktop large
------------------------- */
@media (min-width: 1200px) {
  .as-nav-list {
    width: 258px;
  }
}

/* Desktop
------------------------- */
@media (max-width: 980px) {
  .as-nav-list {
    margin-right: 0;
  }
}

/* Tablet to desktop
------------------------- */
@media (min-width: 768px) and (max-width: 980px) {
  /* Adjust sidenav width */
  .as-nav-list {
    width: 166px;
  }
}

/* Tablet
------------------------- */
@media (max-width: 767px) {
  .as-nav-list {
    width: auto;
    margin-bottom: 20px;
  }
  .as-nav-list.affix {
    position: static;
    width: auto;
    top: 0;
  }
}
