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

tdesign-mobile-vue

.content-placement-top {
  .@{prefix}-popover[data-popper-placement^="top"] {
    .@{prefix}-popover__content {
      margin-bottom: @popover-content-margin;
    }
  }
}

.content-placement-bottom {
  .@{prefix}-popover[data-popper-placement^="bottom"] {
    .@{prefix}-popover__content {
      margin-top: @popover-content-margin;
    }
  }
}

.content-placement-left {
  .@{prefix}-popover[data-popper-placement^="left"] {
    .@{prefix}-popover__content {
      margin-right: @popover-content-margin;
    }
  }
}

.content-placement-right {
  .@{prefix}-popover[data-popper-placement^="right"] {
    .@{prefix}-popover__content {
      margin-left: @popover-content-margin;
    }
  }
}

.arrow-placement-top() {
  .@{prefix}-popover[data-popper-placement^="top"] {
    .@{prefix}-popover__arrow {
      bottom: 0;
      border-top-color: currentColor;
      border-bottom-width: 0;
      margin-bottom: calc(@popover-arrow-width * -1);
    }
  }

  .@{prefix}-popover[data-popper-placement="top"] {
    transform-origin: 50% 100%;

    .@{prefix}-popover__arrow {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .@{prefix}-popover[data-popper-placement="top-start"] {
    transform-origin: 0 100%;

    .@{prefix}-popover__arrow {
      left: @popover-padding;
    }
  }

  .@{prefix}-popover[data-popper-placement="top-end"] {
    transform-origin: 100% 100%;

    .@{prefix}-popover__arrow {
      right: @popover-padding;
    }
  }
}

.arrow-placement-left() {
  .@{prefix}-popover[data-popper-placement^="left"] {
    .@{prefix}-popover__arrow {
      right: 0;
      border-right-width: 0;
      border-left-color: currentColor;
      margin-right: calc(@popover-arrow-width * -1);
    }
  }

  .@{prefix}-popover[data-popper-placement="left"] {
    transform-origin: 100% 50%;

    .@{prefix}-popover__arrow {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .@{prefix}-popover[data-popper-placement="left-start"] {
    transform-origin: 100% 0;

    .@{prefix}-popover__arrow {
      top: @popover-padding;
    }
  }

  .@{prefix}-popover[data-popper-placement="left-end"] {
    transform-origin: 100% 100%;

    .@{prefix}-popover__arrow {
      bottom: @popover-padding;
    }
  }
}

.arrow-placement-bottom() {
  .@{prefix}-popover[data-popper-placement^="bottom"] {
    .@{prefix}-popover__arrow {
      top: 0;
      border-top-width: 0;
      border-bottom-color: currentColor;
      margin-top: calc(@popover-arrow-width * -1);
    }
  }

  .@{prefix}-popover[data-popper-placement="bottom"] {
    transform-origin: 50% 0;

    .@{prefix}-popover__arrow {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .@{prefix}-popover[data-popper-placement="bottom-start"] {
    transform-origin: 0 0;

    .@{prefix}-popover__arrow {
      left: @popover-padding;
    }
  }

  .@{prefix}-popover[data-popper-placement="bottom-end"] {
    transform-origin: 100% 0;

    .@{prefix}-popover__arrow {
      right: @popover-padding;
    }
  }
}

.arrow-placement-right() {
  .@{prefix}-popover[data-popper-placement^="right"] {
    .@{prefix}-popover__arrow {
      left: 0;
      border-right-color: currentColor;
      border-left-width: 0;
      margin-left: calc(@popover-arrow-width * -1);
    }
  }

  .@{prefix}-popover[data-popper-placement="right"] {
    transform-origin: 0 50%;

    .@{prefix}-popover__arrow {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .@{prefix}-popover[data-popper-placement="right-start"] {
    transform-origin: 0 0;

    .@{prefix}-popover__arrow {
      top: @popover-padding;
    }
  }

  .@{prefix}-popover[data-popper-placement="right-end"] {
    transform-origin: 0 100%;

    .@{prefix}-popover__arrow {
      bottom: @popover-padding;
    }
  }
}

.popover-theme(@theme) {
  @color: "popover-@{theme}-color";
  @bgColor: "popover-@{theme}-bg-color";

  .@{prefix}-popover--@{theme} {
    color: @@color;
    background: @@bgColor;

    .@{prefix}-popover__arrow {
      color: @@bgColor;
    }
  }
}