Buttons | chattigo-webkit Documentation

Buttons components classes

.c-button

scss

.c-button {
  @extend %button-base;

  @include modifier('secondary') {
    background-color: transparent;
    background-image: none;
    border: solid 1px use-color(primary);
    box-shadow: none;
    color: use-color(primary);
    text-transform: capitalize;

    &:disabled,
    &[disabled] {
      background-color: transparent;
      background-image: none;
      border: solid 1px use-color('grey', light-alt);
      color: use-color('grey', light-alt);

      &:hover {
        background-color: transparent;
        background-image: none;
        border: solid 1px use-color('grey', light-alt);
        color: use-color('grey', light-alt);
      }
    }
  }

  @include modifier('low-priority') {
    @include use-font('body', 'semibold');
    background-color: use-color('grey', light-iii);
    background-image: none;
    border: 0;
    box-shadow: none;
    color: use-color('grey', light);
    text-transform: lowercase;

    &::first-letter {
      text-transform: uppercase;
    }
  }

  @include modifier('thin') {
    padding: 8px;
  }

  &:hover {
    box-shadow: $box-shadow-button-hover;
    cursor: pointer;

    &:disabled,
    &[disabled] {
      @extend %button-disabled;
    }
  }

  &:active {
    background-color: use-color(primary);
    background-image: none;
    box-shadow: none;

    @include if-block-has-modifier('c-button', 'secondary', true) {
      background-color: transparent;
      background-image: none;
      box-shadow: none;
    }

    @include if-block-has-modifier('c-button', 'low-priority', true) {
      // background-color: use-color('grey', light-i);
      background-color: use-color('grey', light-iii);
      background-image: none;
      box-shadow: none;
    }

    &:disabled,
    &[disabled] {
      @extend %button-disabled;
    }
  }

  &:focus {
    outline: 0;
  }

  &:disabled,
  &[disabled] {
    @extend %button-disabled;
  }

  [class^='icon-'],
  [class*=' icon-'] {
    font-size: 14px;
  }
}

Class for use the Chattigo primary button

Examples

html

<button class="c-button">c-button</button>
<button class="c-button" disabled>c-button w/ attr disabled</button>

html secondary button

<button class="c-button c-button--secondary">c-button c-button--secondary</button>
<button class="c-button c-button--secondary" disabled>c-button c-button--secondary w/ attr disabled</button>

html low priority button

<button class="c-button c-button--low-priority">c-button c-button--low-priority</button>
<button class="c-button c-button--low-priority" disabled>c-button c-button--low-priority w/ attr disabled</button>

html thin button

<button class="c-button c-button--thin">c-button c-button--thin</button>
<button class="c-button c-button--low-priority c-button--thin">c-button c-button--low-priority c-button--thin</button>

html w/ icon

<button class="c-button c-button--secondary">
  <span class="icon-download"></span>
  Button Secondary w/ Icon
</button>

Requires

@mixin modifier()

@mixin if-block-has-modifier()

placeholder button-base

placeholder button-disabled

@function use-color()

$box-shadow-button-hover [private]

$box-shadow-button [private]

.c-btn-group

scss

.c-btn-group {
  display: flex;
  position: relative;

  @include element('option-trigger') {
    background-color: use-color('primary');
    border: 0;
    border-left: solid 1px use-color('base', true-white);
    border-radius: 0 8px 8px 0;
    box-shadow: $box-shadow-button;
    height: auto;
    outline: 0;
    width: 32px;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('base', true-white);
      font-size: 12px;
    }

    &:hover {
      box-shadow: $box-shadow-button-hover;
      cursor: pointer;
      
      ~ .c-dropup {
        display: block;
      }
    }
  }

  // overrides
  .c-dropup {
    right: 0;
    top: -28px;
  }

  .c-button {
    background-color: use-color('primary');
    background-image: none;
    border-radius: 8px 0 0 8px;
  }
}

Este componente esta creado para contener un .c-button junto a otro boton con la clase: .c-btn-group__option-trigger, para desplegar opciones del tipo dropup.

Example

html

<div style="padding: 32px 16px 0 0;"> <!-- div just for the example -->

  <div class="c-btn-group">
    <button class="c-button">
      Button w/ Dropup options
    </button>
  
    <button class="c-btn-group__option-trigger">
      <span class="icon-arrow-down"></span>
    </button>
  
    <ul class="c-dropup">
      <li class="c-dropup__item">
        <a href="#">
          <span class="icon-clock-add"></span>
          dropup option
        </a>
      </li>
    </ul>
  </div>

</div>

.c-send-button

scss

.c-send-button {
  background-color: use-color('grey', light-iii);
  border-radius: 8px;
  color: use-color('grey', light);
  margin-right: 8px;
  padding: 6px 8px;
  text-decoration: none;

  @include modifier(ready) {
    background-color: lighten(use-color(secondary, light-alt), 13%);

    span {
      color: use-color(secondary);
    }
  }

  [class^='icon-'],
  [class*=' icon-'] {
    font-size: 19px;
    padding: 0 8px;
  }
}

Este botón esta hecho para enviar mensajes y consta con dos estados:

c-send-button estado por defecto
c-send-button c-send-button--ready para cuando el cliente tiene texto listo para enviar

Example

html

<div class="u-widget-trigger-example-margin"> <!-- div for example only  -->

  <button class="c-send-button">
    <span class="icon-send"></span>
  </button>

  <button class="c-send-button c-send-button--ready">
    <span class="icon-send"></span>
  </button>

</div>