diff options
author | Jacob Thornton <jacobthornton@gmail.com> | 2012-01-27 09:48:46 +0400 |
---|---|---|
committer | Jacob Thornton <jacobthornton@gmail.com> | 2012-01-27 09:48:46 +0400 |
commit | dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 (patch) | |
tree | 9606da7326fd0a1e2ba1727e7390a69555bd92c3 /less/tables.less | |
parent | e0e54d9c6cb39eae53e31117c38ceae0a08a6e0b (diff) |
moving structure around + more work on builder...
Diffstat (limited to 'less/tables.less')
-rw-r--r-- | less/tables.less | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/less/tables.less b/less/tables.less new file mode 100644 index 0000000000..809c2f60e7 --- /dev/null +++ b/less/tables.less @@ -0,0 +1,138 @@ +// +// Tables.less +// Tables for, you guessed it, tabular data +// ---------------------------------------- + + +// BASE TABLES +// ----------------- + +table { + max-width: 100%; + border-collapse: collapse; + border-spacing: 0; +} + +// BASELINE STYLES +// --------------- + +.table { + width: 100%; + margin-bottom: @baseLineHeight; + // Cells + th, + td { + padding: 8px; + line-height: @baseLineHeight; + text-align: left; + border-top: 1px solid #ddd; + } + th { + font-weight: bold; + vertical-align: bottom; + } + td { + vertical-align: top; + } + // Remove top border from thead by default + thead:first-child tr th, + thead:first-child tr td { + border-top: 0; + } + // Account for multiple tbody instances + tbody + tbody { + border-top: 2px solid #ddd; + } +} + + + +// CONDENSED TABLE W/ HALF PADDING +// ------------------------------- + +.table-condensed { + th, + td { + padding: 4px 5px; + } +} + + +// BORDERED VERSION +// ---------------- + +.table-bordered { + border: 1px solid #ddd; + border-collapse: separate; // Done so we can round those corners! + .border-radius(4px); + th + th, + td + td, + th + td, + td + th { + border-left: 1px solid #ddd; + } + // Prevent a double border + thead:first-child tr:first-child th, + tbody:first-child tr:first-child th, + tbody:first-child tr:first-child td { + border-top: 0; + } + // For first th or td in the first row in the first thead or tbody + thead:first-child tr:first-child th:first-child, + tbody:first-child tr:first-child td:first-child { + .border-radius(4px 0 0 0); + } + thead:first-child tr:first-child th:last-child, + tbody:first-child tr:first-child td:last-child { + .border-radius(0 4px 0 0); + } + // For first th or td in the first row in the first thead or tbody + thead:last-child tr:last-child th:first-child, + tbody:last-child tr:last-child td:first-child { + .border-radius(0 0 0 4px); + } + thead:last-child tr:last-child th:last-child, + tbody:last-child tr:last-child td:last-child { + .border-radius(0 0 4px 0); + } +} + + +// ZEBRA-STRIPING +// -------------- + +// Default zebra-stripe styles (alternating gray and transparent backgrounds) +.table-striped { + tbody { + tr:nth-child(odd) td, + tr:nth-child(odd) th { + background-color: #f9f9f9; + } + } +} + + + +// TABLE CELL SIZING +// ----------------- + +// Change the columns +.tableColumns(@columnSpan: 1) { + float: none; + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; + margin-left: 0; +} +table { + .span1 { .tableColumns(1); } + .span2 { .tableColumns(2); } + .span3 { .tableColumns(3); } + .span4 { .tableColumns(4); } + .span5 { .tableColumns(5); } + .span6 { .tableColumns(6); } + .span7 { .tableColumns(7); } + .span8 { .tableColumns(8); } + .span9 { .tableColumns(9); } + .span10 { .tableColumns(10); } + .span11 { .tableColumns(11); } + .span12 { .tableColumns(12); } +} |