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

.assets-bar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;

  .assets-bar-title {
    color: $color-gray-10;
    font-size: $fs14;
    margin: $size-2 $size-2 0 $size-2;
    display: flex;
    align-items: center;
    cursor: pointer;

    & .libraries-button {
      margin-left: auto;
      display: flex;
      align-items: center;

      svg {
        fill: $color-gray-30;
        height: 16px;
        width: 16px;
        padding-right: 6px;
      }
    }

    & .libraries-button:hover {
      color: $color-primary;

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

  .search-block {
    border: 1px solid $color-gray-30;
    margin: $size-2 $size-2 0 $size-2;
    padding: $size-1 $size-2;
    display: flex;
    align-items: center;

    &:hover {
      border-color: $color-gray-20;
    }

    &:focus-within {
      border-color: $color-primary;
    }

    & .search-input {
      background-color: $color-gray-50;
      border: none;
      color: $color-gray-10;
      font-size: $fs12;
      margin: 0;
      padding: 0;
      flex-grow: 1;

      &:focus {
        color: lighten($color-gray-10, 8%);
        outline: none;
      }
    }

    & .search-icon {
      display: flex;
      align-items: center;

      svg {
        fill: $color-gray-30;
        height: 16px;
        width: 16px;
      }

      &.close {
        transform: rotate(45deg);
        cursor: pointer;
      }
    }
  }

  .input-select {
    background-color: $color-gray-50;
    color: $color-gray-10;
    border: 1px solid transparent;
    border-bottom-color: $color-gray-40;
    padding: $size-1;
    margin: $size-2 $size-2 $size-4 $size-2;

    &:focus {
      color: lighten($color-gray-10, 8%);
    }

    &:active {
      border-color: $color-primary;
    }

    option {
      background: $color-white;
      color: $color-gray-60;
      font-size: $fs12;
    }
  }

  .collapse-library {
    margin-right: $size-2;
    flex-shrink: inherit; // Inheriting shrink behaviour

    &.open svg {
      transform: rotate(90deg);
    }
  }

  .library-bar {
    cursor: pointer;
  }

  .listing-options {
    background-color: $color-gray-60;
    display: flex;
    align-items: center;
    padding: $size-4 $size-2 0 $size-2;

    .selected-count {
      color: $color-primary;
      font-size: $fs12;
    }

    .listing-option-btn {
      cursor: pointer;
      margin-left: $size-2;

      &.first {
        margin-left: auto;
      }

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

  .asset-section {
    background-color: $color-gray-60;
    padding: $size-2;
    font-size: $fs12;
    color: $color-gray-20;
    /* TODO: see if this is useful, or is better to leave only
             one scroll bar in the whole sidebar
             (also see .asset-list) */
    // max-height: 30rem;
    // overflow-y: scroll;

    // First child is the listing options buttons
    &:not(:nth-child(2)) {
      border-top: 1px solid $color-gray-50;
    }

    .asset-title {
      display: flex;
      cursor: pointer;
      font-size: $fs12;
      text-transform: uppercase;

      & .num-assets {
        color: $color-gray-30;
      }

      & svg {
        height: 8px;
        width: 8px;
        fill: $color-gray-30;
        margin-right: 4px;
        transform: rotate(90deg);
      }

      &.closed svg {
        transform: rotate(0deg);
        transition: transform 0.3s;
      }
    }

    .group-title {
      display: flex;
      cursor: pointer;
      margin-top: $size-2;
      margin-bottom: $size-1;
      color: $color-white;

      & svg {
        height: 8px;
        width: 8px;
        fill: $color-white;
        margin-right: 4px;
        transform: rotate(90deg);
      }

      &.closed svg {
        transform: rotate(0deg);
        transition: transform 0.3s;
      }

      & .dim {
        color: $color-gray-40;
      }
    }

    .assets-button {
      margin-left: auto;
      cursor: pointer;

      & svg {
        width: 0.7rem;
        height: 0.7rem;
        fill: #f0f0f0;
      }

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

    .asset-title + .asset-grid {
      margin-top: $size-2;
    }

    .asset-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 6vh;
      column-gap: 0.5rem;
      row-gap: 0.5rem;

      &.big {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 10vh;

        .three-row & {
          grid-template-columns: repeat(3, 1fr);
        }

        .four-row & {
          grid-template-columns: repeat(4, 1fr);
        }

        .grid-cell {
          padding: $size-1;

          & svg {
            height: 10vh;
          }
        }
      }
    }

    .grid-cell {
      background-color: $color-canvas;
      border-radius: $br4;
      border: 2px solid transparent;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: $size-2;
      position: relative;
      cursor: pointer;

      & img {
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
        pointer-events: none;
      }
    }

    .cell-name {
      background-color: $color-gray-60;
      font-size: $fs9;
      display: none;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.editing {
        display: block;
      }

      .editable-label-input {
        border: 1px solid $color-gray-20;
        border-radius: $br3;
        font-size: $fs12;
        padding: 2px;
        margin: 0;
        height: unset;
        width: 100%;
      }

      .editable-label-close {
        display: none;
      }
    }

    .grid-cell:hover {
      border: 2px solid $color-primary;

      & .cell-name {
        display: block;
      }
    }

    .grid-cell.selected {
      border: 2px solid $color-primary;
    }

    .grid-placeholder {
      border: 2px solid $color-gray-20;
      border-radius: $br4;
    }

    .drop-space {
      height: 10px;
    }

    .typography-container {
      position: relative;

      &:last-child {
        padding-bottom: 0.5em;
      }
    }

    .drag-counter {
      position: absolute;
      top: 5px;
      left: 4px;
      width: 16px;
      height: 16px;
      background-color: $color-primary;
      border-radius: 50%;
      color: $color-black;
      font-size: $fs12;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .asset-title + .asset-enum {
      margin-top: $size-2;
    }

    .asset-enum {
      .enum-item {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: $size-2;
        cursor: pointer;

        & > svg,
        & > img {
          background-color: $color-canvas;
          border-radius: $br4;
          border: 2px solid transparent;
          height: 24px;
          width: 24px;
          margin-right: $size-2;
        }

        .item-name {
          width: calc(100% - 24px - #{$size-2});
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: block;

          &.editing {
            display: flex;
            align-items: center;

            .editable-label-input {
              height: 24px;
            }

            .editable-label-close {
              display: none;
            }
          }
        }
      }

      .enum-item:hover,
      .enum-item.selected {
        color: $color-primary;
      }

      .grid-placeholder {
        margin-bottom: 5px;
      }
    }

    /* TODO: see if this is useful, or is better to leave only
             one scroll bar in the whole sidebar
             (also see .asset-section) */
    // .asset-list {
    //   max-height: 30rem;
    //   overflow-y: scroll;
    // }

    .asset-list-item {
      display: flex;
      align-items: center;
      border: 1px solid transparent;
      border-radius: $br3;
      margin-top: $size-1;
      padding: 2px;
      font-size: $fs12;
      color: $color-white;
      cursor: pointer;
      position: relative;

      .name-block {
        color: $color-gray-20;
        width: calc(100% - 24px - #{$size-2});
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      & span {
        margin-left: $size-1;
        color: $color-gray-30;
        text-transform: uppercase;
      }

      &.selected {
        border: 1px solid $color-primary;
      }
    }

    .context-menu {
      position: fixed;
      top: 10px;
      left: 10px;
    }

    .advanced-options {
      border-color: $color-black;
      background-color: $color-gray-60;

      .input-text,
      .input-select,
      .adv-typography-name {
        background-color: $color-gray-60;
      }
    }

    .dragging {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: color.adjust($color-primary, $alpha: -0.5);
    }
  }
}

.modal-create-color {
  position: relative;
  background-color: $color-white;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  & .sketch-picker,
  .chrome-picker {
    box-shadow: none !important;
    border: 1px solid $color-gray-10 !important;
    border-radius: $br0 !important;

    & input {
      background-color: $color-white;
    }
  }

  & .close {
    position: absolute;
    right: 1rem;
    transform: rotate(45deg);
    top: 1rem;

    svg {
      fill: $color-black;
      height: 20px;
      width: 20px;

      &:hover {
        fill: $color-danger;
      }
    }
  }

  & .btn-primary {
    width: 10rem;
    padding: 0.5rem;
    margin-top: 1rem;
  }
}

.modal-create-color-title {
  color: $color-black;
  font-size: $fs24;
  font-weight: $fw400;
}

.libraries-wrapper {
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}