ten-design-vue/lib/theme/components/list.less

ten-vue

/* dependencies icon */
@import "../vars.less";
@import "../mixins/index.less";

.ten-list {
  background-color: @list-bg-color;

  &__header {
    padding: @list-padding;
    color: @title-level-3-color;
    font-size: @title-level-3-size;
    line-height: @title-level-3-line;
    font-weight: 600;
    padding-bottom: 0;
  }
  &__content {
    padding: @list-padding;
  }
  &__item {
    &__text,
    &__rich {
      padding-top: @list-item-padding-top-bottom;
      padding-bottom: @list-item-padding-top-bottom;
      border-bottom: @border-main-2;
      display: flex;
      align-items: center
    }
    &__text-title {
      .text-ellipsis();
      width: 20%;
      margin-right: 10px;
      font-size: @text-level-1-size;
      color: @text-level-1-color;
      line-height: @text-level-1-line;
    }
    &__text-content {
      .text-ellipsis();
      flex: 1;
      font-size: @text-level-2-size;
      color: @text-level-2-color;
      line-height: @text-level-2-line;
    }

    &__rich-thumb {
      width: @list-rich-thumb-size;
      height: @list-rich-thumb-size;
      margin-right: @list-padding;

      .ten-image__wrapper {
        width: 100%;
        height: 100%;
      }
      .ten-image__error {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    }
    &__rich-main {
      flex: 1;
      overflow: hidden;
    }
    &__rich-title {
      .text-ellipsis();
      font-size: @text-level-1-size;
      color: @text-level-1-color;
      line-height: @text-level-1-line;
      margin-bottom: 6px;
    }
    &__rich-content {
      .text-ellipsis();
      font-size: @smalltext-level-2-size;
      color: @smalltext-level-2-color;
      line-height: @smalltext-level-2-line;
    }
    &__rich-more {
      margin-left: @list-padding;
      display: flex;
      justify-content: space-between;
      width: 40px;
      font-size: @text-level-2-size;
      color: @text-level-2-color;
      line-height: @text-level-2-line;

      .ten-icon {
        cursor: pointer;
      }
    }
  }
  &__footer {
    padding: @list-padding;
    background-color: @list-footer-bg-color;
  }

  // 最后一个 text 元素底部处理
  &__content > &__row:last-child &__item__text,
  &__content > &__row:last-child &__item__rich {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.ten-list--card {
  padding: 0;
  background-color: @list-card-bg-color;

  .ten-list__header {
    padding: 0 0 @list-padding 0;
  }

  // 用以解决 card 阴影溢出原始容器问题：将原始容器放大 10px
  .ten-list__content {
    width: ~'calc(100% + @{list-card-margin} + @{list-card-margin})';
    margin-left: -@list-card-margin;
    margin-top: -@list-card-margin;
    padding: 0;
  }

  // 配置 card 内容默认样式
  .ten-card__content {
    color: @text-level-3-color;
    font-size: @text-level-3-size;
    line-height: @text-level-3-line;
  }

  // 覆盖 card 默认样式
  .ten-card__footer {
    text-align: left;
    font-size: @smalltext-level-2-size;
    color: @smalltext-level-2-color;
    line-height: @smalltext-level-2-line;
  }

  // 只有这样 card 阴影效果才能显示
  .ten-list__item {
    margin: @list-card-margin;
  }

  // 下面的这些样式，是为了实现每一个 card 等高
  .ten-list__row {
    display: flex;
  }
  .ten-list__col {
    align-self: stretch;
    display: flex;
  }
  .ten-list__col .ten-list__item {
    flex: 1;
  }
  .ten-list__item__card,
  .ten-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .ten-card__content {
    flex: 1;
  }
}

.ten-list--infinite-scroll {
  // 用以遮蔽头部溢出的阴影
  overflow: hidden;

  .ten-list__header {
    padding-bottom: @list-padding;
    box-shadow: @shadow-level-1;
  }
  .ten-list__content {
    // 无限加载区域的滚动条
    overflow: auto;
  }
}