Report Resume | chattigo-webkit Documentation

.c-report-resume

scss

.c-report-resume {
  align-items: center;
  border-bottom: solid 1px use-color('grey', 'light-i');
  display: flex;
  flex-wrap: wrap;
  padding: 8px;

  @include media-breakpoint-up('tablet') {
    flex-wrap: nowrap;
  }

  // elements
  @include element('icon') {
    align-self: flex-start;
    color: use-color('grey', 'light');
    font-size: 22px;
    margin-top: 8px;
    order: 1;
    width: 22px;
  }

  @include element('data') {
    margin-left: 4px;
    margin-right: 8px;
    max-width: 280px;
    order: 2;
    width: 78%;

    @include media-breakpoint-up('tablet') {
      margin-left: 16px;
      margin-right: 20px;
    }

    // modifiers
    @include modifier('label') {
      @include use-font('body-alt', 'semibold');
      color: use-color('grey', 'light');
      width: 100%;

      @include if-block-has-modifier('c-report-resume','new') {
        color: use-color('grey');
      }
    }

    // overrides
    .c-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-bottom: 8px;
    }
  }

  // modifiers
  @include modifier('new') {
    background-color: transparentize($color: use-color('secondary', 'light-alt'), $amount: 0.8);

    [class^='icon-'],
    [class*='icon-'] {
      color: use-color('secondary');
    }
  }

  // overrides
  .app-c-list-channels {
    margin-top: 8px;
    order: 4;
    width: 100%;

    @include media-breakpoint-up('tablet') {
      margin-right: auto;
      margin-top: 0;
      order: 3;
    }
  }

  .c-action-link {
    align-self: flex-start;
    border-bottom: 0;
    margin-left: auto;
    margin-top: 8px;
    order: 3;
    text-decoration: none;
    width: 22px;

    @include media-breakpoint-up('tablet') {
      order: 4;
    }

    &:hover {
      [class^='icon-'],
      [class*='icon-'] {
        color: use-color('secondary');
      }
    }
  }
}

Example

html

<li class="c-report-resume">
  <span class="c-report-resume__icon icon-reports-sheet"></span>
  
  <div class="c-report-resume__data">
    <label class="c-report-resume__data--label">
      Resumen de los Chats
    </label>

    <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>
  </div>

  <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
    <li class="app-c-list-channels__item u-tag-wicon--campaign">Campaña</li>
    <li class="app-c-list-channels__item u-tag-wicon--campaign">Campaña prueba 2</li>
    <li class="app-c-list-channels__item u-tag-wicon--campaign">Campaña prueba 3 Campaña prueba 3</li>
    <li class="app-c-list-channels__item u-tag-wicon--campaign u-cursor--pointer">
      +20...
    </li>
  </ul>

  <a class="c-action-link">
    <span class="c-report-resume__icon icon-download"></span>
  </a>
</li>

<li class="c-report-resume c-report-resume--new">
  <span class="c-report-resume__icon icon-reports-sheet"></span>
  
  <div class="c-report-resume__data">
    <label class="c-report-resume__data--label">
      Resumen de los Chats
    </label>

    <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>
  </div>

  <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
    <li class="app-c-list-channels__item u-tag-wicon--campaign">Campaña</li>
    <li class="app-c-list-channels__item u-tag-wicon--campaign">Campaña prueba 2</li>
    <li class="app-c-list-channels__item u-tag-wicon--campaign">Campaña prueba 3 Campaña prueba 3</li>
    <li class="app-c-list-channels__item u-tag-wicon--campaign u-cursor--pointer">
      +20...
    </li>
  </ul>

  <a class="c-action-link">
    <span class="c-report-resume__icon icon-download"></span>
  </a>
</li>