roadui/widget/list_news/src/list_news.default.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

/**
  * list_news Theme: default
  */

.am-list-news-default {
  @list-item-border-color: #dedede;
  @list-date-color: @gray-light;
  @list-text-color: lighten(@gray, 12.5%);

  margin: 10px;

  .line-clamp-height(@line) {
    -webkit-line-clamp: @line; /* number of lines to show */
    max-height: 1.3em * @line;
  }

  .am-g {
    margin-left: auto;
    margin-right: auto;
  }

  .am-list-item-hd {
    font-weight: normal;
  }

  // 日期样式
  .am-list-date {
    color: @list-date-color;
  }

  .am-list {

    & > li {
      border-color: @list-item-border-color;
    }

    .am-list-item-desced {
      padding-top: 1rem;
      padding-bottom: 1rem;
      > a {
        padding: 0;
      }

      .am-list-item-text {
        margin-top: 0.5rem;
        color: @list-text-color;
      }
    }

    // desc
    .am-list-item-text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-height: 1.3em;
      .line-clamp-height(2);
    }

    // 缩略图在上
    .am-list-item-thumb-top {
      .am-list-thumb {
        padding: 0;
        margin-bottom: 0.8rem;
      }

      .am-list-main {
        padding: 0;
      }
    }

    // 缩略图在左边
    .am-list-item-thumb-left {
      .am-list-thumb {
        padding-left: 0;
      }
    }
    .am-list-item-desced {
      .am-list-main {
        padding: 0;
      }
    }

    // 缩略图在右边
    .am-list-item-thumb-right {
      .am-list-thumb {
        padding-right: 0;
      }
    }

    // 缩略图在左下
    .am-list-item-thumb-bottom-left {
      .am-list-item-hd {
        clear: both;
        padding-bottom: 0.5rem;
      }
      .am-list-thumb {
        padding-left: 0;
      }
    }

    // 缩略图在右下
    .am-list-item-thumb-bottom-right {
      .am-list-item-hd {
        clear: both;
        padding-bottom: 0.5rem;
      }
      .am-list-thumb {
        padding-right: 0;
      }
    }

    // 缩略图
    .am-list-thumb {
      img {
        width: 100%;
        display: block;
      }

    }
  }

  // 限定缩略图高度
  .max-thumb-height(@height: 80px) {
    max-height: @height;
    overflow: hidden;
  }

  @media @small-only {
    & {
      // 缩略图在左右时限定图片高度
      .am-list-item-thumb-left, .am-list-item-thumb-right {
        .am-list-thumb {
          .max-thumb-height();
        }
      }

      // 缩略图在左右时限定图片高度
      .am-list-item-thumb-bottom-left, .am-list-item-thumb-bottom-right {
        .am-list-item-text {
          .line-clamp-height(3);
        }
        .am-list-thumb {
          .max-thumb-height(60px);
        }
      }
    }
  }

  .hook-am-list-news-default;
}

.hook-am-list-news-default() {}