From 627f0488e5bd3c31359fc9e78acffbfea4a86a8b Mon Sep 17 00:00:00 2001 From: elijah Date: Fri, 24 Aug 2012 21:12:36 -0700 Subject: committed website v. 0.1.0 --- app/assets/stylesheets/bootstrap/_tables.scss | 150 ++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 app/assets/stylesheets/bootstrap/_tables.scss (limited to 'app/assets/stylesheets/bootstrap/_tables.scss') diff --git a/app/assets/stylesheets/bootstrap/_tables.scss b/app/assets/stylesheets/bootstrap/_tables.scss new file mode 100644 index 0000000..9dda11c --- /dev/null +++ b/app/assets/stylesheets/bootstrap/_tables.scss @@ -0,0 +1,150 @@ +// +// Tables.scss +// 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; + vertical-align: top; + border-top: 1px solid #ddd; + } + th { + font-weight: bold; + } + // Bottom align for column headings + thead th { + vertical-align: bottom; + } + // 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-collapse: collapsed; // IE7 can't round corners anyway + @include 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 { + @include border-radius(4px 0 0 0); + } + thead:first-child tr:first-child th:last-child, + tbody:first-child tr:first-child td:last-child { + @include 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 { + @include border-radius(0 0 0 4px); + } + thead:last-child tr:last-child th:last-child, + tbody:last-child tr:last-child td:last-child { + @include 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; + } + } +} + + +// HOVER EFFECT +// ------------ +// Placed here since it has to come after the potential zebra striping +.table { + tbody tr:hover td, + tbody tr:hover th { + background-color: #f5f5f5; + } +} + + +// TABLE CELL SIZING +// ----------------- + +// Change the columns +@mixin tableColumns($columnSpan: 1) { + float: none; + width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; + margin-left: 0; +} +table { + .span1 { @include tableColumns(1); } + .span2 { @include tableColumns(2); } + .span3 { @include tableColumns(3); } + .span4 { @include tableColumns(4); } + .span5 { @include tableColumns(5); } + .span6 { @include tableColumns(6); } + .span7 { @include tableColumns(7); } + .span8 { @include tableColumns(8); } + .span9 { @include tableColumns(9); } + .span10 { @include tableColumns(10); } + .span11 { @include tableColumns(11); } + .span12 { @include tableColumns(12); } +} -- cgit v1.2.3