scinote-web/app/assets/stylesheets/partials/_sidebar.scss

/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth

@import "constants";
@import "mixins";

:root {
  --wrapper-width: 280px;
}


#wrapper {
  display: none;
  padding-left: var(--wrapper-width);
  padding-right: 0;
  transition: .4s $timing-function-sharp;
}

.sidebar-container {
  background-color: $color-concrete;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--navbar-height));
  left: var(--menu-bar-width);
  position: fixed;
  transition: .4s $timing-function-sharp;
  width: var(--wrapper-width);
  z-index: 999;

  .show-sidebar {
    display: none;
  }

  .sidebar-header {
    align-items: center;
    color: $color-silver-chalice;
    display: flex;
    flex-shrink: 0;
    height: 2.5em;
    padding: 0 1em;

    .sidebar-title {
      @include font-small;
    }

    .close-sidebar {
      cursor: pointer;
      display: inline-block;
      line-height: 2em;
      margin-left: auto;
      text-align: center;
      width: 2em;
    }
  }

  .sidebar-body {
    background: linear-gradient($color-concrete 30%, hsla(0, 0%, 100%, 0)),
                linear-gradient(rgba(0, 0, 0, .1), transparent 70%);
    background-attachment: local, scroll;
    background-repeat: no-repeat;
    background-size: 100% 1em, 100% .5em;
    flex-basis: calc(100% - 2.5em);
    flex-grow: 1;
    overflow: auto;
    position: relative;
  }

  .sidebar-footer {
    flex-grow: 1;
    flex-shrink: 0;
  }

  &.collapsed {
    left: calc(var(--menu-bar-width) - var(--wrapper-width));

    .show-sidebar {
      background: $color-concrete;
      border-radius: 0 $border-radius-default $border-radius-default 0;
      cursor: pointer;
      display: block;
      line-height: 3em;
      margin-right: -2em;
      position: absolute;
      right: 0;
      text-align: center;
      top: .5em;
      width: 2em;
    }
  }

  .sidebar-branch {
    flex-basis: 100%;
    flex-grow: 1;
    list-style-type: none;
    padding-left: 2.5em;
  }

  .delimiter {
    background: $color-alto;
    height: 1px;
    margin: .5em 2.5em .5em 0;
  }

  .sidebar-leaf {
    align-items: center;
    display: flex;
    flex-wrap: wrap;

    .fa-map-marker-alt {
      color: $color-alto;
    }

    &:hover .fa-map-marker-alt,
    .fa-map-marker-alt.module-hover {
      color: $color-concrete;
    }

    .toggle-branch {
      cursor: pointer;
      display: inline-block;
      line-height: 4em;
      margin-left: -2em;
      margin-right: .5em;
      position: relative;
      text-align: center;
      width: 1.5em;

      &:hover ~ .sidebar-link:not(.selected) {
        background: $color-alto;

      }

      &.collapsed ~ .sidebar-branch {
        display: none;
      }
    }

    .sidebar-link {
      color: $color-black;
      display: inline-block;
      flex-grow: 1;
      line-height: 2em;
      margin-left: -2.5em;
      max-width: var(--wrapper-width);
      overflow: hidden;
      padding: 1em 2.5em;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover,
      &.module-hover {
        background: $color-alto;
      }

      &.selected {
        background: $color-white;
        color: $brand-primary;
        font-weight: bold;
        pointer-events: none;
      }

      .fa-folder {
        color: $brand-primary-light;
        margin-right: .5em;
      }

      &.back-button::before {
        @include font-awesome;
        content: "\f060";
        left: 1em;
        line-height: 26px;
        position: absolute;
      }
    }

    .canvas-center-on {
      cursor: pointer;
      display: inline-block;
      line-height: 4em;
      margin-left: -2.5em;
      position: relative;
      text-align: center;
      width: 2.5em;

      &:hover {
        color: $brand-primary;
      }
    }

    .repository-link {
      padding-right: 3em;
      position: relative;

      .repository-share-status {
        display: contents !important;
        position: absolute;
        right: -3em;

        &.hidden {
          display: none !important;
        }
      }

      .fas-custom {
        height: 4em;
        padding: 1.25em .75em;
        position: absolute;
        right: 0;
        top: 0;
        width: 3em;
      }
    }
  }
}

.my-module-group-element::before {
  border-left: 1px dotted $color-emperor;
  bottom: 20px;
  content: "";
  left: 34px;
  position: absolute;
  top: 25px;
}

.sidebar-no-module-group {
  color: $color-silver-chalice;
}