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 {
    z-index: 998;
  }
}