.chattigo-widget-list-options

scss
.chattigo-widget-list-options {
  border-top: solid 1px use-color('grey', light-i);
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 24px 0 16px;
  padding: 0;
  width: 100%;

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

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

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

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

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

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

  // icon override
  [class^='chattigo-icon-'],
  [class*=' chattigo-icon-'] {
    color: use-color('grey', light) !important;
    font-size: 21px !important;
    padding-right: 8px !important;
    position: relative !important;
    top: 4px !important;
  }
}

Lista de opciones para la configuración del widget.

Example

html
<ul class="chattigo-widget-list-options">
  <li class="chattigo-widget-list-options__item">
    <div class="chattigo-widget-list-options__left-side">
      <span class="icon-megaphone"></span>
      Mensajes con Sonido
    </div>

    <div class="chattigo-widget-list-options__right-side">
      <div class="chattigo-widget-list-options__switch">
        <input id="switche" type="checkbox" class="c-switch" checked>
        <label for="switche"></label>
      </div>
    </div>
  </li>
</ul>

Requires

@function use-color()

@mixin element()

@mixin use-font()

.chattigo-widget-team

scss
.chattigo-widget-team {
  padding: 24px;
  text-align: left;

  @include element('label') {
    @include use-font('body', 'regular');
    color: use-color(base, 'black');
  }

  @include element('caption') {
    @include use-font('caption', 'regular');
    color: use-color('grey', light);
  }

  @include element('list') {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    @include modifier('item') {
      position: relative;
      // Note: calc for left position of team images
      @for $i from 1 through 6 {
        $left-value: ($i * 10) - 10;

        &:nth-child(#{$i}) {
          left: $left-value * -1px;
        }
      }

      @include media-breakpoint-up('phone-i') {
        &:nth-child(n+7) {
          display: none;
        }
      }
    }

    @include modifier('image') {
      border: solid 3px use-color(base, true-white);
      border-radius: 50%;
      height: 48px;
      width: 48px;

      @include media-breakpoint-up('phone-i') {
        height: 54px;
        width: 54px;
      }
    }
  }
}

Team component

Todos los elementos descritos están hechos para ser incluidos dentro de la clase .chattigo-widget-team:

.chattigo-widget-team__label - label descriptivo de la sección de equipos

<label class="chattigo-widget-team__label">
  Inicia una conversación
</label> 

.chattigo-widget-team__caption - contenido extra referente al equipo

<div class="chattigo-widget-team__caption">
  El equipo usualmente responde en pocas horas.
</div>

Team profile list

.chattigo-widget-team__list - Clase para la lista de agentes.
.chattigo-widget-team__list--item - Clase que da la posición de los items de la lista.
(el maximo de items que se muestra son 6, aunque existan más, tomara solo los primeros 6) ~regla de diseño.
.chattigo-widget-team__list--image - Estilos para las imagenes dentro de la lista.

Example

html
<div class="chattigo-widget-team">
  <label class="chattigo-web-team__label">
    Inicia una conversación
  </label>
  <div class="chattigo-widget-team__caption">
    El equipo usualmente responde en pocas horas.
  </div>
  <ul class="chattigo-widget-team__list">
    <li class="chattigo-widget-team__list--item">
      <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
    </li>
    <li class="chattigo-widget-team__list--item">
      <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/2_dummy.png" />
    </li>
    <li class="chattigo-widget-team__list--item">
      <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/3_dummy.png" />
    </li>
    <li class="chattigo-widget-team__list--item">
      <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/4_dummy.png" />
    </li>
    <li class="chattigo-widget-team__list--item">
      <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/5_dummy.png" />
    </li>
    <li class="chattigo-widget-team__list--item">
      <img class="chattigo-widget-team__list--image" src="https://cdn.chattigo.com/assets/img/profiles/6_dummy.png" />
    </li>
  </ul>
</div>

Requires

@function use-color()

@mixin element()

@mixin modifier()

@mixin use-font()