/*doc
---
title: Content List
name: content_list
category: Components
---

Custom list for editable content

```html_example
<ul class="ContentList">
  <li class="ContentList__header">
    <div class="ContentList__column">Name</div>
    <div class="ContentList__column hidden-xs">Last edited</div>
    <div class="ContentList__column align-right">Actions</div>
  </li>
  <li class="ContentList__row">
    <div class="ContentList__column"><span class="ContentList__checkbox"><input type="checkbox" /></span><span class="ContentList__avatar"><img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" /></span> Mike Rooseboom</div>
    <div class="ContentList__column hidden-xs"><span class="hidden-sm">Published at </span>Feb, 28 2015</div>
    <div class="ContentList__column align-right"><a class="ContentList__action" href="#">Edit</a><button class="btn btn-link ContentList__action">Publish</button></div>
  </li>
  <li class="ContentList__row">
    <div class="ContentList__column"><span class="ContentList__checkbox"><input type="checkbox" /></span><span class="ContentList__avatar"><img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" /></span> Rashmi Yadav</div>
    <div class="ContentList__column hidden-xs"><span class="hidden-sm">Published at </span>Feb, 27 2015</div>
    <div class="ContentList__column align-right"><a class="ContentList__action" href="#">Edit</a><button class="btn btn-link ContentList__action">Publish</button></div>
  </li>
  <li class="ContentList__row active">
    <div class="ContentList__column"><span class="ContentList__checkbox"><input type="checkbox" /></span><span class="ContentList__avatar"><img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" /></span> Zoee Silcock</div>
    <div class="ContentList__column hidden-xs"><span class="hidden-sm">Published at </span>Feb, 26 2015</div>
    <div class="ContentList__column align-right"><a class="ContentList__action" href="#">Edit</a><button class="btn btn-link ContentList__action">Publish</button></div>
  </li>
</ul>

<ul class="ContentList ContentList--compact">
  <li class="ContentList__row">
    <div class="ContentList__column"><i name="twitter" class="fa fa-twitter fa-fw SocialMediaSettings-channelIcon gutter-right"></i> Mike Rooseboom</div>
    <div class="ContentList__column align-right"><button class="btn btn-link ContentList__action">Tweet</button></div>
  </li>
  <li class="ContentList__row">
    <div class="ContentList__column"><i name="twitter" class="fa fa-twitter fa-fw SocialMediaSettings-channelIcon gutter-right"></i> Rashmi Yadav</div>
    <div class="ContentList__column align-right"><button class="btn btn-link ContentList__action">Tweet</button></div>
  </li>
  <li class="ContentList__row">
    <div class="ContentList__column"><i name="twitter" class="fa fa-twitter fa-fw SocialMediaSettings-channelIcon gutter-right"></i> Zoee Silcock</div>
    <div class="ContentList__column align-right"><button class="btn btn-link ContentList__action">Tweet</button></div>
  </li>
</ul>
```
*/

$content-list-padding: $space-larger $space;
$list-item-height: 60px;

.ContentList {

  border-collapse: collapse;
  border-spacing: 0;
  display: table;
  list-style-type: none;
  margin-bottom: $space-larger;
  max-width: 100%;
  width: 100%;

  &:last-child {
    margin-bottom: 0;
  }

  &__row {
    display: table-row;

    &.active {
      background: tint($color-poptype-blue, 95%);
    }
  }

  &__column {
    border-bottom: 1px solid $gray-lighter;
    display: table-cell;
    padding: $content-list-padding;
    vertical-align: middle;

    &:first-child {
      display: table-cell;
      text-align: left;
    }


    &:last-child {
      display: table-cell;
    }
  }

  &__header {
    @extend .ContentList__row;

    color: $black;
    font-size: $font-size-base;
    font-weight: $semi-bold;
  }

  &__action {
    border: 0;
    display: inline-block;
    font-weight: $btn-font-weight;
    margin-left: 25px;
    padding: 0;
    vertical-align: initial;

    &:first-child {
      margin-left: 0;
    }
  }

  &__checkbox {
    display: inline-block;
    margin-right: 20px;
  }

  &__avatar {
    $avatar-size: 35px;

    display: inline-block;
    margin-right: 25px;
    position: relative;
    width: $avatar-size;

    img {
      border-radius: 50%;
      height: $avatar-size;
      margin-top: -23px;
      position: absolute;
      width: $avatar-size;
    }
  }
}

.ContentList--compact {
  border: 1px solid $gray-lighter;
  border-bottom: 0;
  border-collapse: separate;
  border-radius: $border-radius-base;
  padding: 0;

  .ContentList__column {
    //height: $list-item-height - 10px;
    line-height: $list-item-height - 10px;
    padding-top: 0;
    padding-bottom: 0;
  }
}