@perfma/heaven/es/empty/index.less

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

@import '~antd/es/empty/style/index.less';
@import '../style/vars.less';

.@{ant-prefix}-table-cell,
.@{ant-prefix}-list {
  .@{ant-prefix}-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 120px;

    .@{ant-prefix}-empty-image {
      margin-bottom: 0;
      width: 160px;
      height: 110px !important;
    }
  }
}

.normal {
  width: 64px;
  height: 40px;
}
.large {
  width: 160px;
  height: 110px;
}
.middle {
  width: 120px;
  height: 90px;
}
.small {
  width: 90px;
  height: 60px;
}

.@{ant-prefix}-empty {
  display: flex;
  flex-direction: column;
  align-items: center;

  .@{ant-prefix}-empty-image {
    margin-bottom: 0;
    .normal();
  }

  &-lg {
    .@{ant-prefix}-empty-image {
      .large();
    }
  }

  &-md {
    .@{ant-prefix}-empty-image {
      .middle();
    }
  }

  &-sm {
    .@{ant-prefix}-empty-image {
      .small();
    }
  }

  .@{ant-prefix}-empty-image img,
  .@{ant-prefix}-empty-image svg {
    width: 100%;
    object-fit: contain;
  }
  .@{ant-prefix}-empty-description {
    margin-top: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 360px;

    span,
    p,
    div {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    h5 {
      color: #343434;
      font-size: 14px;
      margin: 0;
    }
  }
  .@{ant-prefix}-empty-footer {
    margin-top: 24px;
  }
}

.@{ant-prefix}-empty-description {
  color: #999999;
}

.@{ant-prefix}-empty-image img[src=''] {
  opacity: 0;
}

.@{ant-prefix}-table-cell,
/* .@{ant-prefix}-card, */
.@{ant-prefix}-drawer {
  .@{ant-prefix}-empty {
    justify-content: center;
    .@{ant-prefix}-empty-image {
      .large();
    }
  }
}