vendor/twitter/bootstrap/sass/_tables.scss in bootstrap-generators-2.3.2 vs vendor/twitter/bootstrap/sass/_tables.scss in bootstrap-generators-3.0.0
- old
+ new
@@ -1,235 +1,236 @@
//
// Tables
// --------------------------------------------------
-// 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;
+ 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;
+ }
+ }
}
- th {
- font-weight: bold;
- }
// 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;
+ border-top: 2px solid $table-border-color;
}
// Nesting
.table {
- background-color: $bodyBackground;
+ 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;
- @include border-radius($baseBorderRadius);
- th,
- td {
- border-left: 1px solid $tableBorder;
+ border: 1px solid $table-border-color;
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th,
+ > td {
+ border: 1px solid $table-border-color;
+ }
+ }
}
- // 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;
+ > thead {
+ > tr {
+ > th,
+ > td {
+ border-bottom-width: 2px;
+ }
+ }
}
- // For first th/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,
- tbody:first-child tr:first-child > th:first-child {
- @include border-top-left-radius($baseBorderRadius);
- }
- // For last th/td in the first row in the first thead or tbody
- 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($baseBorderRadius);
- }
- // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
- 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($baseBorderRadius);
- }
- // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
- 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($baseBorderRadius);
- }
-
- // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
- tfoot + tbody:last-child tr:last-child td:first-child {
- @include border-bottom-left-radius(0);
- }
- tfoot + tbody:last-child tr:last-child td:last-child {
- @include border-bottom-right-radius(0);
- }
-
- // 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 {
- @include border-top-left-radius($baseBorderRadius);
- }
- 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($baseBorderRadius);
- }
-
}
-
-
-// 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 td[class*="span"],
-table th[class*="span"],
-.row-fluid table td[class*="span"],
-.row-fluid table th[class*="span"] {
- display: table-cell;
- float: none; // undo default grid column styles
- margin-left: 0; // undo default grid column styles
+table col[class*="col-"] {
+ float: none;
+ display: table-column;
}
-
-// Change the column widths to account for td/th padding
-.table td,
-.table th {
- @for $i from 1 through 12 {
- &.span#{$i} { @include tableColumns($i); }
+table {
+ td,
+ th {
+ &[class*="col-"] {
+ 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
-
-.table tbody tr {
- &.success > td {
- background-color: $successBackground;
+.table > thead > tr,
+.table > tbody > tr,
+.table > tfoot > tr {
+ > td.active,
+ > th.active,
+ &.active > td,
+ &.active > th {
+ background-color: $table-bg-active;
}
- &.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%);
+// Generate the contextual variants
+@include table-row-variant('success', $state-success-bg, $state-success-border);
+@include table-row-variant('danger', $state-danger-bg, $state-danger-border);
+@include table-row-variant('warning', $state-warning-bg, $state-warning-border);
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+@media (max-width: $screen-sm) {
+ .table-responsive {
+ width: 100%;
+ margin-bottom: 15px;
+ overflow-y: hidden;
+ overflow-x: scroll;
+ border: 1px solid $table-border-color;
+
+ // Tighten up spacing and give a background color
+ > .table {
+ margin-bottom: 0;
+ background-color: #fff;
+
+ // 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;
+ }
+ }
+ > tr:last-child {
+ > th,
+ > td {
+ border-bottom: 0;
+ }
+ }
+ }
+ }
}
}