insomnia/app/css/components/sidebar.scss

@import '../constants/dimensions';
@import '../constants/colors';

.sidebar {
  position: relative;
  display: grid;
  grid-template-rows: $line-height-md 1fr auto;
  grid-template-columns: 1fr;

  background-color: $bg-dark;
  color: $font-dark-bg;

  width: 100%;
  height: 100%;

  &:focus {
    outline: none;
  }

  // ~~~~~~~~~~~~~~ //
  // Sidebar Header //
  // ~~~~~~~~~~~~~~ //

  .sidebar__header {
    background-color: $bg-brand;
    color: $font-brand-bg;
    width: 100%;

    &:hover {
      background-color: lighten($bg-brand, 1);
    }

    h1 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      // HACK: Bump up the arrow a bit
      i.fa-caret-down {
        position: relative;
        top: -2px;
      }
    }

    // Make the dropdown offset to the right
    .dropdown ul {
      right: -40%;
    }

    .btn {
      padding: 0 $padding-md;
    }
  }

  // ~~~~~~~~~~~~ //
  // Sidebar List //
  // ~~~~~~~~~~~~ //

  .sidebar__list {
  }

  // Root list scrolling

  & > .sidebar__list {
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    &:hover::-webkit-scrollbar {
      display: block;
    }
  }

  // ~~~~~~~~~~~ //
  // Sidebar Row //
  // ~~~~~~~~~~~ //

  .sidebar__row {
    position: relative;

    &.sidebar__row--dragging {
      // Set opacity on children so we can still see the separator
      & > * {
        opacity: 0.2;
      }
    }

    &.sidebar__row--dragging-below::after,
    &.sidebar__row--dragging-above::before {
      position: absolute;
      height: 0;
      right: 0;
      left: 0;
      border-bottom: 2px dotted lighten($surprise, 5);
      content: " ";
      display: block
    }
  }

  // ~~~~~~~~~~~~ //
  // Sidebar Item //
  // ~~~~~~~~~~~~ //

  .sidebar__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: $line-height-xs;
    color: $hl;

    & > * {
      height: 100%;
    }

    &.sidebar__item--big {
      grid-template-rows: $line-height-sm;
    }

    &.sidebar__item--active > button {
      color: $font-dark-bg;

      .tag {
        opacity: 1;
      }
    }

    &.sidebar__item--active > .sidebar__actions,
    & > button:focus {
      background-color: $hl-xxs;
    }

    &:hover > .sidebar__actions,
    &:hover > button {
      background-color: $hl-xxxs;
    }

    .tag {
      opacity: 0.5;
      padding-left: 0;
      text-align: left;
      width: 2.8em;
    }
  }

  .sidebar__item__icon {
    padding-right: $padding-sm;
  }

  // ~~~~~~~~~~~~~~~~~ //
  // Sidebar Clickable //
  // ~~~~~~~~~~~~~~~~~ //

  .sidebar__clickable {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  // Padding

  .sidebar__list .sidebar__clickable {
    padding-left: $padding-md;
  }

  .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: $padding-md * 2;
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: $padding-md * 3;
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: $padding-md * 4;
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: $padding-md * 5;
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: $padding-md * 6;
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: $padding-md * 7;
  }

  // ~~~~~~~~~~~~~~~ //
  // Sidebar Actions //
  // ~~~~~~~~~~~~~~~ //

  .sidebar__actions {
    & > * {
      height: 100%;
    }

    & > button,
    & > .dropdown > button {
      display: none;
      color: $hl;
      height: 100%;
      padding: 0 $padding-sm;
    }

    & > button:hover,
    & > .dropdown:hover > button {
      color: $font-dark-bg;
    }
  }

  .sidebar__item:hover .sidebar__actions > button,
  .sidebar__item:hover .sidebar__actions > .dropdown > button {
    display: initial;
  }

  // ~~~~~~~~~~~~~~ //
  // Sidebar Footer //
  // ~~~~~~~~~~~~~~ //

  .sidebar__footer {
    // Nothing yet
    display: flex;
    flex-direction: row;
    align-items: center;

    .btn {
      color: $hl;
    }

    .form-control {
      padding: 0;
      width: 100%;
      input {
        padding: $padding-xs;
      }
    }
  }
}