quill-easy-color/src/assets/style/color-picker.less

Improve color selection

@panelWidth: 230px;
@panelHeight: 150px;
@barSize: 12px;
@handleSize: 16px;
@handleSizeSec: 10px;
@barGap: 10px;
@contentPadding: 8px;

.handle(@isBlock: false) {
  box-sizing: border-box;
  position: absolute;
  border: 1px solid #ffffff;
  cursor: pointer;

  & when(@isBlock) {
    background-color: #ffffff;
    box-shadow: 0 0 2px #0009;
  }
}

.jsf-color-picker {
  --jsf-color-picker-bg-color: #ffffff;

  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  width: @panelWidth + @contentPadding * 2 + @barSize + @barGap;
  padding: @contentPadding;
  border-radius: 6px;
  background: var(--jsf-color-picker-bg-color);
  box-shadow: 0 0 6px #b2b5b8;

  &__content {
    box-sizing: border-box;
    width: 100%;
    height: @panelHeight + @contentPadding * 2 + @barSize + @barGap;
    padding-top: @contentPadding;
  }

  &__selector {
    width: @panelWidth;
    height: @panelHeight;
    position: absolute;
  }

  &__background {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
    &-handle {
      .handle();
      @size: 10px;
      top: 0px;
      left: @panelWidth;
      border-radius: 100%;
      width: @size;
      height: @size;
      transform: translate(-1 * (@size / 2), -1 * (@size / 2));
    }
  }

  &__hue {
    width: @barSize;
    height: @panelHeight;
    margin-left: @panelWidth + @barGap;
    position: absolute;
    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
    &-handle {
      .handle(true);
      left: 0;
      width: @handleSize;
      height: @handleSizeSec;
      transform: translate(((@barSize - @handleSize) / 2), (-1 * @handleSizeSec / 2));
    }
  }

  &__alpha {
    width: @panelWidth;
    height: @barSize;
    position: absolute;
    margin-top: @panelHeight + @barGap;
    background: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: @barSize @barSize;
    background-position:
      0 0,
      (@barSize / 2) 0,
      (@barSize / 2) (-1 * @barSize / 2),
      0 (@barSize / 2);
    &-bg {
      position: relative;
      height: 100%;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    }
    &-handle {
      .handle(true);
      top: 0;
      width: @handleSizeSec;
      height: @handleSize;
      transform: translate((-1 * @handleSizeSec / 2), ((@barSize - @handleSize) / 2));
    }
  }
  &__action {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding-top: @contentPadding;
    border-top: 1px solid #e9ecef;
    &-item {
      flex: 1;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
    }
  }

  &__input {
    box-sizing: border-box;
    width: 100%;
    height: 22px;
    margin-left: 2px;
    padding: 2px 0px 2px 4px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    outline: none;
    color: #405057;
  }
}