.app-c-list-status

scss
.app-c-list-status {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  width: 100%;

  @include element('item') {
    @include use-font('body', 'regular');
    align-items: center;
    background-color: use-color(base, true-white);
    border-bottom: solid 1px use-color('grey', light-i);
    box-sizing: border-box;
    color: use-color('grey');
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    width: 100%;
  }

  @include element('left-side') {
    align-items: baseline;
    display: inline-flex;
    width: 60%;
  }
  
  @include element('right-side') {
    align-items: center;
    display: inline-flex;
  }
  
  @include element('label-time') {
    @include use-font('body', 'regular');
    color: use-color('grey', 'light');
  }

  @include element('switch') {
    margin-left: 16px;
    width: 50px;

    // switch override
    .c-switch + label {
      height: 30px;
      padding: 0;

      &::after {
        height: 26px;
        left: 2px;
        top: 2px;
        width: 26px;
      }
    }

    .c-switch:checked + label::after {
      left: 90%;
      margin-left: -23px;
    }
  }

  @include media-breakpoint-up(tablet) {
    margin: 0 auto 25px;
    width: 620px;
  }

  // icon override
  [class^='icon-'],
  [class*=' icon-'] {
    color: use-color(event, warning);
    font-size: 21px;
    padding-right: 8px;
    position: relative;
    top: 4px;

    &.active {
      color: use-color(event, success);
    }
  }
}

Lista de estados para el perfil de la app

Por defecto los iconos son color del event warning, para usar el color event success hay que agregar la clase .active al icono.

Example

html
<ul class="app-c-list-status">
  <li class="app-c-list-status__item">
    <div class="app-c-list-status__left-side">
      <span class="icon-time active"></span>
      Activo
    </div>

    <div class="app-c-list-status__right-side">
      <span class="app-c-list-status__label-time"></span>

      <div class="app-c-list-status__switch">
        <input id="switche" type="checkbox" class="c-switch" checked>
        <label for="switche"></label>
      </div>
    </div>
  </li>
  
  <li class="app-c-list-status__item">
    <div class="app-c-list-status__left-side">
      <span class="icon-time-out"></span> Almuerzo
    </div>

    <div class="app-c-list-status__right-side">
      <span class="app-c-list-status__label-time">
        60 Min
      </span>
    
      <div class="app-c-list-status__switch">
        <input id="switchefood" type="checkbox" class="c-switch">
        <label for="switchefood"></label>
      </div>
    </div>
  </li>
</ul>

Requires

@mixin use-font()

@function use-color()

.app-c-list-users

scss
.app-c-list-users {
  list-style: none;
  margin: 0;
  padding: 0 24px;

  @include element('label') {
    @include use-font('body', 'bold');
    display: inline-block;
    margin-bottom: 12px;
    padding: 0 24px;
    width: 100%;
  }

  @include element('item') {
    border: solid 1px use-color('grey', light-alt);
    border-radius: 8px;
    display: flex;
    margin-bottom: 8px;
    padding: 8px;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('grey', light-alt);
      font-size: 22px;
      margin-left: auto;
      margin-right: 8px;
      margin-top: 5px;
    }
  }

  @include element('image') {
    border-radius: 50%;
    height: 32px;
    margin-right: 8px;
    width: 32px;
  }

  @include element('data') {
    display: flex;
    flex-direction: column;
    @include modifier('name') {
      @include use-font('caption', 'bold');
      line-height: 13px;
    }
    
    @include modifier('email') {
      @include use-font('caption', 'regular');
    }
  }
}

Lista de usuarios para la recuperación de clave.

Example

html
<label class="app-c-list-users__label">
  Los supervisores asociados a tu usuario son:
</label>
<ul class="app-c-list-users">
  <li class="app-c-list-users__item">
    <img class="app-c-list-users__image" src="https://cdn.chattigo.com/assets/img/profiles/10_dummy.png" />
    
    <div class="app-c-list-users__data">
      <span class="app-c-list-users__data--name">Supervisor Amable</span>
      <span class="app-c-list-users__data--email">supervisoramable@tuempresa.cl</span>
    </div>

    <span class="icon-arrow-left"></span>
  </li>
  
  <li class="app-c-list-users__item">
    <img class="app-c-list-users__image" src="https://cdn.chattigo.com/assets/img/profiles/10_dummy.png" />

    <div class="app-c-list-users__data">
      <span class="app-c-list-users__data--name">Super Visor</span>
      <span class="app-c-list-users__data--email">supervisor@tuempresa.cl</span>
    </div>

    <span class="icon-arrow-left"></span>
  </li>

  <li class="app-c-list-users__item">
    <img class="app-c-list-users__image" src="https://cdn.chattigo.com/assets/img/profiles/10_dummy.png" />

    <div class="app-c-list-users__data">
      <span class="app-c-list-users__data--name">Super Amable</span>
      <span class="app-c-list-users__data--email">superamable@tuempresa.cl</span>
    </div>

    <span class="icon-arrow-left"></span>
  </li>
</ul>

Requires

@mixin use-font()

@function use-color()

.app-c-list-messages-status

scss
.app-c-list-messages-status {
  display: flex;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;

  @include element('item') {
    @include use-font('caption', 'regular');
    background-color: use-color(base, true-white);
    border: solid 1px use-color('grey', light);
    border-radius: 12px;
    line-height: 18px;
    padding: 2px 12px 2px 30px;
    position: relative;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    
    &:first-child {
      right: 0;
    }

    &:nth-last-child(2) {
      padding-right: 30px;
    }

    &.new {
      &::before {
        content: '\E00B'; //icon-message-new
      }
    }

    &.on-time {
      background-color: lighten(use-color(event, success), 45%);
      border: solid 1px use-color(event, success);

      &::before {
        color: use-color(event, success);
      }
    }
    
    &.on-limit {
      background-color: lighten(use-color(event, warning), 46%);
      border: solid 1px use-color(event, warning);

      &::before {
        color: use-color(event, warning);
      }
    }
    
    &.on-exceed {
      background-color: lighten(use-color(event, error), 50%);
      border: solid 1px use-color(event, error);

      &::before {
        color: use-color(event, error);
      }
    }

    &.on-whisper {
      @extend %base-icon-messages-status;

      &::before {
        content: '\E011'; //icon-whispering
      }
    }

    &.on-intervention {
      @extend %base-icon-messages-status;

      &::before {
        content: '\E007'; //icon-intervention
      }
    }
    
    &.on-transfer {
      @extend %base-icon-messages-status;

      &::before {
        content: '\E002'; //icon-chat-transfer
      }
    }

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

    &::before {
      color: use-color(primary);
      content: '\E006'; //icon-clock
      font-family: 'chattigoicons';
      font-size: 15px;
      left: 10px;
      position: absolute;
      top: 3px;
    }
  }
}

Lista de estados de los mensajes: tiempo de respuesta, susurros e intervención.

Tiempos de respuesta

Según el tipo de estado vasta con agregar la clase del estado a la clase del item (app-c-list-messages-status__item) y esta agregara el icono correspondiente:

  • Excedido: .on-exceed
  • Al limite: .on-limit
  • A tiempo: .on-time
  • Nuevo chat: .new

Susurros, Intervenciones y Transferencias

Para los susurros, intervenciones y transferencias el método es el mismo, pero hay que usar las siguientes clases:

  • Intervención: .on-intervention
  • Susurro: .on-whisper
  • Transferencia: .on-transfer

Examples

html Excedido y Susurro
<ul class="app-c-list-messages-status">
  <li class="app-c-list-messages-status__item on-exceed">
    Excedido
  </li>
  <li class="app-c-list-messages-status__item on-whisper">
    Susurro de Oliver Hidalgo
  </li>
</ul>
html Al Limite e Intervención
<ul class="app-c-list-messages-status">
  <li class="app-c-list-messages-status__item on-limit">
    Al limite
  </li>
  <li class="app-c-list-messages-status__item on-intervention">
    Intervención de Angela
  </li>
</ul>
html Al Limite y Transferido
<ul class="app-c-list-messages-status">
  <li class="app-c-list-messages-status__item on-limit">
    Al limite
  </li>
  <li class="app-c-list-messages-status__item on-transfer">
    Transferido por Cristian
  </li>
</ul>
html A Tiempo
<ul class="app-c-list-messages-status">
  <li class="app-c-list-messages-status__item on-time">
    A tiempo
  </li>
</ul>
html Nuevo
<ul class="app-c-list-messages-status">
  <li class="app-c-list-messages-status__item new">
    Nuevo chat
  </li>
</ul>

Requires

@mixin use-font()

@function use-color()

.app-c-list-channels

scss
.app-c-list-channels {
  display: flex;
  list-style: none;
  margin: 4px 0;
  padding: 0;
  width: 100%;
  
  @include modifier(alt-wicon) {
    flex-flow: row wrap;
  }

  @include element(item) {
    @include use-font('caption', 'regular');
    background-color: transparentize(use-color(base, true-white), 0.9);
    border: solid 1px transparentize(use-color(base, true-white), 0.6);
    border-radius: 4px;
    color: use-color(base , true-white);
    cursor: default;
    display: inline-block;
    height: 18px;
    margin-right: 4px;
    min-width: fit-content;
    // line-height: 14px;
    padding: 0 4px;
    text-transform: lowercase;

    @include if-block-has-modifier(app-c-list-channels, alt-wicon) {
      align-items: center;
      background-color: transparentize(use-color('grey'), 0.98);
      border: solid 1px transparentize(use-color('grey'), 0.6);
      color: use-color('grey');
      display: block;
      margin-bottom: 4px;
      max-width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-transform: capitalize;
      white-space: nowrap;

      @include media-breakpoint-up('webchat') {
        display: flex;
      }
    }

    &:nth-last-child(1) {
      min-width: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: auto;
    }

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

Lista para el header del chat que lista tipo de canal y descripción.

En algunos casos el tipo de canal puede tener el background color de la red social correspondiente.

En esos casos usar las clases helpers descritas en Social Colors.

También se puede usar en conjunto a la clase modificadora .app-c-list-channels--alt-wicon los helpers .u-tag-wicon.

Examples

html
<div style="background-color: grey; padding: 5px;">

  <ul class="app-c-list-channels">
    <li class="app-c-list-channels__item">Whatsapp</li>
    <li class="app-c-list-channels__item">Channel description</li>
  </ul>

</div>
html ejemplo junto a clase de ayuda .u-tag-wicon
<div style="background-color: #e0e0e0; padding: 5px;">

  <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
    <li class="app-c-list-channels__item u-tag-wicon--campaign">Campaña</li>
    <li class="app-c-list-channels__item u-tag-wicon--group">Grupo</li>
    <li class="app-c-list-channels__item u-tag-wicon--location">Ubicación</li>
  </ul>

</div>

Requires

@mixin use-font()

@function use-color()

.app-c-list-end-status

scss
.app-c-list-end-status {
  border-top: solid 1px use-color('grey', light-i);
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
  
  @include element('item') {
    @include use-font('body', 'regular');
    background-color: use-color(base, true-white);
    border-bottom: solid 1px use-color('grey', light-i);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    min-height: 56px;
    padding: 16px 8px 16px 16px;
    width: 100%;

    [class^='icon-'],
    [class*=' icon-'] {
      align-self: center;
      color: use-color('grey', light-alt);
      font-size: 16px;
      margin-left: auto;
      margin-top: 5px;
    }
  }
}

Este componente se usa para listar las opciones de tipificación para finalizar un chat, también se usa esta lista para listar los resultados en los casos de busqueda(de tipificaciones).

Nota: Para destacar las palabras buscadas usar el tag <mark>.

Examples

html
<ul class="app-c-list-end-status">
  <li class="app-c-list-end-status__item">
    <span>
      Que lo contacten de Adminsión
    </span>

    <span class="icon-arrow-left"></span>
  </li>
  
  <li class="app-c-list-end-status__item">
    <span>
      Que lo contacte otro representante #HC 
    </span>

    <span class="icon-arrow-left"></span>
  </li>

  <li class="app-c-list-end-status__item">
    <div>
      Ya resolví sus dudas
    </div>
  </li>
</ul>
html resultados de busqueda
<ul class="app-c-list-end-status">
  <li class="app-c-list-end-status__item">
    <span>
      Que lo contacten de <mark>Admisión</mark>
    </span>

    <span class="icon-arrow-left"></span>
  </li>
  
  <li class="app-c-list-end-status__item">
    <span>
      Opción level one > Opción level two > <mark>Admisión</mark> 2020
    </span>

    <span class="icon-arrow-left"></span>
  </li>

  <li class="app-c-list-end-status__item">
    <span>
      Una opción cualquiera > Opción de nivel 2 > Opción nivel 3 > Opción Cuatro > Matricula de <mark>Admisión<mark>
    </span>

    <span class="icon-arrow-left"></span>
  </li>
</ul>

Requires

@mixin use-font()

@mixin element()

@function use-color()

.app-c-list-typification

scss
.app-c-list-typification {
  background-color: use-color('grey', light-iii);
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;

  @include modifier(modal) {
    margin-bottom: 24px;
  }

  @include element('status') {
    background: use-color('grey', light-alt);
    border: 3px solid use-color(base, true-white);
    border-radius: 50%;
    box-shadow: 0 1px 4px 0 use-color('grey', light-alt);
    display: inline-block;
    height: 15px;
    margin: 0 12px;
    width: 15px;
    z-index: use-layer('base');
    // z-index: 1;

    .active & {
      background: use-color('secondary');
      height: 18px;
      left: -1px;
      margin: 0 12px 0 10px;
      width: 18px;
    }
  }

  @include element('item') {
    @include use-font('body', 'regular');
    color: use-color('grey', light);
    cursor: pointer;
    display: flex;
    padding: 12px 12px 12px 0;
    position: relative;
    text-transform: capitalize;

    @include if-block-has-modifier('app-c-list-typification', 'modal') {
      &:last-child() {
        &::before {
          display: none;
        }
      }
    }

    &::before {
      border-right: solid 1px use-color('grey', light-i);
      content: '';
      height: 36px;
      left: 22px;
      position: absolute;
      top: 20px;
      z-index: use-layer('background');
      // z-index: 0;
    }

    &.active {
      align-items: center;
      color: use-color('secondary');
      font-weight: bold;
    }
  }
}

Esta lista contiene las opciones seleccionadas de tipificación.

Para destacar la ultima selección usar la clase estado .active en el item correspondiente.

Para la versión que se muestra en modal usar la clase modificadora .app-c-list-typification--modal.

Examples

html
<ul class="app-c-list-typification">
  <li class="app-c-list-typification__item">
    <span class="app-c-list-typification__status"></span>
    opción level one
  </li>
  <li class="app-c-list-typification__item">
    <span class="app-c-list-typification__status"></span>
    opción level two
  </li>
  <li class="app-c-list-typification__item active">
    <span class="app-c-list-typification__status"></span>
    admisión 2020
  </li>
</ul>
html para modal
<ul class="app-c-list-typification app-c-list-typification--modal">
  <li class="app-c-list-typification__item">
    <span class="app-c-list-typification__status"></span>
    opción level one
  </li>
  <li class="app-c-list-typification__item">
    <span class="app-c-list-typification__status"></span>
    opción level two
  </li>
  <li class="app-c-list-typification__item active">
    <span class="app-c-list-typification__status"></span>
    admisión 2020
  </li>
</ul>

Requires

@mixin use-font()

@mixin element()

@function use-color()