wetrade-design/lib/empty/style/index-pure.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@import '../../style/mixins/index';

@empty-prefix-cls: ~'@{wd-prefix}-empty';
@empty-img-prefix-cls: ~'@{wd-prefix}-empty-img';

.@{empty-prefix-cls} {
  margin: 0 8px;
  font-size: @empty-font-size;
  line-height: @line-height-normal;
  text-align: center;

  &-image {
    margin-bottom: 16px;
    line-height: normal;
    font-size: 0;

    img {
      height: 100%;
    }

    // .@{iconfont-css-prefix} {
    // display: block;

    svg {
      &:not(.@{empty-img-prefix-cls}-simple) {
        width: @empty-image-width;
        height: @empty-image-height;
        margin: auto;
        // box-shadow: @empty-image-shadow;
      }

      // 无消息
      &.@{empty-img-prefix-cls}-message {
        width: @empty-image-message-width;
        height: @empty-image-message-height;
      }

      // 无账户
      &.@{empty-img-prefix-cls}-account {
        width: @empty-image-account-width;
        height: @empty-image-account-height;
      }

      // 404
      &.@{empty-img-prefix-cls}-found {
        width: @empty-image-found-width;
        height: @empty-image-found-height;
      }
      //
      &.@{empty-img-prefix-cls}-search {
        width: @empty-image-search-width;
        height: @empty-image-search-height;
      }
    }
  }

  &-description {
    color: @empty-font-color;
  }

  &-footer {
    margin-top: 16px;
  }

  // antd internal empty style
  &-normal {
    margin: 32px 0;
    font-size: @font-size-base;
    line-height: @empty-font-line-height-bg;
    color: @empty-font-color;
  }

  &-small {
    margin: 8px 0;
    font-size: @font-size-sm;
    line-height: @empty-font-line-height-md;
    color: @empty-font-color;

    .@{empty-prefix-cls}-image {
      height: 35px;
    }

    svg {
      width: 70px;
      height: 48px;
    }

    .@{empty-prefix-cls}-description {
      font-size: @font-size-sm;
      color: @empty-image-module-color;
      line-height: @line-height-base;
    }
  }

  &-module {
    .@{empty-prefix-cls}-image {
      // .@{iconfont-css-prefix} {
      svg {
        width: @empty-image-module-width;
        height: @empty-image-module-height;
      }
      // }
    }

    .@{empty-prefix-cls}-description {
      font-size: @font-size-sm;
      color: @empty-image-module-color;
      line-height: @line-height-base;
    }
  }

  &-text {
    .@{empty-prefix-cls}-description {
      font-size: @font-size-sm;
      color: @empty-image-module-color;
      line-height: @line-height-base;
    }
  }

  &-refresh-btn {
    cursor: pointer;
    color: @empty-refresh-btn-color;

    &:hover {
      color: @empty-refresh-btn-color-hover;
    }

    &:active {
      color: @empty-refresh-btn-color-active;
    }
  }
}

.@{empty-img-prefix-cls}-default {
  // not support the definition because the less variables have no meaning
  & when (@theme = dark) {
    &-ellipse {
      fill: @white;
      fill-opacity: 0.08;
    }

    &-path {
      &-1 {
        fill: #262626;
      }

      &-2 {
        fill: url('#linearGradient-1');
      }

      &-3 {
        fill: #595959;
      }

      &-4 {
        fill: #434343;
      }

      &-5 {
        fill: #595959;
      }
    }

    &-g {
      fill: #434343;
    }
  }
  & when not (@theme = dark) {
    &-ellipse {
      fill: #f5f5f5;
      fill-opacity: 0.8;
    }

    &-path {
      &-1 {
        fill: #aeb8c2;
      }

      &-2 {
        fill: url('#linearGradient-1');
      }

      &-3 {
        fill: #f5f5f7;
      }

      &-4 {
        fill: #dce0e6;
      }

      &-5 {
        fill: #dce0e6;
      }
    }

    &-g {
      fill: @white;
    }
  }
}

.@{empty-img-prefix-cls}-simple {
  // not support the definition because the less variables have no meaning
  & when (@theme = dark) {
    &-ellipse {
      fill: @white;
      fill-opacity: 0.08;
    }

    &-g {
      stroke: #434343;
    }

    &-path {
      fill: #262626;
      stroke: #434343;
    }
  }
  & when not (@theme = dark) {
    &-ellipse {
      fill: #f5f5f5;
    }

    &-g {
      stroke: #d9d9d9;
    }

    &-path {
      fill: #fafafa;
    }
  }
}

@import './rtl';