penpot/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.sitemap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: var(--height, $s-200);
}

.title {
  margin-left: $s-2;
  color: var(--title-foreground-color-hover);
}

.resize-area {
  position: absolute;
  bottom: calc(-1 * $s-8);
  left: 0;
  width: 100%;
  height: $s-12;
  border-top: $s-2 solid var(--resize-area-border-color);
  background-color: var(--resize-area-background-color);
  cursor: ns-resize;
  &:hover {
    border-color: var(--resize-area-border-color);
  }
}

.tool-window-content {
  display: flex;
  flex-direction: column;
  height: calc(-38px + var(--height, $s-200));
  width: 100%;
  overflow-x: hidden;
  overflow-y: overlay;
  scrollbar-gutter: stable;
  max-width: var(--width);
}

.pages-list {
  width: 100%;
  max-height: $s-152;
  margin-bottom: $s-12;
}

.page-element {
  @include bodySmallTypography;
  min-height: $s-32;
  width: 100%;
  cursor: pointer;
  &.dnd-over-top {
    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
  }
  &.dnd-over-bot {
    border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
  }
  .dnd-over > .element-list-body {
    border: $s-1 solid var(--layer-row-foreground-color-drag);
  }
  .element-list-body {
    display: flex;
    align-items: center;
    height: $s-32;
    width: 100%;
    padding: 0 $s-12 0 0;
    transition: none;
    color: var(--layer-row-foreground-color);
    .page-name {
      @include textEllipsis;
      flex-grow: 1;
      padding-left: $s-2;
    }
    .page-icon {
      @include flexCenter;
      height: $s-32;
      width: $s-24;
      padding: 0 $s-4 0 $s-8;
      svg {
        @extend .button-icon-small;
        height: $s-12;
        width: $s-12;
        color: transparent;
        fill: none;
        stroke: var(--icon-foreground);
      }
    }
    .page-actions {
      height: $s-32;
      button {
        @include buttonStyle;
        @include flexCenter;
        width: $s-24;
        height: 100%;
        opacity: $op-0;
        svg {
          @extend .button-icon-small;
          height: $s-12;
          width: $s-12;
          color: transparent;
          fill: none;
          stroke: var(--icon-foreground);
        }
      }
    }
    .element-name {
      @include textEllipsis;
      color: var(--layer-row-foreground-color-focus);
    }
    input.element-name {
      @include textEllipsis;
      @include bodySmallTypography;
      @include removeInputStyle;
      flex-grow: 1;
      height: $s-28;
      max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
      padding-left: $s-6;
      margin: 0;
      border-radius: $br-8;
      border: $s-1 solid var(--input-border-color-focus);
      color: var(--layer-row-foreground-color);
    }
  }
  &:active,
  &.on-drag {
    .element-list-body {
      color: var(--layer-row-foreground-color-drag);
      background-color: var(--layer-row-background-color-drag);
      .page-actions button {
        svg {
          stroke: var(--layer-row-foreground-color-drag);
        }
      }
      .page-icon svg {
        stroke: var(--layer-row-foreground-color-drag);
      }
    }
  }
  &.selected,
  &.selected:hover {
    .element-list-body {
      color: var(--layer-row-foreground-color-selected);
      background-color: var(--layer-row-background-color-selected);
      box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
      .page-actions button {
        svg {
          stroke: var(--layer-row-foreground-color-selected);
        }
      }
      .page-icon svg {
        stroke: var(--layer-row-foreground-color-selected);
      }
    }
  }
  &:hover,
  &.hover {
    .element-list-body {
      color: var(--layer-row-foreground-color-hover);
      background-color: var(--layer-row-background-color-hover);
      box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
      .page-actions button {
        opacity: $op-10;
        svg {
          stroke: var(--layer-row-foreground-color-hover);
        }
      }
      .page-icon svg {
        stroke: var(--layer-row-foreground-color-hover);
      }
    }
  }
  &:focus {
    .element-list-body {
      color: var(--layer-row-foreground-color-focus);
      border: $s-1 solid var(--layer-row-border-color-focus);
      outline: none;
      .page-actions button {
        opacity: $op-10;
      }
    }
  }
  &:focus-within {
    .element-list-body {
      outline: none;
      .page-actions button {
        opacity: $op-10;
      }
    }
  }

  &.hidden {
    .element-list-body {
      color: var(--layer-row-foreground-color-hidden);
      background-color: var(--layer-row-background-color-hidden);
      opacity: $op-7;
      .page-actions button {
        svg {
          stroke: var(--layer-row-foreground-color-hidden);
        }
      }
      .page-icon svg {
        stroke: var(--layer-row-foreground-color-hidden);
      }
    }
  }
}

.title-spacing-sitemap {
  padding-inline-start: $s-8;
  margin-block-start: $s-8;
  margin-block-end: $s-4;
}