tdesign-react/esm/common/style/web/components/list/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_layout.less";

@import "../../mixins/_reset.less";

@import "../../mixins/_scrollbar.less";

.@{prefix}-list {
  .reset;
  .scrollbar();

  overflow: auto;
  color: @list-font-color;
  background: @list-bg-color-default;

  &__inner {
    .list-style-none();
  }

  &-item {
    font: @list-item-font;
    padding: @list-item-spacer-default;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
    }

    &-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      flex: 1;
    }

    &__meta {
      display: flex;
      // padding: @list-meta-padding;

      &-avatar {
        width: @list-avatar-size;
        height: @list-avatar-size;
        border-radius: calc(@list-avatar-size / 2);
        overflow: hidden;
        background: @list-avatar-bg-color;
        margin-right: @list-avatar-margin-right;
        flex-shrink: 0;

        img {
          max-width: 100%;
          width: 100%;
          height: 100%;
        }
      }

      &-title {
        padding: 0;
        font: @list-meta-title-font;
        margin: @list-meta-title-margin;
        color: @list-meta-title-color;
      }

      &-description {
        margin-right: @list-meta-description-margin-right;
        color: @list-meta-description-color;
      }
    }

    &__action {
      list-style: none;
      padding: 0;
      flex-shrink: 0;

      & > li {
        display: inline-block;

        &:not(:last-child) {
          margin-right: @list-action-margin-right;
        }

        .t-icon {
          color: @list-action-icon-color;
          font-size: @list-icon-size;

          &:hover {
            color: @list-link-color;
            cursor: pointer;
          }
        }

        & > a {
          text-decoration: none;
          color: @list-action-color;
        }
      }
    }
  }

  &--split {

    .@{prefix}-list-item::after {
      background: @list-item-split-color;
    }
  }

  &--stripe {

    .@{prefix}-list-item {
      &:nth-child(even) {
        background: @list-bg-color-strip;
      }
    }
  }

  &--vertical-action {

    .@{prefix}-list-item {
      flex-direction: column;
    }
  }

  &.@{prefix}-size-s {

    .@{prefix}-list-item {
      padding: @list-item-spacer-small;
    }
  }

  &.@{prefix}-size-l {

    .@{prefix}-list-item {
      padding: @list-item-spacer-large;
    }
  }

  &__header,
  &__footer {
    background: @list-bg-color-default;
    padding: @list-padding;
  }
}

.@{prefix}-list__load {
  background: @list-bg-color-default;
  text-align: center;
  line-height: @list-load-line-height;

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:not(:empty) {
    padding: @list-load-not-empty-padding; // 如果不是空子元素才设置padding
  }

  .@{prefix}-loading {
    font-size: @list-load-font-size;
    margin-right: @list-load-icon-margin;
  }

  .@{prefix}-loading.@{prefix}-is-load-more {
    cursor: pointer;
  }
}