yun-ui/packages/style/stylesheets/list.less

Mobile UI Components Library for Vue.js by yunzhijia.

@import "var";

/* list */
.@{uiName} {

  &-list-container {
    background-color: #ffffff;
  }
  &-list-item {
    .resetImg();
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    overflow: hidden;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ffffff;
    &:after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      left: @itemSingleLinePadding;
      border-bottom: 1px solid #dce1e8;
      transform: scaleY(.5);
      -webkit-transform: scaleY(.5);
    }
    &:active {
      background-color: @listActiveBG;
    }
  }

  &-list-item {
    padding: 0 @itemSingleLinePadding;
    line-height: @itemSingleLineHeight;
    height: @itemSingleLineHeight;
    .@{uiName}-list-title {
      display: block;
      width: 0;
      flex: 1;
      -webkit-box-flex: 1;
    }
  }
  &-list-add-item {
    padding: @iconAddPadding 0;
    text-align: center;
    .icon-add {
      font-size: @itemAddIconSize;
    }
    > span {
      margin-left: @itemAddTextMargin;
      line-height: @itemAddTextLineHeight;
      font-size: @bodyFontSize; 
    }
    &:active {
      background-color: @listActiveBG;
    }
  }
  &-list-muiti-items {
    padding: @iconAddPadding 0;
    > div {
      margin-left: @itemSingleLinePadding;
      font-size: @bodyFontSize;
      color: @secondaryFontColor;
    }
    &:active {
      background-color: @listActiveBG;
    }
  }
  &-list-item-multi {
    padding: @itemSingleLinePadding;
    line-height: normal;
    height: auto;
    .@{uiName}-list-title {
      width: auto;
    }
    .@{uiName}-list-secondary-text {
    }
    .is-avatar {
      border-radius: 100%;
      overflow: hidden;
    }
  }

  &-list-icon-left,
  &-list-icon-right {
    font-size: 0;
    width: @itemSingleLineIconSize;
    height: @itemSingleLineIconSize;
    line-height: @itemSingleLineIconSize;
    margin-right: @blank;
    .iconfont {
      color: @themeColor;
      font-size: @itemSingleLineIconSize;
    }
  }

  &-list-icon-right {
    position: relative;
    margin: 0 0 0 @blank*2;
    &:before {
      content: '';
      display: block;
      position: absolute;
      height: @itemSingleLineIconSize;
      top: 50%;
      margin-top: -(@itemSingleLineIconSize/2);
      left: -@blank;
      border-left: 1px solid #dce1e8;
      vertical-align: middle;
      transform: scaleX(.5);
      -webkit-transform: scaleX(.5);
    }
  }

  &-list-title {
    font-size: @listTileFontSize;
  }
  &-list-secondary-text {
    color: @secondaryFontColor;
    font-size: @listSecondaryTextFontSize
  }
  &-list-link {
    width: @list-link-width;
    color: @secondaryFontColor;
    text-align: right;
    display: flex;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
  }
  &-list-assist-column {
    padding: @itemSingleLinePadding;
    font-size: @listAssistTextFontSize;
    color: @secondaryFontColor;
  }
  &-list-img {
    width: @itemMultiImgSize;
    height: @itemMultiImgSize;
    margin-right: @blank;
  }
  &-list-icon {
    width: @itemMultiIconSize;
    height: @itemMultiIconSize;
    margin-right: @blank;
  }
  &-list-content {
    display: block;
    width: 0;
    flex: 1;
    -webkit-box-flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
  }
}
.first-title-fontsize {
  font-size: 17px;
}