overhaul the table styles and update those everywhere in the docs, update the button docs, spec out the forms docs

1 files changed, 76 insertions, 19 deletions

diff --git a/lib/tables.less b/lib/tables.less
index 8a786ffd2..b02087fbd 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -9,14 +9,12 @@
 
 table {
   width: 100%;
-  margin-bottom: @baseLineHeight;
   padding: 0;
-  border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+  margin-bottom: @baseLineHeight;
   font-size: @baseFontSize;
-  border: 1px solid #ddd;
-  .border-radius(4px);
-  th, td {
+  border-collapse: collapse;
+  th,
+  td {
     padding: 10px 10px 9px;
     line-height: @baseLineHeight;
     text-align: left;
@@ -25,22 +23,49 @@ table {
     padding-top: 9px;
     font-weight: bold;
     vertical-align: middle;
-    border-bottom: 1px solid #ddd;
   }
   td {
     vertical-align: top;
+    border-top: 1px solid #ddd;
+  }
+  // When scoped to row, fix th in tbody
+  tbody th {
+    border-top: 1px solid #ddd;
+    vertical-align: top;
+  }
+}
+
+
+// CONDENSED VERSION
+// -----------------
+
+.condensed-table {
+  th,
+  td {
+    padding: 5px 5px 4px;
   }
+}
+
+
+// BORDERED VERSION
+// ----------------
+
+.bordered-table {
+  border: 1px solid #ddd;
+  border-collapse: separate; // Done so we can round those corners!
+  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+  .border-radius(4px);
   th + th,
-  td + td {
+  td + td,
+  th + td {
     border-left: 1px solid #ddd;
   }
-  tr + tr td {
-    border-top: 1px solid #ddd;
-  }
-  tbody tr:first-child td:first-child {
+  thead:first-child tr:first-child th:first-child,
+  tbody:first-child tr:first-child td:first-child {
     .border-radius(4px 0 0 0);
   }
-  tbody tr:first-child td:last-child {
+  thead:first-child tr:first-child th:last-child,
+  tbody:first-child tr:first-child td:last-child {
     .border-radius(0 4px 0 0);
   }
   tbody tr:last-child td:first-child {
@@ -52,20 +77,55 @@ table {
 }
 
 
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+}
+table {
+  // Default columns
+  .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); }
+}
+
+
 // ZEBRA-STRIPING
 // --------------
 
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.zebra-striped {
+.striped-table {
   tbody {
-    tr:nth-child(odd) td {
+    tr:nth-child(odd) td,
+    tr:nth-child(odd) th {
       background-color: #f9f9f9;
     }
-    tr:hover td {
+    tr:hover td,
+    tr:hover th {
       background-color: #f5f5f5;
     }
   }
+}
+
 
+// TABLESORTER
+// -----------
+
+table {
   // Tablesorting styles w/ jQuery plugin
   .header {
     cursor: pointer;
@@ -111,9 +171,6 @@ table {
       .opacity(60);
     }
   }
-}
-
-table {
   // Blue Table Headings
   .blue {
     color: @blue;