drip-table/lib/components/react-components/tooltip/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-tooltip;

.@{prefixCls} {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: @drip-table-text-color;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum", "tnum";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1030;
  font-weight: 400;
  white-space: normal;
  text-align: left;
  cursor: auto;
  user-select: text;
}

.@{prefixCls}:after {
  position: absolute;
  background: #ffffff03;
  content: "";
}

.@{prefixCls}-hidden {
  display: none;
}

.@{prefixCls}-placement-top,.@{prefixCls}-placement-topLeft,.@{prefixCls}-placement-topRight {
  padding-bottom: 10px;
}

.@{prefixCls}-placement-right,.@{prefixCls}-placement-rightBottom,.@{prefixCls}-placement-rightTop {
  padding-left: 10px;
}

.@{prefixCls}-placement-bottom,.@{prefixCls}-placement-bottomLeft,.@{prefixCls}-placement-bottomRight {
  padding-top: 10px;
}

.@{prefixCls}-placement-left,.@{prefixCls}-placement-leftBottom,.@{prefixCls}-placement-leftTop {
  padding-right: 10px;
}

.@{prefixCls}-inner {
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 2px;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
}

@media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) {
  .@{prefixCls}-inner {
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
  }
}

.@{prefixCls}-title {
  min-width: 177px;
  min-height: 32px;
  margin: 0;
  padding: 5px 16px 4px;
  color: @drip-table-text-color;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

.@{prefixCls}-inner-content {
  padding: 12px 16px;
  color: @drip-table-text-color;
}

.@{prefixCls}-message {
  position: relative;
  padding: 4px 0 12px;
  color: @drip-table-text-color;
  font-size: 14px;
}

.@{prefixCls}-message-title {
  padding-left: 22px;
}

.@{prefixCls}-buttons {
  margin-bottom: 4px;
  text-align: right;
}

.@{prefixCls}-buttons button {
  margin-left: 8px;
}

.@{prefixCls}-arrow {
  position: absolute;
  display: block;
  width: 8.4852px;
  height: 8.4852px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.@{prefixCls}-arrow-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 6px;
  height: 6px;
  margin: auto;
  background-color: #ffffff;
  content: "";
  pointer-events: auto;
}

.@{prefixCls}-placement-top .@{prefixCls}-arrow,.@{prefixCls}-placement-topLeft .@{prefixCls}-arrow,.@{prefixCls}-placement-topRight .@{prefixCls}-arrow {
  bottom: 1.5147px;
}

.@{prefixCls}-placement-top .@{prefixCls}-arrow-content,.@{prefixCls}-placement-topLeft .@{prefixCls}-arrow-content,.@{prefixCls}-placement-topRight .@{prefixCls}-arrow-content {
  box-shadow: 3px 3px 7px #00000012;
  transform: translateY(-4.2426px) rotate(45deg);
}

.@{prefixCls}-placement-top .@{prefixCls}-arrow {
  left: 50%;
  transform: translateX(-50%);
}

.@{prefixCls}-placement-topLeft .@{prefixCls}-arrow {
  left: 16px;
}

.@{prefixCls}-placement-topRight .@{prefixCls}-arrow {
  right: 16px;
}

.@{prefixCls}-placement-right .@{prefixCls}-arrow,.@{prefixCls}-placement-rightBottom .@{prefixCls}-arrow,.@{prefixCls}-placement-rightTop .@{prefixCls}-arrow {
  left: 1.5147px;
}

.@{prefixCls}-placement-right .@{prefixCls}-arrow-content,
.@{prefixCls}-placement-rightBottom .@{prefixCls}-arrow-content,
.@{prefixCls}-placement-rightTop .@{prefixCls}-arrow-content {
  box-shadow: -3px 3px 7px #00000012;
  transform: translateX(4.2426px) rotate(45deg);
}

.@{prefixCls}-placement-right .@{prefixCls}-arrow {
  top: 50%;
  transform: translateY(-50%);
}

.@{prefixCls}-placement-rightTop .@{prefixCls}-arrow {
  top: 12px;
}

.@{prefixCls}-placement-rightBottom .@{prefixCls}-arrow {
  bottom: 12px;
}

.@{prefixCls}-placement-bottom .@{prefixCls}-arrow,.@{prefixCls}-placement-bottomLeft .@{prefixCls}-arrow,.@{prefixCls}-placement-bottomRight .@{prefixCls}-arrow {
  top: 1.5147px;
}

.@{prefixCls}-placement-bottom .@{prefixCls}-arrow-content,
.@{prefixCls}-placement-bottomLeft .@{prefixCls}-arrow-content,
.@{prefixCls}-placement-bottomRight .@{prefixCls}-arrow-content {
  box-shadow: -2px -2px 5px #0000000f;
  transform: translateY(4.2426px) rotate(45deg);
}

.@{prefixCls}-placement-bottom .@{prefixCls}-arrow {
  left: 50%;
  transform: translateX(-50%);
}

.@{prefixCls}-placement-bottomLeft .@{prefixCls}-arrow {
  left: 16px;
}

.@{prefixCls}-placement-bottomRight .@{prefixCls}-arrow {
  right: 16px;
}

.@{prefixCls}-placement-left .@{prefixCls}-arrow,
.@{prefixCls}-placement-leftBottom .@{prefixCls}-arrow,
.@{prefixCls}-placement-leftTop .@{prefixCls}-arrow {
  right: 1.5147px;
}

.@{prefixCls}-placement-left .@{prefixCls}-arrow-content,
.@{prefixCls}-placement-leftBottom .@{prefixCls}-arrow-content,
.@{prefixCls}-placement-leftTop .@{prefixCls}-arrow-content {
  box-shadow: 3px -3px 7px #00000012;
  transform: translateX(-4.2426px) rotate(45deg);
}

.@{prefixCls}-placement-left .@{prefixCls}-arrow {
  top: 50%;
  transform: translateY(-50%);
}

.@{prefixCls}-placement-leftTop .@{prefixCls}-arrow {
  top: 12px;
}

.@{prefixCls}-placement-leftBottom .@{prefixCls}-arrow {
  bottom: 12px;
}

.@{prefixCls}-pink .@{prefixCls}-inner {
  background-color: #eb2f96;
}

.@{prefixCls}-pink .@{prefixCls}-arrow-content {
  background-color: #eb2f96;
}

.@{prefixCls}-magenta .@{prefixCls}-inner {
  background-color: #eb2f96;
}

.@{prefixCls}-magenta .@{prefixCls}-arrow-content {
  background-color: #eb2f96;
}

.@{prefixCls}-red .@{prefixCls}-inner {
  background-color: #f5222d;
}

.@{prefixCls}-red .@{prefixCls}-arrow-content {
  background-color: #f5222d;
}

.@{prefixCls}-volcano .@{prefixCls}-inner {
  background-color: #fa541c;
}

.@{prefixCls}-volcano .@{prefixCls}-arrow-content {
  background-color: #fa541c;
}

.@{prefixCls}-orange .@{prefixCls}-inner {
  background-color: #fa8c16;
}

.@{prefixCls}-orange .@{prefixCls}-arrow-content {
  background-color: #fa8c16;
}

.@{prefixCls}-yellow .@{prefixCls}-inner {
  background-color: #fadb14;
}

.@{prefixCls}-yellow .@{prefixCls}-arrow-content {
  background-color: #fadb14;
}

.@{prefixCls}-gold .@{prefixCls}-inner {
  background-color: #faad14;
}

.@{prefixCls}-gold .@{prefixCls}-arrow-content {
  background-color: #faad14;
}

.@{prefixCls}-cyan .@{prefixCls}-inner {
  background-color: #13c2c2;
}

.@{prefixCls}-cyan .@{prefixCls}-arrow-content {
  background-color: #13c2c2;
}

.@{prefixCls}-lime .@{prefixCls}-inner {
  background-color: #a0d911;
}

.@{prefixCls}-lime .@{prefixCls}-arrow-content {
  background-color: #a0d911;
}

.@{prefixCls}-green .@{prefixCls}-inner {
  background-color: #52c41a;
}

.@{prefixCls}-green .@{prefixCls}-arrow-content {
  background-color: #52c41a;
}

.@{prefixCls}-blue .@{prefixCls}-inner {
  background-color: #1890ff;
}

.@{prefixCls}-blue .@{prefixCls}-arrow-content {
  background-color: #1890ff;
}

.@{prefixCls}-geekblue .@{prefixCls}-inner {
  background-color: #2f54eb;
}

.@{prefixCls}-geekblue .@{prefixCls}-arrow-content {
  background-color: #2f54eb;
}

.@{prefixCls}-purple .@{prefixCls}-inner {
  background-color: #722ed1;
}

.@{prefixCls}-purple .@{prefixCls}-arrow-content {
  background-color: #722ed1;
}

.@{prefixCls}-rtl {
  direction: rtl;
  text-align: right;
}

.@{prefixCls}-rtl .@{prefixCls}-message-title {
  padding-right: 22px;
  padding-left: 16px;
}

.@{prefixCls}-rtl .@{prefixCls}-buttons {
  text-align: left;
}

.@{prefixCls}-rtl .@{prefixCls}-buttons button {
  margin-right: 8px;
  margin-left: 0;
}