penpot/resources/styles/partials/colorpicker.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>

.color-picker {
  display: flex;
  flex-direction: column;

  .picker-area {
    display: flex;

    /* Common stuff */
    .picker-wrapper,
    .slide-wrapper {
      position: relative;
    }
    .picker-indicator,
    .slide-indicator {
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
    }
    .picker,
    .slide {
      cursor: crosshair;
    }
  }

  .inputs-area {
    display: flex;
    justify-content: space-around;
    width: 200px;

    .row-flex{
      margin: 0;
    }

    > input {
      width: 50%;
    }

    .input-text {
      color: $intense-ui-text;
      font-size: $fs13;
      margin: 5px;
      padding: 5px;
      width: 100%;
    }

  }

  span {
    color: $medium-ui-text;
    font-size: $fs12;
  }


  /* Default skin */

  &.theme-default {
    padding: 4px;
    border-radius: 2px;
    width: 230px;

    .picker {
      width: 200px;
      height: 200px;
    }

    .slide {
      width: 20px;
      height: 200px;
    }
    .slide-wrapper {
      margin-left: 4px;
    }
    .picker-indicator {
      width: 5px;
      height: 5px;
      border: 2px solid darkblue;
      border-radius: 4px;
      opacity: .5;
      background-color: white;
    }
    .slide-indicator {
      width: 28px;
      height: 10px;
      left: -4px;
      opacity: .6;
      border: 4px solid lightblue;
      border-radius: 4px;
      background-color: white;
    }

    .inputs-area {
      width: 230px;
    }

  }

  /* Small skin */

  &.theme-small {
    border-radius: 2px;

    .picker {
      width: 170px;
      height: 170px;
    }

    .slide {
      width: 20px;
      height: 170px;
    }
    .slide-wrapper {
      margin-left: 4px;
    }
    .picker-indicator {
      width: 5px;
      height: 5px;
      border: 2px solid darkblue;
      border-radius: 4px;
      opacity: .5;
      background-color: white;
    }
    .slide-indicator {
      width: 28px;
      height: 10px;
      left: -4px;
      opacity: .6;
      border: 4px solid lightblue;
      border-radius: 4px;
      background-color: white;
    }

  }

}

/* NEW COLOR PICKER */
/* color th */
.color-data {
  align-items: center;
  display: flex;
  position: relative;

  .color-info {
    border: 1px solid $soft-ui-border;
    border-radius: $br-small;
    margin: 3px 0 0 $x-small;
    padding: 0 $x-small;
  }

  .type {
    color: $soft-ui-text;
    margin-right: $x-small;
  }

  .number {
    color: $intense-ui-text;
  }
}

.colorpicker-tooltip {
  background: $color-white;
  border-radius: $br-small;
  display: flex;
  flex-direction: column;
  left: 1400px;
  top: 100px;
  padding: $small;
  position: absolute;
  z-index: 11;
  width: auto;

  span {
    color: $medium-ui-text;
    font-size: $fs12;
  }

  .inputs-area {

    .input-text {
      color: $intense-ui-text;
      font-size: $fs13;
      margin: 5px;
      padding: 5px;
      width: 100%;
    }

  }

}