insomnia/app/ui/css/components/sidebar.less

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

.sidebar {
  position: relative;
  display: grid;
  grid-template-rows: @height-nav auto auto minmax(0, 1fr) auto;
  grid-template-columns: 100%;

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

  width: 100%;
  height: 100%;

  // Don't collapse direct children, but their children
  &.sidebar--collapsed > * > * {
    opacity: 0;
    transition: opacity 0.5s;
  }

  &.sidebar--hidden {
    // Can't be display: none because it screws up the grid
    opacity: 0;
  }

  &:focus {
    outline: none;
  }

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

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

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

  // ~~~~~~~~~~~~~~~ //
  // Sidebar Toolbar //
  // ~~~~~~~~~~~~~~~ //

  .sidebar__filter {
    // Nothing yet
    width: 100%;
    display: grid;
    font-size: @font-size-sm;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    .btn {
      padding: 0 (@padding-md - @padding-xxs);
      margin-right: @padding-xxs;
      border-radius: @radius-md;
      color: @hl;

      &:hover,
      &:focus {
        color: @font-dark-bg;
      }
    }

    .form-control {
      padding: 0 @padding-xxs 0 0;
      margin: @padding-sm 0 @padding-sm @padding-sm;

      input {
        padding: @padding-xs;
      }
    }
  }

  .sidebar__menu {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template-columns: 55% 45%;
    justify-items: center;
    font-size: @font-size-sm;
    color: @hl;
    padding: 0 @padding-sm;

    & > * {
      width: 100%;
      margin-top: @padding-sm;
    }

    & > *:first-child {
      margin-right: @padding-xxs;
    }

    & > *:last-child {
      margin-left: @padding-xxs;
    }

    .sidebar__menu__thing {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      & > *:first-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .btn {
      width: 100%;
      border-radius: 900px;
      height: @line-height-xxs;
      padding-left: @padding-xxs;
      padding-right: @padding-xxs;

      &:hover,
      &:focus {
        color: @font-dark-bg;
      }
    }
  }

  &.sidebar--skinny .sidebar__filter {
    grid-template-columns: 100%;

    & > *:first-child {
      margin-right: @padding-xs;
    }

    & > *:last-child {
      display: none;
    }
  }

  &.sidebar--skinny .sidebar__menu {
    grid-template-columns: 100%;

    & > *:last-child {
      display: none;
    }

    .btn {
      padding-left: @padding-xs;
      padding-right: @padding-xs;
    }
  }

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

  .sidebar__list-root {
    // Add some space above so it's not so squished
    border-top: 1px solid @hl-sm;
    padding-top: @padding-xs;
    padding-bottom: @padding-md;
    box-shadow: inset 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1);

    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: minmax(0, 1fr) auto;
    grid-template-rows: @line-height-xs;
    color: @hl-xxl;

    & > * {
      height: 100%;
    }

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

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

      .tag {
        opacity: 1;
      }

      .editable {
        line-height: @line-height-xs;
      }
    }

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

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

    .tag {
      opacity: 0.6;
      padding-left: 0;
      text-align: left;
      width: 2.8em;
      text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.9);
    }
  }

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

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

  .sidebar__clickable {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;

    & > *:last-child {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // Padding for nested folders

  .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 {
    height: @line-height-xs;
    border-top: 1px solid @hl-md;
  }

  .sidebar__footer .dropdown > button {
    font-size: @font-size-sm;
    padding: @padding-xs @padding-md;
    height: 100%;
    margin: 0;
    color: @hl;
    width: 100%;
    box-sizing: border-box;
  }
}