penpot/frontend/src/app/main/ui/workspace/libraries.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";

.modal-overlay {
  @include flexCenter;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: $z-index-modal;
  background-color: var(--overlay-color);
  pointer-events: none; // This is to allow outside click that closes modal.

  .modal-dialog {
    position: relative;
    height: $s-520;
    max-height: 100%;
    width: $s-712;
    padding: $s-32;
    border-radius: $br-10;
    background-color: var(--modal-background-color);
    pointer-events: all;
    .close {
      @extend .button-tertiary;
      position: absolute;
      top: $s-8;
      right: $s-8;
      width: $s-28;
      height: $s-32;
      border-radius: $br-8;
      svg {
        @extend .button-icon;
        stroke: var(--icon-foreground);
      }
    }
    .modal-title {
      @include tabTitleTipography;
      margin-bottom: $s-16;
    }

    .modal-content {
      height: 100%;
      .libraries-header {
        height: 100%;
      }
      .libraries-content,
      .updates-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: $s-32;
        padding-top: $s-24;
        height: 100%;
        max-height: $s-400;
        .section {
          display: flex;
          flex-direction: column;
          height: calc(100% - $s-12);
          .title-spacing-lib {
            margin: 0 0 $s-24 calc(-1 * $s-8);
          }
          .section-list,
          .section-list-shared {
            height: 100%;
            max-height: $s-320;
            margin-top: $s-12;
            overflow: auto;
            .section-list-item {
              display: grid;
              grid-template-columns: 1fr auto;
              margin-bottom: $s-24;
              &:last-child {
                margin-bottom: $s-8;
              }

              .item-name {
                @include titleTipography;
                color: var(--library-name-foreground-color);
              }
              .item-contents {
                @include titleTipography;
                color: var(--library-content-foreground-color);
              }

              .item-publish,
              .item-unpublish {
                @extend .button-primary;
                @include tabTitleTipography;
                height: $s-32;
                min-width: $s-92;
                padding: $s-8 $s-24;
                border-radius: $br-8;
              }
              .item-update {
                @extend .button-warning;
                @include tabTitleTipography;
                height: $s-32;
                min-width: $s-92;
                padding: $s-8 $s-24;
                border-radius: $br-8;
                margin-right: $s-2;
                &.disabled {
                  @extend .button-disabled;
                }
              }
              .item-unpublish {
                @extend .button-secondary;
              }
              .item-button,
              .item-button-shared {
                @extend .button-secondary;
                padding: $s-8 $s-24;
                height: $s-32;
                border-radius: $br-8;
                margin-right: $s-2;
                svg {
                  @extend .button-icon;
                  stroke: var(--icon-foreground);
                }
              }
              .item-button-shared {
                padding: $s-8;
                width: $s-32;
              }
              .item-button-icon {
                width: $s-28;
                height: $s-28;
                svg {
                  @extend .button-icon;
                  stroke: var(--icon-foreground);
                }
              }
            }
          }
          .section-list-shared {
            max-height: $s-272;
          }

          .section-title {
            @include titleTipography;
            margin-bottom: $s-12;
          }
          .libraries-search {
            margin: $s-12 0;
            .search-icon {
              @include flexCenter;
              padding: 0 0 0 $s-8;
              width: $s-20;
              svg {
                @extend .button-icon-small;
                stroke: var(--icon-foreground);
              }
            }
          }
          .section-list-empty {
            @include titleTipography;
            @include flexCenter;

            svg {
              @extend .button-icon-small;
              stroke: var(--icon-foreground);
              width: $s-16;
              height: $s-16;
            }
          }
        }
        .libraries-updates {
          display: grid;
          grid-column: span 3;
          grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr));
          grid-gap: $s-24;
          font-size: $fs12;
          margin-top: $s-16;

          .libraries-updates-item {
            display: flex;
            align-items: center;

            &:not(:first-child) {
              margin-top: $s-8;
            }

            & svg {
              background-color: var(--canvas-color);
              border-radius: $br-4;
              border: $s-2 solid transparent;
              height: $s-24;
              width: $s-24;
              min-height: $s-24;
              min-width: $s-24;
            }

            & .name-block {
              color: var(--gray-20-color);
              margin-left: $s-8;
              width: $s-168;

              &.ellipsis {
                padding-left: calc($s-24 + #{$s-8});
              }
            }

            & .item-name {
              display: block;
              margin: 0;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
        .libraries-updates-see-all {
          direction: rtl;
          grid-column: span 3;
          margin-top: $s-8;
          margin-right: $s-8;
          & input {
            @extend .link;
            margin: 0;
          }
        }
      }
      .updates-content {
        grid-template-columns: 1fr;
      }
    }
  }
}

.element-count {
  white-space: nowrap;
}