chattigo-webkit 1.19.7

.l-group-members

scss 
.l-group-members {
  background-color: use-color('base', 'true-white');
  border: solid 1px use-color('grey', light-i);
  box-sizing: border-box;
  height: 600px;
  overflow: hidden;
  padding: 8px;
  width: 250px;

  .c-indicator-count {
    border-width: 1px;
    width: 99%;
  }
  
  .app-form--search {
    margin: 8px 0;
  }
}

Layout para mostrar los miembros de un grupo.

usa los componentes:

Example

html 
<div class="l-group-members">
  <!-- contador -->
  <div class="c-indicator-count">
    <span class="c-indicator-count__number">
      35
    </span>
    <label class="c-indicator-count__label">
      Participantes
    </label>
  </div>

  <!-- buscador -->
  <form class="app-form--search">
    <input type="text" class="c-input c-input--search" placeholder="Buscar" />
  </form>

  <!-- contenido scrolleable -->
  <div class="u-scrolling-content">
    <ul class="c-list">
      <li class="c-group-member-item">
        <img class="c-group-member-item__avatar" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
        
        <div class="c-group-member-item-content">
          <label class="c-group-member-item__name">alejandro magno</label>
          <span class="c-group-member-item__data">administrador</span>
        </div>
      </li>

      <li class="c-group-member-item">
        <img class="c-group-member-item__avatar" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
        
        <div class="c-group-member-item-content">
          <label class="c-group-member-item__name">asdf asdf asdf asdf</label>
          <span class="c-group-member-item__data">Chat #122345</span>
        </div>

        <div class="c-group-member-item-options">
          <a href="" class="c-group-member-item__action-link">
            <span class="icon-outbound"></span>
          </a>
        </div>
      </li>

      <li class="c-group-member-item">
        <img class="c-group-member-item__avatar" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
        
        <div class="c-group-member-item-content">
          <label class="c-group-member-item__name">asdf asdf asdf asdf</label>
          <span class="c-group-member-item__data">Chat #122345</span>
        </div>

        <div class="c-group-member-item-options">
          <a href="" class="c-group-member-item__action-link">
            <span class="icon-message-direct"></span>
          </a>
          <a href="" class="c-group-member-item__action-link">
            <span class="icon-close"></span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</div>

.c-group-member-item

scss 
.c-group-member-item {
  border-bottom: solid 1px use-color('grey', light-i);
  display: flex;
  margin-right: 8px;
  padding: 4px;

  @include element('avatar') {
    border-radius: 50%;
    height: 35px;
    margin-right: 4px;
  }

  @include element('name') {
    @include use-font('caption', 'bold');
    text-transform: capitalize;
  }

  @include element('data') {
    @include use-font('caption');
    color: use-color('grey', 'light');
    text-transform: capitalize;
  }

  @include element('action-link') {
    margin-right: 8px;
    text-decoration: none;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('grey', light-alt);
      font-size: 16px;

      &:hover {
        color: use-color(primary);
      }
    }

    &:last-child() {
      margin-right: 0;

      [class^='icon-'],
      [class*=' icon-'] {
        font-size: 13px;
      }

      .icon-outbound {
        font-size: 22px;
      }
    }
  }

  &-content {
    display: flex;
    flex-direction: column;
    width: 70%;
  }

  &-options {
    align-items: flex-end;
    display: flex;
    justify-content: flex-end;
  }
}

Este componente fue creado para existir como un item dentro de la lista .c-list.

Contiene información del usuario junto a iconos con opciones en algunos casos.

Example

html 
<ul class="c-list">
  <li class="c-group-member-item">
    <img class="c-group-member-item__avatar" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
    
    <div class="c-group-member-item-content">
      <label class="c-group-member-item__name">alejandro magno</label>
      <span class="c-group-member-item__data">administrador</span>
    </div>
  </li>
  <li class="c-group-member-item">
    <img class="c-group-member-item__avatar" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
        
    <div class="c-group-member-item-content">
      <label class="c-group-member-item__name">asdf asdf asdf asdf</label>
      <span class="c-group-member-item__data">Chat #122345</span>
    </div>

    <div class="c-group-member-item-options">
      <a href="" class="c-group-member-item__action-link">
        <span class="icon-outbound"></span>
      </a>
    </div>
  </li>

  <li class="c-group-member-item">
    <img class="c-group-member-item__avatar" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
    
    <div class="c-group-member-item-content">
      <label class="c-group-member-item__name">asdf asdf asdf asdf</label>
      <span class="c-group-member-item__data">Chat #122345</span>
    </div>

    <div class="c-group-member-item-options">
      <a href="" class="c-group-member-item__action-link">
        <span class="icon-message-direct"></span>
      </a>
      <a href="" class="c-group-member-item__action-link">
        <span class="icon-close"></span>
      </a>
    </div>
  </li>
</ul>