tntd/lib/color-picker/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@import '../style/themes/index';
@import '../style/mixins/index';

@prefixCls: ~'tntd-color-picker';

.color-picker-size(@input-height, @input-padding-horizontal, @font-size) {
  height: @input-height;
  line-height: calc(@input-height - 2px);
  .@{prefixCls}-value {
    height: calc(@input-height - 4px);
    line-height: calc(@input-height - 4px);
  }
  .@{prefixCls}-placeholder {
    height: calc(@input-height - 2px);
    padding: 0 @input-padding-horizontal;
    font-size: @font-size;
  }
  .@{prefixCls}-img {
    width: @input-height;
    height: calc(@input-height - 2px);
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }
  .@{prefixCls}-clear {
    right: calc(@input-height / 2 - 8px);
  }
}

.hover(@color: @input-hover-border-color) {
  border-color: @color;
  .@{prefixCls}-img {
    border-left-color: @color;
  }
}

.active(@color: @outline-color) {
  border-color: ~`colorPalette('@{color}', 5) `;
  outline: 0;
  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
  .@{prefixCls}-img {
    border-left-color: ~`colorPalette('@{color}', 5) `;
  }
}

.@{prefixCls} {
  box-sizing: border-box;
  display: inline-block;
  border: @border-width-base @border-style-base @select-border-color;
  background: @component-background;
  border-radius: @border-radius-base;
  cursor: pointer;
  position: relative;
  width: 100%;
  outline: 0;
  list-style: none;

  .@{prefixCls}-inner {
    display: flex;
  }

  .@{prefixCls}-value {
    margin: 1px;
    flex: 1;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')
      left center;
    &-bg {
      width: 100%;
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }

  .@{prefixCls}-placeholder {
    color: @input-placeholder-color;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }

  .@{prefixCls}-value-bg,
  .@{prefixCls}-placeholder {
    &::after {
      display: inline-block;
      width: 0;
      visibility: hidden;
      content: '.';
      pointer-events: none;
    }
  }

  .@{prefixCls}-img {
    border-left: 1px solid @select-border-color;
    background: #fff;
    text-align: center;
    img {
      margin-top: -4px;
    }
  }

  .color-picker-size(@input-height-base, @input-padding-horizontal-base, @font-size-base);

  &-simple {
    .@{prefixCls}-img {
      display: none;
    }
    .@{prefixCls}-value{
      background: transparent;
      &-bg {
        border-radius: @border-radius-base;
      }
    }
  }

  &-disabled {
    background: @input-disabled-bg;
    cursor: not-allowed;
    &:hover {
      border-color: @border-width-base;
    }
    .@{prefixCls}-img {
      background: #e9edf3;
    }
    .@{prefixCls}-placeholder {
      color: @disabled-color;
    }
  }

  &-clear {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -7px;
    background: @component-background;
    cursor: pointer;
    color: @disabled-color;
    border-radius: 16px;
    font-size: @font-size-sm;
    line-height: 12px;
    text-align: center;
    display: none;
    transition: color 0.3s ease, opacity 0.15s ease;
    &:hover {
      color: @text-color-secondary;
    }
  }

  &:hover {
    .@{prefixCls}-clear {
      display: block;
    }
    .hover();
  }

  &-active {
    .active();
  }

  &-lg {
    .color-picker-size(@input-height-lg, @input-padding-horizontal-lg, @font-size-lg);
  }

  &-sm {
    .color-picker-size(@input-height-sm, @input-padding-horizontal-sm, @font-size-base);
  }

  &-pop {
    max-width: 100% !important;
    padding: 0 !important;
    .ant-popover {
      &-inner {
        &-content {
          padding: 10px;
          & > div > div {
            box-shadow: none !important;
          }
        }
      }
      &-arrow {
        display: none;
      }
    }
    .twitter-picker {
      width: 252px !important;
      box-shadow: none !important;
      border-width: 0 !important;
      margin: 0 -5px -5px 0 !important;
      > div {
        display: none;
        &:last-child {
          display: block;
          padding: 0 !important;
        }
      }
    }
    .sketch-picker {
      box-shadow: none !important;
      padding: 0 !important;
      .flexbox-fix {
        input {
          box-sizing: content-box;
        }
      }
    }
    .block-picker {
      box-shadow: none !important;
      width: 150px;
      > div:first-child {
        display: none;
      }
      > div:last-child {
        padding: 10px 0 0 !important;
      }
    }
    .chrome-picker {
      box-shadow: none !important;
      > div:last-child {
        padding: 16px 0 0 !important;
      }
    }
    .compact-picker {
      padding: 0 !important;
      .flexbox-fix {
        padding: 0 !important;
        input {
          box-sizing: content-box;
        }
      }
    }
    .material-picker {
      padding: 0 !important;
    }
    .swatches-picker {
      width: 301px !important;
      & > div > div {
        box-shadow: none !important;
        & > div > div {
          padding: 0 !important;
        }
      }
    }
    .slider-picker {
      width: 300px;
    }
    .github-picker {
      padding: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      & > div {
        display: none;
      }
    }
  }
}