tt-mp/core/popover/index.less

一套组件化、可复用、易扩展的头条小程序 UI 组件库

@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.@{wux-prefix}-popover {
  font-family:
    Monospaced Number,
    Chinese Quote,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    PingFang SC,
    Hiragino Sans GB,
    Microsoft YaHei,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  font-size: @popover-font-size;
  line-height: @popover-line-height;
  color: @text-color;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: @z-index-popover;
  cursor: auto;
  user-select: text;
  white-space: normal;
  font-weight: 400;
  text-align: left;

  &::after {
    content: '';
    position: absolute;
    background: fade(@white, 1%);
  }

  &__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  &__element {
    display: inline-block;
    line-height: 1;
  }

  &--theme-dark &__inner {
    background-color: @popover-dark-bg;
  }

  &--theme-dark&--placement-top &__arrow,
  &--theme-dark&--placement-topLeft &__arrow,
  &--theme-dark&--placement-topRight &__arrow {
    border-top-color: @popover-dark-bg;
  }

  &--theme-dark&--placement-right &__arrow,
  &--theme-dark&--placement-rightBottom &__arrow,
  &--theme-dark&--placement-rightTop &__arrow {
    border-right-color: @popover-dark-bg;
  }

  &--theme-dark&--placement-bottom &__arrow,
  &--theme-dark&--placement-bottomLeft &__arrow,
  &--theme-dark&--placement-bottomRight &__arrow {
    border-bottom-color: @popover-dark-bg;
  }

  &--theme-dark&--placement-left &__arrow,
  &--theme-dark&--placement-leftBottom &__arrow,
  &--theme-dark&--placement-leftTop &__arrow {
    border-left-color: @popover-dark-bg;
  }

  &--theme-dark &__inner,
  &--theme-dark &__title {
    color: @popover-dark-color;
  }

  &--placement-top,
  &--placement-topLeft,
  &--placement-topRight {
    padding-bottom: @popover-distance;
  }

  &--placement-right,
  &--placement-rightBottom,
  &--placement-rightTop {
    padding-left: @popover-distance;
  }

  &--placement-bottom,
  &--placement-bottomLeft,
  &--placement-bottomRight {
    padding-top: @popover-distance;
  }

  &--placement-left,
  &--placement-leftBottom,
  &--placement-leftTop {
    padding-right: @popover-distance;
  }

  &__inner {
    background-color: @popover-bg;
    background-clip: padding-box;
    border-radius: @popover-radius;
    box-shadow: @box-shadow-base;
    color: @text-color;
  }

  &__title {
    position: relative;
    min-width: @popover-min-width;
    margin: 0;
    padding: 5px 16px 4px;
    min-height: 32px;
    box-sizing: border-box;
    color: @heading-color;
    font-weight: 500;

    &::after {
      .setBottomLine(@border-color-split);
    }
  }

  &__inner-content {
    padding: 12px 16px;
  }

  &__arrow {
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    border-color: transparent;
    border-style: solid;
    border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
  }

  &--placement-top &__arrow,
  &--placement-topLeft &__arrow,
  &--placement-topRight &__arrow {
    bottom: 4px;
    border-bottom-width: 0;
    border-top-color: @popover-bg;
  }

  &--placement-top &__arrow {
    left: 50%;
    transform: translateX(-50%);
  }

  &--placement-topLeft &__arrow {
    left: 16px;
  }

  &--placement-topRight &__arrow {
    right: 16px;
  }

  &--placement-right &__arrow,
  &--placement-rightBottom &__arrow,
  &--placement-rightTop &__arrow {
    left: 4px;
    border-left-width: 0;
    border-right-color: @popover-bg;
  }

  &--placement-right &__arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  &--placement-rightTop &__arrow {
    top: 12px;
  }

  &--placement-rightBottom &__arrow {
    bottom: 12px;
  }

  &--placement-bottom &__arrow,
  &--placement-bottomLeft &__arrow,
  &--placement-bottomRight &__arrow {
    top: 4px;
    border-top-width: 0;
    border-bottom-color: @popover-bg;
  }

  &--placement-bottom &__arrow {
    left: 50%;
    transform: translateX(-50%);
  }

  &--placement-bottomLeft &__arrow {
    left: 16px;
  }

  &--placement-bottomRight &__arrow {
    right: 16px;
  }

  &--placement-left &__arrow,
  &--placement-leftBottom &__arrow,
  &--placement-leftTop &__arrow {
    right: 4px;
    border-right-width: 0;
    border-left-color: @popover-bg;
  }

  &--placement-left &__arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  &--placement-leftTop &__arrow {
    top: 12px;
  }

  &--placement-leftBottom &__arrow {
    bottom: 12px;
  }
}