diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss')
| -rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss | 257 |
1 files changed, 182 insertions, 75 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss index 4e74b53..1ddfb7a 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss @@ -1,126 +1,233 @@ // -// Tables.less -// Tables for, you guessed it, tabular data -// ---------------------------------------- +// Tables +// -------------------------------------------------- -// BASE TABLES -// ----------------- - table { max-width: 100%; - 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 #ddd; - } - 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 - thead:first-child tr th, thead:first-child tr 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 #ddd; + > 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 #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); + border: 1px solid $table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid $table-border-color; + } + } } - 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); + > 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: #f9f9f9; + > 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 { - tbody tr:hover td, tbody tr:hover th { - background-color: #f5f5f5; + +.table-hover { + > tbody > tr:hover { + > td, + > th { + background-color: $table-bg-hover; + } } } -// TABLE CELL SIZING -// ----------------- -// Change the columns -@mixin tableColumns($columnSpan: 1) { +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) float: none; - width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; - margin-left: 0; + display: table-column; } table { - @for $i from 1 through $gridColumns { - .span#{$i} { @include tableColumns($i); } + 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; + } } -}
\ No newline at end of file +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +@include table-row-variant('active', $table-bg-active); +@include table-row-variant('success', $state-success-bg); +@include table-row-variant('info', $state-info-bg); +@include table-row-variant('warning', $state-warning-bg); +@include table-row-variant('danger', $state-danger-bg); + + +// 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; + } + } + } + + } + } +} |