Dashboard | chattigo-webkit Documentation

.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: 15px 12px;
  position: relative;
  width: auto;
  
  @include media-breakpoint-up('tablet') { 
    padding: 16px 24px;
  }

  @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') {
      // flex-direction: row;
      // height: 220px;
      max-height: 460px;
      overflow: hidden;
      overflow-y: scroll;
    }

    @include modifier('typifications') {
      display: grid;
      grid-gap: 8px;
      grid-template-columns: repeat(3, 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;
      }
    }
  }
}

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;
  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;
    box-shadow: $box-shadow-card-lvl-1;
    padding: 16px;
    position: relative;
    text-align: center;
    z-index: use-layer('base');
    // z-index: 1;
  }

  @include element('secondary-stats') {
    background-color: use-color('grey', light-iii);
    border-radius: 0 0 4px 4px;
    box-shadow: $box-shadow-card-lvl-1;
    display: flex;
    position: relative;
    top: -4px;
    z-index: use-layer('background');
    // z-index: 0;
  }

  @include element('item') {
    padding: 12px 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: 28px;

      &: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: 4px;
  height: 12px;
  margin-top: 12px;
  position: relative;
  width: 100%;
  z-index: use-layer('background');
  // z-index: 0;

  @include element('progress-bar') {
    background-color: use-color('grey', light);
    border-radius: 4px;
    height: 12px;
    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;
  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;
    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;

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

    &: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') {
    align-items: center;
    color: use-color('base', true-white);
    // color: use-color('base', 'black');
    cursor: pointer;
    display: flex;
    justify-content: left;
    padding: 8px 0;

    @include modifier('active') {
      // background-color: transparentize(#000, 0.9);
    }

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

      &[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') {
      // background-color: use-color('base', true-white);
      bottom: 53px;
      padding: 4px 0;
      position: fixed;
      width: 220px;
    }

    @include modifier('log-out') {
      // background-color: use-color('base', true-white);
      bottom: 0;
      position: fixed;
      width: 220px;
    }

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

      &.c-sidebar-menu {
        &__item--log-out {
          // background-color: use-color('base', true-white);
          [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);
      // background-color: use-color('secondary', 'base');
      border-radius: 8px;
      // box-shadow: 1px 2px 3px 0 transparentize(#000, 0.9);
      box-shadow: $box-shadow-card-lvl-1;
      // color: use-color('primary');
      // color: use-color('base', true-white);
      color: use-color('primary', 'base');
    }
  }

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

    @include if-block-has-modifier('c-sidebar-menu__item', 'active') {
      font-weight: bold;
    }
  }

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

    @include modifier('image') {
      height: 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');
    }
  }

  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>

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>

.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;
  }
}

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 media-breakpoint-up()

@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>

Example

Example

Example

Example

.c-reference [deprecated]

DEPRECATED:

Example

Example

Example

Examples

Example

Modifiers

Site Tags: legacy & nuevo

Deprecated: .c-sidebar-menu__item–profile

Example

Example

Requires

@function use-color()

@mixin media-breakpoint-up()

@mixin element()

@mixin modifier()

Example