tdesign-react/esm/style/web/components/popup/_mixin.less

TDesign Component for React

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

      &--arrow {
        margin-bottom: @popup-content-arrow-spacer;
      }
    }
  }
}

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

      &--arrow {
        margin-top: @popup-content-arrow-spacer;
      }
    }
  }
}

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

      &--arrow {
        margin-right: @popup-content-arrow-spacer;
      }

      &--text {
        max-width: 480px;
      }
    }
  }
}

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

      &--arrow {
        margin-left: @popup-content-arrow-spacer;
      }

      &--text {
        max-width: 480px;
      }
    }
  }
}

.arrow-placement-top() {
  .@{prefix}-popup[data-popper-placement^="top"] .@{prefix}-popup__arrow {
    &::before {
      border-top-left-radius: 100%;
      box-shadow: @popup-top-arrow-shadow;
    }
  }

  .@{prefix}-popup[data-popper-placement="top-start"] .@{prefix}-popup__arrow {
    left: @popup-arrow-width;
  }

  .@{prefix}-popup[data-popper-placement="top"] .@{prefix}-popup__arrow {
    left: 50%;
    margin-left: calc(-@popup-arrow-width / 2);
  }

  .@{prefix}-popup[data-popper-placement="top-end"] .@{prefix}-popup__arrow {
    left: calc(100% - @popup-arrow-width * 2);
  }
}

.arrow-placement-bottom() {
  .@{prefix}-popup[data-popper-placement^="bottom"] .@{prefix}-popup__arrow {
    top: calc(-@popup-arrow-width / 2);

    &::before {
      border-bottom-right-radius: 100%;
      box-shadow: @popup-bottom-arrow-shadow;
    }
  }

  .@{prefix}-popup[data-popper-placement="bottom-start"] .@{prefix}-popup__arrow {
    left: @popup-arrow-width;
  }

  .@{prefix}-popup[data-popper-placement="bottom"] .@{prefix}-popup__arrow {
    left: 50%;
    margin-left: calc(-@popup-arrow-width / 2);
  }

  .@{prefix}-popup[data-popper-placement="bottom-end"] .@{prefix}-popup__arrow {
    left: calc(100% - @popup-arrow-width * 2);
  }
}

.arrow-placement-left() {
  .@{prefix}-popup[data-popper-placement^="left"] .@{prefix}-popup__arrow {
    right: calc(-@popup-arrow-width / 2);

    &::before {
      box-shadow: @popup-left-arrow-shadow;
    }
  }

  .@{prefix}-popup[data-popper-placement="left-start"] .@{prefix}-popup__arrow {
    top: @popup-arrow-width;
  }

  .@{prefix}-popup[data-popper-placement="left"] .@{prefix}-popup__arrow {
    top: 50%;
    margin-top: calc(-@popup-arrow-width / 2);
  }

  .@{prefix}-popup[data-popper-placement="left-end"] .@{prefix}-popup__arrow {
    top: calc(100% - @popup-arrow-width * 2);
  }
}

.arrow-placement-right() {
  .@{prefix}-popup[data-popper-placement^="right"] .@{prefix}-popup__arrow {
    left: calc(-@popup-arrow-width / 2);

    &::before {
      box-shadow: @popup-right-arrow-shadow;
    }
  }

  .@{prefix}-popup[data-popper-placement="right-start"] .@{prefix}-popup__arrow {
    top: @popup-arrow-width;
  }

  .@{prefix}-popup[data-popper-placement="right"] .@{prefix}-popup__arrow {
    top: 50%;
    margin-top: calc(-@popup-arrow-width / 2);
  }

  .@{prefix}-popup[data-popper-placement="right-end"] .@{prefix}-popup__arrow {
    top: calc(100% - @popup-arrow-width * 2);
  }
}

// @placement: bottom | top | right
.expand-animation(@placement, @prefix-cls, @dom-attrs: ~'') {
  @keyframe-name: "t-popup-animation-expand";
  @clip-path-endpoint-tl: -20% 0;
  @clip-path-endpoint-tr: 120% 0;
  @clip-path-endpoint-br: 120% 120%;
  @clip-path-endpoint-bl: -20% 120%;
  @clip-path-rect: polygon(
    @clip-path-endpoint-tl,
    @clip-path-endpoint-tr,
    @clip-path-endpoint-br,
    @clip-path-endpoint-bl
  );
  @clip-path-top: polygon(
    @clip-path-endpoint-tl,
    @clip-path-endpoint-tr,
    @clip-path-endpoint-tr,
    @clip-path-endpoint-tl
  );
  @clip-path-bottom: polygon(
    @clip-path-endpoint-bl,
    @clip-path-endpoint-br,
    @clip-path-endpoint-br,
    @clip-path-endpoint-bl
  );
  @clip-path-left: polygon(
    @clip-path-endpoint-tl,
    @clip-path-endpoint-tl,
    @clip-path-endpoint-bl,
    @clip-path-endpoint-bl
  );

  .@{popup-flow}-@{prefix-cls}-enter-active@{dom-attrs} {
    animation: ~"@{keyframe-name}-in-@{placement}" @popup-flow-duration @anim-time-fn-easing,
      t-fade-in @popup-flow-duration linear;
  }
  .@{popup-flow}-@{prefix-cls}-leave-active@{dom-attrs} {
    animation: ~"@{keyframe-name}-out-@{placement}" @popup-flow-duration @anim-time-fn-easing,
      t-fade-out @popup-flow-duration @anim-time-fn-ease-out;
  }

  .keyframe(@start-path) {
    @keyframe-in-name: ~"@{keyframe-name}-in-@{placement}";
    @keyframe-out-name: ~"@{keyframe-name}-out-@{placement}";

    @keyframes @keyframe-in-name {
      0% {
        clip-path: @start-path;
      }

      100% {
        clip-path: @clip-path-rect;
      }
    }

    @keyframes @keyframe-out-name {
      0% {
        clip-path: @clip-path-rect;
      }

      100% {
        clip-path: @start-path;
      }
    }
  }

  & when (@placement = top) {
    .keyframe(@clip-path-bottom);
  }
  & when (@placement = bottom) {
    .keyframe(@clip-path-top);
  }
  & when (@placement = right) {
    .keyframe(@clip-path-left);
  }
}