acud/lib/popover/style/index.css

acg react 组件库

/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.acud-popover {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1030;
  font-weight: normal;
  white-space: normal;
  text-align: left;
  cursor: auto;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.acud-popover::after {
  position: absolute;
  background: rgba(255, 255, 255, 0.01);
  content: '';
}
.acud-popover-hidden {
  display: none;
}
.acud-popover-placement-top,
.acud-popover-placement-topLeft,
.acud-popover-placement-topRight {
  padding-bottom: 10px;
}
.acud-popover-placement-right,
.acud-popover-placement-rightTop,
.acud-popover-placement-rightBottom {
  padding-left: 10px;
}
.acud-popover-placement-bottom,
.acud-popover-placement-bottomLeft,
.acud-popover-placement-bottomRight {
  padding-top: 10px;
}
.acud-popover-placement-left,
.acud-popover-placement-leftTop,
.acud-popover-placement-leftBottom {
  padding-right: 10px;
}
.acud-popover-inner {
  padding: 12px 12px;
  background-color: #FFFFFF;
  background-clip: padding-box;
  border-radius: 2px;
  box-shadow: 0px 4px 12px 1px rgba(7, 12, 20, 0.12);
  box-shadow: 0 0 8px #FFFFFF \9;
  border-radius: 4px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .acud-popover {
    /* IE10+ */
  }
  .acud-popover-inner {
    box-shadow: 0px 4px 12px 1px rgba(7, 12, 20, 0.12);
  }
}
.acud-popover-title {
  margin: 0;
  padding-bottom: 4px;
  color: #151B26;
  font-size: 12px;
  font-weight: 500;
}
.acud-popover-inner-content {
  color: #151B26;
  font-size: 12px;
}
.acud-popover-inner-content .acudicon-outlined-close {
  padding-left: 12px;
  font-size: 16px;
  color: #84868C;
}
.acud-popover-message {
  position: relative;
  padding: 4px 0 12px;
  color: #151B26;
  font-size: 12px;
}
.acud-popover-message > .acudicon {
  position: absolute;
  top: 8.0002px;
  color: #FF9326;
  font-size: 12px;
}
.acud-popover-message-title {
  padding-left: 20px;
}
.acud-popover-buttons {
  margin-bottom: 4px;
  text-align: right;
}
.acud-popover-buttons button {
  margin-left: 8px;
}
.acud-popover-arrow {
  position: absolute;
  display: block;
  width: 8.48528137px;
  height: 8.48528137px;
  background: transparent;
  border-style: solid;
  border-width: 4.24264069px;
  transform: rotate(45deg);
}
.acud-popover-placement-top > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-topLeft > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-topRight > .acud-popover-content > .acud-popover-arrow {
  bottom: 6.2px;
  border-top-color: transparent;
  border-right-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  border-left-color: transparent;
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
}
.acud-popover-placement-top > .acud-popover-content > .acud-popover-arrow {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.acud-popover-placement-topLeft > .acud-popover-content > .acud-popover-arrow {
  left: 16px;
}
.acud-popover-placement-topRight > .acud-popover-content > .acud-popover-arrow {
  right: 16px;
}
.acud-popover-placement-right > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-rightTop > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-rightBottom > .acud-popover-content > .acud-popover-arrow {
  left: 6px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #FFFFFF;
  border-left-color: #FFFFFF;
  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
}
.acud-popover-placement-right > .acud-popover-content > .acud-popover-arrow {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.acud-popover-placement-rightTop > .acud-popover-content > .acud-popover-arrow {
  top: 12px;
}
.acud-popover-placement-rightBottom > .acud-popover-content > .acud-popover-arrow {
  bottom: 12px;
}
.acud-popover-placement-bottom > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-bottomLeft > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-bottomRight > .acud-popover-content > .acud-popover-arrow {
  top: 6px;
  border-top-color: #FFFFFF;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #FFFFFF;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
}
.acud-popover-placement-bottom > .acud-popover-content > .acud-popover-arrow {
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.acud-popover-placement-bottomLeft > .acud-popover-content > .acud-popover-arrow {
  left: 16px;
}
.acud-popover-placement-bottomRight > .acud-popover-content > .acud-popover-arrow {
  right: 16px;
}
.acud-popover-placement-left > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-leftTop > .acud-popover-content > .acud-popover-arrow,
.acud-popover-placement-leftBottom > .acud-popover-content > .acud-popover-arrow {
  right: 6px;
  border-top-color: #FFFFFF;
  border-right-color: #FFFFFF;
  border-bottom-color: transparent;
  border-left-color: transparent;
  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
}
.acud-popover-placement-left > .acud-popover-content > .acud-popover-arrow {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.acud-popover-placement-leftTop > .acud-popover-content > .acud-popover-arrow {
  top: 12px;
}
.acud-popover-placement-leftBottom > .acud-popover-content > .acud-popover-arrow {
  bottom: 12px;
}
.acud-popover-rtl {
  direction: rtl;
  text-align: right;
}
.acud-popover-rtl .acud-popover-message-title {
  padding-right: 20px;
  padding-left: 12px;
}
.acud-popover-rtl .acud-popover-buttons {
  text-align: left;
}
.acud-popover-rtl .acud-popover-buttons button {
  margin-right: 8px;
  margin-left: 0;
}