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

.sidebar {
  position: relative;
  display: grid;
  grid-template-rows: auto auto fit-content(20%) auto minmax(0, 1fr) auto;
  grid-template-columns: 100%;
  z-index: 10;

  background-color: var(--color-bg);
  color: var(--color-font);

  width: 100%;
  height: 100%;

  & > .sidebar__list:last-child {
    padding-bottom: var(--padding-md);
  }

  &.sidebar--collapsed > * > * {
    display: none;
  }

  &.sidebar--hidden {
    // It proved difficult to keep the invisible children from overflowing when
    // hidden, so we're just going to bump it way to the left to be sure.
    left: -9999px;
  }

  &:focus {
    outline: none;
  }

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

  .sidebar__header {
    border-top: 1px solid var(--hl-md);
    border-bottom: 1px solid var(--hl-md);
    box-sizing: border-box;
    background-color: var(--color-bg);
    color: var(--color-font);
    width: 100%;
    height: var(--nav-height);

    h1 {
      margin: 0;
    }

    h1,
    h1 * {
      font-size: var(--font-size-xl);
    }
  }

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

  .sidebar__filter {
    // Nothing yet
    display: grid;
    font-size: var(--font-size-sm);
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    box-sizing: border-box;
    padding: var(--padding-sm) 0 var(--padding-xxs) var(--padding-sm);

    .btn {
      padding: 0 calc(var(--padding-md) - var(--padding-xs));
      margin-right: var(--padding-xxs);
      border-radius: var(--radius-md);
      margin-left: var(--padding-xxs);
      margin-bottom: var(--padding-sm);
      height: var(--line-height-xxs);
    }

    .form-control input {
      margin-top: 0;
      height: auto;
      background: transparent;
    }
  }

  .sidebar__menu {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--hl);
    padding-left: var(--padding-xs);
    padding-right: var(--padding-xs);
    height: var(--height-nav);

    &--insomnia-HACK {
      height: var(--line-height-md);
    }

    // Make it scroll when too skinny
    overflow: auto;

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

    & > * {
      flex: 1;
      margin-top: var(--padding-xs);
      margin-bottom: var(--padding-xs);
      max-width: 100%;
    }

    & > .dropdown > * {
      width: 100%;
    }

    & > *:first-child {
      margin-right: var(--padding-xxs);
    }

    & > *:last-child {
      margin-left: var(--padding-xxs);
    }

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

      & > .sidebar__menu__thing__text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      i.fa {
        // Bump the drop down caret down a bit
        position: relative;
        top: 1px;
      }
    }

    .btn {
      border-radius: 900px;
      height: var(--line-height-xxs);
      padding-left: var(--padding-xxs);
      padding-right: var(--padding-xxs);
      color: var(--color-font);

      &:hover,
      &:focus {
        opacity: 1;
      }
    }
  }

  .sidebar__top {
    background: var(--color-bg);
    color: var(--color-font);
  }

  &.sidebar--skinny .sidebar__filter {
    grid-template-columns: 100%;
    padding-right: var(--padding-sm);

    & > *:first-child {
      margin-right: var(--padding-xs);
    }

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

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

  .sidebar__list-root {
    box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.03);

    overflow-y: auto;

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

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

  .sidebar__list-separator {
    height: 2px;
    background-color: var(--hl-sm);
    margin: var(--padding-sm) 0;

    &--invisible {
      opacity: 0;
    }
  }

  .sidebar__list--collapsed > * {
    display: none;
  }

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

  .sidebar__row {
    position: relative;

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

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

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

  .sidebar__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: var(--line-height-xs);

    & > button {
      color: var(--hl);
    }

    & > * {
      height: 100%;
    }

    &.sidebar__item--big {
      grid-template-rows: var(--line-height-sm);
    }

    &.sidebar__item--active > button {
      color: var(--color-font);

      .tag {
        opacity: 1;
      }
    }

    & > button {
      border-left: var(--padding-xxs) solid transparent;
    }

    &.sidebar__item--active.sidebar__item--request,
    &:focus,
    &:hover {
      background-color: var(--hl-xs);
      transition: background-color 0ms;
    }

    & > button:focus {
      border-left-color: var(--color-surprise);
    }

    .tag {
      padding-left: 0;
      text-align: left;
      width: 3em;
    }
  }

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

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

    & > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &.empty {
        font-style: italic;
        opacity: 0.5;
      }
    }
  }

  // Padding for nested folders

  .sidebar__list .sidebar__clickable {
    padding-left: var(--padding-sm);
  }

  .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: calc(var(--padding-sm) + var(--padding-md) * 1);
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: calc(var(--padding-sm) + var(--padding-md) * 2);
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: calc(var(--padding-sm) + var(--padding-md) * 3);
  }

  .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
    padding-left: calc(var(--padding-sm) + var(--padding-md) * 4);
  }

  .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__clickable {
    padding-left: calc(var(--padding-sm) + var(--padding-md) * 5);
  }

  .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__list
    .sidebar__clickable {
    padding-left: calc(var(--padding-sm) + var(--padding-md) * 6);
  }

  // ~~~~~~~~~~~~~~~ //
  // Sidebar Expand  //
  // ~~~~~~~~~~~~~~~ //

  .sidebar__expand {
    display: none;
    height: 100%;

    &.sidebar__expand-hint {
      display: flex;
      align-items: center;
    }
  }

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

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

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

    & > button:hover,
    & .dropdown > button:focus,
    & > .dropdown:hover > button {
      color: var(--color-font);
    }
  }

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

  .sidebar__item__icon-pin {
    display: flex;
    align-items: center;
    color: var(--hl-xl);
    height: 100%;
    padding: 0 var(--padding-sm);
  }

  .sidebar__item:hover .sidebar__item__icon-pin {
    display: none;
  }

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

  .sidebar__footer {
    height: var(--line-height-xs);
    border-top: 1px solid var(--hl-md);
    width: 100%;
    grid-row-start: -1;
  }

  .sidebar__footer > button,
  .sidebar__footer .dropdown > button {
    font-size: var(--font-size-sm);
    padding: var(--padding-xs) var(--padding-md);
    height: 100%;
    margin: 0;
    color: var(--hl);
    box-sizing: border-box;
    overflow: hidden;
  }
}