vui-design/src/style/components/list.less

A high quality UI Toolkit based on Vue.js

@vui-list: ~"@{vui}-list";

.@{vui-list} {
  position:relative;
  display:block;
  border-radius:@list-border-radius;
  color:@list-font-color;
  font-size:@list-font-size;
  line-height:@list-line-height;
  transition:all @transition-duration @transition-timing-function;

  &-header {
    display:block;
    color:@list-header-font-color;
  }

  &-body {
    display:block;
  }
  &-body &-more {
    display:flex;
    justify-content:center;
    text-align:center;
    transition:all @transition-duration @transition-timing-function;
  }

  &-footer {
    display:block;
  }

  &-item {
    display:flex;
    justify-content:space-between;
    align-items:center;

    &-main {
      flex:1;
      display:block;
    }

    &-meta {
      flex:1;
      display:flex;
      justify-content:flex-start;
      align-items:flex-start;

      &-avatar {
        margin-right:@list-item-meta-avatar-margin-right;
      }

      &-content {
        flex:1 0;
        width:0;
      }

      &-title {
        display:flex;
        justify-content:flex-start;
        align-items:flex-start;
        color:@list-item-meta-title-font-color;
        white-space:normal;
        word-break:break-all;
        word-wrap:break-word;

        a {
          color:inherit;

          &:hover {
            color:@link-hover-color;
          }
          &:active {
            color:@link-active-color;
          }
        }
      }

      &-description {
        display:block;
        color:@list-item-meta-description-font-color;
        white-space:normal;
        word-break:break-all;
        word-wrap:break-word;
      }
    }

    &-actions {
      display:flex;
      justify-content:flex-start;
      align-items:center;
      margin:0;
      padding:0;
      list-style:none;
    }

    &-action {
      display:flex;
      justify-content:flex-start;
      align-items:center;
      color:@list-item-action-font-color;
      font-size:@list-item-action-font-size;
      transition:all @transition-duration @transition-timing-function;

      a {
        color:inherit;

        &:hover {
          color:@list-item-action-hover-font-color;
        }
        &:active {
          color:@list-item-action-active-font-color;
        }
      }

      &-divider {
        display:block;
        width:@list-item-action-divider-width;
        height:@list-item-action-divider-height;
        background-color:shade(@list-item-border-color, 10%);
        background-image:linear-gradient(@list-item-border-color, shade(@list-item-border-color, 10%), @list-item-border-color);
      }
    }

    &-extra {

    }
  }

  &-horizontal &-item {
    align-items:center;

    &-meta {
      margin-bottom:0;

      &-title {
        font-size:@font-size;
      }

      &-description {
        margin-top:@margin-xs;
      }
    }

    &-actions {
      flex:0 0 auto;
      margin-left:@margin-md;
    }

    &-action {
      color:@primary-color;

      &-divider {
        margin:0 @margin-xs;
      }
    }

    &-extra {
      margin-left:@margin-xl;
    }
  }

  &-vertical &-item {
    align-items:flex-start;

    &-meta {
      margin-bottom:@margin-md;

      &-title {
        font-size:@font-size-lg;
      }

      &-description {
        margin-top:@margin-sm;
      }
    }

    &-actions {
      margin-top:@margin-md;
    }

    &-action {
      color:@font-secondary-color;

      &-divider {
        margin:0 @margin-md;
      }
    }

    &-extra {
      margin-left:@margin-xl;
    }
  }

  &-small &-header,
  &-small &-footer,
  &-small &-item,
  &-small &-more {
    padding-top:@list-item-padding-vertical-sm;
    padding-bottom:@list-item-padding-vertical-sm;
  }

  &-medium &-header,
  &-medium &-footer,
  &-medium &-item,
  &-medium &-more {
    padding-top:@list-item-padding-vertical-md;
    padding-bottom:@list-item-padding-vertical-md;
  }

  &-large &-header,
  &-large &-footer,
  &-large &-item,
  &-large &-more {
    padding-top:@list-item-padding-vertical-lg;
    padding-bottom:@list-item-padding-vertical-lg;
  }

  &-bordered {
    border:1px solid @list-border-color;
  }

  &-bordered&-small &-header,
  &-bordered&-small &-footer,
  &-bordered&-small &-item,
  &-bordered&-small &-more {
    padding-left:@list-item-padding-horizontal-sm;
    padding-right:@list-item-padding-horizontal-sm;
  }

  &-bordered&-medium &-header,
  &-bordered&-medium &-footer,
  &-bordered&-medium &-item,
  &-bordered&-medium &-more {
    padding-left:@list-item-padding-horizontal-md;
    padding-right:@list-item-padding-horizontal-md;
  }

  &-bordered&-large &-header,
  &-bordered&-large &-footer,
  &-bordered&-large &-item,
  &-bordered&-large &-more {
    padding-left:@list-item-padding-horizontal-lg;
    padding-right:@list-item-padding-horizontal-lg;
  }

  &-split &-header {
    border-bottom:1px solid @list-item-border-color;
  }
  &-split &-footer {
    border-top:1px solid @list-item-border-color;
  }
  &-split &-item:not(:last-child) {
    border-bottom:1px solid @list-item-border-color;
  }

  &-grid &-item {
    display:block;
    max-width:100%;
    border-bottom:none;
    padding-top:0;
    padding-bottom:0;
  }
}