tdesign-mobile-vue/esm/_common/style/mobile/components/popover/_index.less

tdesign-mobile-vue

@import "../../base.less";

@import "./_mixin.less";

@import "./_var.less";

@import "../../utilities/_animation.less";

.@{prefix}-popover {
  display: inline-block;
  z-index: 1500;
  position: absolute;
  overflow: visible;

  &__wrapper {
    display: inline-block;
  }

  &__content {
    position: relative;
    box-shadow: @popover-shadow;
    border-radius: 6px;
    padding: @popover-padding;
    font-size: @popover-content-font-size;
    line-height: @popover-content-line-height;
    box-sizing: border-box;
    word-break: break-all;
  }

  &__arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: @popover-arrow-width;
  }
}

.popover-theme(dark);
.popover-theme(light);
.popover-theme(brand);
.popover-theme(success);
.popover-theme(warning);
.popover-theme(error);

.content-placement-top();
.content-placement-bottom();
.content-placement-left();
.content-placement-right();

.arrow-placement-top();
.arrow-placement-bottom();
.arrow-placement-left();
.arrow-placement-right();

// animation
.@{popover-flow}-enter,
.@{popover-flow}-enter-from,
.@{popover-flow}-exiting,
.@{popover-flow}-leave-to {
  opacity: 0;
  visibility: hidden;
}

.@{popover-flow}-enter-to,
.@{popover-flow}-entering,
.@{popover-flow}-leave-from,
.@{popover-flow}-leave {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.@{popover-flow}-enter-active {
  transition: @popover-flow-transition-enter;
}

.@{popover-flow}-leave-active {
  transition: @popover-flow-transition-leave;
}