# Components

## Button

### SCSS:

    $crispy__button__font-family: $crispy__font-family;
    $crispy__button__font-weight: $crispy__font-weight;
    $crispy__button__font-size: $crispy__font-size;
    $crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;

    $crispy__button__padding: 0.4em 0.8em;
    $crispy__button__padding-breakpoints: (
        $crispy__md: 0.6em 1.2em
    );

    $crispy__button__margin: $crispy__margin;
    $crispy__button__margin-breakpoints: $crispy__margin-breakpoints;

### Html:

    <button class="button"></button>
    <button class="button text-size-medium"></button>
    <button class="button text-size-large"></button>
    <button class="button width-100"></button>

## Code

### SCSS:

    $crispy__code__border: $crispy__border;
    $crispy__code__background-color: $crispy__color-grey-light;

    $crispy__code__padding: $crispy__padding;
    $crispy__code__padding-breakpoints: $crispy__padding-breakpoints;

    $crispy__code__margin: $crispy__margin;
    $crispy__code__margin-breakpoints: $crispy__margin-breakpoints;

### Html:

    <pre class="code">
        <code></code>
    </pre>

## Fields

### SCSS:

    $crispy__field__margin: $crispy__margin;
    $crispy__field__border: $crispy__border;

    $crispy__field__color--valid: $crispy__color-success;
    $crispy__field__color--error: $crispy__color-danger;

    $crispy__field__border-color--focus: $crispy__color-primary;
    $crispy__field__border-color--valid: $crispy__color-success;
    $crispy__field__border-color--error: $crispy__color-danger;

    $crispy__field__choice__checked__color: $crispy__color-success;
    $crispy__field__choice__unchecked__color: $crispy__color-danger;

    $crispy__field__input__padding: 0.4em 0.6em;
    $crispy__field__input__color: $crispy__color-text;

    $crispy__field__select__padding: 0.3em 0.5em;
    $crispy__field__panel__padding: 0.3em 0.6em;

    $crispy__field__select__background-color: white;
    $crispy__field__select__border: $crispy__border;

### Input / Textarea

    <div class="field">
        <input class="field__text" type="text" />
    </div>
    <div class="field field--valid">
        <label class="field__label">
            Text
            <input type="text" class="field__text" />
        </label>
        <div class="field__panel">
            error item 1
        </div>
    </div>
    <div class="field field--error">
        <label class="field__label">
            Text
            <input type="text" class="field__text" />
        </label>
        <div class="field__panel">
            error item 1
        </div>
    </div>
    <div class="field">
        <label class="field__label">
            Textarea
            <textarea class="field__text"></textarea>
        </label>
    </div>

Text
error item 1
Text
error item 1
Textarea

### Checkbox

    <div class="field">
        <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
        <label for="field__checkbox__1" class="field__label">
            <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
            </svg>
            <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
            </svg>
            checkbox 1
        </label>
        <input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />
        <label for="field__checkbox__2" class="field__label">
            <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
            </svg>
            <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
            </svg>
            checkbox 2
        </label>
    </div>

checkbox 1
checkbox 2
checkbox 1
error item 1

### Radio

    <div class="field">
        <input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
        <label for="field__radio__1" class="field__label">
            <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
            </svg>
            <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
            </svg>
            radio item 1
        </label><br />
        <input id="field__radio__2" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
        <label for="field__radio__2" class="field__label">
            <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
            </svg>
            <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
            </svg>
            radio item 2
        </label>
    </div>
    <div class="field field--error">
        <input id="field__radio__3" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
        <label for="field__radio__3" class="field__label">
            <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
            </svg>
            <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
            </svg>
            radio item 1
        </label><br />
        <input id="field__radio__4" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
        <label for="field__radio__4" class="field__label">
            <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
            </svg>
            <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-toggle-right" />
            </svg>
            radio item 2
        </label>
        <div class="field__panel">
            error item 1
        </div>
    </div>

radio item 1
radio item 2
radio item 1
radio item 2
error item 1

### Select

    <div class="field">
        <label class="field__label">
            Select Item
            <select class="field__select">
                <option>select item 1</option>
                <option>select item 2</option>
                <option>select item 3</option>
            </select>
        </label>
    </div>
    <div class="field field--error">
        <label class="field__label">
            Select Item
            <select class="field__select">
                <option>select item 1</option>
                <option>select item 2</option>
                <option>select item 3</option>
            </select>
            <div class="field__panel">
                error item 1
            </div>
        </label>
    </div>

Select Item
Select Item
error item 1

## Group

### SCSS:

    $crispy__group__margin: 0 0.5em 0 !default;
    $crispy__group__character: '/' !default;

### Html:

    <nav>
        <ul class="group group--hr">
            <li class="group__item">first item</li>
            <li class="group__item">second item</li>
            <li class="group__item">third item</li>
        </ul>
    </nav>

## Hero

### Html:

    <div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

    <div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

    <div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

## Icon

### SCSS:

    $crispy__icon__size: 1.15em;

### Html:

    <svg class="icon text-size-small" aria-hidden="true">
         <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
         <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>
    <svg class="icon text-size-large" aria-hidden="true">
         <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>
    <svg class="icon text-size-big" aria-hidden="true">
         <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>
    <svg class="icon text-size-mega" aria-hidden="true">
         <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>
    <svg class="icon icon-color-danger" aria-hidden="true">
         <use xlink:href="symbol-defs.svg#icon-flask"></use>
    </svg>;

## Media

### Html:

    <img class="img-responsive" src="https://picsum.photos/400" />
    <figure>
        <img class="img-responsive" src="https://picsum.photos/400" />
        <figcaption class="text-center">Lorem Ipsum</figcaption>
    </figure>

Lorem Ipsum

## Panel

### SCSS:

    $crispy__panel__inner-padding: $crispy__padding;
    $crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
    $crispy__panel__background-color: $crispy__color-grey-light;

### Html:

    <div class="panel">
        <div class="panel__inner">
            Lorem Ipsum
        </div>
    </div>

Lorem Ipsum

## Progress

### SCSS:

    $crispy__progress__height: 30px;
    $crispy__progress__background-color: $crispy__color-primary;
    $crispy__progress__border-width: 1px;
    $crispy__progress__border-color: $crispy__color-border;

### Html:

    <div class="progress">
        <div class="progress__inner" style="width: 80%"></div>
    </div>

## Modal

### SCSS:

    $crispy__modal__max-width-breakpoints: (
        $crispy__md: 50%
    );

    $crispy__modal__margin-breakpoints: (
        $crispy__md: 0.75em
    );

    $crispy__modal__z-index: zIndex('modal');

### Html:

    <div class="modal modal--bottom width-100">
        <div class="panel">
            <div class="panel__inner">
                Lorem Ipsum
            </div>
        </div>
    </div>

.modal--top-left
.modal--top-right
.modal
.modal--bottom-left
.modal--bottom-right

## Table

### SCSS:

    $crispy__table__padding: $crispy__padding;
    $crispy__table__padding-breakpoints: $crispy__padding-breakpoints;

    $crispy__table__td__border: 1px solid $crispy__color-border;
    $crispy__table__th__border-width: 2px !default;

    $crispy__table__color: $crispy__color-text;
    $crispy__table__striped__background-color: $crispy__color-grey-light;

### Html:

    <table class="table table--striped margin-bottom-2">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mr. Brown</td>
                <td>43</td>
            </tr>
            <tr>
                <td>Mr. Magenta</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Mr. White</td>
                <td>45</td>
            </tr>
        </tbody>
    </table>

name | age
--- | ---
Mr. Brown | 43
Mr. Magenta | 32
Mr. White | 45