_tables.scss in sass-twitter-bootstrap-2.1.1

- old
+ new

@@ -1,16 +1,16 @@
 //
-// Tables.scss
-// Tables for, you guessed it, tabular data
-// ----------------------------------------
+// Tables
+// --------------------------------------------------
 
 
 // BASE TABLES
 // -----------------
 
 table {
   max-width: 100%;
+  background-color: $tableBackground;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 // BASELINE STYLES
@@ -24,27 +24,31 @@
   td {
     padding: 8px;
     line-height: $baseLineHeight;
     text-align: left;
     vertical-align: top;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $tableBorder;
   }
   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 {
+  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;
   }
   // Account for multiple tbody instances
   tbody + tbody {
-    border-top: 2px solid #ddd;
+    border-top: 2px solid $tableBorder;
   }
 }
 
 
 
@@ -61,44 +65,79 @@
 
 // BORDERED VERSION
 // ----------------
 
 .table-bordered {
-  border: 1px solid #ddd;
+  border: 1px solid $tableBorder;
   border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapsed; // IE7 can't round corners anyway
+  *border-collapse: collapse; // IE7 can't round corners anyway
+  border-left: 0;
   @include border-radius(4px);
-  th + th,
-  td + td,
-  th + td,
-  td + th {
-    border-left: 1px solid #ddd;
+  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 {
-    @include border-radius(4px 0 0 0);
+    -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 {
-    @include border-radius(0 4px 0 0);
+    -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 {
+  tbody:last-child tr:last-child td:first-child,
+  tfoot:last-child tr:last-child td:first-child {
     @include 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 {
-    @include border-radius(0 0 4px 0);
+  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;
+  }
+  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;
+  }
+
 }
 
 
 // ZEBRA-STRIPING
 // --------------
@@ -106,45 +145,79 @@
 // 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;
+      background-color: $tableBackgroundAccent;
     }
   }
 }
 
 
 // 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,
+    tr:hover th {
+      background-color: $tableBackgroundHover;
+    }
   }
 }
 
 
 // TABLE CELL SIZING
 // -----------------
 
-// Change the columns
-@mixin tableColumns($columnSpan: 1) {
-  float: none;
-  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16;
-  margin-left: 0;
+// 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 {
-  .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); }
+
+// Change the column widths to account for td/th padding
+.table {
+  @for $i from 1 through 24 {
+    .span#{$i} { @include tableColumns($i); }
+  }
 }
+
+
+
+// TABLE BACKGROUNDS
+// -----------------
+// Exact selectors below required to override .table-striped
+
+.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%);
+  }
+}
\ No newline at end of file