drip-table/lib/components/react-components/tag/index.less

A tiny and powerful enterprise-class solution for building tables.

/**
 * This file is part of the drip-table project.
 * @link     : https://drip-table.jd.com/
 * @author   : Emil Zhai (root@derzh.com)
 * @modifier : Emil Zhai (root@derzh.com)
 * @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
 */

@import url("../../../styles/theme/default.less");

@prefixCls: jfe-drip-table-rc-tag;

.@{prefixCls} {
  box-sizing: border-box;
  margin: 0;
  color: @drip-table-text-color;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum", "tnum";
  display: inline-block;
  height: auto;
  margin-right: 8px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  opacity: 1;
  transition: all .3s;

  &-has-color {
    color: #ffffff;
    border-color: transparent;
  }

  &-color-pink {
    color: #c41d7f;
    background: #fff0f6;
    border-color: #ffadd2;
  }

  &-color-pink-inverse {
    color: #ffffff;
    background: #eb2f96;
    border-color: #eb2f96;
  }

  &-color-magenta {
    color: #c41d7f;
    background: #fff0f6;
    border-color: #ffadd2;
  }

  &-color-magenta-inverse {
    color: #ffffff;
    background: #eb2f96;
    border-color: #eb2f96;
  }

  &-color-red {
    color: #cf1322;
    background: #fff1f0;
    border-color: #ffa39e;
  }

  &-color-red-inverse {
    color: #ffffff;
    background: #f5222d;
    border-color: #f5222d;
  }

  &-color-volcano {
    color: #d4380d;
    background: #fff2e8;
    border-color: #ffbb96;
  }

  &-color-volcano-inverse {
    color: #ffffff;
    background: #fa541c;
    border-color: #fa541c;
  }

  &-color-orange {
    color: #d46b08;
    background: #fff7e6;
    border-color: #ffd591;
  }

  &-color-orange-inverse {
    color: #ffffff;
    background: #fa8c16;
    border-color: #fa8c16;
  }

  &-color-yellow {
    color: #d4b106;
    background: #feffe6;
    border-color: #fffb8f;
  }

  &-color-yellow-inverse {
    color: #ffffff;
    background: #fadb14;
    border-color: #fadb14;
  }

  &-color-gold {
    color: #d48806;
    background: #fffbe6;
    border-color: #ffe58f;
  }

  &-color-gold-inverse {
    color: #ffffff;
    background: #faad14;
    border-color: #faad14;
  }

  &-color-cyan {
    color: #08979c;
    background: #e6fffb;
    border-color: #87e8de;
  }

  &-color-cyan-inverse {
    color: #ffffff;
    background: #13c2c2;
    border-color: #13c2c2;
  }

  &-color-lime {
    color: #7cb305;
    background: #fcffe6;
    border-color: #eaff8f;
  }

  &-color-lime-inverse {
    color: #ffffff;
    background: #a0d911;
    border-color: #a0d911;
  }

  &-color-green {
    color: #389e0d;
    background: #f6ffed;
    border-color: #b7eb8f;
  }

  &-color-green-inverse {
    color: #ffffff;
    background: #52c41a;
    border-color: #52c41a;
  }

  &-color-blue {
    color: #096dd9;
    background: #e6f7ff;
    border-color: #91d5ff;
  }

  &-color-blue-inverse {
    color: #ffffff;
    background: @drip-table-primary-color;
    border-color: @drip-table-primary-color;
  }

  &-color-geekblue {
    color: #1d39c4;
    background: #f0f5ff;
    border-color: #adc6ff;
  }

  &-color-geekblue-inverse {
    color: #ffffff;
    background: #2f54eb;
    border-color: #2f54eb;
  }

  &-color-purple {
    color: #531dab;
    background: #f9f0ff;
    border-color: #d3adf7;
  }

  &-color-purple-inverse {
    color: #ffffff;
    background: #722ed1;
    border-color: #722ed1;
  }

  &-color-success {
    color: #52c41a;
    background: #f6ffed;
    border-color: #b7eb8f;
  }

  &-color-processing {
    color: @drip-table-primary-color;
    background: #e6f7ff;
    border-color: #91d5ff;
  }

  &-color-error {
    color: #ff4d4f;
    background: #fff2f0;
    border-color: #ffccc7;
  }

  &-color-warning {
    color: #faad14;
    background: #fffbe6;
    border-color: #ffe58f;
  }
}