Adding the active state when a table view link is tapped.

dist/ratchet.css

@@ -400,11 +400,10 @@ strong {
 }
 .table-view li {
   position: relative;
-  padding: 11px 60px 12px 0;
-  margin-left: 15px;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#e6e6e6' x='0' y='0' width='1' height='0.5'/></svg>");
-  background-repeat: repeat-x;
-  background-position: bottom;
+  padding: 11px 60px 12px 15px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
 }
 .table-view li:last-child {
   background-image: none;
@@ -413,9 +412,12 @@ strong {
   position: relative;
   display: block;
   padding: inherit;
-  margin: -11px -60px -12px 0;
+  margin: -11px -60px -12px -15px;
   color: inherit;
 }
+.table-view li > a:not([class*="button"]):active {
+  background-color: #eee;
+}
 .table-view li p {
   margin: 0;
 }
@@ -439,7 +441,7 @@ strong {
   color: #999;
   font-weight: 500;
   background-color: #fafafa;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#e6e6e6' x='0' y='0' width='1' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#e6e6e6' x='0' y='0' width='1' height='0.5'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>");
   background-position: top, bottom;
 }
 .table-view .table-view-divider:first-child {

lib/sass/badges.scss

@@ -58,11 +58,13 @@
   padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
 }
+
 // Styles for filled badges within filled buttons
 .button-filled .badge-filled,
 [class*="button"]:active .badge-filled {
   background-color: rgba(0,0,0,.2);
 }
+
 // Position badges within block level buttons
 // Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
 // stays at true center of button

lib/sass/table-views.scss

@@ -11,11 +11,10 @@
   // Pad each table view item and add dividers
   li {
     position: relative;
-    padding: 11px 60px 12px 0; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
-    margin-left: 15px;
+    padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
     background-image: $hairline;
-    background-repeat: repeat-x;
-    background-position: bottom;
+    background-position: 15px 100%;
+    background-repeat: no-repeat;
 
 
     // Remove the border from the last table view item
@@ -28,8 +27,12 @@
       position: relative;
       display: block;
       padding: inherit;
-      margin: -11px -60px -12px 0;
+      margin: -11px -60px -12px -15px; // Make the entire list item tappable.
       color: inherit;
+
+      &:active {
+        background-color: #eee;
+      }
     }
 
     p {

lib/sass/variables.scss

@@ -47,4 +47,4 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
 // --------------------------------------------------
 
 // Hairline dividers (.5px tall for retina devices.)
-$hairline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#e6e6e6' x='0' y='0' width='1' height='0.5'/></svg>"); // Thanks to @madrobby
+$hairline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"); // Thanks to @madrobby