tdesign-react/esm/common/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);
  }
}