From 72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2 Mon Sep 17 00:00:00 2001 From: Arun Persaud Date: Sat, 8 Mar 2014 22:02:34 -0800 Subject: updated css/js libraries * bootstrap 3.1.1 * jquery 2.1.0 * less 1.7.0 mostly bootstrap had to be adjusted, e.g. different names like hero-unit->jumbotron, etc. --- css/bootstrap/tables.less | 356 ++++++++++++++++++++++------------------------ 1 file changed, 172 insertions(+), 184 deletions(-) (limited to 'css/bootstrap/tables.less') diff --git a/css/bootstrap/tables.less b/css/bootstrap/tables.less index 13c37c6..c41989c 100644 --- a/css/bootstrap/tables.less +++ b/css/bootstrap/tables.less @@ -3,243 +3,231 @@ // -------------------------------------------------- -// BASE TABLES -// ----------------- - table { max-width: 100%; - background-color: @tableBackground; - border-collapse: collapse; - border-spacing: 0; + background-color: @table-bg; +} +th { + text-align: left; } -// BASELINE STYLES -// --------------- + +// Baseline styles .table { width: 100%; - margin-bottom: @baseLineHeight; + margin-bottom: @line-height-computed; // Cells - th, - td { - padding: 8px; - line-height: @baseLineHeight; - text-align: left; - vertical-align: top; - border-top: 1px solid @tableBorder; - } - th { - font-weight: bold; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-cell-padding; + line-height: @line-height-base; + vertical-align: top; + border-top: 1px solid @table-border-color; + } + } } // Bottom align for column headings - thead th { + > thead > tr > th { vertical-align: bottom; + border-bottom: 2px solid @table-border-color; } // Remove top border from thead by default - 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; + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } } // Account for multiple tbody instances - tbody + tbody { - border-top: 2px solid @tableBorder; + > tbody + tbody { + border-top: 2px solid @table-border-color; } -} + // Nesting + .table { + background-color: @body-bg; + } +} -// CONDENSED TABLE W/ HALF PADDING -// ------------------------------- +// Condensed table w/ half padding .table-condensed { - th, - td { - padding: 4px 5px; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-condensed-cell-padding; + } + } } } -// BORDERED VERSION -// ---------------- +// Bordered version +// +// Add borders all around the table and between all the columns. .table-bordered { - border: 1px solid @tableBorder; - border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapse; // IE7 can't round corners anyway - border-left: 0; - .border-radius(4px); - th, - td { - border-left: 1px solid @tableBorder; - } - // Prevent a double border - 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; - } - // 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 { - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - } - thead:first-child tr:first-child th:last-child, - tbody:first-child tr:first-child td:last-child { - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - } - // 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, - tfoot:last-child tr:last-child td:first-child { - .border-radius(0 0 0 4px); - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - } - thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child, - tfoot:last-child tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - } - - // Special fixes to round the left border on the first td/th - 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 { - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; + border: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid @table-border-color; + } + } } - 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 { - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-topleft: 4px; + > thead > tr { + > th, + > td { + border-bottom-width: 2px; + } } - } - - -// ZEBRA-STRIPING -// -------------- - +// 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: @tableBackgroundAccent; + > tbody > tr:nth-child(odd) { + > td, + > th { + background-color: @table-bg-accent; } } } -// HOVER EFFECT -// ------------ +// Hover effect +// // Placed here since it has to come after the potential zebra striping + .table-hover { - tbody { - tr:hover td, - tr:hover th { - background-color: @tableBackgroundHover; + > tbody > tr:hover { + > td, + > th { + background-color: @table-bg-hover; } } } -// TABLE CELL SIZING -// ----------------- +// Table cell sizing +// +// Reset default table behavior -// Reset default grid behavior -table [class*=span], -.row-fluid table [class*=span] { - display: table-cell; - float: none; // undo default grid column styles - margin-left: 0; // undo default grid column styles +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-column; } - -// Change the column widths to account for td/th padding -.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); } - .span13 { .tableColumns(13); } - .span14 { .tableColumns(14); } - .span15 { .tableColumns(15); } - .span16 { .tableColumns(16); } - .span17 { .tableColumns(17); } - .span18 { .tableColumns(18); } - .span19 { .tableColumns(19); } - .span20 { .tableColumns(20); } - .span21 { .tableColumns(21); } - .span22 { .tableColumns(22); } - .span23 { .tableColumns(23); } - .span24 { .tableColumns(24); } +table { + td, + th { + &[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-cell; + } + } } +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. -// TABLE BACKGROUNDS -// ----------------- -// Exact selectors below required to override .table-striped +// Generate the contextual variants +.table-row-variant(active; @table-bg-active); +.table-row-variant(success; @state-success-bg); +.table-row-variant(info; @state-info-bg); +.table-row-variant(warning; @state-warning-bg); +.table-row-variant(danger; @state-danger-bg); -.table tbody tr { - &.success td { - background-color: @successBackground; - } - &.error td { - background-color: @errorBackground; - } - &.warning td { - background-color: @warningBackground; - } - &.info td { - background-color: @infoBackground; - } -} -// Hover states for .table-hover -.table-hover tbody tr { - &.success:hover td { - background-color: darken(@successBackground, 5%); - } - &.error:hover td { - background-color: darken(@errorBackground, 5%); - } - &.warning:hover td { - background-color: darken(@warningBackground, 5%); - } - &.info:hover td { - background-color: darken(@infoBackground, 5%); +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +@media (max-width: @screen-xs-max) { + .table-responsive { + width: 100%; + margin-bottom: (@line-height-computed * 0.75); + overflow-y: hidden; + overflow-x: scroll; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid @table-border-color; + -webkit-overflow-scrolling: touch; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td: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; + } + } + } + + } } } -- cgit v1.2.3-18-g5258