zent/css/pop.css

一套前端设计语言和基于React的实现

.zent-pop-v2 {
  font-size: 14px;
  line-height: 20px;
  background-color: #fff;
  background-color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-spec-layer, 0 2px 16px 0 rgba(var(--theme-rgb-shadow-bg, 0, 0, 0), 0.1));
  border-radius: 4px;
  z-index: 2000;
}
.zent-pop-v2 .zent-pop-v2-inner,
.zent-pop-v2 .zent-pop-v2-header {
  background-color: #fff;
  background-color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
  position: relative;
  border-radius: 4px;
  padding: 16px;
  z-index: 2;
}
.zent-pop-v2 .zent-pop-v2-header {
  font-size: 16px;
  line-height: 24px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0;
  font-weight: 600;
}
.zent-pop-v2 .zent-pop-v2-buttons {
  text-align: right;
  vertical-align: top;
  margin-top: 16px;
}
.zent-pop-v2 .zent-pop-v2-buttons .zent-btn + .zent-btn {
  margin-left: 8px;
}
.zent-pop-v2 .zent-pop-v2-arrow {
  background-color: #fff;
  background-color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-spec-layer, 0 2px 16px 0 rgba(var(--theme-rgb-shadow-bg, 0, 0, 0), 0.1));
  position: absolute;
  z-index: 1;
  width: var(--CSS_ARROW_SIZE);
  height: var(--CSS_ARROW_SIZE);
  overflow: hidden;
}
.zent-pop-v2::after {
  content: "";
  display: block;
  position: absolute;
  width: var(--CSS_ARROW_COVER_SIZE);
  height: var(--CSS_ARROW_COVER_SIZE);
}
.zent-pop-v2.zent-popover-v2-position-bottom-left .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-bottom-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-bottom-right .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-left .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-right .zent-pop-v2-arrow {
  top: 0;
}
.zent-pop-v2.zent-popover-v2-position-bottom-left::after, .zent-pop-v2.zent-popover-v2-position-bottom-center::after, .zent-pop-v2.zent-popover-v2-position-bottom-right::after, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-left::after, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-center::after, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-right::after {
  top: -var(--CSS_ARROW_COVER_SIZE);
  width: 100%;
  left: 0;
}
.zent-pop-v2.zent-popover-v2-position-bottom-left .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-left .zent-pop-v2-arrow {
  transform: translateY(-50%) rotate(45deg);
  left: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-pop-v2.zent-popover-v2-position-bottom-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-center .zent-pop-v2-arrow {
  transform: translate(-50%, -50%) rotate(45deg);
  left: 50%;
}
.zent-pop-v2.zent-popover-v2-position-bottom-right .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-bottom-right .zent-pop-v2-arrow {
  transform: translateY(-50%) rotate(45deg);
  right: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-pop-v2.zent-popover-v2-position-top-left .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-top-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-top-right .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-top-left .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-top-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-top-right .zent-pop-v2-arrow {
  bottom: 0;
}
.zent-pop-v2.zent-popover-v2-position-top-left::after, .zent-pop-v2.zent-popover-v2-position-top-center::after, .zent-pop-v2.zent-popover-v2-position-top-right::after, .zent-pop-v2.zent-popover-v2-position-arrow-top-left::after, .zent-pop-v2.zent-popover-v2-position-arrow-top-center::after, .zent-pop-v2.zent-popover-v2-position-arrow-top-right::after {
  bottom: -var(--CSS_ARROW_COVER_SIZE);
  width: 100%;
  left: 0;
}
.zent-pop-v2.zent-popover-v2-position-top-left .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-top-left .zent-pop-v2-arrow {
  transform: translateY(50%) rotate(45deg);
  left: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-pop-v2.zent-popover-v2-position-top-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-top-center .zent-pop-v2-arrow {
  transform: translate(-50%, 50%) rotate(45deg);
  left: 50%;
}
.zent-pop-v2.zent-popover-v2-position-top-right .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-top-right .zent-pop-v2-arrow {
  transform: translateY(50%) rotate(45deg);
  right: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-pop-v2.zent-popover-v2-position-left-top .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-left-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-left-bottom .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-left-top .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-left-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-left-bottom .zent-pop-v2-arrow {
  right: 0;
}
.zent-pop-v2.zent-popover-v2-position-left-top::after, .zent-pop-v2.zent-popover-v2-position-left-center::after, .zent-pop-v2.zent-popover-v2-position-left-bottom::after, .zent-pop-v2.zent-popover-v2-position-arrow-left-top::after, .zent-pop-v2.zent-popover-v2-position-arrow-left-center::after, .zent-pop-v2.zent-popover-v2-position-arrow-left-bottom::after {
  right: -var(--CSS_ARROW_COVER_SIZE);
  height: 100%;
  top: 0;
}
.zent-pop-v2.zent-popover-v2-position-left-top .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-left-top .zent-pop-v2-arrow {
  transform: translateX(50%) rotate(45deg);
  top: var(--CSS_ARROW_OFFSET_VERTICAL);
}
.zent-pop-v2.zent-popover-v2-position-left-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-left-center .zent-pop-v2-arrow {
  transform: translate(50%, -50%) rotate(45deg);
  top: 50%;
}
.zent-pop-v2.zent-popover-v2-position-left-bottom .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-left-bottom .zent-pop-v2-arrow {
  transform: translateX(50%) rotate(45deg);
  bottom: var(--CSS_ARROW_OFFSET_VERTICAL);
}
.zent-pop-v2.zent-popover-v2-position-right-top .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-right-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-right-bottom .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-right-top .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-right-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-right-bottom .zent-pop-v2-arrow {
  left: 0;
}
.zent-pop-v2.zent-popover-v2-position-right-top::after, .zent-pop-v2.zent-popover-v2-position-right-center::after, .zent-pop-v2.zent-popover-v2-position-right-bottom::after, .zent-pop-v2.zent-popover-v2-position-arrow-right-top::after, .zent-pop-v2.zent-popover-v2-position-arrow-right-center::after, .zent-pop-v2.zent-popover-v2-position-arrow-right-bottom::after {
  left: -var(--CSS_ARROW_COVER_SIZE);
  height: 100%;
  top: 0;
}
.zent-pop-v2.zent-popover-v2-position-right-top .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-right-top .zent-pop-v2-arrow {
  transform: translateX(-50%) rotate(45deg);
  top: var(--CSS_ARROW_OFFSET_VERTICAL);
}
.zent-pop-v2.zent-popover-v2-position-right-center .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-right-center .zent-pop-v2-arrow {
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
}
.zent-pop-v2.zent-popover-v2-position-right-bottom .zent-pop-v2-arrow, .zent-pop-v2.zent-popover-v2-position-arrow-right-bottom .zent-pop-v2-arrow {
  transform: translateX(-50%) rotate(45deg);
  bottom: var(--CSS_ARROW_OFFSET_VERTICAL);
}