Lists | chattigo-webkit Documentation

.c-list

scss

.c-list {
  list-style: none;
  margin-top: 0;
  padding: 0;

  @include element('title') {
    @include use-font('body', 'bold');
    border-bottom: solid 1px use-color('grey', light-alt);
    color: use-color('grey');
  }

  @include modifier('default') {
    @include use-font('body');
    list-style: inside;
  }
}

Estilos base para los componentes de lista.

Tambien incluye el elemento title para ser especificado antes de la lista.

##Modificadores

c-list--default

Examples

html

<div class="c-list__title">
  Listas
</div>

html default

<ul class="c-list c-list--default">
  <li>
    chat transferido por <b>bot</b>
  </li>
  <li>
    chat transferido por <b>supervisor</b>
  </li>
  <li>
    chat transferido por <b>supervisor X</b>
  </li>
  <li>
    chat transferido a <b>agente X</b>
  </li>
</ul>

Requires

@mixin use-font()

@function use-color()

.c-list--evaluation

scss

.c-list--evaluation {
  display: flex;
  justify-content: center;

  li {
    margin: 0 4px;

    span {
      color: use-color('grey', light-alt);
      font-size: 28px;
    }
    
    .icon-star-filled {
      color: use-color('event', 'warning');
    }
  }
}

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

Example

html

<ul class="c-list c-list--evaluation">
  <li class="c-evaluation__item">
    <span class="icon-star-filled"></span>
  </li>
  <li class="c-evaluation__item">
    <span class="icon-star-filled"></span>
  </li>
  <li class="c-evaluation__item">
    <span class="icon-star-filled"></span>
  </li>
  <li class="c-evaluation__item">
    <span class="icon-star-filled"></span>
  </li>
  <li class="c-evaluation__item">
    <span class="icon-star"></span>
  </li>
</ul>

Requires

@function use-color()

.c-list--social-media

scss

.c-list--social-media {
  display: flex;
  margin-top: 16px;

  li {
    margin: 0 12px 0 0;
  }

  span {
    font-size: 28px;
  }
}

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

Example

html

<ul class="c-list c-list--social-media">
  <li>
    <span class="icon-social-twitter"></span>
  </li>
  <li>
    <span class="icon-social-instagram"></span>
  </li>
  <li>
    <span class="icon-social-linkedin"></span>
  </li>
  <li>
    <span class="icon-social-youtube"></span>
  </li>
</ul>

.c-list__period

scss

.c-list {
  @include element('period') {
    align-items: center;
    border-bottom: solid 1px use-color('grey', 'light-i');
    display: flex;
    margin: 0 8px;
    padding: 8px;

    @include modifier('data') {
      @include use-font('caption');
      cursor: pointer;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    
    @include modifier('label') {
      @include use-font('body', 'semibold');
      line-height: 16px;
      text-transform: capitalize;
    }
  
    // overrides
    .c-switch-container {
      display: block;
      min-width: 40px;
    }

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

Elemento de lista usado para habilitar los periodos de envio de reportes.

Modificadores

c-list__period--data
c-list__period--label

Example

html

<ul class="c-list">
  <li class="c-list__period">
    <span class="icon-daily"></span>
    <div class="c-list__period--data">
      <label class="c-list__period--label">Diario</label>
      Este reporte se envirá a primera hora del día. El próximo envío está programado para el 01/06/2020
    </div>
    <div class="c-switch-container">
      <input type="checkbox" class="c-switch" id="checkbox4" checked>
      <label for="checkbox4"></label>
    </div>
  </li>
  <li class="c-list__period">
    <span class="icon-weekly"></span>
    <div class="c-list__period--data">
      <label class="c-list__period--label">Semanal</label>
      Este reporte se envirá el primer día de cada semana.
    </div>
    <div class="c-switch-container">
      <input type="checkbox" class="c-switch" id="checkbox5">
      <label for="checkbox5"></label>
    </div>
  </li>
  <li class="c-list__period">
    <span class="icon-monthly"></span>
    <div class="c-list__period--data">
      <label class="c-list__period--label">Mensual</label>
      Este reporte se envirá el primer día de cada mes.
    </div>
    <div class="c-switch-container">
      <input type="checkbox" class="c-switch" id="checkbox6">
      <label for="checkbox6"></label>
    </div>
  </li>
</ul>

.c-list__report-resume

scss

.c-list {
  @include element('report-resume') {
    @include use-font('caption', 'regular');
    color: use-color('grey', 'light');
    display: flex;
    margin-right: 8px;
    white-space: nowrap;
    width: auto;

    @include modifier('label') {
      @include use-font('caption', 'regular');
      color: use-color('grey');
      margin-right: 4px;
      text-transform: capitalize;
      width: auto;
    }
  }
}

Example

html

<ul class="c-list">
  <li class="c-list__report-resume">
    <label class="c-list__report-resume--label">
      Enviado:
    </label>
    01/05/2020
  </li>
  
  <li class="c-list__report-resume">
    <label class="c-list__report-resume--label">
      Tamaño:
    </label>
    27.6 KB
  </li>
  
  <li class="c-list__report-resume">
    <label class="c-list__report-resume--label">
      Periodo:
    </label>
    Mensual
  </li>
</ul>

.c-list__dot-simple

scss

.c-list {
  @include element('dot-simple') {
    @include use-font('caption');
    color: use-color('grey', 'light');
    padding-left: 20px;
    position: relative;
    
    &::before {
      background-color: use-color('event', 'info');
      border-radius: 50%;
      content: '';
      height: 6px;
      left: 0;
      position: absolute;
      top: 8px;
      width: 6px;
    }
  }
}

Example

html

<ul class="c-list">
  <li class="c-list__dot-simple">
    Bienvenidos
  </li>
  <li class="c-list__dot-simple">
    Fidelización
  </li>
  <li class="c-list__dot-simple">
    Campaña de internacionalización
  </li>
  <li class="c-list__dot-simple">
    Campaña de ejemplo 1
  </li>
  <li class="c-list__dot-simple">
    Campaña de ejemplo 2
  </li>
  <li class="c-list__dot-simple">
    Campaña de ejemplo 3
  </li>
</ul>

.c-list__schedule-item

scss

.c-list {
  @include element('schedule-item') {
    @include use-font('body');
    border: solid 1px transparent;
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;

    strong {
      @include use-font('body', 'semibold');
    }

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

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

    &:hover {
      border: solid 1px use-color('grey', light-iii);
      cursor: pointer;
    }
  }
}

Elemento creado para ser usado en el tag li dentro de una lista(ul) con la clase .c-list.

Se puede usar junto a la clase .selected para destacar el elemento seleccionado.

Example

html

<ul class="c-list">
  <li class="c-list__schedule-item selected">
    <span>Mañana <strong>AM</strong></span>
    <span>Jueves 8:00</span>
  </li>
  
  <li class="c-list__schedule-item">
    <span>Mañana <strong>PM</strong></span>
    <span>Jueves 13:00</span>
  </li>
  
  <li class="c-list__schedule-item">
    <span>Próxima semana <strong>AM</strong></span>
    <span>Lunes 8:00</span>
  </li>
</ul>