Merge tables into Kraken

[cferdinandi]

https://github.com/cferdinandi/tables

Add responsive tables solution.

/**
 * Pure CSS responsive tables
 * Adds label to each cell using the [data-label] attribute
 * @link https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/
 */
@media (max-width: $bp-medium) {
    .table-responsive {
        border: 0;

        thead {
            display: none;
            visibility: hidden;
        }

        tr {
            border-top: calc-em(1px) solid lighten( $color-gray-light, 3% );
            display: block;
            padding: calc-em(8px);

            &:nth-child(even) {
                background-color: transparent;
            }

            &:nth-child(odd) {
                background-color: lighten( $color-gray-light, 7% );
            }
        }

        td {
            border: 0;
            display: block;
            padding: calc-em(4px);
            text-align: right;

            &:before {
                content: attr(data-label);
                float: left;
                text-transform: uppercase;
                font-weight: bold;
            }
        }

    }
}

<table class="table-responsive">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Super Hero</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="First Name">Peter</td>
            <td data-label="Last Name">Parker</td>
            <td data-label="Super Hero">Spiderman</td>
        </tr>
        ...
    </tbody>
</table>