amazeui/less/list.less

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

// Name:                      List
//
// Description:               Define style for list  within ul/ol
//
// Component:                `.am-list`
//
// Modifiers:                `.am-list-static`  - 纯文字列表
//                           `.am-list-striped` - 斑马纹
//                           `.am-list-border` - 全边框
//
// Used by:                   List_news
//
// =============================================================================


// Mixins
// =============================================================================

.list-item() {
  position: relative;
  display: block;
  margin-bottom: -1px;
  background-color: @list-bg;
  border: 1px solid @list-border;
  border-width: 1px 0;

  // linked
  > a {
    .list-item-linked();
  }

  > .@{ns}badge {
    float: right;
  }
  > .@{ns}badge + .@{ns}badge {
    margin-right: 5px;
  }
}

.list-item-linked() {
  display: block;
  padding: 1rem 0;
  //color: @list-link-color;

  // Hover state
  &:hover,
  &:focus {
    //background-color: @list-hover-bg;
  }

  &.@{ns}active,
  &.@{ns}active:hover,
  &.@{ns}active:focus {
    z-index: 2;
    color: @list-active-color;
    background-color: @list-active-bg;
    border-color: @list-active-border;

    .@{ns}list-item-heading {
      color: inherit;
    }
    .@{ns}list-item-text {
      color: lighten(@list-active-bg, 40%);
    }
  }
}

/* ==========================================================================
   Component: List
 ============================================================================ */


.@{ns}list {
  margin-bottom: @global-margin;
  padding-left: 0;

  > li {
    .list-item();
  }
  .hook-list;
}


/* Pure text list */

.@{ns}list-static {
  > li {
    padding: .8rem .2rem;
  }

  &.@{ns}list-border {
    > li {
      padding: 1rem;
    }
  }
  .hook-list-static;
}


/* with border */
.@{ns}list-border,
.@{ns}list-bordered {
  > li {
    border-width: 1px;

    &:first-child,
    &:first-child > a {
      .border-top-radius(@list-border-radius);
    }
    &:last-child,
    &:last-child > a {
      margin-bottom: 0;
      .border-bottom-radius(@list-border-radius);
    }

    > a {
      padding: 1rem;
      &:hover,
      &:focus {
        background-color: @list-hover-bg;
      }
    }
  }
  .hook-list-border;
}


/* Striped */

.@{ns}list-striped {
  > li:nth-of-type(even) {
    background: #f5f5f5;
  }
  .hook-list-striped;
}


// Custom content
// =============================================================================

.@{ns}list-item-hd {
  margin-top: 0;
}

.@{ns}list-item-text {
  //margin-top: 5px;
  //margin-bottom: 0;
  line-height: 1.4;
  font-size: 1.3rem;
  color: @gray-light;
  margin: 0;
}


// Hooks
// =============================================================================

.hook-list() {}
.hook-list-static() {}
.hook-list-border() {}
.hook-list-striped() {}