Adding hairline dividers to table views.

dist/ratchet.css

@@ -400,18 +400,20 @@ strong {
 }
 .table-view li {
   position: relative;
-  padding: 11px 60px 11px 0;
+  padding: 11px 60px 12px 0;
   margin-left: 15px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  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;
 }
 .table-view li:last-child {
-  border-bottom: 0;
+  background-image: none;
 }
 .table-view li > a:not([class*="button"]) {
   position: relative;
   display: block;
   padding: inherit;
-  margin: -11px -60px -11px 0;
+  margin: -11px -60px -12px 0;
   color: inherit;
 }
 .table-view li p {
@@ -424,28 +426,24 @@ strong {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 6px;
 }
-.table-view.inset li:first-child {
-  border-top-width: 0;
-}
+.table-view.inset li:first-child,
 .table-view.inset li:last-child {
-  border-bottom-width: 0;
+  background-image: none;
 }
 .table-view .table-view-divider {
-  position: relative;
-  top: -1px;
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 15px;
+  margin-top: -1px;
   margin-left: 0;
+  color: #999;
   font-weight: 500;
-  background-color: #f8f8f8;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  opacity: .4;
+  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-position: top, bottom;
 }
 .table-view .table-view-divider:first-child {
   top: 0;
-  border-top-width: 0;
   border-radius: 6px 6px 0 0;
 }
 .table-view .table-view-divider:last-child {
@@ -453,17 +451,17 @@ strong {
 }
 .table-view .chevron,
 .table-view [class*="button"],
-.table-view [class*="count"],
+.table-view [class*="badge"],
 .table-view .toggle {
   position: absolute;
   top: 50%;
   right: 10px;
 }
 .table-view .chevron,
-.table-view [class*="count"] {
+.table-view [class*="badge"] {
   margin-top: -10px;
 }
-.table-view .chevron + [class*="count"] {
+.table-view .chevron + [class*="badge"] {
   right: 30px;
 }
 .table-view [class*="button"] {

lib/sass/table-views.scss

@@ -11,13 +11,16 @@
   // Pad each table view item and add dividers
   li {
     position: relative;
-    padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
+    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;
-    border-bottom: 1px solid rgba(0, 0, 0, .1);
+    background-image: $hairline;
+    background-repeat: repeat-x;
+    background-position: bottom;
+
 
     // Remove the border from the last table view item
     &:last-child {
-      border-bottom: 0;
+      background-image: none;
     }
 
     // If a it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
@@ -25,7 +28,7 @@
       position: relative;
       display: block;
       padding: inherit;
-      margin: -11px -60px -11px 0;
+      margin: -11px -60px -12px 0;
       color: inherit;
     }
 
@@ -46,11 +49,9 @@
     border-radius: 6px;
 
     // Remove border from first/last standard list items to avoid double border at top/bottom of table views
-    li:first-child {
-      border-top-width: 0;
-    }
+    li:first-child,
     li:last-child {
-      border-bottom-width: 0;
+      background-image: none;
     }
   }
 
@@ -59,22 +60,20 @@
   // --------------------------------------------------
 
   .table-view-divider {
-    position: relative;
-    top: -1px;
     padding-top: 6px;
     padding-bottom: 6px;
     padding-left: 15px;
+    margin-top: -1px; // Hides the border of the previous list item  
     margin-left: 0;
+    color: #999;
     font-weight: $font-weight;
-    background-color: #f8f8f8;
-    border-top: 1px solid rgba(0, 0, 0, .1);
-    border-bottom: 1px solid rgba(0, 0, 0, .1);
-    opacity: .4;
+    background-color: #fafafa;
+    background-image: $hairline, $hairline;
+    background-position: top, bottom;
 
     // Rounding first divider on inset lists and remove border on the top
     &:first-child {
       top: 0;
-      border-top-width: 0;
       border-radius: 6px 6px 0 0;
     }
 
@@ -90,21 +89,21 @@
 
   .chevron,
   [class*="button"],
-  [class*="count"],
+  [class*="badge"],
   .toggle {
     position: absolute;
     top: 50%;
     right: 10px;
   }
 
-  // Position chevrons/counts vertically centered on the right in table view items
+  // Position chevrons/badges vertically centered on the right in table view items
   .chevron,
-  [class*="count"] {
+  [class*="badge"] {
     margin-top: -10px; // Half height of chevron
   }
 
-  // Push count over if there's a sibling chevron
-  .chevron + [class*="count"] {
+  // Push badge over if there's a sibling chevron
+  .chevron + [class*="badge"] {
     right: 30px;
   }
 

lib/sass/variables.scss

@@ -42,3 +42,7 @@ $button-font-size: 14px;
 // Transitions
 // --------------------------------------------------
 $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
+
+// Misc
+// --------------------------------------------------
+$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>");