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-origin: center bottom;
    .popover-position(0.6, -50%, -100%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, -50%, -100%);
      .popover-scale-animation('top');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('top');
    }
    &-arrow {
      bottom: 2 * @rpx;
      transform: translate(-50%, 100%) rotate(180deg);
      left: 50%;
    }
  }

  &-bottom {
    transform-origin: center top;
    .popover-position(0.6, -50%, 100%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, -50%, 100%);
      .popover-scale-animation('bottom');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('bottom');
    }
    &-arrow {
      top: 2 * @rpx;
      transform: translate(-50%, -100%) rotate(0deg);
      left: 50%;
    }
  }

  &-left {
    transform-origin: right center;
    .popover-position(0.6, -100%, -50%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, -100%, -50%);
      .popover-scale-animation('left');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('left');
    }
    &-arrow {
      right: 2 * @rpx;
      transform: translate(75%, -50%) rotate(90deg);
      top: 50%;
    }
  }

  &-right {
    transform-origin: left center;
    .popover-position(0.6, 100%, -50%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, 100%, -50%);
      .popover-scale-animation('right');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('right');
    }
    &-arrow {
      left: 2 * @rpx;
      transform: translate(-75%, -50%) rotate(-90deg);
      top: 50%;
    }
  }

  &-top-left {
    transform-origin: left bottom;
    .popover-position(0.6, 0, -100%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, 0, -100%);
      .popover-scale-animation('top-left');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('top-left');
    }
    &-arrow {
      bottom: 2 * @rpx;
      transform: translate(0, 100%) rotate(180deg);
      left: 24 * @rpx;
    }
  }

  &-top-right {
    transform-origin: right bottom;
    .popover-position(0.6, 0, -100%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, 0, -100%);
      .popover-scale-animation('top-right');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('top-right');
    }
    &-arrow {
      bottom: 2 * @rpx;
      transform: translate(0, 100%) rotate(180deg);
      right: 24 * @rpx;
    }
  }

  &-bottom-left {
    transform-origin: left top;
    .popover-position(0.6, 0, 100%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, 0, 100%);
      .popover-scale-animation('bottom-left');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('bottom-left');
    }
    &-arrow {
      top: 2 * @rpx;
      transform: translate(0, -100%) rotate(0deg);
      left: 24 * @rpx;
    }
  }

  &-bottom-right {
    transform-origin: right top;
    .popover-position(0.6, 0, 100%);

    &-opening {
      opacity: 0;
      .popover-position(0.6, 0, 100%);
      .popover-scale-animation('bottom-right');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('bottom-right');
    }
    &-arrow {
      top: 2 * @rpx;
      transform: translate(0, -100%) rotate(0deg);
      right: 24 * @rpx;
    }
  }

  &-left-top {
    transform-origin: right top;
    .popover-position(0.6, -100%, 0);

    &-opening {
      opacity: 0;
      .popover-position(0.6, -100%, 0);
      .popover-scale-animation('left-top');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('left-top');
    }
    &-arrow {
      right: 2 * @rpx;
      transform: translate(75%, 0) rotate(90deg);
      top: 24 * @rpx;
    }
  }

  &-left-bottom {
    transform-origin: right bottom;
    .popover-position(0.6, -100%, 0);

    &-opening {
      opacity: 0;
      .popover-position(0.6, -100%, 0);
      .popover-scale-animation('left-bottom');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('left-bottom');
    }
    &-arrow {
      right: 2 * @rpx;
      transform: translate(75%, 0) rotate(90deg);
      bottom: 24 * @rpx;
    }
  }

  &-right-top {
    transform-origin: left top;
    .popover-position(0.6, 100%, 0);

    &-opening {
      opacity: 0;
      .popover-position(0.6, 100%, 0);
      .popover-scale-animation('right-top');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('right-top');
    }
    &-arrow {
      left: 2 * @rpx;
      transform: translate(-75%, 0) rotate(-90deg);
      top: 24 * @rpx;
    }
  }

  &-right-bottom {
    transform-origin: left bottom;
    .popover-position(0.6, 100%, 0);

    &-opening {
      opacity: 0;
      .popover-position(0.6, 100%, 0);
      .popover-scale-animation('right-bottom');
    }

    &-closing {
      opacity: 1;
      .popover-scale-animation-close('right-bottom');
    }
    &-arrow {
      left: 2 * @rpx;
      transform: translate(-75%, 0) rotate(-90deg);
      bottom: 24 * @rpx;
    }
  }
}

.ant-popover-animation('top', -50%, -100%);
.ant-popover-animation('bottom', -50%, 100%);
.ant-popover-animation('left', -100%, -50%);
.ant-popover-animation('right', 100%, -50%);
.ant-popover-animation('top-left', 0, -100%);
.ant-popover-animation('top-right', 0, -100%);
.ant-popover-animation('bottom-left', 0, 100%);
.ant-popover-animation('bottom-right', 0, 100%);
.ant-popover-animation('left-top', -100%, 0);
.ant-popover-animation('left-bottom', -100%, 0);
.ant-popover-animation('right-top', 100%, 0);
.ant-popover-animation('right-bottom', 100%, 0);