Base table styling (Many concepts borrowed from Bootstrap)
This commit is contained in:
Nick Pack
parent
99942e5e2b
commit
cd5ddb99ae
@ -893,3 +893,117 @@ legend span {
|
||||
.scale-with-grid {
|
||||
max-width: 100%;
|
||||
height: auto; }
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background: white;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
margin: 10px 0px; }
|
||||
table th,
|
||||
table td {
|
||||
padding: 8px;
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #cccccc; }
|
||||
table th {
|
||||
font-weight: bold; }
|
||||
table thead th {
|
||||
vertical-align: bottom; }
|
||||
table caption thead tr:first-child th,
|
||||
table caption thead tr:first-child td,
|
||||
table colgroup thead tr:first-child th,
|
||||
table colgroup thead tr:first-child td,
|
||||
table thead:first-child tr:first-child th,
|
||||
table thead:first-child tr:first-child td {
|
||||
border-top: 0; }
|
||||
table tbody tbody {
|
||||
border-top: 2px solid #cccccc; }
|
||||
table table {
|
||||
background: white; }
|
||||
|
||||
.table-condensed th,
|
||||
.table-condensed td {
|
||||
padding: 4px 5px; }
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid #cccccc;
|
||||
border-collapse: separate;
|
||||
*border-collapse: collapse;
|
||||
border-left: 0;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px; }
|
||||
.table-bordered th,
|
||||
.table-bordered td {
|
||||
border-left: 1px solid #cccccc; }
|
||||
.table-bordered caption thead tr:first-child th,
|
||||
.table-bordered caption tbody tr:first-child th,
|
||||
.table-bordered caption tbody tr:first-child td,
|
||||
.table-bordered colgroup thead tr:first-child th,
|
||||
.table-bordered colgroup tbody tr:first-child th,
|
||||
.table-bordered colgroup tbody tr:first-child td,
|
||||
.table-bordered thead:first-child tr:first-child th,
|
||||
.table-bordered tbody:first-child tr:first-child th,
|
||||
.table-bordered tbody:first-child tr:first-child td {
|
||||
border-top: 0; }
|
||||
.table-bordered thead:first-child tr:first-child > th:first-child,
|
||||
.table-bordered tbody:first-child tr:first-child > td:first-child,
|
||||
.table-bordered tbody:first-child tr:first-child > th:first-child {
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
-moz-border-radius-topleft: 3px;
|
||||
border-top-left-radius: 3px; }
|
||||
.table-bordered thead:first-child tr:first-child > th:last-child,
|
||||
.table-bordered tbody:first-child tr:first-child > td:last-child,
|
||||
.table-bordered tbody:first-child tr:first-child > th:last-child {
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
-moz-border-radius-topright: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
.table-bordered thead:last-child tr:last-child > th:first-child,
|
||||
.table-bordered tbody:last-child tr:last-child > td:first-child,
|
||||
.table-bordered tbody:last-child tr:last-child > th:first-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:first-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > th:first-child {
|
||||
-webkit-border-bottom-left-radius: 3px;
|
||||
-moz-border-radius-bottomleft: 3px;
|
||||
border-bottom-left-radius: 3px; }
|
||||
.table-bordered thead:last-child tr:last-child > th:last-child,
|
||||
.table-bordered tbody:last-child tr:last-child > td:last-child,
|
||||
.table-bordered tbody:last-child tr:last-child > th:last-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:last-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > th:last-child {
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
-moz-border-radius-bottomright: 3px;
|
||||
border-bottom-right-radius: 3px; }
|
||||
.table-bordered tfoot tbody:last-child tr:last-child td:first-child {
|
||||
-webkit-border-bottom-left-radius: 0px;
|
||||
-moz-border-radius-bottomleft: 0px;
|
||||
border-bottom-left-radius: 0px; }
|
||||
.table-bordered tfoot tbody:last-child tr:last-child td:last-child {
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
-moz-border-radius-bottomright: 0px;
|
||||
border-bottom-right-radius: 0px; }
|
||||
.table-bordered caption thead tr:first-child th:first-child,
|
||||
.table-bordered caption tbody tr:first-child td:first-child,
|
||||
.table-bordered colgroup thead tr:first-child th:first-child,
|
||||
.table-bordered colgroup tbody tr:first-child td:first-child {
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
-moz-border-radius-topleft: 3px;
|
||||
border-top-left-radius: 3px; }
|
||||
.table-bordered caption + thead tr:first-child th:last-child,
|
||||
.table-bordered caption + tbody tr:first-child td:last-child,
|
||||
.table-bordered colgroup + thead tr:first-child th:last-child,
|
||||
.table-bordered colgroup + tbody tr:first-child td:last-child {
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
-moz-border-radius-topright: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
|
||||
.table-striped tbody > tr:nth-child(odd) > td,
|
||||
.table-striped tbody > tr:nth-child(odd) > th {
|
||||
background-color: #efefef; }
|
||||
|
||||
.table-hover tbody tr:hover > td,
|
||||
.table-hover tbody tr:hover > th {
|
||||
background-color: #999999; }
|
||||
|
||||
4
build/css/Ribs.min.css
vendored
4
build/css/Ribs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -33,6 +33,7 @@ hr {
|
||||
@import "_lists";
|
||||
@import "_forms";
|
||||
@import "_images";
|
||||
@import "_tables";
|
||||
|
||||
// Smaller than standard 960 (devices and browsers)
|
||||
@media only screen and (max-width: 959px) {}
|
||||
|
||||
144
src/scss/_tables.scss
Normal file
144
src/scss/_tables.scss
Normal file
@ -0,0 +1,144 @@
|
||||
//
|
||||
// #Tables
|
||||
// --------------------------------------------------
|
||||
// The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit
|
||||
// https://raw.github.com/twitter/bootstrap/master/less/tables.less
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background: $table_background;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
margin: $table_margin;
|
||||
th,
|
||||
td {
|
||||
padding: $table_td_th_padding;
|
||||
line-height: $table_td_th_line_height;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $table_border_colour;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
caption thead tr:first-child th,
|
||||
caption thead tr:first-child td,
|
||||
colgroup thead tr:first-child th,
|
||||
colgroup thead tr:first-child td,
|
||||
thead:first-child tr:first-child th,
|
||||
thead:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
tbody tbody {
|
||||
border-top: 2px solid $table_border_colour;
|
||||
}
|
||||
|
||||
table {
|
||||
background: $table_background;
|
||||
}
|
||||
}
|
||||
|
||||
.table-condensed {
|
||||
th,
|
||||
td {
|
||||
padding: $table_condensed_padding;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid $table_border_colour;
|
||||
border-collapse: separate;
|
||||
*border-collapse: collapse;
|
||||
border-left: 0;
|
||||
@include border-radius($table_border_radius);
|
||||
th,
|
||||
td {
|
||||
border-left: 1px solid $table_border_colour;
|
||||
}
|
||||
|
||||
caption thead tr:first-child th,
|
||||
caption tbody tr:first-child th,
|
||||
caption tbody tr:first-child td,
|
||||
colgroup thead tr:first-child th,
|
||||
colgroup tbody tr:first-child th,
|
||||
colgroup tbody tr:first-child td,
|
||||
thead:first-child tr:first-child th,
|
||||
tbody:first-child tr:first-child th,
|
||||
tbody:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
thead:first-child tr:first-child > th:first-child,
|
||||
tbody:first-child tr:first-child > td:first-child,
|
||||
tbody:first-child tr:first-child > th:first-child {
|
||||
@include border-top-left-radius($table_border_radius);
|
||||
}
|
||||
|
||||
thead:first-child tr:first-child > th:last-child,
|
||||
tbody:first-child tr:first-child > td:last-child,
|
||||
tbody:first-child tr:first-child > th:last-child {
|
||||
@include border-top-right-radius($table_border_radius);
|
||||
}
|
||||
|
||||
thead:last-child tr:last-child > th:first-child,
|
||||
tbody:last-child tr:last-child > td:first-child,
|
||||
tbody:last-child tr:last-child > th:first-child,
|
||||
tfoot:last-child tr:last-child > td:first-child,
|
||||
tfoot:last-child tr:last-child > th:first-child {
|
||||
@include border-bottom-left-radius($table_border_radius);
|
||||
}
|
||||
|
||||
thead:last-child tr:last-child > th:last-child,
|
||||
tbody:last-child tr:last-child > td:last-child,
|
||||
tbody:last-child tr:last-child > th:last-child,
|
||||
tfoot:last-child tr:last-child > td:last-child,
|
||||
tfoot:last-child tr:last-child > th:last-child {
|
||||
@include border-bottom-right-radius($table_border_radius);
|
||||
}
|
||||
|
||||
tfoot tbody:last-child tr:last-child td:first-child {
|
||||
@include border-bottom-left-radius(0px);
|
||||
}
|
||||
tfoot tbody:last-child tr:last-child td:last-child {
|
||||
@include border-bottom-right-radius(0px);
|
||||
}
|
||||
|
||||
caption thead tr:first-child th:first-child,
|
||||
caption tbody tr:first-child td:first-child,
|
||||
colgroup thead tr:first-child th:first-child,
|
||||
colgroup tbody tr:first-child td:first-child {
|
||||
@include border-top-left-radius($table_border_radius);
|
||||
}
|
||||
caption + thead tr:first-child th:last-child,
|
||||
caption + tbody tr:first-child td:last-child,
|
||||
colgroup + thead tr:first-child th:last-child,
|
||||
colgroup + tbody tr:first-child td:last-child {
|
||||
@include border-top-right-radius($table_border_radius);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
tbody {
|
||||
> tr:nth-child(odd) > td,
|
||||
> tr:nth-child(odd) > th {
|
||||
background-color: $table_alt_colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-hover {
|
||||
tbody {
|
||||
tr:hover > td,
|
||||
tr:hover > th {
|
||||
background-color: $table_hover_colour;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -138,3 +138,14 @@ $list_item_paragraph_line_height: 21px;
|
||||
|
||||
$fallback_hex_gradient_bg: #CCC;
|
||||
|
||||
$table_background: #FFF;
|
||||
$table_margin: 10px 0px;
|
||||
$table_td_th_padding: 8px;
|
||||
$table_td_th_line_height: 21px;
|
||||
$table_border_colour: #CCC;
|
||||
$table_border_radius: 3px;
|
||||
$table_alt_colour: #EFEFEF;
|
||||
$table_hover_colour: #999;
|
||||
$table_condensed_padding: 4px 5px;
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user