Dropdowns | chattigo-webkit Documentation

.c-report-dropdown

scss

.c-report-dropdown {
  border: solid 1px use-color('grey', 'light-i');
  border-radius: 4px;
  padding: 8px;

  @include element('item') {
    border-bottom: solid 1px use-color('grey', 'light-i');
    color: use-color('base', 'black');
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;

    @include modifier('icon') {
      color: use-color('grey', 'light');
      font-size: 22px;
      margin-right: 16px;

      @include if-block-has-modifier('c-report-dropdown__item', 'open') {
        color: use-color('secondary');
      }
    }

    @include modifier('icon-arrow') {
      color: use-color('grey', 'light');
      font-size: 16px;
      margin-right: 0;
    }

    &:nth-last-child(1) {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }

  @include element('item-header') {
    align-items: center;
    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;
    }

    @include if-block-has-modifier('c-report-dropdown__item', 'configured') {
      .icon-reports-sheet {
        display: none;
      }

      .icon-reports-sheet-check {
        color: use-color('secondary');
        display: block;
      }
    }

    @include if-block-has-modifier('c-report-dropdown__item', 'open') {
      background-color: transparentize($color: use-color('secondary', 'light-alt'), $amount: 0.8);
      border-radius: 4px;
      margin: 0;
      padding: 8px 16px;
      
      // overrides
      .icon-arrow-up {
        display: block;
      }

      .icon-arrow-down {
        display: none;
      }
    }

    // overrides
    .icon-arrow-up {
      display: none;
    }

    .icon-reports-sheet {
      display: auto;
    }
    
    .icon-reports-sheet-check {
      display: none;
    }
  }

  @include element('item-content') {
    display: none;
    flex-direction: column;
    margin-bottom: 16px;
    width: 100%;

    @include if-block-has-modifier('c-report-dropdown__item', 'open') {
      display: flex;
    }

    // overrides
    .c-section-card {
      &__header {
        margin: 16px 8px;
        width: auto;

        &--list {
          margin: 16px 8px 0;
        }

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

      &__content {
        margin: 0 8px;
        width: auto;
      }
    }
  }
}

c-report-dropdown es el contenedor de los items con opción de contenido dropdown para la configuración de reportes programados.

Elements

c-report-dropdown__item: elemento contenedor de iconos y:
- c-report-dropdown__item-header: clickeable para mostrar contenido.
- c-report-dropdown__item-content: contenido que se muestra solo cuando la clase modificadora c-report-dropdown__item–open esta presente en el contenedor padre.

Item Modifiers

c-report-dropdown__item--open: modificador para mostrar contenido del dropdown.
c-report-dropdown__item--configured: modificador para items con una configuración activa.
c-report-dropdown__item-header--data: modificador para la contenido(texto) del header.
c-report-dropdown__item-header--label: modificador para el label del header.

Example

html

<div class="c-report-dropdown">
  <div class="c-report-dropdown__item c-report-dropdown__item--open"> 
    <div class="c-report-dropdown__item-header"> 
      <span class="c-report-dropdown__item--icon icon-reports-sheet"></span>
      <span class="c-report-dropdown__item--icon icon-reports-sheet-check"></span>

      <div class="c-report-dropdown__item-header--data">
        <label class="c-report-dropdown__item-header--label">
          Resumen de los chats
        </label>
        Solo mail
      </div>
    
      <span class="c-report-dropdown__item--icon-arrow icon-arrow-up"></span>
      <span class="c-report-dropdown__item--icon-arrow icon-arrow-down"></span>
    </div>

    <div class="c-report-dropdown__item-content">
      <!-- some content -->
      <div class="c-section-card__header c-section-card__header--list">
        <label class="c-section-card__header--label">
          Dropdown Option Header
        </label>
      </div>
    </div>
  </div>

  <div class="c-report-dropdown__item c-report-dropdown__item--configured"> 
    <div class="c-report-dropdown__item-header"> 
      <span class="c-report-dropdown__item--icon icon-reports-sheet"></span>
      <span class="c-report-dropdown__item--icon icon-reports-sheet-check"></span>

      <div class="c-report-dropdown__item-header--data">
        <label class="c-report-dropdown__item-header--label">
          Resumen de los chats
        </label>
        Solo mail
      </div>
    
      <span class="c-report-dropdown__item--icon-arrow icon-arrow-up"></span>
      <span class="c-report-dropdown__item--icon-arrow icon-arrow-down"></span>
    </div>

    <div class="c-report-dropdown__item-content">
      <!-- some content -->
      <div class="c-section-card__header c-section-card__header--list">
        <label class="c-section-card__header--label">
          Some Content
        </label>
      </div>
    </div>
  </div>

  <div class="c-report-dropdown__item"> 
    <div class="c-report-dropdown__item-header"> 
      <span class="c-report-dropdown__item--icon icon-reports-sheet"></span>
      <span class="c-report-dropdown__item--icon icon-reports-sheet-check"></span>

      <div class="c-report-dropdown__item-header--data">
        <label class="c-report-dropdown__item-header--label">
          Resumen de los chats
        </label>
        Solo mail
      </div>
    
      <span class="c-report-dropdown__item--icon-arrow icon-arrow-up"></span>
      <span class="c-report-dropdown__item--icon-arrow icon-arrow-down"></span>
    </div>

    <div class="c-report-dropdown__item-content">
      <!-- some content -->
      <div class="c-section-card__header c-section-card__header--list">
        <label class="c-section-card__header--label">
          Some Content
        </label>
      </div>
    </div>
  </div>
</div>