.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-plan-card

scss
.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;
    }
  }
}

Card para informar el plan actual del cliente.

Los modificadores --business, --corporate, --startup son únicamente para diferenciar los planes. No contienen estilos agregados.

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