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

Estilos base para los componentes de lista.

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

Example

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

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__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 4px;

    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>