penpot/resources/styles/partials/lightbox.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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>

.lightbox {
  align-items: center;
  background-color: $color-dark-bg;
  display: flex;
  justify-content: center;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;

  &.transparent {
    background-color: rgba(0,0,0,0);
  }

  .lightbox-body {
    align-items: center;
    background-color: $color-white;
    border-radius: $br-medium;
    display: flex;
    flex-direction: column;
    padding: $medium $x-big;
    position: relative;
    width: 500px;
    @include animation(.1s,1s,fadeInDown);

    .lightbox-label {
      display: flex;
      font-weight: bold;
      margin: $medium 0;
      width: 100%;
    }

    form {
      width: 100%;
    }

    .input-text {
      margin: 1rem 0;
      width: 100%;
    }

    .project-size {
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 100%;

      .input-text {
        width: 35%;
      }

      .toggle-layout {

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

          &:hover {
            fill: $color-gray-darker;
          }

        }

      }

    }

    .close {
      position: absolute;
      right: -30px;
      transform: rotate(45deg);
      top: -30px;

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

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

      }

    }

    .btn-primary {
      margin: $big auto 0 auto;
      min-width: 120px;
    }

  }

}

.lightbox-big-btn {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: 1rem;

  .big-svg {
    background-color: $color-gray-lighter;
    border-radius: $br-medium;
    padding: 3rem;

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

    &.upload {

      svg {
        transform: rotate(-90deg);
      }

    }

  }

  .text {
    color: $color-gray-light;
    margin-top: .5rem;
  }

  &:hover {

    .big-svg {
      background-color: $main-ui-color;

      svg {
        fill: $color-white;
      }

    }

  }

}

// Clipboard
.clipboard {
  max-width: 350px;

  .clipboard-list {
    display: flex;
    flex-direction: column;
    width: 100%;

    .clipboard-item {
      align-items: center;
      border-bottom: 1px solid $soft-ui-border;
      cursor: pointer;
      display: flex;
      padding: $small;
      width: 100%;


      span {

        svg {
          height: 20px;
          fill: $medium-ui-border;
          margin-right: $medium;
          width: 20px;
        }

      }

      &:hover {

        span {
          color: $main-ui-color;

          svg {
            fill: $main-ui-color
          }

        }

      }

    }

  }

}

// Confirm dialog
.confirm-dialog {
  .btn-gray,
  .btn-success,
  .btn-delete {
    margin: 2rem 1rem 0 1rem;
  }
}