roadui/widget/list_news/src/list_news.one.less

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

/**
  * list_news Theme: one
  * Author: hzp (hzp@yunshipei.com)
  */

.am-list-news-one {
  @global-darker-gray: #666;
  @global-dark-gray: #888;
  @global-light-gray: #dfdfdf;

  @list-hd-bg-color: @white;
  @list-hd-color: @one-primary;
  @list-hd-h2-color: @black;
  @list-hd-more-color: @global-dark-gray;

  @list-ul-bg-color: @white;
  @list-li-bd-color: @global-light-gray;

  @list-li-a-color: @one-primary;

  @list-li-2-a-color: @gray-darker;
  @list-li-2-text-color: @global-darker-gray;
  @list-li-date-color: @global-dark-gray;

  // more
  @list-more-color: @global-darker-gray;
  @list-more-bg-color: @global-light-gray;

  margin: 0 10px;

  .am-list-news-hd {
    background: @list-hd-bg-color;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid @list-hd-color;
    padding: 0 0 0 10px;
    margin: 0;
    position: relative;
    color: @list-hd-h2-color;

    &::before {
      width: 4px;
      height: 30px;
      background: @list-hd-color;
      display: inline-block;
      content: '';
      position: absolute;
      top: 5px;
      left: 0;
    }

    & > a {
      color: @list-hd-h2-color;
      display: inline;

      .am-list-news-more {
        color: @list-hd-more-color;
        padding: 0;
        margin-right: 5px;
        background: none;
        font-size: 1.4rem;
        height: 40px;
        line-height: 40px;
      }
    }

    h2 {
      font-weight: normal;
      float: left;
      line-height: 40px;
      height: 40px;
    }
  }

  .am-list-news-bd {
    padding: 0px 5px 4px 5px;
    background: @list-ul-bg-color;
  }

  .am-list {
    margin-bottom: 0;

    & > li {
      margin: 0;
      border: 0;
      overflow: hidden;

      & > a {
        color: @list-li-2-a-color;
        font-weight: normal;
        .text-overflow();
        height: 30px;
        line-height: 30px;
        padding: 0;
        position: relative;
        text-indent: 10px;

        &:before {
          width: 4px;
          height: 4px;
          background: @list-hd-color;
          display: inline-block;
          content: '';
          position: absolute;
          top: 14px;
          left: 0;
        }
      }

      .am-list-date {
        color: @list-li-2-text-color;
        top: 5px;
        right: 0;
        display: none;
      }
    }

    & > li:last-child {
      border-bottom: 0;
    }

    // am-list-item-dated
    .am-list-item-dated {
      & > a {
        color: @list-li-2-a-color;
      }
    }

    // 带摘要
    .am-list-item-desced {
      padding: 3px 0;
      border-bottom: 1px dashed @list-li-bd-color;

      &:before {
        display: none;
      }

      .am-list-item-hd {
        font-weight: normal;
        font-size: 1.5rem;
        margin-bottom: 0;

        & > a {
          &:before {
            display: none;
          }
        }
      }
      a.am-list-item-hd {
        height: 34px;
        line-height: 34px;
        padding: 0;
        color: @list-li-a-color;
        .text-overflow();
        text-indent: 0;
        &:before {
          display: none;
        }
      }

      .am-list-item-text {
        color: @list-li-2-text-color;
        line-height: 22px;
        font-size: 1.4rem;
        max-height: none;
        margin-bottom: 8px;

        a {
          color: @list-li-2-text-color;
        }
      }

      .am-list-main {
        padding: 0 5px;
        position: relative;

        .am-list-date {
          position: absolute;
          right: 5px;
          top: 3.5rem;
          font-size: 1.2rem;
          color: @list-li-date-color;
        }

        .am-list-item-text {
          max-height: 3rem;
          overflow: hidden;
          font-size: 1.2rem;
          line-height: 18px;
          color: @list-li-2-text-color;

          a {
            color: @list-li-2-text-color;
          }
        }
      }
    }

    //带缩略图
    .am-list-item-thumbed {
      border-bottom: 1px dashed @list-li-bd-color;
      padding: 0 0 5px 0;

      &:before {
        content: none;
      }

      .am-list-item-hd {
        font-weight: normal;
        height: 30px;
        line-height: 30px;
        margin-bottom: 0;

        a {
          font-size: 1.5rem;
          color: @list-li-a-color;
          .text-overflow();
          padding: 0;
          text-indent: 0;
        }
      }

      .am-list-thumb {
        padding: 0;
        height: 60px;

        a {
          width: 100%;
          display: block;
          padding: 0;
          text-indent: 0;
          height: 60px;

          img {
            width: 100%;
            height: 60px;
            vertical-align: top;
          }
        }
      }

      .am-list-main {
        padding: 0 5px 14px 5px;
        position: relative;
      }

      .am-list-date {
        position: absolute;
        right: 5px;
        top: 3.5rem;
        font-size: 1.2rem;
        color: @list-li-date-color;
      }

      .am-list-item-text {
        max-height: 3rem;
        overflow: hidden;
        font-size: 1.2rem;
        line-height: 18px;
        color: @list-li-2-text-color;
        a {
          color: @list-li-2-text-color;
        }
      }
    }
  }

  // more
  .am-list-news-more {
    background: @list-more-bg-color;
    color: @list-more-color;
    height: 35px;
    line-height: 35px;
    font-size: 1.4rem;
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

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

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

  @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-one;
}

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