_objects.tables.scss

/*------------------------------------*\
    #TABLES
\*------------------------------------*/

/**
 *  Some useful helpers for common table patterns e.g.:
 *
	<table class="o-table o-table--fixed o-table--cells">
	<thead>
		<tr>
			<th>Foo</th>
			<th>Bar</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Foo</td>
			<td>Bar</td>
		</tr>
	</table>
 *
 * Extend this object in your components.
 */

// Predefine the variables below in order to alter and enable specific features.
$o-table-padding--tiny:  	quarter($spacing) !default;
$o-table-padding--small:    halve($spacing) !default;
$o-table-padding:    		$spacing !default;

$o-table-border-width:      1px !default;
$o-table-border-style:      solid !default;
$o-table-border-color:      #ccc !default;

$o-table--fixed:     false !default;
$o-table--tiny:      false !default;
$o-table--small:     false !default;
$o-table--flush:     false !default;
$o-table--cells:     false !default;
$o-table--rows:      false !default;
$o-table--columns:   false !default;





.o-table {
    width: 100%;

	th,
	td {
		padding: $o-table-padding;
	}

}



@if ($o-table--fixed == true) {

    /**
     * Force tables into having equal-width columns.
     */
    .o-table--fixed {
        table-layout: fixed;
    }

}





@if ($o-table--tiny == true) {

    /**
     * Tables with very tightly packed cells.
     */
    .o-table--tiny {

        th,
        td {
            padding: $o-table-padding--tiny;
        }

    }

}





@if ($o-table--small == true) {

    /**
     * Lightly packed cells.
     */
    .o-table--small {

        th,
        td {
            padding: $o-table-padding--small;
        }

    }

}





@if ($o-table--flush == true) {

    /**
     * Tables without padding
     */
    .o-table--flush {

        th,
        td {
            padding: 0;
        }

    }

}





@if ($o-table--cells == true) {

    /**
     * Add borders around a `table`’s cells.
     */
    .o-table--cells {

        th,
        td {
            border: $o-table-border-width $o-table-border-style $o-table-border-color;
        }

    }

}





@if ($o-table--rows == true) {

    /**
     * Add borders only to `table`’s rows.
     */
    .o-table--rows {

        &,
        th,
        td {
            border: 0 $o-table-border-style $o-table-border-color;
        }

    }

    .o-table--rows {
        border-top-width: $o-table-border-width;

        th,
        td {
            border-bottom-width: $o-table-border-width;
        }
    }

}





@if ($o-table--columns == true) {

    /**
     * Add borders only to `table`’s columns.
     */
    .o-table--columns {

        &,
        th,
        td {
            border: 0 $o-table-border-style $o-table-border-color;
        }
    }

    .o-table--columns {
        border-left-width: $o-table-border-width;

        th,
        td {
            border-right-width: $o-table-border-width;
        }
    }

}