antd-mini/less/Toast/index.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) './variable.less';

@toastPrefix: ant-toast;

.@{toastPrefix} {
  color: @toast-default-color;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 999;
  padding: 24 * @rpx 32 * @rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: @toast-default-bg;
  border-radius: 24 * @rpx;

  &-icon,
  &-image,
  &-normal {
    margin-bottom: 24 * @rpx;
  }

  &-normal {
    height: 80 * @rpx;
  }

  &-text-long {
    border-radius: 24 * @rpx;
  }

  &-text-short {
    border-radius: 50vh;
  }

  &-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100 * @rpx;
    &.ant-icon {
      color: @toast-default-color;
    }
  }

  &-image,
  &-icon {
    width: 80 * @rpx;
    height: 80 * @rpx;
    background-size: contain;
    background-repeat: no-repeat;
  }

  &-text {
    &-body {
      display: flex;
      max-width: 380 * @rpx;
      max-height: 84 * @rpx;
      justify-content: center;
    }

    &-box {
      min-width: 0;
      max-height: 84 * @rpx;
    }

    &-content {
      font-size: 28 * @rpx;
      line-height: 40 * @rpx;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-icon-wrapper {
    width: 240 * @rpx;
    height: 240 * @rpx;
    border-radius: 32 * @rpx;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background-color: @color-product-mask;
    width: 300vw;
    height: 300vh;
    transform: translate3d(-100vw, -100vh, 0);

    .mask-appear();

    &-closing {
      .mask-close();
    }
  }

  &-opening {
    transform: translate3d(-50%, -50%, 0) scale(0.6);
    opacity: 0;
    .toast-animation-opening();
  }

  &-closing {
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
    .toast-animation-closing();
  }
}

@keyframes ant-toast-scale {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.6);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

@keyframes ant-toast-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ant-toast-scale-close {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(0.6);
  }
}

@keyframes ant-toast-opacity-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ant-toast-mask-appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes ant-toast-mask-close {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}