Tembo Style Documentation

    Button

    Demo

    HTML

    <button class="c-button">Button</button>

    Modifier Classes

    • <button class="c-button c-button--secondary">Button</button>

    Sass Variables

    $c-button--disabled: $s-color--button--disabled !default;
    $c-button--submit-color:  #f2516b !default; //cep watermellon
    $c-button--primary: $s-color--button !default;
    $c-button--primary-hover: $s-color--button--hover !default;
    $c-button--primary-active: $c-button--primary-hover !default;
    $c-button--secondary-color: #000 !default;
    $c-button--secondary: $s-color--secondary !default;
    $c-button--secondary-hover: darken(desaturate($s-color--secondary, 2.58), 9.22) !default;
    $c-button--secondary-active: $c-button--secondary !default;
    $c-button--tertiary: $s-color-tertiary !default;
    $c-button--tertiary-hover: #fff !default;
    $c-button--tertiary-active: $s-color-tertiary !default;

    component varaibles default from colors set in settings/color.scss