Permalink
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (134 sloc) 3.44 KB
/**
* Tables
* =================================
* - Associated Table Variables
* - Default table Styles
* – Table modifiers:
* - .table--striped
* – .responsiveTable
*/
/**
* Define associated Table variables
*/
$table-bgColor : $color-bg !default; // Default background color used for all tables.
$table-bgColor--accent : #f9f9f9 !default; // Background color used for `.table-striped`.
$table-bgColor--hover : inherit !default; // Background color used for `.table-hover` – set to 'inherit' by default (so no hover effect)
$table-borderColor : #ccc !default; // Border color for table and cell borders.
/**
* Customizes the `.table` component with basic values, each used across all table variations.
*/
$table-cell-padding : 8px !default; // Padding for `<th>`s and `<td>`s.
// Baseline styles
table {
width: 100%;
max-width: 100%;
margin-bottom: $baseline;
border-spacing: 0;
border: 2px solid $table-borderColor;
background-color: $table-bgColor;
table-layout: fixed; // https://css-tricks.com/fixing-tables-long-strings/
// Cells
th,
td {
padding: $table-cell-padding;
line-height: $baseline;
vertical-align: top;
border: 1px solid $table-borderColor;
&:first-child { border-left: 0; }
&:last-child { border-right: 0; }
}
// Bottom align for column headings
> thead {
th,
td {
vertical-align: bottom;
border-bottom: 2px solid $table-borderColor;
}
}
> tfoot td {
border-top: 2px solid $table-borderColor;
border-bottom: 0;
}
// Remove top border from thead by default
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// if a hover color has been set in the variables
tr:hover {
td, th {
background-color: $table-bgColor--hover;
}
}
// Account for multiple tbody instances
> tbody + tbody {
border-top: 2px solid $table-borderColor;
}
// Nesting
& table,
& .table {
background-color: $color-bg;
}
}
th {
text-align: left;
}
/**
* Zebra-striping
* Default zebra-stripe styles (alternating gray and transparent backgrounds)
*/
.table--striped {
tbody :nth-child(odd) th,
tbody :nth-child(odd) td {
background-color: $table-bgColor--accent !important;
}
}
/**
* Responsive tables
* Wrap your tables in `.responsiveTable` and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
*
* If you need more responsive tables, consider Tablesaw by the Filament Group:
* https://github.com/filamentgroup/tablesaw
*/
.responsiveTable {
@include media('<mid') {
width: 100%;
margin-bottom: ($line-height-base * .75) + px;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid $table-borderColor;
-webkit-overflow-scrolling: touch;
// Tighten up spacing
> table {
margin-bottom: 0;
border: 0;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
th,
td {
white-space: nowrap;
// Nuke the appropriate borders so that the parent can handle them
&:first-child { border-left: 0; }
&:last-child { border-right: 0; }
}
}
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether.
> tbody,
> tfoot tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}