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;
    }
    .@{prefix}-popover__content--arrow {
      margin-bottom: @popover-content-arrow-margin;
    }
  }
}

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

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

.content-placement-right {
  .@{prefix}-popover[data-popper-placement^='right'] {
    .@{prefix}-popover__content {
      margin-left: @popover-content-margin;
    }
    .@{prefix}-popover__content--arrow {
      margin-left: @popover-content-arrow-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;
    }
  }
}