chattigo-webkit 1.19.7

.c-form--search

scss 
.c-form--search {
  margin: 4px 0;
  position: relative;

  @include element('messages') {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 8px;
    
    span {
      @include use-font('caption', 'regular');
      color: use-color('grey', light);
      padding: 0;
    }
  }

  &::before {
    color: use-color('grey', light-alt);
    content: '\e909';
    font-family: 'icomoon';
    font-size: 16px;
    left: 8px;
    position: absolute;
    top: 5px;
    z-index: use-layer('base');
    // z-index: 1;
  }
}

Formulario de busqueda creado para filtras los contactos dentro de las listas de Outbound.

Example

html 
<form class="c-form--search">
  <input type="text" class="c-input c-input--search" />
  <div class="c-form--search__messages">
    <span>
      Lista seleccionada: <strong>Lista navidad 2019</strong>
    </span>

    <span>
      Contactos seleccionados: <strong>2530</strong>
    </span>
  </div>
</form>

Requires

@mixin element()

@mixin use-font()

@function use-color()

.c-form--hsm-fields

scss 
.c-form--hsm-fields {
  display: flex;
  flex-direction: column;

  .c-input,
  .c-select {
    width: 275px;
  }

  .c-input {
    &__label {
      color: use-color(primary);
      margin-right: 8px;
      min-width: 30px;
      width: fit-content;
    }
  }
}

Esta clase modifica los estilos de los componentes:

También se usa la etiqueta vacía para mantener las proporciones de los inputs/selects.

Example

html 
<form class="c-form--hsm-fields">
  <div class="c-form--hsm-fields__item">
    <label class="c-input__label">
      &#123;&#123;1&#125;&#125;
    </label>
    <select class="c-select">
      <option id="0">
        Nombre
      </option>
      <option id="1">Option 1</option>
      <option id="2">Option 2</option>
    </select>
  </div>

  <div class="c-form--hsm-fields__item">
    <label class="c-input__label">
      &#123;&#123;2&#125;&#125;
    </label>
    <select class="c-select">
      <option id="0">
        Personalizado:
      </option>
      <option id="1">Option 1</option>
      <option id="2">Option 2</option>
    </select>
  </div>

  <div class="c-form--hsm-fields__item">
    <label class="c-input__label"></label>
    <input type="text" class="c-input" value="Chattigo" />
  </div>

  <div class="c-form--hsm-fields__item">
    <label class="c-input__label">
      &#123;&#123;3&#125;&#125;
    </label>
    <select class="c-select">
      <option id="0"></option>
      <option id="1">Option 1</option>
      <option id="2">Option 2</option>
    </select>
  </div>

  <div class="c-form--hsm-fields__item">
    <label class="c-input__label">
      &#123;&#123;4&#125;&#125;
    </label>
    <select class="c-select">
      <option id="0">
        Personalizado:
      </option>
      <option id="1">Option 1</option>
      <option id="2">Option 2</option>
    </select>
  </div>

  <div class="c-form--hsm-fields__item">
    <label class="c-input__label"></label>
    <input type="text" class="c-input" value="http://www.chattigo.com" />
  </div>
</form>

Requires

@function use-color()

.c-client-card

scss 
.c-client-card {
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  cursor: pointer;
  display: flex;
  margin-bottom: 12px;
  margin-right: 20px;
  max-width: 220px;
  min-width: 220px;

  @include modifier('selected') {
    background: lighten(use-color('secondary', light-alt), 15%);
  }

  @include element('status') {
    align-items: center;
    background-color: use-color('grey', 'light-iii');
    display: flex;
    height: auto;
    justify-content: center;
    min-width: 28px;

    @include if-block-has-modifier('c-client-card', 'selected') {
      background: lighten(use-color('secondary', light-alt), 10%);

      span {
        font-size: 18px;
      }
    }

    span {
      color: use-color('secondary');
      font-size: 14px;
    }

  }

  @include element('title') {
    @include use-font('caption');
    border-bottom: solid 1px use-color('grey', 'light-i');
    text-transform: capitalize;
  }

  @include element('content') {
    padding: 8px 12px 8px 8px;
    width: 100%;
  }

  @include element('data') {
    @include use-font('caption');
    color: use-color('grey', 'light');
    margin: 0;
    padding: 0;

    span {
      color: use-color('grey', 'light-alt');
    }
  }
}

Tarjeta creada para la seleccion de clientes a la hora de hacer un envío HSM.

Esta compuesto por información básica del usuario y tambien consta con una clase modificadora para el estado seleccionado: .c-client-card--selected.

Examples

html client card 
<div class="c-client-card">
  <div class="c-client-card__status">
    <span class="icon-profile"></span>
  </div>

  <div class="c-client-card__content">
    <div class="c-client-card__title">
      Cristian fuentealba
    </div>

    <p class="c-client-card__data">
      12264052-3
    </p>

    <p class="c-client-card__data">
      Id: <span>CHATTIGO</span>
    </p>          
  </div>
</div>
html selected client card 
<div class="c-client-card c-client-card--selected">
  <div class="c-client-card__status">
    <span class="icon-profile-check"></span>
  </div>
  
  <div class="c-client-card__content">

    <div class="c-client-card__title">
      alex plaza
    </div>

    <p class="c-client-card__data">
      12264052-3
    </p>
    <p class="c-client-card__data">
      Id: <span>CHATTIGO</span>
    </p>          
  </div>
</div>

.hsm-preview

scss 
.c-hsm-preview,
.hsm-preview {
  @include use-font('body');
  border: solid 1px use-color('grey', light-alt);
  border-radius: 16px;
  color: use-color('grey', light);
  max-width: 385px;
  padding: 20px 20px 48px;

  span {
    color: use-color(primary);
  }
}

Este componente es para mostrar el contenido del HSM seleccionado.

Example

html 
<div class="hsm-preview">
  Hola <span>{{1}}</span> bienvenido(a) a <span>{{2}}</span>, junto con saludar queremos invitarte a participar de <span>{{3}}</span>, y que nos des tú opinión en el siguiente link <span>{{4}}</span>
  <br>
  Saludos y desde ya muchas gracias <span>{{1}}</span>
</div>

Requires

@mixin use-font()

@function use-color()

.hsm-preview-resume

scss 
.c-hsm-preview-resume,
.hsm-preview-resume {
  @include use-font('caption');
  background-color: use-color('grey', light-i);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 4px 8px;

  @include element('item') {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    span {
      color: use-color(primary);
    }

    &:last-child() {
      border-left: solid 1px use-color('grey', light);
      display: flex;
      justify-content: flex-end;
      margin-left: 8px;
      min-width: 200px;
      padding-left: 16px;

      strong {
        margin-left: 16px;
      }
    }
  }
}

Para mostrar el resumen del HSM previamente seleccionado.

Example

html 
<div class="hsm-preview-resume">
  <span class="hsm-preview-resume__item">
    HSM seleccionado : 
    <strong>
      Hola <span>&#123;&#123;1&#125;&#125;</span>, bienvenido a <span>&#123;&#123;2&#125;&#125;</span>, junto con saludar queremos invitarte a participar de <span>&#123;&#123;3&#125;&#125;</span>, y que nos des tú opinión en el siguiente link http://www.chattigo.com
    </strong>
  </span>
  
  <span class="hsm-preview-resume__item">
    Nº Campos :
    <strong>
      4 campos dinámicos
    </strong>
  </span>
</div>

Requires

@mixin use-font()

@function use-color()

.c-hsm-selected-user

scss 
.c-hsm-selected-user,
.hsm-selected-user {
  @include use-font('caption');
  align-items: center;
  background-color: lighten(use-color('secondary', light-alt), 15%);
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  margin-bottom: 12px;
  padding: 4px 4px 4px 44px;
  position: relative;

  @include element('username') {
    @include use-font('caption', 'semibold');
    display: inline-block;
    margin-right: 16px;
    max-width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @include element('data') {
    margin-right: 12px;

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

  &::before {
    align-items: center;
    background-color: lighten(use-color('secondary', light-alt), 10%);
    border-radius: 4px 0 0 4px;
    color: use-color('secondary');
    content: '\e91c';
    display: flex;
    font-family: 'icomoon' !important;
    font-size: 20px;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 40px;
  }
}

Para los casos en que se ejecuta un envío outbound desde la caja de mensajes de grupos.

Al llegar a las pantallas de envío de outbound, este componente se utiliza para indicar:

  • información del contacto
  • campaña
  • canal

Example

html 
<div class="u-example-padding">

  <div class="hsm-selected-user">
    <span class="hsm-selected-user__username">
      Oliver Hidalgo
    </span>
  
    <span class="hsm-selected-user__data">
      <strong>Campaña</strong>
      #HablaConmigo
    </span>
    
    <span class="hsm-selected-user__data">
      <strong>Canal</strong>
      WhatsApp
    </span>
  </div>

</div>

.c-hsm-item

scss 
.c-hsm-item {
  background-color: use-color('base', true-white);
  border-bottom: solid 1px use-color('grey', light-i);
  padding: 12px 16px;
  position: relative;

  @include media-breakpoint-only('phone') {
    padding: 8px;
  }

  @include element('message') {  
    @include use-font('body');
    color: use-color('grey', light);
    margin: 0 0 12px;
    width: 90%;
  
    span {
      color: use-color(primary);
    }
  }

  @include element('footer') {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  @include element('pill') {
    @include use-font('caption');
    background-color: use-color('base', 'white');
    border: solid 1px use-color('grey', 'light');
    border-radius: 4px;
    color: use-color('grey', 'light');
    margin: 0;
    text-align: center;
    text-transform: lowercase;
    width: 130px;
  }

  @include element('release-date') {
    @include use-font('caption');
    color: use-color('grey', 'light');
    padding-left: 24px;
    position: relative;

    &::first-letter {
      text-transform: uppercase;
    }

    // override dropup component
    .c-dropup {
      left: -16px;
      right: auto;
      top: -36px;
      width: fit-content;

      @include media-breakpoint-only('phone') {
        top: -36px !important;
      }

      @include element('trigger') {
        left: 0;
        top: 0 !important;
        transform: rotate(0);

        [class^='icon-'],
        [class*=' icon-'] {
          color: use-color('event', warning);
          cursor: pointer;
          font-size: 20px;
        }
      }
    }
  }

  &:hover {
    background-color: use-color('grey', 'light-iii');
  }

  // override dropup component
  .c-dropup {
    right: 4px;

    @include media-breakpoint-only('phone') {
      top: 0;
    }
    
    @include element('trigger') {
      top: 12px;
    }
  }

  &:first-child {
    .c-dropup {
      right: 4px;
      top: 0;
    } 
  }
}

Este componente contiene la información necesaria de cada item en la lista de mensajes outbound.

Para las opciones de cada item se usa el componente .c-dropup.

Este componente se creo para que existiria dentro de una lista .c-list, la clase .c-hsm-item deberá ser especificada en el elemento <li>.

  <li class="c-hsm-item">

También tiene un elemento para la preview del mensaje .c-hsm-item__message y otro para contener los elementos que están ubicados en el footer del item .c-hsm-item__footer.

Los elementos que existen en el footer son:

  • .c-hsm-item__pill para indicar el número de contactos.
  • .c-hsm-item__release-date para indicar la fecha que esta programado el envío.

Para los casos en que el saldo no es suficiente, el contenido del mensaje debe ir en .c-hsm-item__release-date.

Example

html 
<ul class="c-list">
  <li class="c-hsm-item">
    <div class="c-dropup__trigger">
      <span class="icon-menu-options"></span>
    </div>
    <ul class="c-dropup">
      <li class="c-dropup__item">
        <a href="#">
          <span class="icon-edit"></span>
          Editar mensaje
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          <span class="icon-clock-add"></span>
          Reprogramar envío
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          <span class="icon-trash"></span>
          Cancelar envío
        </a>
      </li>
    </ul>
    <p class="c-hsm-item__message">
      Hola <span>&#123;&#123;1&#125;&#125;</span> bienvenido(a) a <span>&#123;&#123;2&#125;&#125;</span>, junto con saludar queremos invitarte a participar de <span>&#123;&#123;3&#125;&#125;</span>, y que nos des tú opinión en el siguiente link <span>&#123;&#123;4&#125;&#125;</span>
      <br>
      Saludos y desde ya muchas gracias <span>&#123;&#123;1&#125;&#125;</span>
    </p>
    <div class="c-hsm-item__footer">
      <span class="c-hsm-item__pill">
        245 contactos
      </span>
      <span class="c-hsm-item__release-date">
        a realizar el 10 Feb 10:00
      </span>
    </div>
  </li>

  <li class="c-hsm-item">
    <div class="c-dropup__trigger">
      <span class="icon-menu-options"></span>
    </div>
    <ul class="c-dropup">
      <li class="c-dropup__item">
        <a href="#">
          <span class="icon-edit"></span>
          Editar mensaje
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          <span class="icon-clock-add"></span>
          Reprogramar envío
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          <span class="icon-trash"></span>
          Cancelar envío
        </a>
      </li>
    </ul>
    <p class="c-hsm-item__message">
      Hola <span>&#123;&#123;1&#125;&#125;</span> bienvenido(a) a <span>&#123;&#123;2&#125;&#125;</span>, junto con saludar queremos invitarte a participar de <span>&#123;&#123;3&#125;&#125;</span>, y que nos des tú opinión en el siguiente link <span>&#123;&#123;4&#125;&#125;</span>
      <br>
      Saludos y desde ya muchas gracias <span>&#123;&#123;1&#125;&#125;</span>
    </p>
    <div class="c-hsm-item__footer">
      <span class="c-hsm-item__pill">
        245 contactos
      </span>
      <span class="c-hsm-item__release-date">
        <div class="c-dropup__trigger">
          <span class="icon-message-not-sent"></span>
        </div>
        <ul class="c-dropup">
          <li class="c-dropup__item">
            <a href="#">
              <span class="icon-recharge"></span>
              Recargar saldo
            </a>
          </li>
        </ul>
        Saldo insuficiente para realizar envío
      </span>
    </div>
  </li>
</ul>

.c-list--campaigns

scss 
.c-list--campaigns {
  li {
    align-items: center;
    display: flex;
    min-height: 28px;

    .c-select {
      background-position: calc(100% - 10px) 12px, calc(100% - 5px) 12px;
      color: use-color('grey', light);
      font-size: 11px;
      font-weight: 500;
      margin: 0 0 0 8px;
      padding: 2px 20px 2px 4px;
      width: 170px;
    }
  }
}

Depende de la clase base .c-list y la clase modificadora .c-list--campaigns ajusta los estilos necesarios para este componente.

Example

html 
<ul class="c-list c-list--campaigns">
  <li>
    <div class="c-switch-container">
      <input id="switcha" type="checkbox" class="c-switch c-switch--small">
      <label for="switcha"></label>
      <label class="c-switch__label">
        #HablaConmigo
      </label>
    </div>

    <select class="c-select">
      <option id="0">
        Selecciona el canal
      </option>
      <option id="1">Whatsapp</option>
      <option id="2">Facebook</option>
    </select>
  </li>

  <li>
    <div class="c-switch-container">
      <input id="switchb" type="checkbox" class="c-switch c-switch--small">
      <label for="switchb"></label>
      <label class="c-switch__label">
        #Campaña2
      </label>
    </div>
  </li>
  
  <li>
    <div class="c-switch-container">
      <input id="switchc" type="checkbox" class="c-switch c-switch--small">
      <label for="switchc"></label>
      <label class="c-switch__label">
        #Campaña3
      </label>
    </div>
  </li>
  
  <li> 
    <div class="c-switch-container">
      <input id="switchd" type="checkbox" class="c-switch c-switch--small">
      <label for="switchd"></label>
      <label class="c-switch__label">
        #Campaña4
      </label>
    </div>
  </li>
</ul>

Requires

@function use-color()

.c-list--contacts

scss 
.c-list {
  @include modifier('contacts') {
    max-height: 130px;
    min-width: 215px;
    overflow: scroll;
  }

  @include element('contact-item') {
    cursor: pointer;
    display: flex;
    height: 21px;
    justify-content: space-between;
    padding: 2px 12px 2px 4px;
    
    span {
      @include use-font('caption');
      color: use-color('base', 'black');
    }

    &.selected {
      background-color: use-color('secondary', 'light-alt');
    }
  }
}

Depende de la clase base .c-list y la clase modificadora .c-list--contacts ajusta los estilos necesarios para este componente.

Example

html 
<ul class="c-list c-list--contacts">
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>2530</strong></span>
  </li>
  <li class="c-list__contact-item selected">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>2530</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>30</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>530</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>5</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>53</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>25</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>2530</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>230</strong></span>
  </li>
  <li class="c-list__contact-item">
    <span>Lista de navidad 2019gb</span>
    <span>cont. <strong>250</strong></span>
  </li>
</ul>

Requires

@function use-color()

.c-list--resume

scss 
.c-list--resume {
  padding-left: 4px;

  li {
    @include use-font('caption', 'bold');
    align-items: center;
    color: use-color('base', 'black');
    display: flex;

    span {
      color: use-color('grey', light);
      display: flex;
      font-weight: 400;
      margin-left: 8px;
      text-transform: uppercase;
    }

    img {
      margin-right: 4px;
      width: 17px;
    }

    &::before {
      color: use-color('grey', 'light-alt');
      content: '\e90c';
      font-family: 'icomoon';
      font-size: 14px;
      margin-right: 8px;
      position: relative;
      top: 1px;
      vertical-align: middle;
    }
  }
}

Depende de la clase base .c-list y la clase modificadora .c-list--resume ajusta los estilos necesarios para este componente.

Example

html 
<ul class="c-list c-list--resume">
  <li>Canal (es) : <span>WHATSAPP</span></li>
  <li>Cantidad Destinatarios : <span>TODOS</span></li>
  <li>Campaña : <span>#HABLACONMIGO</span></li>
  <li>Fecha / Hora : <span>01 NOVIEMBRE A las 10:00 AM</span></li>
</ul>

Requires

@function use-color()

.c-list--status

scss 
.c-list {
  @include modifier('status') {
    padding-left: 4px;
  }

  @include element('status-item') {
    @include use-font('caption', 'bold');
    align-items: center;
    color: use-color('base', 'black');
    display: flex;
    padding-bottom: 16px;
    position: relative;

    span {
      color: use-color('grey', light);
      display: flex;
      font-weight: 400;
      margin-left: 8px;
      text-transform: uppercase;
    }

    img {
      margin-right: 4px;
      width: 17px;
    }

    &::before {
      color: use-color('grey', 'light-alt');
      content: '\e90c';
      font-family: 'icomoon';
      font-size: 17px;
      margin-right: 8px;
      position: relative;
      top: 1px;
      vertical-align: middle;
    }

    &::after {
      border-bottom: 0;
      border-color: use-color('grey', 'light-alt');
      border-right: 0;
      border-style: dotted;
      border-top: 0;
      content: '';
      height: 14px;
      left: 7px;
      position: absolute;
      top: 21px;
      width: 4px;
    }

    &.complete {
      &::before {
        color: use-color('event', 'success');
      }

      &::after {
        border-color: use-color('event', success);
      }
    }

    &:last-child() {
      &::after {
        display: none;
      }
    }
  }
}

Lista de estados de avance de los pasos para envío HSM.

Example

html 
<ul class="c-list c-list--status">
  <li class="c-list__status-item complete">Campaña : <span>#HABLACONMIGO</span></li>
  <li class="c-list__status-item complete">
    Canal de envío : 
    <span>
      <img src="https://cdn.chattigo.com/assets/img/channels/whatsapp-channel.svg" alt="whatsapp-channel">
      [+569 97548990]
    </span>
  </li>
  <li class="c-list__status-item">Destinatarios : <span>255 contactos</span></li>
  <li class="c-list__status-item">¡Proceso terminado con éxito!</li>
</ul>

Requires

@function use-color()

.c-list--radios

scss 
.c-list--radios {
  padding-left: 4px;

  .c-radio + label {
    @include use-font('caption');
    // line-height: inherit;
    margin: 0 0 8px;
    text-transform: lowercase;

    &::first-letter {
      text-transform: uppercase;
    }
  }
}

Depende de la clase base .c-list y la clase modificadora .c-list--radios ajusta los estilos necesarios para este componente.

Example

html 
<ul class="c-list c-list--radios">
  <li>
    <input name="option" type="radio" class="c-radio" id="first">
    <label for="first">Quiero atender yo</label>
    <p class="c-radio__info-message">
      *opción valida solo con estado ONLINE
    </p>
  </li>
  <li>
    <input name="option" type="radio" class="c-radio" id="second">
    <label for="second">Quiero que atienda la plataforma</label>
  </li>
  <li>
    <input name="option" type="radio" class="c-radio" id="third">
    <label for="third">Quiero que atienda el Bot</label>
  </li>
</ul>

Requires

@function use-color()

.c-list--clients

scss 
.c-list {
  @include modifier('clients') {
    display: flex;
    flex-wrap: wrap;
    height: 170px;
    justify-content: space-between;
    overflow: scroll;
    padding: 12px 12px 0;
  }
}

Este modificador de lista esta creado para listar las Client Card

Example

html 
<ul class="c-list c-list--clients">
  <li class="c-client-card">
    <div class="c-client-card__status">
      <span class="icon-profile"></span>
    </div>
  
    <div class="c-client-card__content">
      <div class="c-client-card__title">
        oliver hidalgo
      </div>
  
      <p class="c-client-card__data">
        12264052-3
      </p>
      <p class="c-client-card__data">
        Id: <span>CHATTIGO</span>
      </p>          
    </div>
  </li>
  <li class="c-client-card">
    <div class="c-client-card__status">
      <span class="icon-profile"></span>
    </div>

    <div class="c-client-card__content">
      <div class="c-client-card__title">
        Cristian fuentealba
      </div>

      <p class="c-client-card__data">
        12264052-3
      </p>

      <p class="c-client-card__data">
        Id: <span>CHATTIGO</span>
      </p>          
    </div>
  </li>
  
  <li class="c-client-card c-client-card--selected">
    <div class="c-client-card__status">
      <span class="icon-profile-check"></span>
    </div>
    
    <div class="c-client-card__content">

      <div class="c-client-card__title">
        alex plaza
      </div>

      <p class="c-client-card__data">
        12264052-3
      </p>
      <p class="c-client-card__data">
        Id: <span>CHATTIGO</span>
      </p>          
    </div>
  </li>
  <li class="c-client-card  c-client-card--selected">
    <div class="c-client-card__status">
      <span class="icon-profile-check"></span>
    </div>
  
    <div class="c-client-card__content">
      <div class="c-client-card__title">
        oliver hidalgo
      </div>
  
      <p class="c-client-card__data">
        12264052-3
      </p>
      <p class="c-client-card__data">
        Id: <span>CHATTIGO</span>
      </p>          
    </div>
  </li>
  
  <li class="c-client-card c-client-card--selected">  
    <div class="c-client-card__status">
      <span class="icon-profile"></span>
    </div>
  
    <div class="c-client-card__content">
      <div class="c-client-card__title">
        Cristian fuentealba
      </div>
  
      <p class="c-client-card__data">
        12264052-3
      </p>
  
      <p class="c-client-card__data">
        Id: <span>CHATTIGO</span>
      </p>          
    </div>
  </li>
  
  <li class="c-client-card">
    <div class="c-client-card__status">
      <span class="icon-profile-check"></span>
    </div>
    
    <div class="c-client-card__content">
  
      <div class="c-client-card__title">
        alex plaza
      </div>
  
      <p class="c-client-card__data">
        12264052-3
      </p>
      <p class="c-client-card__data">
        Id: <span>CHATTIGO</span>
      </p>          
    </div>
  </li>
</ul>

.c-list--dynamic-fields

scss 
.c-list {
  @include modifier('dynamic-fields') {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0 0 12px;
    text-align: center;
  }

  @include element('dynamic-field') {
    @include use-font('caption');
    background-color: use-color('grey', 'light-i');
    border: solid 1px use-color('grey');
    border-radius: 4px;
    margin: 0 8px 8px 0;
    text-transform: lowercase;
    width: 130px;  
  }
}

Lista con los campos dinamicos seleccionados para la carga de archivos.

Example

html 
<ul class="c-list c-list--dynamic-fields">
  <li class="c-list__dynamic-field">nombre</li>
  <li class="c-list__dynamic-field">identificador</li>
  <li class="c-list__dynamic-field">precio</li>
  <li class="c-list__dynamic-field">factura nº</li>
</ul>

Requires

@function use-color()

@mixin use-font()

.l-selected-list

scss 
.l-selected-list {
  display: flex;
  flex-direction: column;
  width: 100%;

  @include element('actions') {
    @include use-font('caption');
    align-content: center;
    color: use-color('grey', 'light');
    display: flex;
    justify-content: flex-end;
    margin: 8px 0;
    width: 100%;
  }
}

Layout creada para contener la lista de clientes de una lista de Outbound.

Example

html 
<section class="l-selected-list">
  <div class="l-selected-list__actions">
    Seleccionar todos
    <input name="option" type="checkbox" class="c-checkbox" id="first">
    <label for="first"></label>
  </div>
  <!-- aqui va el componente `<ul class="c-list c-list--clients">` -->
</section>

.c-upload-section

scss 
.c-upload {
  @include element('info') {
    @include use-font('caption');
    color: use-color('grey', 'light');
    margin: auto;
    max-width: 690px;

    a {
      @include use-font('caption');
    }
  }

  &-section {
    display: flex;
    flex-direction: column;
  }
}

Este componente esta hecho para funcionar tanto para la carga de un nuevo archivo como para el despliegue del archivo cargado.

En ambos casos existe el uso del elemento:

  <p class="c-upload__info">
    Envíe mensajes a múltiples contactos cargando un archivo .csv, .xlsx o .txt de hasta 15 MB con los teléfonos del contacto e información adicional para los campos dinámicos, o descarga la <a class="c-action-link" href="./outbound--step-2-upload-2.html">plantilla.xlxs</a>.
  </p>

Carga de Archivo

  <a class="c-upload-area c-upload-area--file" href="./outbound--step-2-upload-2.html">
    <span class="icon-upload-cloud"></span>
  
    <div class="c-upload-area__background">
      <div class="c-upload-area__message">
        <strong>Arrastra y suelta tú archivo</strong>
      </div>
    </div>
  </a>

Archivo Cargado

    <div class="c-upload-area">
      <label class="c-upload-area__title">
        Archivo seleccionado
      </label>
  
      <div class="c-upload-area__file">
        Nombre_archivo.xlsx
        <a href="./outbound--step-2-upload.html">
          <span class="icon-close"></span>
        </a>
      </div>
  
      <div class="c-upload-area__background">
        <label class="c-upload-area__title">
          Campos Dinámicos
        </label>
  
        <ul class="c-list c-list--dynamic-fields">
          <li class="c-list__dynamic-field">nombre</li>
          <li class="c-list__dynamic-field">identificador</li>
          <li class="c-list__dynamic-field">precio</li>
          <li class="c-list__dynamic-field">factura nº</li>
        </ul>
      </div>
    </div>

Examples

html upload file 
<section class="c-upload-section">
  <p class="c-upload__info">
    Envíe mensajes a múltiples contactos cargando un archivo .csv, .xlsx o .txt de hasta 15 MB con los teléfonos del contacto e información adicional para los campos dinámicos, o descarga la <a class="c-action-link" href="./outbound--step-2-upload-2.html">plantilla.xlxs</a>.
  </p>

  <a class="c-upload-area c-upload-area--file" href="./outbound--step-2-upload-2.html">
    <span class="icon-upload-cloud"></span>

    <div class="c-upload-area__background">
      <div class="c-upload-area__message">
        <strong>Arrastra y suelta tú archivo</strong>
      </div>
    </div>
  </a>
</section>
html file uploaded 
<section class="c-upload-section">
  <p class="c-upload__info">
    Envíe mensajes a múltiples contactos cargando un archivo .csv, .xlsx o .txt de hasta 15 MB con los teléfonos del contacto e información adicional para los campos dinámicos.
  </p>

  <div class="c-upload-area">
    <label class="c-upload-area__title">
      Archivo seleccionado
    </label>

    <div class="c-upload-area__file">
      Nombre_archivo.xlsx
      <a href="./outbound--step-2-upload.html">
        <span class="icon-close"></span>
      </a>
    </div>

    <div class="c-upload-area__background">
      <label class="c-upload-area__title">
        Campos Dinámicos
      </label>

      <ul class="c-list c-list--dynamic-fields">
        <li class="c-list__dynamic-field">nombre</li>
        <li class="c-list__dynamic-field">identificador</li>
        <li class="c-list__dynamic-field">precio</li>
        <li class="c-list__dynamic-field">factura nº</li>
      </ul>
    </div>
  </div>
</section>

Requires

@function use-color()

@mixin use-font()