ten-design-vue/lib/theme/components/popup.less

ten-vue

@import '../vars.less';
@import '../transition.less';

.ten-popup {
  position: absolute;
  z-index: 10001;
  top: -1000px;
  box-shadow: @shadow-level-2;
  background: #fff;
  padding: @popup-padding;
  overflow: hidden;
  border-radius: @popup-border-radius-default;
}

// 气泡
.ten-popup--type-bubble {
  background: none;
  box-shadow: none;
  overflow: visible;
  // padding: 16px;
  
  & > div {
    position: relative;
    z-index: 1;
    padding: 16px;
    color: @text-color-lighter-1;
    background: #fff;
    box-shadow: @shadow-level-2;
    // border: @tooltip-border;
    border-radius: @tooltip-border-radius-default;
  }
  &::after {
    display: block;
    content: '';
    position: absolute;
    z-index: @tooltip-arrow-zindex;
    border-color: #fff;
    border-top: @tooltip-arrow-border;
    border-right: @tooltip-arrow-border;
    // box-shadow: @tooltip-arrow-shadow;
    width: 16px;
    height: 16px;
    // transform: rotate(45deg);
    background-color: #fff;
    // border: none!important;
  }

  // arrow
  &[class*='--p-top-'] {
    padding-bottom: 16px;
    &::after {
      bottom: 8px;
    }
  }

  &[class*='--p-bottom-'] {
    padding-top: 16px;
    &::after {
      top: 8px;
    }
  }

  &[class*='--p-left-'] {
    padding-right: 16px;
    &::after {
      right: 8px;
    }
  }

  &[class*='--p-right-'] {
    padding-left: 16px;
    &::after {
      left: 8px;
    }
  }

  &[class*='--p-top-left'] {
    &::after {
      left: 24px;
      transform: rotate(135deg);
    }
  }

  &[class*='--p-top-center'] {
    &::after {
      left: 50%;
      transform: translateX(-50%) rotate(135deg);
    }
  }

  &[class*='--p-top-right'] {
    &::after {
      right: 24px;
      transform: translateX(-50%) rotate(135deg);
    }
  }

  &[class*='--p-left-top'] {
    &::after {
      top: 24px;
      transform: rotate(45deg);
    }
  }

  &[class*='--p-left-center'] {
    &::after {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }

  &[class*='--p-left-bottom'] {
    &::after {
      bottom: 24px;
      transform: rotate(45deg);
    }
  }

  &[class*='--p-right-top'] {
    &::after {
      top: 24px;
      transform: rotate(-135deg);
    }
  }

  &[class*='--p-right-center'] {
    &::after {
      top: 50%;
      transform: translateY(-50%) rotate(-135deg);
    }
  }

  &[class*='--p-right-bottom'] {
    &::after {
      bottom: 24px;
      transform: rotate(-135deg);
    }
  }

  &[class*='--p-bottom-left'] {
    &::after {
      left: 16px;
      transform: rotate(-45deg);
    }
  }

  &[class*='--p-bottom-center'] {
    &::after {
      left: 50%;
      transform: translateX(-50%) rotate(-45deg);
    }
  }

  &[class*='--p-bottom-right'] {
    &::after {
      right: 16px;
      transform: translateX(-50%) rotate(-45deg);
    }
  }
}

// animation
@popup-flow: ten-flow-in__popup;

.@{popup-flow}-enter,
.@{popup-flow}-exiting,
.@{popup-flow}-leave-to {
  opacity: 0;
}

.@{popup-flow}-enter-to,
.@{popup-flow}-entering,
.@{popup-flow}-leave {
  opacity: 1;
  transform: none;
}

.@{popup-flow}-enter-active {
  transition: @flowin-transition;
}
.@{popup-flow}-leave-active {
  transition: @flowin-transition;
}

[class*='ten-popup--p'] {
  &.@{popup-flow}-entering,
  &.@{popup-flow}-exit,
  &.@{popup-flow}-exiting {
    transition: @flowin-transition;
  }
}

// top
.@{popup-flow}-enter[class*='ten-popup--p-top-'],
.@{popup-flow}-exiting[class*='ten-popup--p-top-'],
.@{popup-flow}-leave-to[class*='ten-popup--p-top-'] {
  transform: translateY(@transfrom-y);
  opacity: 0;
}

// left
.@{popup-flow}-enter[class*='ten-popup--p-left-'],
.@{popup-flow}-exiting[class*='ten-popup--p-left-'],
.@{popup-flow}-leave-to[class*='ten-popup--p-left-'] {
  transform: translateX(@transform-x);
  opacity: 0;
}

// right
.@{popup-flow}-enter[class*='ten-popup--p-right-'],
.@{popup-flow}-exiting[class*='ten-popup--p-right-'],
.@{popup-flow}-leave-to[class*='ten-popup--p-right-'] {
  transform: translateX(-@transform-x);
  opacity: 0;
}

// bottom
.@{popup-flow}-enter[class*='ten-popup--p-bottom-'],
.@{popup-flow}-exiting[class*='ten-popup--p-bottom-'],
.@{popup-flow}-leave-to[class*='ten-popup--p-bottom-'] {
  transform: translateY(-@transfrom-y);
  opacity: 0;
}