locomotivecms/engine

// =============================================================================
// Sidebar
// =============================================================================

// Sidebar wrapper class.

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 300px;
  overflow: auto;
  background: $gray-darkest;
  transition: left $base-transition-speed linear;

  .draggable:hover {
     cursor: move;
  }
}

// Sidebar top logo in the sidebar.

.sidebar-logo {
  display: block;
  padding: 16px 20px;
  text-align: center;
  background: darken($gray-darkest, 2);
  img {
    height: 18px;
  }
}

// Sidebar link wrapper class.

.sidebar-link {
  display: block;
  padding: 17px 25px 17px 22px;
  color: $gray-lightest;
  border-bottom: 1px solid lighten($gray-darkest, 7);
  border-left: 3px solid transparent;
  transition: background $base-transition-speed linear;
  .fa, .far, .fas, .fal {
    display: inline-block;
    width: 35px;
    padding-top: 2px;
    font-size: 16px;
    color: $gray-light;
    vertical-align: middle;
  }
  span {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .1em;
    color: lighten($gray, 10);
    text-transform: uppercase;
    vertical-align: middle;
  }
  .fa-caret-down {
    float: right;
    padding-top: 5px;
    color: $gray-darker;
    text-align: right;
  }
  &:hover {
    background: lighten($gray-darkest, 7);
  }
  &.is-active {
    background: lighten($gray-darkest, 7);
    border-left-color: $brand-primary;
    span,
    .fa, .fal, .far, .fas {
      color: $white;
    }
  }
}

// Draggable placeholder background when dragging over potential positions.

.sortable-placeholder {
  display: block;
  height: 20px;
  background: $gray-darkest;
}

// Sidebar main link list.

.sidebar-list {
  padding: 0;
  margin: 0;
  list-style: none;
  background: darken($gray-darkest, 2);
  border-bottom: 1px solid lighten($gray-darkest, 7);
  li {
    display: block;
    padding: 5px 25px;
    color: $gray-lightest;
    .fa-globe.untranslated {
      float: right;
      margin-top: 6px;
      color: $brand-warning;
    }
    .badge {
      float: right;
      margin-top: 2px;
    }
    &.node {
      li {
        padding-right: 0px;
      }
    }
    &:first-child {
      padding-top: 15px;
    }
    &:last-child {
      padding-bottom: 15px;
    }
    &.sidebar-list-add a {
      color: $gray-dark;
      .fa {
        color: $gray-dark;
      }
    }
    &.unpublished a {
      font-style: italic;
      color: $gray-dark;
    }
    a {
      display: inline-block;
      font-size: 11px;
      letter-spacing: .1em;
      color: lighten($gray, 10);
      text-transform: uppercase;
      vertical-align: middle;
      transition: color $base-transition-speed linear;
      .fa, .fas, .far, .fal {
        display: inline-block;
        width: 25px;
        font-size: 14px;
        color: $gray-dark;
        text-align: left;
        vertical-align: middle;
        transition: color $base-transition-speed linear;
      }
      span {
        @include truncate();
        display: inline-block;
        width: 210px;
        vertical-align: middle;
      }
      &:hover,
      &:focus,
      &:active {
        color: $white;
        text-decoration: none;
        .fa {
          color: $white;
        }
      }
    }
  }
}

// Sidebar sublist for links under each sidebar link.

.sidebar-sublist {
  display: block;
  padding: 5px 0 0 15px;
  li {
    padding: 5px 10px;
    a span {
      @include truncate();
      width: 180px;
    }
    &:first-child {
      padding-top: 5px;
    }
    &:last-child {
      padding-bottom: 0;
    }
  }
}

// Responsive
// =============================================================================

@media (max-width: $screen-md-min) {
  .sidebar {
    left: -300px;
  }
}