antd-mini/less/Popover/index.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) './variable.less';
@import '../style/mixins/hairline.less';

@popoverPrefix: ant-popover;

.@{popoverPrefix} {
  position: relative;

  &-children {
    z-index: 999;
  }

  &-close {
    margin-left: 24 * @rpx;
    width: 38 * @rpx;
    height: 38 * @rpx;
    .ant-popover-close-icon {
      position: absolute;
      top: 20 * @rpx;
      right: 20 * @rpx;
      font-size: 36 * @rpx;
      .ant-icon {
        color: @popover-inner-color;
      }
    }
  }

  &-image {
    padding-right: 24 * @rpx;
    border-radius: 16 * @rpx;
  }
  &-action {
    background: @popover-bg;
    font-weight: 400;
    font-size: 24 * @rpx;
    color: @popover-text-color;
    padding: 10 * @rpx 20 * @rpx;
    line-height: 33 * @rpx;
    border-radius: 50vh;
    margin-left: 24 * @rpx;
  }

  &-mask {
    z-index: 998;
    background: none;
  }
  &-content {
    position: absolute;
    min-width: 64 * @rpx;
    max-width: calc(100vw - 48 * @rpx);
    z-index: 999;
  }
  &-inner {
    position: relative;
    border-radius: 24 * @rpx;
    overflow: hidden;
    font-size: 28 * @rpx;
    background-color: @popover-inner-bg;
    color: @popover-inner-color;
    padding: 20 * @rpx;
    width: max-content;
    .ant-icon {
      color: @popover-inner-color;
    }

    display: flex;
    justify-content: flex-start;
    align-items: center;
    &-text {
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      overflow: hidden;
      max-width: 400 * @rpx;
      line-height: 40 * @rpx;
    }
    .ant-popover-image-content-image {
      width: 80 * @rpx;
      height: 80 * @rpx;
    }
  }
  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 18 * @rpx solid transparent;
    border-right: 18 * @rpx solid transparent;
    border-bottom: 18 * @rpx solid @popover-inner-bg;
  }

  &-top {
    transform: translate(-50%, -100%);
    &-arrow {
      bottom: 2 * @rpx;
      transform: translate(-50%, 100%) rotate(180deg);
      left: 50%;
    }
  }

  &-bottom {
    transform: translate(-50%, 100%);
    &-arrow {
      top: 2 * @rpx;
      transform: translate(-50%, -100%) rotate(0deg);
      left: 50%;
    }
  }

  &-left {
    transform: translate(-100%, -50%);
    &-arrow {
      right: 2 * @rpx;
      transform: translate(75%, -50%) rotate(90deg);
      top: 50%;
    }
  }

  &-right {
    transform: translate(100%, -50%);
    &-arrow {
      left: 2 * @rpx;
      transform: translate(-75%, -50%) rotate(-90deg);
      top: 50%;
    }
  }

  &-top-left {
    transform: translate(0, -100%);
    &-arrow {
      bottom: 2 * @rpx;
      transform: translate(0, 100%) rotate(180deg);
      left: 24 * @rpx;
    }
  }

  &-top-right {
    transform: translate(0, -100%);
    &-arrow {
      bottom: 2 * @rpx;
      transform: translate(0, 100%) rotate(180deg);
      right: 24 * @rpx;
    }
  }

  &-bottom-left {
    transform: translate(0, 100%);
    &-arrow {
      top: 2 * @rpx;
      transform: translate(0, -100%) rotate(0deg);
      left: 24 * @rpx;
    }
  }

  &-bottom-right {
    transform: translate(0, 100%);
    &-arrow {
      top: 2 * @rpx;
      transform: translate(0, -100%) rotate(0deg);
      right: 24 * @rpx;
    }
  }

  &-left-top {
    transform: translate(-100%, 0);
    &-arrow {
      right: 2 * @rpx;
      transform: translate(75%, 0) rotate(90deg);
      top: 24 * @rpx;
    }
  }

  &-left-bottom {
    transform: translate(-100%, 0);
    &-arrow {
      right: 2 * @rpx;
      transform: translate(75%, 0) rotate(90deg);
      bottom: 24 * @rpx;
    }
  }

  &-right-top {
    transform: translate(100%, 0);
    &-arrow {
      left: 2 * @rpx;
      transform: translate(-75%, 0) rotate(-90deg);
      top: 24 * @rpx;
    }
  }

  &-right-bottom {
    transform: translate(100%, 0);
    &-arrow {
      left: 2 * @rpx;
      transform: translate(-75%, 0) rotate(-90deg);
      bottom: 24 * @rpx;
    }
  }
}