tdesign-react/esm/style/web/components/color-picker/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-color-picker__panel {
  padding: 0;
  width: @color-picker-panel-width;
  background: @bg-color-container;
  box-shadow: @color-picker-panel-shadow;
  border-radius: @border-radius-medium;
  user-select: none;
}

.@{prefix}-popup__content {
  .@{prefix}-color-picker__panel {
    background: transparent;
    box-shadow: unset;
  }
}

.@{prefix}-color-picker {
  .reset;

  &.t-popup__content {
    box-shadow: @color-picker-panel-shadow;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: @color-picker-icon-font-size;
    background: transparent;
    transition: @anim-duration-base linear;
    color: @text-color-secondary;
    border-radius: @color-picker-icon-radius;
    cursor: pointer;

    &:hover {
      background: @bg-color-container-hover;
      transition: @anim-duration-base linear;
    }
    &.@{prefix}-is-disabled {
      color: @text-color-disabled;
      pointer-events: none;
    }
  }
}

.@{prefix}-color-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @color-picker-panel-padding;
  position: relative;
  z-index: 2;

  .@{prefix}-color-picker__close {
    flex-shrink: 0;
  }

  & + .@{prefix}-color-picker__body {
    padding-top: 0;
  }
}

.@{prefix}-color-picker__body {
  padding: @color-picker-panel-padding;
  padding-bottom: calc(@color-picker-panel-padding - 4px);
}

.@{prefix}-color-picker__thumb {
  position: absolute;
  z-index: 1;
  outline: none;
  border-color: currentcolor;
  width: @color-picker-slider-thumb-size;
  height: @color-picker-slider-thumb-size;
  border-radius: @border-radius-circle;
  box-shadow: @color-picker-thumbs-shadow;
  background: @text-color-anti;
  color: @text-color-brand;
  padding: @color-picker-slider-thumb-padding;
  box-sizing: border-box;

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    background: currentcolor;
    border-radius: @border-radius-circle;
    display: block;
  }
}

.@{prefix}-color-picker__saturation {
  height: @color-picker-saturation-height;
  border-radius: @color-picker-saturation-radius;
  position: relative;
  overflow: hidden;
  background: transparent;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &::before {
    /* stylelint-disable-next-line color-no-hex */
    background: linear-gradient(90deg, #fff, transparent);
  }

  &::after {
    /* stylelint-disable-next-line color-no-hex */
    background: linear-gradient(0deg, #000, transparent);
  }

  .@{prefix}-color-picker__thumb {
    width: @color-picker-saturation-thumb-size;
    height: @color-picker-saturation-thumb-size;
    border-radius: @border-radius-circle;
    transform: translate(-50%, -50%);
  }
}

.transparentBgImage () {
  /* stylelint-disable-next-line color-no-hex */
  background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}

.@{prefix}-color-picker__slider-wrapper {
  border-radius: @color-picker-slider-wrapper-radius;
  padding: @color-picker-slider-wrapper-padding;
  position: relative;

  &--hue-type {
    /* stylelint-disable-next-line color-named */
    background: red;
  }

  &--alpha-type {
    background: @text-color-anti;
    .transparentBgImage();
  }
}

.@{prefix}-color-picker__slider-padding {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: @color-picker-slider-height;
  border-radius: @color-picker-slider-wrapper-radius;
}

.@{prefix}-color-picker__slider {
  height: @color-picker-slider-height;
  position: relative;
  border-radius: @color-picker-slider-wrapper-radius;
  cursor: pointer;
  color: transparent;
  outline: none;
  z-index: 1;

  .@{prefix}-color-picker__thumb {
    transform: translate(@color-picker-slider-thumb-transform-x, -50%);
    top: 50%;
  }

  .@{prefix}-color-picker__rail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
  }
}

.@{prefix}-color-picker__alpha,
.@{prefix}-color-picker__format {
  margin: @color-picker-margin 0 0 0;
}

.@{prefix}-color-picker__hue {
  /* stylelint-disable color-no-hex, color-named */
  background: linear-gradient(
    90deg,
    red,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    red
  );
}

.@{prefix}-color-picker__alpha {
  .@{prefix}-color-picker__rail {
    background: linear-gradient(to right, transparent, currentcolor);
  }
}

.@{prefix}-color-picker__sliders-wrapper {
  display: flex;
  align-items: center;
  margin: @color-picker-margin 0;
}

.@{prefix}-color-picker__sliders {
  width: 100%;
}

.@{prefix}-color-picker__sliders-preview {
  flex-shrink: 0;
  margin-left: @color-picker-margin;
  width: @color-picker-gradient-preview-width;
  height: @color-picker-gradient-preview-height;
  border-radius: @color-picker-gradient-preview-radius;
  overflow: hidden;
  background: @text-color-anti;
  .transparentBgImage();

  &-inner {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.@{prefix}-color-picker__gradient {
  padding: 0;
  display: flex;
  align-items: center;
  margin-bottom: @color-picker-margin;

  &-slider {
    flex: 1;
  }

  &-degree {
    position: relative;
    flex-shrink: 0;
    margin-left: @color-picker-margin;
    width: @color-picker-degree-width;
    .@{prefix}-input {
      margin: 0;
      font: @color-picker-font;
    }
    .@{prefix}-input-number {
      width: 100%;
      padding: 0;
    }
  }

  .gradient-thumbs {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: inherit;
    cursor: pointer;

    &__item {
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      z-index: 0;
      cursor: pointer;

      &::before {
        display: none;
      }
      &.@{prefix}-is-active {
        z-index: 1;
        outline: 2px solid @component-border;
      }

      &-inner {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: @border-radius-circle;
        overflow: hidden;

        &::before {
          content: "";
          width: 100%;
          height: 100%;
          display: block;
          background-color: currentcolor;
        }
      }
    }
  }
}

.@{prefix}-color-picker__format {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &--item {
    &:first-child {
      flex-shrink: 0;
    }

    &:last-child {
      flex: 1;
    }
    .@{prefix}-size-m, .@{prefix}-input.@{prefix}-size-m {
      font: @color-picker-font;
    }
    .@{prefix}-input-number .@{prefix}-input {
      margin: 0;
    }

    .input-group {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: @color-picker-input-format-margin-left;

      &__item {
        flex: 1;
        width: 0;
        margin-left: -1px;
        .@{prefix}-input {
          padding: 0 1px;

          &:focus,
          &:focus-within,
          &:hover {
            z-index: 1;
          }
        }

        &:not(:first-child):not(:last-child) {
          .@{prefix}-input {
            border-radius: 0;
          }
        }

        &:first-child:not(:last-child) {
          .@{prefix}-input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }

        &:last-child:not(:first-child) {
          .@{prefix}-input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
      }
      .@{prefix}-input-number {
        width: 100%;
        padding: 0;
        max-width: 100%;
      }
    }
  }

  &-mode-select {
    width: @color-picker-select-format-width;
    display: flex;

    .t-select,
    .t-input {
      padding-right: 0;
    }

    .t-input--prefix > .t-input__suffix {
      padding-left: 0;
    }

    .t-select__right-icon {
      margin-right: @color-picker-select-format-margin-right;
    }
  }
}

.@{prefix}-color-picker__swatches-wrap {
  margin-top: @color-picker-margin;
  position: relative;

  .@{prefix}-color-picker__swatches {

    + .@{prefix}-color-picker__swatches {
      margin-top: @color-picker-margin;
    }

    &--title {
      font: @color-picker-font;
      padding: 0;
      color: @text-color-primary;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &--actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      font-size: 0;
      .@{prefix}-color-picker__icon {
        width: @color-picker-swatch-icon-size;
        height: @color-picker-swatch-icon-size;
        margin-left: @color-picker-swatch-action-margin-left;
      }
    }

    &--items {
      width: 100%;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(@color-picker-swatch-columns, @color-picker-swatch-width);
      gap: @color-picker-swatch-row-gap @color-picker-swatch-column-gap;
      max-height: @color-picker-swatch-rows-max-height;
      overflow-x: hidden;
      overflow-y: auto;
      padding: @color-picker-swatch-item-padding;
      position: relative;
      left: @color-picker-swatch-item-left-negative-padding;
      box-sizing: content-box;
    }

    &--item {
      display: flex;
      width: @color-picker-swatch-width;
      height: @color-picker-swatch-height;
      border-radius: @border-radius-default;
      padding: @color-picker-swatch-padding;
      overflow: hidden;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      position: relative;
      transform-origin: center;
      transition: all @anim-duration-base @anim-time-fn-easing;
      box-sizing: border-box;

      &:hover {
        transform: scale(1.25);
        transform-origin: center;
      }

      // 暂时先不删，待react同步后再删除
      &__color {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid @component-border;
        border-radius: @border-radius-default;
        flex-shrink: 0;
      }

      // 暂时先不删，待react同步后再删除
      &__inner {
        width: 100%;
        height: 100%;
        display: block;
      }

      &:not(.@{prefix}-is-active):hover {
        padding: 0;
      }

      // 暂时先不删，待react同步后再删除
      &.@{prefix}-is-active .@{prefix}-color-picker__swatches--item__color,
      &.@{prefix}-is-active .@{prefix}-color-picker__swatches--color {
        border-color: @text-color-brand;
      }
    }

    &--color {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: @border-radius-default;
      box-sizing: border-box;
    }

    &--inner {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: @border-radius-default;
      box-shadow: @colot-picker-swatch-item-color-inset-shadow;
    }
  }
}

.@{prefix}-color-picker__trigger {
  &--default {
    display: inline-flex;
    align-items: center;
    > .@{prefix}-input {
      width: fit-content;
    }
    .@{prefix}-input {
      padding: @color-picker-trigger-input-padding;
    }

    &__color {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .color-inner {
        border: 1px solid @scrollbar-color;
        display: block;
        width: @color-picker-trigger-input-color-inner-size;
        height: @color-picker-trigger-input-color-inner-size;
        color: transparent;
        position: relative;
        border-radius: @border-radius-small;

        &.@{prefix}-size-s {
          width: @color-picker-trigger-input-color-inner-size-s;
          height: @color-picker-trigger-input-color-inner-size-s;
        }

        &.@{prefix}-size-l {
          width: @color-picker-trigger-input-color-inner-size-l;
          height: @color-picker-trigger-input-color-inner-size-l;
        }
      }
    }
  }
}

.@{prefix}-color-picker__gradient-slider {
  padding: @color-picker-slider-wrapper-padding;
  border-radius: @color-picker-slider-wrapper-radius;

  .@{prefix}-color-picker--bg-alpha {
    background: @text-color-anti;
    .transparentBgImage();
  }
}

.@{prefix}-color-picker__panel.@{prefix}-is-disabled {
  .@{prefix}-color-picker__saturation,
  .@{prefix}-color-picker__slider,
  .@{prefix}-color-picker__swatches--item {
    opacity: .8;
    cursor: not-allowed;
  }
  .@{prefix}-color-picker__gradient-slider {
    .gradient-thumbs,
    .gradient-thumbs__item {
      cursor: not-allowed;
    }
  }
  .@{prefix}-color-picker__swatches--item:hover {
    padding: @color-picker-swatch-padding;
  }
}

// 覆盖select-option 默认样式，使其更紧凑点
.@{prefix}-color-picker__select-options {
  > .@{prefix}-popup__content {
    box-shadow: @shadow-1, @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom, @shadow-inset-left;
  }
}