.c-data-card

scss
.c-data-card {
  background-color: use-color(base, true-white);
  border: 1px solid use-color('grey', light-i);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  width: auto;

  @include element('channelimage') {
    @include modifier('small') {
      height: 44px;
      margin-right: 16px;
      width: 44px;
    }
  }

  @include element('section') {
    align-items: center;
    margin: 8px 16px;

    @include modifier('header') {
      @include use-font('body-alt', 'bold');
      display: block;
      height: 40px;
      overflow: hidden;
      padding: 0 5px;

      @include if-block-has-modifier('c-data-card', 'note') {
        height: auto;
      }
    }

    @include modifier('content') {
      @include use-font('body-alt');
      box-sizing: border-box;
      height: 80px;
      margin-bottom: 16px;
      overflow: hidden;
      padding: 0 5px;
      padding-bottom: 0;
      text-align: justify;

      @include if-block-has-modifier('c-data-card', 'note') {
        @include use-font('caption');
        height: 33px;
        line-height: 16px;
        margin: 0 16px 8px;
        overflow: hidden;
      }

      @include if-block-has-modifier('c-data-card', 'note-full-message') {
        height: auto;
      }

      @include if-block-has-modifier('c-data-card', 'new-note') {
        height: auto;

        // overrides
        .c-input {
          @include use-font('body-alt');
          border: 0;
          margin-bottom: 4px;
        }
      }
    }

    @include modifier('actions') {
      @include use-font('caption');
      background-color: use-color('grey', 'light-iii');
      border-bottom: 1px solid use-color('grey', light-i);
      border-top: 1px solid use-color('grey', light-i);
      display: flex;
      height: 24px;
      justify-content: space-between;
      margin: 0;
      padding: 8px 16px;

      @include if-block-has-modifier('c-transfer-card', 'pending') {
        color: use-color('grey', 'light-alt');
      }

      @include if-block-has-modifier('c-data-card', 'note') {
        background-color: use-color('blues');
        border-bottom: 1px solid use-color('blues');
        border-top: 1px solid use-color('blues');
        color: use-color('base', 'white');
        padding: 4px 16px;
      }

      @include if-block-has-modifier('c-data-card', 'note-closed') {
        background-color: use-color('blues', 'light-alt');
        border-bottom: 1px solid use-color('blues', 'light-alt');
        border-top: 1px solid use-color('blues', 'light-alt');
      }

      &:last-child {
        border-bottom: 0;
        border-radius: 0 0 6px 6px;
      }

      // overrides
      .c-switch {
        + label {
          width: 40px;
        }
      }
    }
  }

  @include element('options') {
    display: flex;

    // overrides
    .c-action-link {
      @include use-font('title');
      border-bottom: 0;
      margin-right: 32px;

      @include if-block-has-modifier('c-data-card', 'note') {
        @include use-font('subheading');
        margin-right: 16px;

        [class^='icon-'],
        [class*=' icon-'] {
          color: use-color('base', 'white');
          display: flex;
        }
      }

      [class^='icon-'],
      [class*=' icon-'] {
        color: use-color('grey', 'light');
        display: flex;
      }

      &:last-child {
        margin-right: 0;
      }

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

  @include modifier('selected') {
    border: solid 1px use-color('event', 'success');
  }

  @include modifier('note') {
    border: solid 1px use-color('blues');
  }

  @include modifier('note-closed') {
    border: solid 1px use-color('blues', 'light-alt');
  }


  //TODO: fix class naming
  &-channelimage {
    display: block;
    height: inherit;
    margin: auto;
  }

  &-channelLabel {
    font-family: 'Open Sans';
    font-size: larger;
    font-weight: 600;
    margin: auto;
    text-align: center;
  }
}

Card para el contenido de datos.

  • c-data-card
    • c-data-card__section
      • c-data-card__section–header
      • c-data-card__section–content
      • c-data-card__section–actions

Modifiers

  • c-data-card--note: modificador padre para todos los modificadores de note
  • c-data-card--note-closed: colores para chat cerrados
  • c-data-card--note-full-message: display full message of the card.

Examples

html
<div class="c-data-card">
  <div class="c-data-card__section c-data-card__section--header">
    ¿Qué es el ChattigoBot?
  </div>
  
  <div class="c-data-card__section c-data-card__section--content">
    Es un robot con inteligencia artificial que atiende a clientes de forma automatizada con un conocimineto inicial y aprendizaje permanente.
  </div>
  
  
  <div class="c-data-card__section c-data-card__section--actions">
    <input type="checkbox" class="c-switch" id="first">
    <label for="first"></label>
    
    <div class="c-data-card__options">
      <a class="c-action-link preview">
        <span class="icon-attachment"></span>
      </a>
      
      <a class="c-action-link">
        <span class="icon-trash"></span>
      </a>
      
      <a class="c-action-link">
        <span class="icon-edit"></span>
      </a>
    </div>
  </div>
</div>
html note
<div class="c-data-card c-data-card--note">
  <div class="c-data-card__section c-data-card__section--header">
    Agente John Doe:
  </div>
  
  <div class="c-data-card__section c-data-card__section--content">
    Lorem ipsum dolor sit amet, probo paulo vocibus te mei, eu eum feugait Lorem ipsum dolor sit amet, probo paulo vocibus te mei, eu eum feugait 
  </div>
  
  
  <div class="c-data-card__section c-data-card__section--actions">
    <span class="u-text__caption u-text--bold">
      09 Ago 2020, 09:00
    </span>
    
    <div class="c-data-card__options">
      <a class="c-action-link">
        <span class="icon-trash"></span>
      </a>
      
      <a class="c-action-link">
        <span class="icon-notes"></span>
      </a>
    </div>
  </div>
</div>
html note - chat closed
<div class="c-data-card c-data-card--note c-data-card--note-closed">
  <div class="c-data-card__section c-data-card__section--header">
    Agente John Doe:
  </div>
  
  <div class="c-data-card__section c-data-card__section--content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam scelerisque iaculis. Pellentesque accumsan vel felis ut laoreet. Curabitur convallis, arcu eu finibus dapibus, mauris felis pellentesque neque, eu lacinia dolor justo eu nunc. Proin aliquet, lorem sed condimentum ultricies, quam nisl pulvinar tortor, non accumsan mi elit quis erat. Maecenas euismod massa eu nunc facilisis, ac tempus justo ultrices. Nulla fringilla, ex interdum finibus pretium, mi augue condimentum urna, quis maximus ex massa sed purus. Quisque consectetur ipsum sed rhoncus semper.
  </div>
  
  
  <div class="c-data-card__section c-data-card__section--actions">
    <span class="u-text__caption u-text--bold">
      09 Ago 2020, 09:00
    </span>
    
    <div class="c-data-card__options">
      <a class="c-action-link">
        <span class="icon-arrow-down"></span>
      </a>

      <a class="c-action-link">
        <span class="icon-attachment"></span>
      </a>

      <a class="c-action-link">
        <span class="icon-history"></span>
      </a>
      
      <a class="c-action-link">
        <span class="icon-notes"></span>
      </a>
    </div>
  </div>
</div>
html note - chat closed - full message
<div class="c-data-card c-data-card--note c-data-card--note-closed c-data-card--note-full-message">
  <div class="c-data-card__section c-data-card__section--header">
    Agente John Doe:
  </div>
  
  <div class="c-data-card__section c-data-card__section--content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam scelerisque iaculis. Pellentesque accumsan vel felis ut laoreet. Curabitur convallis, arcu eu finibus dapibus, mauris felis pellentesque neque, eu lacinia dolor justo eu nunc. Proin aliquet, lorem sed condimentum ultricies, quam nisl pulvinar tortor, non accumsan mi elit quis erat. Maecenas euismod massa eu nunc facilisis, ac tempus justo ultrices. Nulla fringilla, ex interdum finibus pretium, mi augue condimentum urna, quis maximus ex massa sed purus. Quisque consectetur ipsum sed rhoncus semper.
  </div>
  
  
  <div class="c-data-card__section c-data-card__section--actions">
    <span class="u-text__caption u-text--bold">
      09 Ago 2020, 09:00
    </span>
    
    <div class="c-data-card__options">
      <a class="c-action-link">
        <span class="icon-arrow-up"></span>
      </a>

      <a class="c-action-link">
        <span class="icon-attachment"></span>
      </a>

      <a class="c-action-link">
        <span class="icon-history"></span>
      </a>
      
      <a class="c-action-link">
        <span class="icon-notes"></span>
      </a>
    </div>
  </div>
</div>
html new note
<div class="u-example-padding">

<div class="c-data-card c-data-card--note c-data-card--new-note">
  <div class="c-data-card__section c-data-card__section--header">
    Agente John Doe:
  </div>
  
  <div class="c-data-card__section c-data-card__section--content">
    <textarea class="c-input" placeholder="Escribe tu nota aquí"></textarea>
    
    <input type="file" class="c-input--file" id="input-file">
    
    <label class="c-file-drop-area c-file-drop-area--lite" for="input-file">
      <span class="icon-upload-cloud"></span>
      <div class="c-file-drop-area__message">
        <strong>
          Arrastra, suelta o selecciona un <a class="c-action-link">archivo</a>.
        </strong>
      </div>
    </label>
  </div>
  
  
  <div class="c-data-card__section c-data-card__section--actions">
    <span class="u-text__caption u-text--bold">
      09 Ago 2020, 09:00
    </span>
    
    <div class="c-data-card__options">
      <a class="c-action-link">
        <span class="icon-trash"></span>
      </a>
      
      <a class="c-action-link">
        <span class="icon-notes"></span>
      </a>
    </div>
  </div>
</div>

</div>

.c-averages-card

scss
.c-card {
  @include modifier('averages') {
    align-items: stretch;
    background-color: #fafafa;
    box-shadow: $box-shadow-card-lvl-1;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;

    @include element('left') {
      max-width: 28%;
      width: 100%;
    }

    @include element('item') {
      border-right: 1px solid use-color('grey', 'light-i');
      height: 100%;
      padding-right: 20px;
      text-align: center;
      text-transform: uppercase;
      width: 100%;

      @include element('icon') {
        display: none;

        @include modifier('active') {
          display: block;
        }

        > img {
          height: 60px;
        }

        span {
          filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.26));
          font-size: 32px;
        }
      }

      @include element('number') {
        @include use-font('h2', 'bold');
        margin-bottom: 8px;

        @include modifier('average') {
          @include use-font('title', 'bold');
        }
      }

      @include element('text') {
        @include use-font('caption', 'bold');
        color: use-color('grey', 'light');
        margin: 0;

        @include modifier('link') {
          color: use-color('grey', 'light');
          display: block;
        }
      }

      @include modifier('right') {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        > img {
          height: 40px;
        }

        &:last-of-type {
          border: 0;
          padding-right: 0;
        }
      }

      @include modifier('left') {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    @include element('right') {
      align-items: stretch;
      display: flex;
      justify-content: space-between;
      max-width: 72%;
      padding: 0 20px;
      padding-right: 0;
      width: 100%;
    }

    @include element('bar-wrapper') {
      display: flex;
      justify-content: center;
      margin-top: 12px;
      width: 100%;
    }

    @include element('bar') {
      background-color: use-color('grey', 'light-i');
      border-radius: 4px;
      height: 12px;
      max-width: 72px;
      width: 100%;

      @include element('progress') {
        background-color: use-color('grey', 'light');
        border-radius: 4px;
        height: 100%;
        width: 0;

        @include modifier('positive') {
          width: 32%;
        }

        @include modifier('neutral') {
          width: 20%;
        }

        @include modifier('negative') {
          width: 48%;
        }
      }
    }

  }

  .icon-satisfied {
    color: use-color('event', 'success');
  }

  .icon-neutral {
    color: use-color('event', 'warning');
  }

  .icon-unsatisfied {
    color: use-color('event', 'error');
  }
}

Componente creado para mostrar los porcentajes de la experiencia emocional.

Para activar un ícono en la prte izquierda (El promedio) se ecesita del modificador c-card--averages__item__icon--active en el wrapper (c-card--averages__item__icon).

Example

html
<div class="c-card c-card--averages">
  <div class="c-card--averages__left">
    <div class="c-card--averages__item c-card--averages__item--left">
      <div class="c-card--averages__item__icon c-card--averages__item__icon--active">
        <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/satisfied.png" alt="Satisfecho">
      </div>
      <div class="c-card--averages__item__icon">
        <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/neutral.png" alt="Neutral">
      </div>
      <div class="c-card--averages__item__icon">
        <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/unsatisfied.png" alt="Insatisfecho">
      </div>
      <span class="c-card--averages__item__number">1.634</span>
      <p class="c-card--averages__item__text">${{locales.stats-cards.total-closed-chats}}$</p>
    </div>
  </div>
  <div class="c-card--averages__right">
    <div class="c-card--averages__item c-card--averages__item--right">
      <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/satisfied.png" alt="Satisfecho">
      <span class="c-card--averages__item__number c-card--averages__item__number--average">32 <span>%</span></span>
      <a class=" c-card--averages__item__text c-card--averages__item__text--link" href="#">${{locales.emoctional-experience.potitive}}$</a>
      <div class="c-card--averages__bar-wrapper">
        <div class="c-card--averages__bar">
          <div class="c-card--averages__bar__progress c-card--averages__bar__progress--positive"></div>
        </div>
      </div>
    </div>
    <div class="c-card--averages__item c-card--averages__item--right">
      <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/neutral.png" alt="Neutral">
      <span class="c-card--averages__item__number c-card--averages__item__number--average">20 <span>%</span></span>
      <a class=" c-card--averages__item__text c-card--averages__item__text--link" href="#">${{locales.emoctional-experience.neutral}}$</a>
      <div class="c-card--averages__bar-wrapper">
        <div class="c-card--averages__bar">
          <div class="c-card--averages__bar__progress c-card--averages__bar__progress--neutral"></div>
        </div>
      </div>
    </div>
    <div class="c-card--averages__item c-card--averages__item--right">
      <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/unsatisfied.png" alt="Insatisfecho">
      <span class="c-card--averages__item__number c-card--averages__item__number--average">48 <span>%</span></span>
      <a class=" c-card--averages__item__text c-card--averages__item__text--link" href="#">${{locales.emoctional-experience.negative}}$</a>
      <div class="c-card--averages__bar-wrapper">
        <div class="c-card--averages__bar">
          <div class="c-card--averages__bar__progress c-card--averages__bar__progress--negative"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-agent-client-card

scss
.c-card {
  @include modifier('agent-client') {
    background-color: use-color('base', 'true-white');
    border: 1px solid #e6e6e6;
    border-radius: 6px;

    @include element('subcard-flex-wrapper') {
      border-bottom: 1px solid #e6e6ee;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 16px 16px 10px;

      @include modifier('client-first') {
        flex-direction: column-reverse;
      }
    }

    @include element('subcard-wrapper') {
      align-items: center;
      display: flex;
      margin-bottom: 8px;

      @include element('subcard') {
        align-items: center;
        border-radius: 6px;
        box-shadow: $box-shadow-card-lvl-1;
        display: flex;
        justify-content: space-between;
        padding: 8px;
        width: 100%;

        > h3 {
          @include use-font('body-alt', 'regular');
          color: use-color('grey', 'base');
          margin: 0;
        }
      }

      @include modifier('agent') {
        margin-right: 50px;
      }

      @include modifier('client') {
        margin-left: 50px;
      }

      > img {
        margin-right: 10px;
      }
    }

    @include element('emotion-level-card') {
      align-items: center;
      border-radius: 4px;
      box-shadow: $box-shadow-input-focus;
      display: flex;
      min-width: 76px;
      padding-left: 20px;
      position: relative;

      > span {
        font-size: 28px;
        transform: translateX(-50%);
      }

      > img {
        height: 34px;
        left: 0;
        position: absolute;
        top: 0;
        transform: translate(-50%, -14%);
      }

      > p {
        @include use-font('caption', 'semibold');
        color: use-color('grey', 'light');
        margin: 0;
      }
    }

    @include element('avatar') {
      border-radius: 50%;
      height: 24px;
      margin-left: 10px;
      max-width: 24px;
      min-width: 24px;
      position: relative;

      @include element('status') {
        height: 8px;
        left: inherit;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateY(-20%);
        width: 8px;
      }

      > img {
        border-radius: 50%;
        height: 100%;
        width: 100%;
      }
    }

    @include element('info-card-wrapper') {
      background-color: use-color('grey', 'light-iii');
      padding: 10px 0;
      text-align: center;
    }

    @include element('info-card') {

      @include element('info') {
        display: flex;
        justify-content: center;
      }

      > p {
        @include use-font('caption', 'regular');
        margin: 0;
        margin-bottom: 4px;
      }
    }
  }
}

Componente creado para mostrar el agente y el cliente en una misma card.

Para invertir el orden en el que se muestran el agente y el cliente hay que utilizar el modificador c-card--agent-client__subcard-flex-wrapper--client-first en la clase c-card--agent-client__subcard-flex-wrapper.

Example

html
<div class="c-card c-card--agent-client">
  <div class="c-card--agent-client__subcard-flex-wrapper">
    <div class="c-card--agent-client__subcard-wrapper c-card--agent-client__subcard-wrapper--agent">
    <img src="https://cdn.chattigo.com/assets/img/channels/messenger-channel.svg" alt="Message">
    <div class="c-card--agent-client__subcard-wrapper__subcard">
      <h3>Angela Rodriguez</h3>
      <div class="c-card--agent-client__emotion-level-card">
        <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/satisfied.png" alt="Satisfecho">
        <p>Satisfecho</p>
      </div>
    </div>
    </div>
    <div class="c-card--agent-client__subcard-wrapper c-card--agent-client__subcard-wrapper--client">
    <div class="c-card--agent-client__subcard-wrapper__subcard">
      <h3>Josefina Squella</h3>
      <div class="c-card--agent-client__emotion-level-card">
        <img src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/satisfied-grey.png" alt="Satisfecho">
        <p>Satisfecho</p>
      </div>
    </div>
    <div class="c-card--agent-client__avatar">
      <img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png">
      <span class="c-transfer-card__status-badge c-card--agent-client__avatar__status c-transfer-card__status-badge--offline"></span>
    </div>
    </div>
  </div>
  <div class="c-card--agent-client__info-card-wrapper">
    <div class="c-card--agent-client__info-card">
      <p>Chat cerrado el <span>Lunes</span><span>03</span><span>Ago</span><span>2020</span>, <span>10</span>hrs</p>
      <div class="c-card--agent-client__info-card__info">
        <span class="c-transfer-card-record__data-info" data-tippy-placement="bottom" data-tippy-content="/CONSULTA/Informacion general/Mesa de Ayuda ( Recuperacion de contrasena, activacion WIFI, otros)">
          <span class="c-transfer-card-record__icon-chat icon-chat-close"></span>
          <span>¿Por qué se cerró este chat?</span>
          <span class="c-transfer-card-record__icon-points icon-menu-options"></span>
        </span>
      </div>
    </div>
  </div>
</div>

.c-charts-card

scss
.c-card {
  @include modifier('charts') {

    @include element('wrapper') {
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding: 0 30px;
      width: 100%;
    }

    @include element('chart-wrapper') {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;

      @include element('chart') {
        display: flex;
        height: 80px;
        justify-content: center;
        margin-bottom: 4px;
        width: 100%;
      }

      @include element('caption-wrapper') {
        align-items: center;
        color: use-color('grey', 'light');
        display: flex;
        justify-content: space-between;

        > span {
          margin-right: 8px;
        }
      }

      @include modifier('large') {
        min-width: 158px;
      }

      h3 {
        @include use-font('caption', 'bold');
        color: use-color('grey', 'light');
        margin: 0;
        text-transform: uppercase;
      }
    }

    @include element('gauge-chart') {
      box-sizing: border-box;
      height: 100%;
      width: 180px;
    }

    @include element('height-chart') {
      background-color: use-color('grey', 'light-i');
      border-radius: 16px;
      box-sizing: border-box;
      height: 100%;
      padding: 8px 0;
      width: 30px;

      @include element('wrapper') {
        height: 100%;
        position: relative;
        width: 100%;
      }

      @include element('levels') {
        background: linear-gradient(use-color('event', 'error'), use-color('event', 'warning'), use-color('event', 'success'));
        border-radius: 4px;
        height: 100%;
        margin: 0 auto;
        width: 8px;
      }

      @include element('position') {
        background-color: #636364;
        height: 2px;
        position: absolute;
        top: 80%;
        width: 100%;
      }
    }

    @include element('gauge') {
      max-width: 208px;
      width: 100%;

      @include element('body') {
        background: linear-gradient(90deg, use-color('event', 'error'), use-color('event', 'warning'), use-color('event', 'success'));
        border-left: 12px solid use-color('grey', 'light-i');
        border-right: 12px solid use-color('grey', 'light-i');
        border-top: 12px solid use-color('grey', 'light-i');
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;
        box-sizing: border-box;
        height: 100%;
        position: relative;
      }

      @include element('cover') {
        background-color: #fafafa;
        border-left: 12px solid use-color('grey', 'light-i');
        border-right: 12px solid use-color('grey', 'light-i');
        border-top: 12px solid use-color('grey', 'light-i');
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;
        bottom: 0;
        height: 70%;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 70%;

        @include element('needle-wrapper') {
          height: 100%;
          position: relative;
          width: 100%;
        }

        @include element('needle') {
          bottom: 0;
          left: 50%;
          position: absolute;
          transform: translateX(-50%) rotate(0deg);
          transform-origin: center bottom;
        }
      }
    }
  }
  /// Card para informar el plan actual del cliente.
  ///
  /// Los modificadores `--business`, `--corporate`, `--startup` son únicamente para diferenciar los planes. No contienen estilos agregados.
  /// @group c-cards
  /// @name .c-plan-card
  /// @example html
  ///     <div class="c-plan-card c-plan-card--business">
  ///       <div class="c-plan-card__title">
  ///         <h2>Business / Coroporativo</h2>
  ///       </div>
  ///       <div class="c-plan-card__info">
  ///         <p>"Optimiza la relación digital con tus clientes"</p>
  ///       </div>
  ///       <div class="c-plan-card__plan-info">
  ///         <h3>Prueba gratis por 14 dias</h3>
  ///       </div>
  ///       <div class="c-plan-card__img-wrapper">
  ///         <img src="https://feature-ux-607--chattigo-webkit.netlify.app/assets/img/illustrations/maleta.svg" alt="Plan Image">
  ///       </div>
  ///       <div class="c-plan-card__btn-wrapper">
  ///         <input type="button" value="Suscribirme">
  ///       </div>
  ///     </div>
  ///     <div class="c-plan-card c-plan-card--corporate">
  ///       <div class="c-plan-card__title">
  ///         <h2>Corporate / Coroporativo</h2>
  ///       </div>
  ///       <div class="c-plan-card__info">
  ///         <p>"Optimiza la relación digital con tus clientes"</p>
  ///       </div>
  ///       <div class="c-plan-card__plan-info">
  ///         <h3>Prueba gratis por 14 dias</h3>
  ///       </div>
  ///       <div class="c-plan-card__img-wrapper">
  ///         <img src="https://feature-ux-607--chattigo-webkit.netlify.app/assets/img/illustrations/edificio.svg" alt="Plan Image">
  ///       </div>
  ///       <div class="c-plan-card__btn-wrapper">
  ///         <input type="button" value="Suscribirme">
  ///       </div>
  ///     </div>
  ///     <div class="c-plan-card c-plan-card--startup">
  ///       <div class="c-plan-card__title">
  ///         <h2>Startup / Negocio</h2>
  ///       </div>
  ///       <div class="c-plan-card__info">
  ///         <p>"Optimiza la relación digital con tus clientes"</p>
  ///       </div>
  ///       <div class="c-plan-card__plan-info">
  ///         <h3>Prueba gratis por 14 dias</h3>
  ///       </div>
  ///       <div class="c-plan-card__img-wrapper">
  ///         <img src="https://feature-ux-607--chattigo-webkit.netlify.app/assets/img/illustrations/cohete.svg" alt="Plan Image">
  ///       </div>
  ///       <div class="c-plan-card__btn-wrapper">
  ///         <input type="button" value="Suscribirme">
  ///       </div>
  ///     </div>
  .c-plan-card {
    border-radius: 8px;
    box-shadow: $box-shadow-card-lvl-2;
    margin-bottom: 50px;
    max-width: 260px;
    text-align: center;
    width: 100%;

    @include element('title') {
      margin-bottom: 4px;
      padding: 18px 12px;

      h2 {
        @include use-font('body-alt', 'bold');
        margin: 0;
        text-transform: uppercase;
      }
    }

    @include element('info') {
      color: use-color('grey', 'light');
      font-weight: 400;
      margin-bottom: 8px;
      padding: 0 12px;

      p {
        @include use-font('body-alt', 'regular');
        margin: 0;
      }
    }

    @include element('plan-info') {
      color: use-color('primary', 'base');
      margin-bottom: 12px;
      padding: 0 12px;

      h3 {
        @include use-font('body-alt', 'bold');
        margin: 0;
        text-transform: uppercase;
      }
    }

    @include element('img-wrapper') {
      margin-bottom: 32px;
      padding: 0 12px;

      img {
        height: 56px;
      }
    }

    @include element('btn-wrapper') {
      background-color: use-color('grey', 'light-alt-i');
      padding: 28px 0;

      input {
        @include use-font('body-alt', 'regular');
        border: 1px solid use-color('secondary', 'base');
        border-radius: 8px;
        color: use-color('secondary', 'base');
        cursor: pointer;
        padding: 10px 20px;
      }
    }

  }
}

Componentes creados para que sean graficos agnosticos al framework en el que se utilizan.

  • En el Height Chart se requiere modficar el valor top del componente c-card--charts__height-chart__position. El rango es del 0 al 100.
  • En el Gauge Chart se requiere modificar el valor transform del componente c-card--charts__gauge__cover__needle para rotar la aguja. Los valores deberían ser desde los -90deg que representa el mínimo hasta los 90deg que representa el máximo.
  • En el Gauge Chart para modificar el valor se tiene que escribir de la siguiente forma: transform: translateX(-50%) rotate(80deg); por ejemplo. Siempre manteniendo el translateX(-50%).

Examples

html
<div class="c-card c-card--averages">
  <div class="c-card--charts__wrapper">
    <div class="c-card--charts__chart-wrapper c-card--charts__chart-wrapper--large">
      <div class="c-card--charts__chart-wrapper__chart">
        <div class="c-card--charts__gauge">
          <div class="c-card--charts__gauge__body">
            <div class="c-card--charts__gauge__cover">
              <div class="c-card--charts__gauge__cover__needle-wrapper">
                <img class="c-card--charts__gauge__cover__needle" src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/needle.svg" alt="Needle">
              </div>
            </div>
          </div>
        </div>
      </div>
      <h3>Nivel emocional</h3>
    </div>
    <div class="c-card--charts__chart-wrapper">
      <div class="c-card--charts__chart-wrapper__chart">
        <div class="c-card--charts__height-chart">
          <div class="c-card--charts__height-chart__wrapper">
            <div class="c-card--charts__height-chart__levels"></div>
            <div class="c-card--charts__height-chart__position"></div>
          </div>
        </div>
      </div>
      <div class="c-card--charts__chart-wrapper__caption-wrapper">
        <span class="icon-group"></span>
        <h3>Usuarios</h3>
      </div>
    </div>
    <div class="c-card--charts__chart-wrapper">
      <div class="c-card--charts__chart-wrapper__chart">
        <div class="c-card--charts__height-chart">
          <div class="c-card--charts__height-chart__wrapper">
            <div class="c-card--charts__height-chart__levels"></div>
            <div class="c-card--charts__height-chart__position"></div>
          </div>
        </div>
      </div>
      <div class="c-card--charts__chart-wrapper__caption-wrapper">
        <span class="icon-agents-b"></span>
        <h3>Agentes</h3>
      </div>
    </div>
  </div>
</div>
Haight Chart
<div class="c-card--charts__chart-wrapper__chart">
  <div class="c-card--charts__height-chart">
    <div class="c-card--charts__height-chart__wrapper">
      <div class="c-card--charts__height-chart__levels"></div>
      <div class="c-card--charts__height-chart__position"></div>
    </div>
  </div>
</div>
Gauge Chart
<div class="c-card--charts__chart-wrapper__chart">
  <div class="c-card--charts__gauge">
    <div class="c-card--charts__gauge__body">
      <div class="c-card--charts__gauge__cover">
        <div class="c-card--charts__gauge__cover__needle-wrapper">
          <img class="c-card--charts__gauge__cover__needle" src="https://feature-ux-604-experiencia-emocional--chattigo-webkit.netlify.app/assets/img/needle.svg" alt="Needle">
        </div>
      </div>
    </div>
  </div>
</div>

.c-agent-status-card

scss
.c-agent-status-card {
  background-color: use-color(base, true-white);
  border: 1px solid use-color('grey', light-i);
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 4px 0 0;
  position: relative;

  @include element('section') {
    align-items: center;
    display: flex;
    margin-top: 4px;
    padding: 4px 8px;
    position: relative;

    @include modifier('user') {
      width: 100%;

      @include media-breakpoint-up('tablet-landscape') {
        width: 32%;
        
        @include if-block-has-modifier('c-agent-status-card', 'always-card') {
          width: 100%;
        }
      }
    }

    @include modifier('percent-data') {
      justify-content: space-between;
      padding: 0 8px;
      width: 100%;

      @include media-breakpoint-up('tablet-landscape') {
        width: 30%;

        @include if-block-has-modifier('c-agent-status-card', 'always-card') {
          width: 100%;
        }
      }
    }

    @include modifier('select') {
      display: none;
      margin: 4px 8px 4px auto;
      width: 20%;

      @include media-breakpoint-up('tablet-landscape') {
        display: flex;

        @include if-block-has-modifier('c-agent-status-card', 'always-card') {
          display: none;
        }
      }
    }

    @include modifier('attendees') {
      @include use-font('caption');
      background-color: use-color('grey', 'light-iii');
      border-bottom: 1px solid use-color('grey', light-i);
      border-top: 1px solid use-color('grey', light-i);
      width: 100%;

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

      strong {
        margin-right: 4px;
      }

      &:last-child {
        border-bottom: 0;
        border-radius: 0 0 4px 4px;
      }
    }

    @include modifier('more-padding') {
      padding: 4px 16px;
    }

    @include if-block-has-modifier('c-agent-status-card', 'always-card') {
      width: 100%;
    }

    // overrides
    .c-dropup {
      @include element('trigger') {
        transform: rotate(0);

        @include media-breakpoint-up('tablet-landscape') {
          display: none;
        }

        @include if-block-has-modifier('c-agent-status-card', 'always-card') {
          display: block;
        }

        [class^='icon-'],
        [class*=' icon-'] {
          @include use-font('h3');
        }
      }
    }

    .u-text {
      @include modifier('hint') {
        margin-left: 8px;
      }
    }
  }

  @include element('avatar') {
    align-self: flex-start;
    border-radius: 50%;
    height: 32px;
    margin-right: 12px;
    min-width: 32px;
    overflow: hidden;
    width: 32px;

    img {
      height: 100%;
      width: auto;

      @include if-block-has-modifier('c-transfer-card', 'selected') {
        display: none;
      }
    }
  }

  @include element('badge') {
    background-color: use-color('event', 'success');
    border: solid 1px use-color('base', 'white');
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    left: 38px;
    position: absolute;
    top: 10px;
    width: 10px;

    @include if-block-has-modifier('c-agent-status-card__section', 'more-padding') {
      top: 4px;
    }

    @include modifier('paused') {
      background-color: use-color('event', 'warning');
    }
    
    @include modifier('offline') {
      background-color: use-color('event', 'error');
    }
  }

  @include element('data') {
    @include use-font('caption', 'semibold');
    display: flex;
    flex-direction: column;
    max-width: 80%;
    padding-right: 16px;

    @include modifier('status') {
      color: use-color('grey', 'light');

      @include media-breakpoint-up('tablet-landscape') {
        display: none;
      }
    }

    label {
      overflow: auto;
      white-space: normal;
      word-break: normal;
      
      @include media-breakpoint-up('tablet') {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-word;
      }
    }
  }

  @include modifier('selected') {
    border: solid 1px use-color('event', 'success');

    @include media-breakpoint-up('phone-i') {
      &::before {
        left: 9px;
        top: 23px;
      }
    }

    &::before {
      align-items: center;
      background-color: use-color('event', 'success');
      border-radius: 50%;
      color: use-color('base', true-white);
      content: '\E00D'; // icon-message-sent
      display: flex;
      font-family: 'chattigoicons';
      font-size: 20px;
      height: 38px;
      justify-content: center;
      left: 9px;
      position: absolute;
      top: 11px;
      width: 38px;
    }
  }

  @include element('counter') {
    align-items: center;
    display: flex;
    padding: 4px 0 8px;
    text-align: center;

    @include modifier('number') {
      @include use-font('subheading', 'bold');
      margin-right: 4px;
    }

    @include modifier('percent-label') {
      @include use-font('caption');
      line-height: 12px;
      white-space: nowrap;

      @include media-breakpoint-up('tablet') {
        line-height: 19px;
      }
    }

    @include modifier('wrapper') {
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    &:not(:last-child) {
      margin-right: 16px;
    }

    // overrides
    .c-percent-indicator {
      margin-top: 0;
    }
  }
}

Elements

  • c-agent-status-card__section
  • c-agent-status-card__avatar
  • c-agent-status-card__data
  • c-agent-status-card__counter
  • c-agent-status-card__counter--number
  • c-agent-status-card__counter--wrapper
  • c-agent-status-card__counter--percent

Modificadores

  • c-agent-status-card--always-card

Examples

html
<div class="c-agent-status-card">
  <div class="c-agent-status-card__section">
    <div class="c-agent-status-card__avatar">
      <img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png">
      <span class="c-agent-status-card__badge c-agent-status-card__badge--paused"></span>
    </div>

    <div class="c-agent-status-card__data">
      <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit</label>
      <span class="c-agent-status-card__data--status">Ausente</span>
    </div>

    
    <div class="c-dropup__trigger">
      <span class="icon-menu-options"></span>
    </div>

    <ul class="c-dropup c-dropup--bottom-left">
      <li class="c-dropup__item">
        <a href="#">
          Online
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          Almuerzo
        </a>
      </li>
      <li class="c-dropup__item c-dropup__item--selected">
        <a href="#">
          Ausente
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          Baño
        </a>
      </li>
    </ul>
  </div>

  <div class="c-agent-status-card__section c-agent-status-card__section--attendees">
    <strong>5 minutos</strong> en sesión
  </div>

  <div class="c-agent-status-card__section c-agent-status-card__section--percent-data">
    <div class="c-agent-status-card__counter">
      <label class="c-agent-status-card__counter--number">401</label>
      
      <div class="c-agent-status-card__counter--wrapper">
        <div class="c-percent-indicator">
          <span class="c-percent-indicator__progress-bar" style="width: 100%;"></span>
        </div>
        <label class="c-agent-status-card__counter--percent-label">chats cerrados</label>
      </div>
    </div>
    
    <div class="c-agent-status-card__counter">
      <label class="c-agent-status-card__counter--number">21</label>
      
      <div class="c-agent-status-card__counter--wrapper">
        <div class="c-percent-indicator">
          <span class="c-percent-indicator__progress-bar c-percent-indicator__progress-bar--attention" style="width: 89%;"></span>
        </div>
        <label class="c-agent-status-card__counter--percent-label">chats en atención</label>
      </div>
    </div>
  </div>
</div>
html always square
<div class="c-agent-status-card c-agent-status-card--always-card">
  <div class="c-agent-status-card__section">
    <div class="c-agent-status-card__avatar">
      <img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png">
      <span class="c-agent-status-card__badge c-agent-status-card__badge--paused"></span>
    </div>

    <div class="c-agent-status-card__data">
      <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit</label>
      <span class="c-agent-status-card__data--status">Ausente</span>
    </div>

    
    <div class="c-dropup__trigger">
      <span class="icon-menu-options"></span>
    </div>

    <ul class="c-dropup c-dropup--bottom-left">
      <li class="c-dropup__item">
        <a href="#">
          Online
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          Almuerzo
        </a>
      </li>
      <li class="c-dropup__item c-dropup__item--selected">
        <a href="#">
          Ausente
        </a>
      </li>
      <li class="c-dropup__item">
        <a href="#">
          Baño
        </a>
      </li>
    </ul>
  </div>

  <div class="c-agent-status-card__section c-agent-status-card__section--attendees">
    <strong>5 minutos</strong> en sesión
  </div>

  <div class="c-agent-status-card__section c-agent-status-card__section--percent-data">
    <div class="c-agent-status-card__counter">
      <label class="c-agent-status-card__counter--number">401</label>
      
      <div class="c-agent-status-card__counter--wrapper">
        <div class="c-percent-indicator">
          <span class="c-percent-indicator__progress-bar" style="width: 100%;"></span>
        </div>
        <label class="c-agent-status-card__counter--percent-label">chats cerrados</label>
      </div>
    </div>
    
    <div class="c-agent-status-card__counter">
      <label class="c-agent-status-card__counter--number">21</label>
      
      <div class="c-agent-status-card__counter--wrapper">
        <div class="c-percent-indicator">
          <span class="c-percent-indicator__progress-bar c-percent-indicator__progress-bar--attention" style="width: 89%;"></span>
        </div>
        <label class="c-agent-status-card__counter--percent-label">chats en atención</label>
      </div>
    </div>
  </div>
</div>

.c-bot-card

scss
.c-bot-card {
  background-color: use-color(base, true-white);
  border: 1px solid use-color('grey', light-i);
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  position: relative;
  width: auto;

  @include element('section') {
    align-items: center;
    margin: 0 40px;

    @include modifier('header') {
      @include use-font('h3', 'bold');
      color: use-color('grey', 'light');
      display: block;
      margin-top: 30px;
      text-align: center;
    }

    @include modifier('content') {
      @include use-font('body-alt');
      box-sizing: border-box;
      display: grid;
      grid-template-rows: 1fr 1fr;
      margin-bottom: 16px;
      overflow: hidden;
      padding: 0 5px;
      padding-bottom: 0;
      text-align: justify;

      @include modifier('campaigns') {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(2, 50%);
        justify-content: center;

        div,
        button {
          @include use-font('caption');
          height: 25px;
          margin-top: 0;
          text-decoration: unset;
        }
      }

      @include modifier('description') {
        @include use-font('caption');
        color: use-color('grey', 'light');
        display: block;
        line-height: 1.8em;
        max-height: 5.4em;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
      }
    }

    @include modifier('actions') {
      @include use-font('caption');
      border-bottom: 1px solid use-color('grey', light-i);
      display: flex;
      height: 24px;
      justify-content: space-between;
      margin: 0;
      padding: 16px;

      &:last-child {
        border-bottom: 0;
        border-radius: 0 0 8px 8px;
      }

      // overrides
      .c-switch {
        + label {
          width: 40px;
        }
      }
    }
  }

  @include element('options') {
    display: flex;

    // overrides
    .c-action-link {
      @include use-font('title');
      border-bottom: 0;
      margin-right: 32px;

      [class^='icon-'],
      [class*=' icon-'] {
        color: use-color('grey', light);
        display: flex;
      }

      &:last-child {
        margin-right: 0;
      }

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

Card para los bots configurados.

Example

html
<div class="c-bot-card" style="width: 400px">
  <div class="c-bot-card__section c-bot-card__section--header">
    Bot Chattigo
  </div>

  <div class="c-bot-card__section c-bot-card__section--content">
    <div class="c-bot-card__section--content--campaigns">
      <div class="dark-label">
        <span class="text ellipsis-overflow">Demo Chattigo</span>
        <span class="badge icon-pencil-edit"></span>
      </div>
      <div class="dark-label">
        <span class="text ellipsis-overflow">Viajes - Sura</span>
        <span class="badge icon-pencil-edit"></span>
      </div>
      <div class="dark-label">
        <span class="text ellipsis-overflow">Asistencia Sura - Autos</span>
        <span class="badge icon-pencil-edit"></span>
      </div>
    </div>
    <div class="c-bot-card__section--content--description">
      Es un robot con inteligencia artificial que atiende a clientes de forma automatizada con un conocimineto inicial y aprendizaje permanente.
    </div>
  </div>


  <div class="c-bot-card__section c-bot-card__section--actions">
    <input type="checkbox" class="c-switch" id="first">
    <label for="first"></label>

    <div class="c-bot-card__options">
      <a class="c-action-link">
        <span class="icon-trash"></span>
      </a>

      <a class="c-action-link">
        <span class="icon-edit"></span>
      </a>
    </div>
  </div>
</div>

.c-color-picker

scss
.c-color-picker {
  align-items: center;
  border: 1px solid use-color('grey', 'light-ii');
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  justify-content: space-between;
  padding: 20px;

  @include element('color') {
    border: 1px solid use-color('grey', 'light-i');
    border-radius: 50%;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.29);
    cursor: pointer;
    height: 20px;
    width: 20px;

    @include modifier('blue') { background-color: rgba(74, 144, 226, 0.8); }
    @include modifier('green') { background-color: rgba(81, 179, 100, 0.8); }
    @include modifier('yellow') { background-color: rgba(248, 208, 28, 0.8); }
    @include modifier('orange') { background-color: rgba(242, 122, 17, 0.8); }
    @include modifier('red') { background-color: rgba(243, 71, 71, 0.8); }
    @include modifier('pink') { background-color: rgb(240, 139, 185); }
    @include modifier('dark-blue') { background-color: rgb(105, 108, 212); }
    @include modifier('black') { background-color: rgb(109, 109, 109); }

    @include modifier('picker') {
      background-color: use-color('base', 'true-white');
      background-image: url('https://cdn.chattigo.com/assets/img/illustrations/colorpicker.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 11px;
      border: 1px solid use-color('grey', 'light-ii');

      &::-moz-color-swatch {
        display: none;
      }

      &::-webkit-color-swatch-wrapper {
        display: none;
      }
    }
  }

  @include element('picker-input') {
    border: 1px solid use-color('grey', 'light-i');
    border-radius: 50%;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.29);
    cursor: pointer;
    height: 20px;
    width: 20px;
  }

  @include modifier('wrapper') {
    max-width: 268px;
  }
}

Componente creado para elegir colores en el proceso de onboarding.

Cada contenedor de color necesita un modificador --el-color en particular que le da el color. El contenedor que tiene el selector custom tiene un modificador --picker.

  • --blue.
  • --green.
  • --yellow.
  • --orange.
  • --red.
  • --pink.
  • --dark-blue.
  • --black.
  • --picker.

Example

html
<div class="c-color-picker--wrapper">
  <div class="c-color-picker">
    <input type="button" class="c-color-picker__color c-color-picker__color--blue">
    <input type="button" class="c-color-picker__color c-color-picker__color--green">
    <input type="button" class="c-color-picker__color c-color-picker__color--yellow">
    <input type="button" class="c-color-picker__color c-color-picker__color--orange">
    <input type="button" class="c-color-picker__color c-color-picker__color--red">
    <input type="button" class="c-color-picker__color c-color-picker__color--pink">
    <input type="button" class="c-color-picker__color c-color-picker__color--dark-blue">
    <input type="button" class="c-color-picker__color c-color-picker__color--black">
    <input type="color" class="c-color-picker__color c-color-picker__color--picker" value="#ffffff" id="chattigoColorPicker" onchange="changeColor(this)">
  </div>
</div>
<script>
  const changeColor = (ob) => {
    ob.style.backgroundColor = ob.value
  }
</script>