table.scss in titon-toolkit-1.0.0.rc.3

- old
+ new

@@ -30,19 +30,19 @@
     // Row colors
     thead tr,
     tfoot tr {
         background: $gray-dark;
 
-        th { border-color: shade($gray-dark, 10%); }
+        th { border-color: $gray-darkest; }
     }
 
     // Zebra striping
     tbody tr {
         background: $gray;
 
-        &:nth-child(odd) { background: $gray-light; }
-        &.divider { background: shade($gray, 2%); }
+        &:nth-child(odd) { background: $gray-lightest; }
+        &.table-divider { background: $gray-dark; }
     }
 }
 
 .table-responsive {
     width: 100%;
@@ -50,39 +50,56 @@
     overflow-x: auto;
 }
 
 //-------------------- Modifiers --------------------//
 
-.table.table--hover {
-    tbody tr:not(.divider):hover { background: #fff; }
+.table.has-hover {
+    tbody tr:not(.table-divider):hover { background: #fff; }
 }
 
-.table.table--sortable {
+.table.is-sortable {
     thead th {
         padding: 0;
 
-        a, span {
+        > a,
+        > span {
             padding: $padding;
             display: block;
         }
 
-        a {
+        > a {
             background: $gray-dark;
-            color: #000;
 
-            &:hover { background: shade($gray-dark, 5%); }
+            &:hover { background: $gray-darkest; }
         }
     }
 }
 
-.table.table--compact {
+//-------------------- Sizes --------------------//
+
+.table.small {
     thead th,
     tbody td { padding: $small-padding; }
 
-    &.table--sortable {
+    &.is-sortable {
         thead th {
             padding: 0;
 
-            a, span { padding: $small-padding; }
+            > a,
+            > span { padding: $small-padding; }
+        }
+    }
+}
+
+.table.large {
+    thead th,
+    tbody td { padding: $large-padding; }
+
+    &.is-sortable {
+        thead th {
+            padding: 0;
+
+            > a,
+            > span { padding: $large-padding; }
         }
     }
 }
\ No newline at end of file