penpot/frontend/resources/styles/main/partials/sidebar-layers.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

.element-list-body {
  align-items: center;
  display: flex;
  height: 32px;
  padding: $size-1 $size-2;
  transition: none;
  width: 100%;
  .toggle-content {
    svg {
      display: flex;
      height: 13px;
      width: 13px;
    }
  }

  .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    margin-bottom: 3px;
    width: 18px;
    height: 18px;

    svg {
      fill: $color-gray-20;
      height: 12px;
      width: 12px;
    }

    & .absolute {
      position: absolute;
      top: 0;
      left: 0;
      width: 18px;
      height: 18px;

      svg {
        width: 18px;
        height: 18px;
        fill: $color-gray-20;
        fill-opacity: 0.5;
      }
    }
  }

  &.selected .icon .absolute svg {
    fill: $color-primary;
  }

  &:hover .icon .absolute svg {
    fill: $color-gray-60;
  }

  &.group {
    &.open {
      .toggle-content {
        flex-shrink: 0;

        svg {
          transform: rotate(270deg);
        }
      }
    }
  }

  &:hover,
  &.hover {
    background-color: $color-primary;

    svg {
      fill: $color-gray-60 !important;
    }

    .element-icon,
    .element-actions {
      svg {
        fill: $color-gray-60;
      }
    }

    .element-actions > * {
      display: flex;
    }

    span {
      color: $color-gray-60;
    }
    input {
      color: $color-white !important;
    }

    .toggle-content {
      svg {
        fill: $color-gray-60;
      }
    }
  }

  &.selected {
    background-color: $color-gray-60;

    svg {
      fill: $color-primary;
    }

    .element-icon {
      svg {
        fill: $color-primary;
      }
    }

    span {
      color: $color-primary;
    }

    &:hover {
      background-color: $color-primary;

      .element-icon,
      .element-actions {
        svg {
          fill: $color-gray-60;
        }
      }

      .element-name {
        color: $color-gray-60;
      }
    }
  }

  &.drag-top {
    border-top: 40px solid $color-gray-60 !important;
  }

  &.drag-bottom {
    border-bottom: 40px solid $color-gray-60 !important;
  }

  &.drag-inside {
    border: 2px solid $color-primary !important;
  }
}

.element-list li.sticky {
  > :first-child {
    position: sticky;
    top: 0px;
    background-color: $color-gray-50;
    z-index: 1;
    &.selected {
      background-color: #1f1f1f;
    }
    &:hover {
      background-color: #31efb8;
    }
  }
}

.element-list li.component {
  .element-list-body {
    span.element-name {
      color: $color-component;
    }

    svg {
      fill: $color-component;
    }

    &.selected {
      span.element-name {
        color: $color-component-highlight;
      }

      svg {
        fill: $color-component-highlight;
      }
    }

    &:hover {
      background-color: $color-component-highlight;

      span.element-name {
        color: $color-gray-60;
      }
      input.element-name {
        color: $color-white !important;
      }

      svg {
        fill: $color-gray-60;
      }
    }
  }
}

.element-list li.masked > .element-children > li {
  &:first-child {
    position: relative;

    &::before {
      content: " ";
      border-right: 1px solid $color-gray-40;
      border-top: 1px solid $color-gray-40;
      position: absolute;
      width: 6px;
      height: 6px;
      transform: rotate(-45deg);
      top: -1px;
      left: -4px;
    }

    &.sticky {
      margin-top: 32px;
    }
  }

  &:last-child {
    border-left: none;
    position: relative;

    &::after {
      content: " ";
      border-left: 1px solid $color-gray-40;
      border-bottom: 1px solid $color-gray-40;
      height: 1rem;
      width: 0.3rem;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.element-icon {
  svg {
    fill: $color-gray-30;
  }
}

input.element-name {
  max-width: 75%;
  margin-right: 5px;
  background-color: $color-gray-50;
  color: $color-white;
  &:focus,
  &:focus-within {
    outline: none;
    border: 1px solid $color-primary;
  }
}

span.element-name {
  color: $color-gray-20;
  display: block;
  font-size: $fs12;
  max-width: 75%;
  min-width: 40px;
  min-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  &.left-ellipsis {
    direction: rtl; // hack for getting the ellipsis on the left side
  }
}

.element-actions {
  display: flex;
  flex-shrink: 0;
  height: 14px;
  margin-left: auto;
  position: relative;
  width: 32px;

  &.is-parent {
    right: 0;
  }

  svg {
    height: 13px;
    width: 13px;
  }

  > * {
    display: none;
  }

  .toggle-element,
  .block-element {
    border: none;
    background-color: transparent;
    left: 0;
    position: absolute;
    top: 0;

    &.selected {
      display: flex;

      svg {
        fill: $color-gray-20;
      }
    }
  }
}

.block-element {
  left: 18px !important;

  svg {
    fill: $color-gray-30;
  }
}

.toggle-content {
  margin-left: 8px;
  width: 12px;

  svg {
    fill: $color-gray-20;
    transform: rotate(90deg);
    width: 10px;
  }

  &.inverse {
    svg {
      transform: rotate(270deg);
    }
  }

  &:hover {
    svg {
      fill: $color-gray-60;
    }
  }
}

.icon-layer {
  > svg {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: $br3;
    flex-shrink: 0;
    fill: $color-black !important;
    padding: 1px;
  }
}

#layers {
  .tool-window-bar,
  .pages-tool-bar {
    display: flex;
    justify-content: space-between;
    height: 40px;
    padding: 0;

    &.search {
      margin-top: 8px;
      padding: 8px;
      .search-box {
        border: 1px solid $color-gray-20;
        border-radius: $br4;
        height: 32px;
        width: 100%;
        display: flex;
        align-items: center;
        &:active,
        &:focus-within {
          border: 1px solid $color-primary;
        }
        input {
          border: 0;
          width: 100%;
          background-color: $color-gray-50;
          color: $color-white;
          font-size: $fs12;
          flex-grow: 1;
          margin: 0;
          height: 16px;
          &:focus {
            outline: none;
          }
        }
        div {
          height: 16px;
          overflow: hidden;
          width: 100%;
          display: flex;
          align-items: center;
        }
        .filter,
        .clear {
          width: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          &.active {
            svg {
              fill: $color-primary;
            }
          }
        }
      }
    }

    svg {
      width: 16px;
      height: 16px;
      margin: 0 2px 0 5px;
      cursor: pointer;
    }
    .page-name {
      padding: 8px;
      margin-top: 8px;
      color: #e3e3e3;
      font-size: 0.875rem;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon-search {
      margin-top: 8px;
    }
    .focus-title {
      width: 100%;
      height: 100%;
      display: grid;
      align-items: center;
      grid-template-columns: 16px 1fr auto;
      grid-column-gap: 8px;
      cursor: pointer;

      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: none;
        border: none;
        padding: 0;
        margin: 0;

        svg {
          width: 12px;
          height: 12px;
          fill: $color-gray-20;
          transform: rotate(180deg);
        }

        &:hover {
          svg {
            fill: $color-primary;
          }
        }
      }

      .focus-name {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .focus-mode {
        color: $color-primary;
        border: 1px solid $color-primary;
        border-radius: $br3;
        font-size: $fs10;
        text-transform: uppercase;
        padding: 0px 4px;
        display: flex;
        align-items: center;
      }
    }
  }
}
.active-filters {
  margin-top: 5px;
  line-height: 26px; // Original value was 26px; 26px/11px = 236.363636364% => $lh-236 (rounded)
  font-size: $fs11;
  margin: 0 0.5rem;
  span {
    background-color: $color-primary;
    color: $color-black;
    padding: 3px 5px;
    margin: 0 2px;
    border: none;
    border-radius: $br4;
    cursor: pointer;
    svg {
      width: 7px;
      height: 7px;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
}

.filters-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 40px;
  left: 8px;
  background-color: $color-white;
  color: $color-gray-50;
  border-radius: $br4;
  z-index: 1;
  span {
    padding: 10px 20px 10px 10px;
    border-radius: $br4;
    svg {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      vertical-align: middle;
      fill: $color-gray-30;
    }

    &:hover {
      background-color: $color-primary-lighter;
    }
  }
}