.c-crm-drawer

scss
.c-crm-drawer {
  @include element('icon-wrapper') {
    margin-right: 8px;
    max-height: 17px;
  }
}

Componente creado para informar información de CRM en forma de menu acordion. Para abrir el drawer hay que hacer click en los íconos de usuarios de las cards de chats en espera o al lado del nombre del cliente.

El componente incluye los modificadores:

  • c-crm-accordion-menu__pane__btn–icon-wrapper–open para dar vuelta el ícono de flecha indicando está abierto.
  • c-crm-accordion-menu__pane__content–open para abrir en contenedor del tab pane deseado.

Example

html
<div class="c-overlay-options c-overlay-options--open">
  <div class="c-overlay-options__header c-overlay-options__header--crm">
    <label class="c-overlay-options__header--label c-overlay-options__header--label__flex">
      <a class="c-crm-drawer__icon-wrapper" onclick="toggleRightMenuA()">
        <span class="icon-close"></span>
      </a>
      <p>crm</p>
    </label>
  </div>
  
  <div class="c-overlay-options__content c-overlay-options__content--with-side-padding u-scrolling-content u-scrolling-content--full-height">
    <div class="c-crm-accordion-menu">
      <div class="c-crm-accordion-menu__pane">
        
        <div class="c-crm-accordion-menu__pane__btn">
          <div class="c-crm-accodion-menu__pane__btn--text-wrapper">
            <p class="c-crm-accordion-menu__text">Datos del contacto</p>
          </div>
          <div class="c-crm-accordion-menu__pane__btn--icon-wrapper c-crm-accordion-menu__pane__btn--icon-wrapper--open">
            <span class="icon-arrow-down"></span>
          </div>
        </div>
        <div class="c-crm-accordion-menu__pane__content c-crm-accordion-menu__pane__content--open">
          <ul class="c-crm-accordion-menu__pane__content__list">
            <li class="c-crm-accordion-menu__pane__content__list--item">
              <div class="c-crm-accordion-menu__pane__content__list--item--left">Identificador</div>
              <div class="c-crm-accordion-menu__pane__content__list--item--right">87378261007</div>
            </li>
            <li class="c-crm-accordion-menu__pane__content__list--item">
              <div class="c-crm-accordion-menu__pane__content__list--item--left">Nombre</div>
              <div class="c-crm-accordion-menu__pane__content__list--item--right">Katalin Piroska</div>
            </li>
            <li class="c-crm-accordion-menu__pane__content__list--item">
              <div class="c-crm-accordion-menu__pane__content__list--item--left">Apellido</div>
              <div class="c-crm-accordion-menu__pane__content__list--item--right">Szalay Barahona</div>
            </li>
            <li class="c-crm-accordion-menu__pane__content__list--item">
              <div class="c-crm-accordion-menu__pane__content__list--item--left">Género</div>
              <div class="c-crm-accordion-menu__pane__content__list--item--right">Mujer</div>
            </li>
            <li class="c-crm-accordion-menu__pane__content__list--item">
              <div class="c-crm-accordion-menu__pane__content__list--item--left">ID / Teléfono</div>
              <div class="c-crm-accordion-menu__pane__content__list--item--right">+569 84714029</div>
            </li>
            <li class="c-crm-accordion-menu__pane__content__list--item">
              <div class="c-crm-accordion-menu__pane__content__list--item--left">Email</div>
              <div class="c-crm-accordion-menu__pane__content__list--item--right">kszalay@chattigo.com kszalay@chattigo.com kszalay@chattigo.com</div>
            </li>
          </ul>
        </div>

      </div>
      <div class="c-crm-accordion-menu__pane">
        
        <div class="c-crm-accordion-menu__pane__btn">
          <div class="c-crm-accodion-menu__pane__btn--text-wrapper">
            <p class="c-crm-accordion-menu__text">Canal(es) asociado(s)</p>
          </div>
          <div class="c-crm-accordion-menu__pane__btn--icon-wrapper">
            <span class="icon-arrow-down"></span>
          </div>
        </div>
        <div class="c-crm-accordion-menu__pane__content">
          <ul class="c-crm-accordion-menu__pane__content__list">
            <li class="c-crm-accordion-menu__pane__content__list--item c-crm-accordion-menu__pane__content__list--item--align-center">
              <div class="c-crm-accordion-menu__pane__content__list--item--contact">
                <div class="c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper">
                  <img src="https://cdn.chattigo.com/assets/img/channels/whatsapp-channel.svg" alt="Channel image">
                </div>
                <p>5647282923</p>
              </div>
              <div class="c-crm-accordion-menu__pane__content__list--item--contact">
                <div class="c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper--chattigo-color">
                  <span class="icon-message"></span>
                </div>
                <div class="c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper--grey-color">
                  <span class="icon-close"></span>
                </div>
              </div>
            </li>
            <li class="c-crm-accordion-menu__pane__content__list--item c-crm-accordion-menu__pane__content__list--item--align-center">
              <div class="c-crm-accordion-menu__pane__content__list--item--contact">
                <div class="c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper">
                  <img src="https://cdn.chattigo.com/assets/img/channels/facebook-channel.svg" alt="Channel image">
                </div>
                <p>5647282923</p>
              </div>
              <div class="c-crm-accordion-menu__pane__content__list--item--contact">
                <div class="c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper--chattigo-color">
                  <span class="icon-message"></span>
                </div>
                <div class="c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper c-crm-accordion-menu__pane__content__list--item--contact__icon-wrapper--grey-color">
                  <span class="icon-close"></span>
                </div>
              </div>
            </li>
          </ul>
        </div>

      </div>
      <div class="c-crm-accordion-menu__pane">
        
        <div class="c-crm-accordion-menu__pane__btn">
          <div class="c-crm-accodion-menu__pane__btn--text-wrapper">
            <p class="c-crm-accordion-menu__text">Notas</p>
          </div>
          <div class="c-crm-accordion-menu__pane__btn--icon-wrapper">
            <span class="icon-arrow-down"></span>
          </div>
        </div>
        <div class="c-crm-accordion-menu__pane__content">
          <ul class="c-crm-accordion-menu__pane__content__list">
          </ul>
        </div>

      </div>
    </div>
  </div>
  
</div>
<script>
  const accordionPane = document.querySelectorAll('.c-crm-accordion-menu__pane')
  const accordionPaneContent = document.querySelectorAll('.c-crm-accordion-menu__pane__content')
  const accordionPaneIcon = document.querySelectorAll('.c-crm-accordion-menu__pane__btn--icon-wrapper')
  const accordionPaneBtn = document.querySelectorAll('.c-crm-accordion-menu__pane__btn')
  const openIconString = 'c-crm-accordion-menu__pane__btn--icon-wrapper--open'
  const openContentString = 'c-crm-accordion-menu__pane__content--open'
  
  for (let i = 0; i < accordionPaneBtn.length; i++) {
    accordionPaneBtn[i].addEventListener('click', () => {
        accordionPaneIcon[i].classList.toggle(openIconString)
        accordionPaneContent[i].classList.toggle(openContentString)
    })
  }
</script>

.c-section-card

scss
.c-section-card {
  @include use-font('subheading', 'light');
  background-color: use-color('base', true-white);
  border-radius: 8px;
  box-shadow: $box-shadow-card-lvl-2;
  height: fit-content;
  overflow: hidden;
  padding: 16px 8px;
  position: relative;
  width: auto;

  @include media-breakpoint-up('tablet') {
    padding: 16px 24px 4px;
  }

  @include element('header') {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    width: 100%;

    @include modifier('label') {
      &::first-letter {
        text-transform: uppercase;
      }
    }

    @include modifier('number') {
      align-items: center;
      display: flex;

      a {
        text-decoration: none;
      }

      [class^='icon-'],
      [class*=' icon-'] {
        color: use-color('grey', light);
        cursor: pointer;
        font-size: 20px;
        margin: 0 4px;
      }
    }

    @include modifier('action') {
      margin-left: 8px;

      .c-button {
        padding: 4px 12px;
      }
    }
  }

  @include element('content') {
    display: flex;
    flex-direction: column;
    width: 100%;

    @include modifier('x-scroll') {
      flex-direction: row;
      overflow: hidden;
      overflow-x: scroll;
    }

    @include modifier('y-scroll') {
      max-height: 460px;
      overflow: hidden;
      overflow-y: scroll;
    }

    @include modifier('typifications') {
      display: grid;
      grid-gap: 8px;
      grid-template-columns: repeat(3, 1fr);
    }

    @include modifier('grid-three-columns') {
      display: grid;
      grid-gap: 16px;
      grid-template-columns: 1fr;

      @include media-breakpoint-up('tablet') {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      @include media-breakpoint-up('tablet-landscape') {
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
      }

      @include media-breakpoint-up('cinema') {
        grid-gap: 24px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @include modifier('agent-grid') {
      display: grid;
      grid-gap: 8px;
      grid-template-columns: 1fr;

      @include media-breakpoint-between('tablet', 'medium') {
        grid-gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      @include media-breakpoint-up('cinema') {
        grid-gap: 24px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    // overrides
    .c-campaign-visibility {
      @include modifier('full-width') {
        margin: 8px 0;
      }
    }
  }

  // poll modifiers
  @include modifier('poll-small') {
    max-width: 100%;

    @include media-breakpoint-up(desktop) {
      max-width: 340px;
    }
  }

  @include modifier('poll-large') {
    max-width: 100%;

    @include media-breakpoint-up(desktop) {
      max-width: 360px;
    }
  }

  @include modifier('height-auto') {
    height: auto;
  }

  @include element('actions') {
    align-items: flex-end;
    display: flex;
    justify-content: flex-end;
    margin: 24px 0;
    width: 100%;

    // overrides
    .c-button {
      margin: 0 0 0 8px;
      width: 146px;

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

  @include modifier('bg-transparent') {
    background-color: transparent;
    box-shadow: none;
    padding: 18px 0 0;
  }

  @include element('auto-answer-time-indicator') {
    border: 1px solid use-color('secondary', 'base');
    border-radius: 16px;
    color: use-color('grey', 'light');
    display: inline-flex;
    font-family: 'Open Sans Regular';
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0.07px;
    line-height: 10px;
    padding: 4px;
    position: absolute;
    right: 8px;
    text-align: center;
    top: 8px;
    width: 19px;
  }

  // overrides
  .app-form--search,
  .c-indicator-group {
    margin-left: 4px;
    margin-right: 4px;
  }

  .app-c-section-title {
    padding-left: 4px;
  }
}

El componente c-section-card fue desarrollado para contener algunas de las secciones del dashboard.

Esta compuesto por los siguientes elementos:

  • c-section-card__header
  • c-section-card__content
  • c-section-card__actions

El header de la sección se puede componer por hasta 2 elementos, uno para el label que usa la clase modificadora c-section-card__header--label

  <div class="c-section-card__header">
    <label class="c-section-card__header--label">
      section label
    </label>
    *
    *
    *

y otro para indicar un número y/o en algunos casos tambien puede contener iconos

  <div class="c-section-card__header">
    *
    *
    *
    <div class="c-section-card__header--number">
      805
    </div>
  </div>

ejemplo con iconos:

  <div class="c-section-card__header">
    *
    *
    *
    <div class="c-section-card__header--number">
      <a href="#">
        <span class="icon-arrow-right"></span>
      </a>
      <a href="#">
        <span class="icon-arrow-left"></span>
      </a>
      805
    </div>
  </div>

La sección del contenido de la card consta con las clases modificadoras:

  • c-section-card__content--x-scroll
  • c-section-card__content--y-scroll.

para los casos en que el contenido es escroleable.

 <div class="c-section-card__content c-section-card__content--x-scroll">
 <div class="c-section-card__content c-section-card__content--y-scroll">

Y para los casos en que el contenido de una card sea menor al contenido de la siguiente card y se quiera mantener la proporción en los tamaños, existe la clase modificadora c-section-card--height-auto, para ser usada junto a la clase padre c-section-card.

 <div class="c-section-card c-section-card--height-auto">

También el contenido puede ser usado con la clase modificadora (c-section-card__content--typifications), solo para ser usado junto al componente .c-typification-card.

Example

html
<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-section-card">
    <div class="c-section-card__header">
      <label class="c-section-card__header--label">
        section label
      </label>
      <span class="c-section-card__header--number">
        805
      </span>
    </div>
  
    <div class="c-section-card__content">
      <!-- example content: components .c-tipyfication-card here -->
    </div>

    <div class="c-collapsible__action-container c-collapsible__action-container--back-next">  
      <a class="c-button c-button--secondary">
        Atras
      </a>
      
      <a class="c-button c-button--secondary" disabled>
        Siguiente
      </a>
    </div>
  </div>

</div>

.c-stats-card

scss
.c-stats-card {
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  height: fit-content;
  min-width: 220px;
  position: relative;

  @include element('label') {
    @include use-font('caption', bold);
    color: use-color('grey', light);
    display: inline-block;
    text-transform: uppercase;
    width: 100%;
  }

  @include element('main-number') {
    @include use-font('h2', 'bold');
    color: use-color('base', 'black');

    @include media-breakpoint-only(desktop) {
      @include use-font('h3', bold);
    }
  }

  @include element('number') {
    @include use-font('title', 'bold');
    color: use-color('base', 'black');
    line-height: 24px;

    @include media-breakpoint-only(desktop) {
      @include use-font('subheading', bold);
    }
  }

  @include element('main-stat') {
    background-color: use-color('base', true-white);
    border-radius: 4px;
    padding: 16px 16px 8px;
    position: relative;
    text-align: center;
  }

  @include element('secondary-stats') {
    background-color: use-color('grey', light-iii);
    border-radius: 0 0 4px 4px;
    border-top: solid 1px use-color('grey', light-i);
    display: flex;
    position: relative;
  }

  @include element('item') {
    padding: 8px 0;
    position: relative;
    text-align: center;
    width: 50%;

    &:first-child() {
      border-right: solid 1px use-color('grey', light-i);
    }

    .c-action-link {
      border-bottom: 0;
      position: absolute;
      right: 8px;
      text-decoration: none;
      top: 18px;

      &:hover {
        border-bottom: 0;
      }
    }

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

Componente desarrollado para mostrar totales estadísticos.

Consta con un area principal donde se presenta la estadistica principal (c-stats-card__main-stat), compuesta por 2 etiquetas label, una para el número (c-stats-card__main-number) y otra para la etiqueta (c-stats-card__label).

  <div class="c-stats-card__main-stat">
    <label class="c-stats-card__main-number">1.634</label>
    <label class="c-stats-card__label">total chat activos</label>
  </div>

La siguiente area es para las estadisticas secundarias (c-stats-card__secondary-stats), es decir, de lo que esta compuesta la estadistica principal.

Se compone por dos items con la clase c-stats-card__item y cada uno contiene 2 etiquetas label, para el número (c-stats-card__number) y su etiqueta (c-stats-card__label).

  <div class="c-stats-card__secondary-stats">
    <span class="c-stats-card__item">
      <label class="c-stats-card__number">930</label>
      <label class="c-stats-card__label">por agentes</label>
    </span>
    <span class="c-stats-card__item">
      <label class="c-stats-card__number">704</label>
      <label class="c-stats-card__label">por bot</label>
    
      <a href="" class="c-action-link">
        <span class="icon-faq"></span>
      </a>
    </span>
  </div>

*El segundo item puede contener un icono de ayuda.

Example

html
<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-stats-card">
    <div class="c-stats-card__main-stat">
      <label class="c-stats-card__main-number">1.634</label>
      <label class="c-stats-card__label">total chat activos</label>
    </div>
    <div class="c-stats-card__secondary-stats">
      <span class="c-stats-card__item">
        <label class="c-stats-card__number">930</label>
        <label class="c-stats-card__label">por agentes</label>
      </span>
      <span class="c-stats-card__item">
        <label class="c-stats-card__number">704</label>
        <label class="c-stats-card__label">por bot</label>
  
        <a href="" class="c-action-link">
          <span class="icon-faq"></span>
        </a>
      </span>
    </div>
  </div>

</div>

.c-tipyfication-card

scss
.c-typification-card {
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  flex-direction: column;
  height: fit-content;
  padding: 12px;
  text-align: center;
  width: auto;

  @include media-breakpoint-up(desktop) {
    width: 60px;
  }

  @include element('number') {
    @include use-font('title', 'bold');
    line-height: 22px;
  }

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

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

Tarjeta para mostrar los totales dentro de las tipificaciones.

Similar a las tarjetas de estadisticas, se compone por 2 etiquetas, una para el número (c-typification-card__number) y otra para el label (c-typification-card__label).

Junto al componente c-percent-indicator, descrito más abajo.

Example

html
<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-typification-card">
    <span class="c-typification-card__number">206</span>
    <label class="c-typification-card__label">consultas</label>
  
    <div class="c-percent-indicator">
      <span class="c-percent-indicator__progress-bar c-percent-indicator__progress-bar--first" style="width: 54%;"></span>
    </div>
  </div>

</div>

.c-percent-indicator

scss
.c-percent-indicator {
  background-color: use-color('grey', light-i);
  border-radius: 10px;
  height: 10px;
  margin-top: 12px;
  max-width: 80px;
  position: relative;
  width: 100%;
  z-index: use-layer('background');
  // z-index: 0;

  @include element('progress-bar') {
    background-color: use-color('grey', light);
    border-radius: 10px;
    height: 10px;
    left: 0;
    position: absolute;
    width: 77%;
    z-index: use-layer('base');
    // z-index: 1;

    @include modifier('attention') {
      background-color: use-color('secondary');
    }

    @include modifier('first') {
      background-color: darken(use-color('event', 'info'), 20%);
    }

    @include modifier('second') {
      background-color: use-color('event', 'info');
    }

    @include modifier('third') {
      background-color: use-color('event', 'error');
    }
  }
}

Barra para indicar el % de progreso de algún medidor.

El bloque principal (c-percent-indicator) contiene el color del 100% de la barra, su elemento c-percent-indicator__progress-bar corresponde a la barra indicadora de avance, es necesario indicar con inline style el avance actual del indicador:

<span class="c-percent-indicator__progress-bar" style="width: 36%;"></span>

Para cambiar el color de la barra consta con clases modificadoras para estos:

  • atenciones: c-percent-indicator__progress-bar--attention
  • consultas: c-percent-indicator__progress-bar--first
  • solicitudes: c-percent-indicator__progress-bar--second
  • reclamos: c-percent-indicator__progress-bar--third

Example

html
<div class="c-percent-indicator">
  <span class="c-percent-indicator__progress-bar c-percent-indicator__progress-bar--second" style="width: 36%;"></span>
</div>

.c-reference [deprecated]

scss
.c-reference {
  background-color: use-color('base', true-white);
  box-shadow: $box-shadow-card-lvl-1;
  margin-bottom: 16px;
  padding: 8px 16px;

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

  @include element('item') {
    @include use-font('caption');
    border-bottom: solid 1px use-color('grey', light-i);
    display: flex;
    justify-content: space-between;
    padding: 8px 0 8px 18px;
    position: relative;

    @include modifier('closed') {
      &::before {
        background-color: use-color('grey', light);
      }
    }

    @include modifier('attention') {
      &::before {
        background-color: use-color('secondary');
      }
    }

    &:last-child() {
      border-bottom: 0;
    }

    label {
      color: use-color('grey', light);

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

    &::before {
      border-radius: 50%;
      content: '';
      height: 14px;
      left: 0;
      position: absolute;
      top: 10px;
      width: 14px;
    }
  }

  .c-list {
    margin-bottom: 0;
  }
}

Este componente fue desarrollado para mostrar la referencia de los stats de los agentes (.c-agent-stats).

DEPRECATED:

use .c-list–reference instead.

Example

html
<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-reference">
    <label class="c-reference__label">
      referencia
    </label>
  
    <ul class="c-list">
      <li class="c-reference__item c-reference__item--closed">
        <label>chat cerrados</label>
        <span>Descendente *</span>
      </li>
      <li class="c-reference__item c-reference__item--attention">
        <label>chat en atención</label>
        <span>--</span>
      </li>
    </ul>
  </div>

</div>

.c-list--reference

scss
.c-list--reference {
  display: flex;
  margin: 0 0 4px;

  .c-reference-item {
    @include use-font('caption');
    color: use-color('grey', light);
    padding: 8px 0 8px 18px;
    position: relative;
    width: fit-content;

    @include modifier('closed') {
      &::before {
        background-color: use-color('grey', light);
      }
    }

    @include modifier('attention') {
      &::before {
        background-color: use-color('secondary');
      }
    }

    &:first-child() {
      margin-right: 16px;
    }

    label {
      color: use-color('grey', light);

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

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

    &::before {
      border-radius: 50%;
      content: '';
      height: 14px;
      left: 0;
      position: absolute;
      top: 10px;
      width: 14px;
    }
  }
}

Este componente fue desarrollado para mostrar la referencia de los stats de los agentes (.c-agent-stats).

Example

html
<ul class="c-list c-list--reference">
  <li class="c-reference-item c-reference-item--closed">
    chat cerrados
  </li>
  <li class="c-reference-item c-reference-item--attention">
    chat en atención
  </li>
</ul>

.c-agent-stats

scss
.c-agent-stats {
  align-items: center;
  background-color: use-color('base', true-white);
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 16px 8px;

  @include element('profile-image') {
    border-radius: 50%;
    height: 40px;
    min-width: 40px;
    width: 40px;
  }

  @include element('data') {
    @include use-font('body');
    display: inline-block;
    margin-right: 8px;
    overflow: hidden;
    padding-left: 8px;
    text-overflow: ellipsis;
    width: 60px;

    @include media-breakpoint-between('webchat', 'tablet-landscape') {
      display: flex;
      flex-direction: column;
      width: auto;
    }

    @include modifier('status') {
      @include use-font('caption');
      text-transform: capitalize;
    }
  }

  @include element('counter') {
    margin: 0 8px;
    text-align: center;
    width: 54px;

    @include modifier('number') {
      @include use-font('title', 'bold');
    }

    .c-percent-indicator {
      margin-top: 4px;
    }
  }

  &-section {
    display: flex;
  }

  label {
    white-space: nowrap;
  }
}

Componente desarrollado para mostrar el detalle de los chats cerrados y en atención de un agente.

Esta compuesto por la imagen del agente, junto a su nombre y estatus actual, más una sección dedicada para los stats.

Example

html
<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-agent-stats">
    <div class="c-agent-stats-section">
      <img class="c-agent-stats__profile-image" src="https://cdn.chattigo.com/assets/img/profiles/2_dummy.png" />
      
      <div class="c-agent-stats__data">
        <label>Jared Bennet</label>
        <span class="c-agent-stats__data--status">Activo</span>
      </div>
    </div>
    
    <div class="c-agent-stats-section">
      <div class="c-agent-stats__counter">
        <label class="c-agent-stats__counter--number">323</label>
        
        <div class="c-percent-indicator">
          <span class="c-percent-indicator__progress-bar" style="width: 69%;"></span>
        </div>
      </div>
      
      <div class="c-agent-stats__counter">
        <label class="c-agent-stats__counter--number">14</label>
        
        <div class="c-percent-indicator">
          <span class="c-percent-indicator__progress-bar c-percent-indicator__progress-bar--attention" style="width: 79%;"></span>
        </div>
      </div>
    </div>
  </div>

</div>

.c-campaign-visibility

scss
.c-campaign-visibility {
  align-items: center;
  background-color: use-color('base', true-white);
  border: 1px solid use-color('grey', light-i);
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  margin-bottom: 12px;
  margin-right: 12px;
  max-width: 348px;
  // width: 210px;

  @include modifier('disabled') {
    background-color: use-color('grey', light-iii);

    .c-action-link {
      border: 0;
      color: use-color('grey', light);
      text-decoration: line-through;
    }
  }

  @include modifier('full-width') {
    box-sizing: border-box;
    margin: 12px 8px;
    width: 97%;
  }

  @include element('icon') {
    align-items: center;
    border-right: 1px solid use-color('grey', light-i);
    cursor: pointer;
    height: 24px;
    padding: 20px 20px 24px 24px;

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

  @include element('checkbox') {
    align-items: center;
    border-right: 1px solid use-color('grey', light-i);
    display: flex;
    height: 24px;
    justify-content: center;
    min-width: 24px;
    padding: 24px 16px;
    width: 24px;

    // overrides for checkboxes
    .c-checkbox + label {
      margin: 12px 4px;
    }

    .c-checkbox:checked + label::after {
      height: 17px;
      padding: 0;
      padding-left: 3px;
      width: 15px;
    }
  }

  @include element('link') {
    color: use-color('primary');
    margin-right: 16px;
    overflow: hidden;
    padding: 24px 0 24px 16px;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      color: use-color('grey');
    }
  }

  @include element('image') {
    align-self: center;
    height: 40px;
    margin-left: auto;
    margin-right: 12px;;
  }
}

Hecho para mostrar las compañas, tiene la opción de ser acompañada de un icono para diferenciar si están visibles o no.

También consta con la versión que en vez de tener un icono identificador, contiene un checkbox para tareas más elaboradas.

Examples

html
<div class="c-campaign-visibility">
  <div class="c-campaign-visibility__icon">
    <span class="icon-message-visible"></span>
  </div>
  
  <div class="c-campaign-visibility__link">
    <a href="" class="c-action-link">
      #Hablaconmigo
    </a>
  </div>
</div>
html disabled
<div class="c-campaign-visibility c-campaign-visibility--disabled">
  <div class="c-campaign-visibility__icon">
    <span class="icon-message-invisible"></span>
  </div>
  
  <div class="c-campaign-visibility__link">
    <a href="" class="c-action-link">
      #Hablaconmigo
    </a>
  </div>
</div>
html checkbox
<div class="c-campaign-visibility">
  <div class="c-campaign-visibility__checkbox">
    <input name="option" type="checkbox" class="c-checkbox" id="first">
    <label for="first"></label>
  </div>
  
  <div class="c-campaign-visibility__link">
    <a href="" class="c-action-link">
      #Hablaconmigo
    </a>
  </div>
</div>
html checkbox for accounts - full width
<div class="c-campaign-visibility c-campaign-visibility--full-width">
  <div class="c-campaign-visibility__checkbox">
    <input name="option" type="checkbox" class="c-checkbox" id="first">
    <label for="first"></label>
  </div>
  
  <div class="c-campaign-visibility__link">
    <a href="" class="c-action-link">
      76.768.946-2
    </a>
  </div>

  <img class="c-campaign-visibility__image" src="https://cdn.chattigo.com/assets/img/flags/CL@1x.svg" />

</div>

.c-poll-answer

scss
.c-poll-answer {
  align-items: center;
  display: flex;
  height: 30px;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;

  @include element('bar-container') {
    left: 0;
    position: absolute;
    top: 0;
    width: 85%;
  }

  @include element('bar') {
    background-color: use-color('grey', light-i);
    border-radius: 4px;
    height: 30px;
    position: absolute;
    top: 0;
    z-index: use-layer('background');
    // z-index: 0;
  }

  @include element('label') {
    @include use-font('body');
    align-items: center;
    color: use-color('base', 'black');
    margin-right: 8px;
    padding-left: 16px;
    position: relative;
    width: 100%;
    z-index: use-layer('base');
    // z-index: 1;

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

    [class^='icon-'],
    [class*=' icon-'] {
      font-size: 20px;
      margin-left: 8px;
      position: relative;
      top: 3px;
    }
  }

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

Este componente esta hecho para mostrar los resultados ingresados en algún tipo de encuesta, presentando una barra de avance junto a su opción y un label para desplegar el % de aceptación de la opción.

Example

html
<div class="c-poll-answer">
  <div class="c-poll-answer__bar-container">
    <div class="c-poll-answer__bar" style="width: 80%;"></div>
  </div>

  <label class="c-poll-answer__label">
    me gusta
    <span class="icon-check-circle"></span>
  </label>

  <span>80%</span>
</div>

<div class="c-poll-answer">
  <div class="c-poll-answer__bar-container">
    <div class="c-poll-answer__bar" style="width: 20%;"></div>
  </div>

  <label class="c-poll-answer__label">
    no me gusta
  </label>

  <span>20%</span>
</div>

.c-sidebar-menu

scss
.c-sidebar-menu {
  height: 100%;
  padding-left: 0;
  position: fixed;
  width: 220px;

  @include element('logo') {
    margin-bottom: 32px;
    margin-left: 24px;
    padding: 24px 0 0;

    @include modifier('image') {
      height: 32px;
    }
  }

  @include element('item') { // This.
    align-items: center;
    color: use-color('base', true-white);
    cursor: pointer;
    display: flex;
    justify-content: left;
    padding: 6px 0;

    @include element('arrow') {
      margin-left: 8px;
      @include if-block-has-modifier('c-sidebar-menu__item', 'active') {
        transform: rotate(180deg);
      }
    }

    @include modifier('sub-section') {
      padding: 13px 13px 13px 58px;

      &[class*='active'] {
        background-color: transparentize(#000, 0.9);
      }
    }

    @include modifier('profile') {
      bottom: 0;
      padding: 24px 0;
      position: fixed;
      width: 220px;

      &:hover {
        .c-dropup {
          display: block;
        }
      }
    }
    
    @include modifier('user-logged-in') {
      bottom: 53px;
      box-sizing: border-box;
      padding: 6px 0;
      padding-right: 24px;
      position: fixed;
      width: 220px;
      
      > .c-sidebar-menu {

        @include element('label') {
          min-width: inherit;
        }
      }
    }

    @include modifier('log-out') {
      bottom: 0;
      position: fixed;
      width: 220px;
    }

    &:hover {
      &:not([class*='active']) {
        background-color: transparentize(#fff, 0.85);
    
        [class*='icon'] {
          transform: rotate(12deg);
          transition: ease-in-out 0.25s;
        }
      }

      &.c-sidebar-menu {
        &__item--log-out {
          [class*='icon'] {
            transform: rotate(0deg);
            transition: ease-in-out 0.25s;
          }
        }
      }
    }
  }

  @include element('icon') {
    font-size: 22px;
    margin-left: 24px;
    padding: 6px 6px 5px;

    @include if-block-has-modifier('c-sidebar-menu__item', 'active') {
      background-color: use-color('base', true-white);
      border-radius: 8px;
      box-shadow: $box-shadow-card-lvl-1;
      color: use-color('primary', 'base');
    }
  }

  @include element('label') {
    @include use-font('body', 'regular');
    display: flex;
    justify-content: space-between;
    margin-left: 8px;
    // min-width: fit-content;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
    width: fit-content;

    @include if-block-has-modifier('c-sidebar-menu__item', 'active') {
      font-weight: bold;
    }
    
    @include if-block-has-modifier('c-sidebar-menu__item', 'sub-section') {
      font-weight: normal;
      line-height: 16px;
      white-space: normal;
      width: 100%;
    }
  }

  @include element('user') {
    border: 2px solid use-color('base', true-white);
    border-radius: 50%;
    height: 28px;
    margin-left: 24px;
    min-width: 28px;
    overflow: hidden;
    width: 28px;

    @include modifier('image') {
      height: 28px;
      min-width: 28px;
      width: 28px;
    }
  }

  @include element('site-tag') {
    @include use-font('caption', 'semibold');
    background-color: transparent;
    border: solid 1px use-color('base', true-white);
    border-radius: 4px;
    padding: 0 4px;
    text-transform: capitalize;
    width: fit-content;

    @include if-block-has-modifier('c-sidebar-menu__item', 'active') {
      background-color: use-color('base', true-white);
      color: use-color('primary');
    }

    @include modifier('accordion-pane') { // This.
      display: none;

      @include if-block-has-modifier('c-sidebar-menu__accordion__item', 'new') {
        background-color: use-color('base', true-white);
        color: use-color('primary');
        display: inline;
      }

    }
  }

  @include element('accordion') { // This.
    padding-right: 24px;
    
    @include element('item') {
      @include use-font('body-alt', 'light');
      display: flex;
      font-weight: 300;
      justify-content: space-between;
      padding: 12px 24px 12px 66px;
      text-transform: capitalize;
    }

  }

  @include element('accordion-pane') { // This.
    display: none;

    @include modifier('active') {
      display: block;
    }
  }

  @include modifier('accordion') { // This.
    padding-right: 24px;
  }

  hr {
    border-color: use-color('grey', light-iii);
    width: 80%;
  }
}

Componente creado para ser usado dentro del nuevo layout del dashboard del supervisor de Chattigo.

Las opciones del menú se encuentran dentro de la lista (<ul>) .c-sidebar-menu y cada opción (<li>) debe usar la clase .c-sidebar-menu__item.

Para destacar la opción seleccionada, se debe agregar la clase modificadora .c-sidebar-menu__item--active en el item.

Para destacar las sub opciones de la opción seleccionada, se debe agregar la clase modificadora .c-sidebar-menu__item--sub-section y esta debe estar ubicada justo debajo de la opción correspondiente (u opción padre).

Dentro de esta lista también se incluye el div contenedor del logo:

  <div class="c-sidebar-menu__logo">
    <img class="c-sidebar-logo--image" src="https://cdn.chattigo.com/assets/img/logo-white.svg" alt="logo"/>
  </div>

Su ubicación es justo antes de los <> de las opciones del menú.

Modifiers

Existen modificadores para los items referentes al usuario actualmente logeado y para hacer logout:

  • c-sidebar-menu__item–user-logged-in
  • c-sidebar-menu__item–user-log-out

Estos items tambien van dentro de la clase l-main__side-menu y modifican la clase c-sidebar-menu__item

  <li class="c-sidebar-menu__item c-sidebar-menu__item--user-logged-in">
    <div class="c-sidebar-menu__user">
      <img class="c-sidebar-menu__user--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
    </div>
  
    <span class="c-sidebar-menu__label">
      User Name User Name User Name User Name User Name
    </span>
  </li>
  
  <li class="c-sidebar-menu__item c-sidebar-menu__item--log-out">
    <span class="c-sidebar-menu__icon icon-logout">
    </span>
  
    <span class="c-sidebar-menu__label">
      log out
    </span>
  </li>

Site Tags: legacy & nuevo

Para destacar en el menu de navegación los items que llevan a lo nuevo contra los que llevan a aplicaciones legacy, desarrollamos el elemento c-sidebar-menu__site-tag para indicar dentro del label el sitio correspondiente.

  <li class="c-sidebar-menu__item">
    <span class="c-sidebar-menu__icon icon-config"></span>
  
    <span class="c-sidebar-menu__label">
      Configuración
      <div class="c-sidebar-menu__site-tag">
        Nuevo
      </div>
    </span>
  </li>

Deprecated: .c-sidebar-menu__item–profile

El último elemento de este componente es el item correspondiente al usuario actualmente logeado, a pesar que usa la misma clase que los items de la lista, este elemento se encuentra fuera de esta y vive en su propio div, junto a su clase modificadora .c-sidebar-menu__item--profile.

  <div class="c-sidebar-menu__item c-sidebar-menu__item--profile">
    <div class="c-sidebar-menu__user">
      <img class="c-sidebar-menu__user--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
    </div>
  
    <span class="c-sidebar-menu__label">
      User Name
    </span>

    <ul class="c-dropup c-dropup--top-right">
      <li class="c-dropup__item">
        <a href="#">
          Cerrar Sesión
        </a>
      </li>
    </ul>
  </div>

Al hacer hover sobre el item de usuario se despliega el componente .c-dropup con la opción de cerrar sesión.

Example

html
<div class="l-main" style="height: 800px;"> <!-- inline style only for doc example -->
  <nav class="l-main__side-menu l-main__side-menu--open">

    <!-- c-sidebar-menu start -->
    <ul class="c-sidebar-menu">
      <!-- sidebar logo -->
      <div class="c-sidebar-menu__logo">
        <img class="c-sidebar-logo--image" src="https://cdn.chattigo.com/assets/img/logo-white.svg" alt="logo"/>
      </div>
      <!-- sidebar option -->
      <li class="c-sidebar-menu__item c-sidebar-menu__item--active">
        <span class="c-sidebar-menu__icon icon-message-visible">
        </span>

        <span class="c-sidebar-menu__label">
          Supervisor
          <div class="c-sidebar-menu__site-tag">
            nuevo
          </div>
        </span>
      </li>
      <li class="c-sidebar-menu__item">
        <span class="c-sidebar-menu__icon icon-message-visible">
        </span>

        <span class="c-sidebar-menu__label">
          Supervisor
          <div class="c-sidebar-menu__site-tag">
            legacy
          </div>
        </span>
      </li>
      <!-- sidebar option -->
      <li class="c-sidebar-menu__item">
        <span class="c-sidebar-menu__icon icon-reports"></span>

        <span class="c-sidebar-menu__label">
          Reportería
        </span>
      </li>

      <hr />

      <!-- sidebar option -->
      <li class="c-sidebar-menu__item">
        <span class="c-sidebar-menu__icon icon-maintainer">
        </span>

        <span class="c-sidebar-menu__label">
          Mantenedor
        </span>
      </li>

      <li class="c-sidebar-menu__item c-sidebar-menu__item--user-logged-in">
        <div class="c-sidebar-menu__user">
          <img class="c-sidebar-menu__user--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
        </div>
      
        <span class="c-sidebar-menu__label">
          User Name User Name User Name User Name User Name
        </span>
      </li>
      
      <li class="c-sidebar-menu__item c-sidebar-menu__item--log-out">
        <span class="c-sidebar-menu__icon icon-logout">
        </span>
      
        <span class="c-sidebar-menu__label">
          log out
        </span>
      </li>

    </ul>

    <!-- c-sidebar-menu end -->
    
  </nav>

  <div class="l-main__content">
    <!-- all content -->
  </div>
</div>

Componente creado para reemplaza la anterior sidenav.

Se requiere usar el modificador c-sidebar-menu__item--active para dar rotar la flecha. Se requiere usar el modificador c-sidebar-menu__accordion-pane--active para abrir el menú.

Example

html
<div class="l-main" style="height: 800px;"> <!-- inline style only for doc example -->
  <nav class="l-main__side-menu">
    <a class="l-main__side-menu--close-icon" onclick="toggleSideMenu()">
      <span class="icon-close"></span>
    </a>
    <!-- menu options -->
    <ul class="c-sidebar-menu">

      <div class="c-sidebar-menu__logo">
        <img class="c-sidebar-menu__logo--image" src="https://cdn.chattigo.com/assets/img/logo-white.svg" alt="logo"/>
      </div>

      <!-- Accordion Item -->
      <li class="c-sidebar-menu__item c-sidebar-menu__accordion">
        <span class="c-sidebar-menu__icon icon-message"></span>
        <span class="c-sidebar-menu__label">
          Atención
        </span>
        <span class="c-sidebar-menu__item__arrow icon-arrow-down"></span>
      </li>
      <ul class="c-sidebar-menu__accordion-pane">
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item">
          Agente
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item">
          Agendamiento
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item--new">
          Supervisor
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item--new">
          Supervisor
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            legacy
          </div>
        </li>
      </ul>
      
      <!-- Accordion Item -->
      <li class="c-sidebar-menu__item c-sidebar-menu__accordion">
        <span class="c-sidebar-menu__icon icon-config"></span>
        <span class="c-sidebar-menu__label">
          Configuración
        </span>
        <span class="c-sidebar-menu__item__arrow icon-arrow-down"></span>
      </li>
      <ul class="c-sidebar-menu__accordion-pane">
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item">
          Campañas
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item">
          Preguntas frecuentes
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item">
          Usuarios
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item">
          Canales
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            legacy
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item--new">
          Configuración
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            legacy
          </div>
        </li>
      </ul>
      
      <!-- Accordion Item -->
      <li class="c-sidebar-menu__item c-sidebar-menu__accordion">
        <span class="c-sidebar-menu__icon icon-shop-outbound"></span>
        <span class="c-sidebar-menu__label">
          Compras
        </span>
      </li>
      
      <!-- Accordion Item -->
      <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__item--active">
        <span class="c-sidebar-menu__icon icon-config"></span>
        <span class="c-sidebar-menu__label">
          Analítica
        </span>
        <span class="c-sidebar-menu__item__arrow icon-arrow-down"></span>
      </li>
      <ul class="c-sidebar-menu__accordion-pane c-sidebar-menu__accordion-pane--active">
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item">
          Resumen
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item--new">
          Reportería
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            legacy
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item">
          Programar reportes
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            nuevo
          </div>
        </li>
        <li class="c-sidebar-menu__item c-sidebar-menu__accordion c-sidebar-menu__accordion__item c-sidebar-menu__accordion__item">
          Reportes generados
          <div class="c-sidebar-menu__site-tag c-sidebar-menu__site-tag--accordion-pane">
            legacy
          </div>
        </li>
      </ul>
      
      <li class="c-sidebar-menu__item c-sidebar-menu__item--user-logged-in">
        <div class="c-sidebar-menu__user">
          <img class="c-sidebar-menu__user--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
        </div>

        <span class="c-sidebar-menu__label">
          User Name User Name User Name User Name User Name
        </span>
      </li>
        
      <li class="c-sidebar-menu__item c-sidebar-menu__item--log-out">
        <span class="c-sidebar-menu__icon icon-logout">
        </span>

        <span class="c-sidebar-menu__label">
          Log Out
        </span>
      </li>
    </ul>
  </nav>
</div>

.c-sidemenu

scss
.c-sidemenu {
  border-radius: 0;
  height: 100%;
  padding: 16px;
  // position: absolute;
  position: fixed;
  right: -100%;
  top: 0;
  transition: all 0.4s;
  width: 90%;
  z-index: use-layer('side-menu');

  @include media-breakpoint-up('phone-ii') {
    right: -355px;
    width: 323px;
  }

  @include element('close-icon') {
    color: use-color('grey', 'light');
    cursor: pointer;
    
    span {
      font-size: 16px;
    }
  }

  @include element('footer') {
    background-color: use-color('base', 'true-white');
    border-top: solid 1px use-color('grey', 'light-i');
    bottom: 0;
    height: 70px;
    left: 0;
    padding: 16px;
    position: absolute;
    width: 90%;
  }

  @include modifier('open') {
    right: 0;
  }

  .c-web-transfers-container {
    height: 64%;
    margin-bottom: 80px;
  }

  //overrides
  .app-form--search {
    &::before {
      top: 2px;
    }
  }
}

Example

html
<div class="u-example-padding" style="min-height: 600px;"> <!-- this div is just for doc example -->

  <div class="l-main">
    <div class="l-main__overlay" style="display: none;"></div>
    
    <nav class="l-main__side-menu l-main__side-menu--open">
      <a class="l-main__side-menu--close-icon">
        <span class="icon-close"></span>
      </a>
    </nav>
    
    <div class="l-main__content">
      <h3 class="l-dashboard__header--title">
        Some Title

        <a class="l-main__side-menu--open-icon">
          <span class="icon-sidebar"></span>
        </a>
      </h3>

      <!-- all content -->
      <!-- sidemenu -->
      <div class="c-section-card c-sidemenu c-sidemenu--open">
        <div class="c-section-card__header">
          <label class="c-section-card__header--label">
            <a class="c-sidemenu__close-icon" onclick="toggleGrid()">
              <span class="icon-close"></span>
            </a>
            Header
          </label>
        </div>
        <div class="c-sidemenu__footer">
          <a class="c-button c-button--primary c-button--thin" href="" disabled>
            Action
          </a>
        </div>
      </div>
    </div>
  </div>

</div>

Requires

@function use-color()

@mixin element()

@mixin modifier()

.c-waiting-card

scss
.c-waiting-card {
  align-items: center;
  border-bottom: 1px solid use-color('grey', 'light-i');
  display: flex;
  padding: 8px 0;
  
  @include media-breakpoint-down('tablet') {
    flex-flow: wrap;
  }

  @include element('channel') {
    order: 1;
    padding: 0 8px 0 0;
    text-align: center;
    width: fit-content;
    
    @include media-breakpoint-up('tablet') {
      margin-right: 16px;
      order: unset;
      padding: 0 8px;
    }

    @include media-breakpoint-up('desktop') {
      justify-self: flex-start;
    }

    @include modifier('image') {
      height: 26px;
      width: 26px;
    }
  }

  @include element('client-name') {
    @include use-font('body');
    height: 100%;
    margin-right: 16px;
    order: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 40%;

    @include media-breakpoint-up('phone-ii') {
      width: 50%;
    }

    @include media-breakpoint-up('tablet') {
      order: unset;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @include media-breakpoint-up('desktop') {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  @include element('id') {
    @include use-font('body');
    color: use-color('grey', 'light');
    margin-right: 12px;
    order: 4;
    padding-left: 16px;
    position: relative;
    white-space: nowrap;

    @include media-breakpoint-down('tablet') {
      width: 100%;
    }

    @include media-breakpoint-up('medium') {
      max-width: 82px;
      min-width: 82px;
      order: unset;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
    }

    &::before {
      content: 'Id';
      left: 0;
      position: absolute;
    }
  }

  @include element('time') {
    @include use-font('body');
    color: use-color('event', 'error');
    margin-left: auto;
    order: 3;
    padding-left: 18px;
    position: relative;
    white-space: nowrap;
    width: auto;

    @include media-breakpoint-up('tablet') {
      margin-left: 0;
      min-width: 120px;
      order: unset;
      padding-left: 16px;
    }

    &::before {
      background-color: use-color('event', 'error');
      border-radius: 50%;
      content: '';
      height: 10px;
      left: 0;
      position: absolute;
      top: 6px;
      width: 10px;
    }
  }

  @include element('campaign') {
    @include use-font('body');
    color: use-color('grey', 'light');
    margin: 8px 0 16px;
    order: 5;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;

    @include media-breakpoint-up('medium') {
      margin: 16px 0;
      order: unset;
      width: 200px;
    }
  }

  @include element('btns-reel') {
    order: 6;
    width: 100%;

    @include media-breakpoint-up('medium') {
      justify-self: flex-end;
      margin-left: 24px;
      max-width: 152px;
      order: unset;
    }

    .c-button {
      padding: 8px 0;
    }
  }

  &:last-child {
    border-bottom-color: transparent;
  }
}

Componente del tipo Card, para desplegar los chats en estado de espera.

Esta hecho para mantener información del tiempo que lleva en espera, canal, nombre cliente, campaña y un botón de acción para transferir.

Example

html
<div class="c-waiting-card">
  <div class="c-waiting-card__time">
    más de 21 hrs.
  </div>

  <div class="c-waiting-card__channel">
    <img class="c-waiting-card__channel--image" src="https://cdn.chattigo.com/assets/img/channels/widget-channel.svg" alt="Channel image"/>
  </div>

  <div class="c-waiting-card__client-name">
    Rob Reinier
  </div>

  <div class="c-waiting-card__id">
    12345678
  </div>

  <div class="c-waiting-card__campaign">
    #HablaConmigo
  </div>
  
  <div class="c-waiting-card__btns-reel">
    <button class="c-button c-button--secondary">Transferir</button>
  </div>
</div>

<div class="c-waiting-card">
  <div class="c-waiting-card__time">
    más de 21 hrs.
  </div>

  <div class="c-waiting-card__channel">
    <img class="c-waiting-card__channel--image" src="https://cdn.chattigo.com/assets/img/channels/whatsapp-channel.svg" alt="Channel image"/>
  </div>

  <div class="c-waiting-card__client-name">
    George Miller
  </div>

  <div class="c-waiting-card__id">
    1234567890123
  </div>

  <div class="c-waiting-card__campaign">
    #HablaConmigo
  </div>
  
  <div class="c-waiting-card__btns-reel">
    <button class="c-button c-button--secondary">Transferir</button>
  </div>
</div>

<div class="c-waiting-card">
  <div class="c-waiting-card__time">
    más de 21 hrs.
  </div>

  <div class="c-waiting-card__channel">
    <img class="c-waiting-card__channel--image" src="https://cdn.chattigo.com/assets/img/channels/whatsapp-channel.svg" alt="Channel image"/>
  </div>

  <div class="c-waiting-card__client-name">
    ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
  </div>

  <div class="c-waiting-card__id">
    123
  </div>

  <div class="c-waiting-card__campaign">
    #ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTU
  </div>
  
  <div class="c-waiting-card__btns-reel">
    <button class="c-button c-button--secondary">Transferir</button>
  </div>
</div>