From 36607ce59ded94ea6faf2830c01aa64f3da56f9d Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 19 Oct 2013 15:39:06 -0700
Subject: [PATCH] Adding support for indented table views.

---
 dist/ratchet.css          | 30 +++++++++++++++++++++++++-----
 lib/sass/base.scss        |  8 ++++++++
 lib/sass/table-views.scss | 19 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/dist/ratchet.css b/dist/ratchet.css
index f12c807..9729ed0 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -278,6 +278,14 @@ strong {
   padding-top: 88px;
 }
 
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
 [class*="bar-"] {
   position: fixed;
   right: 0;
@@ -398,27 +406,27 @@ strong {
   list-style: none;
   background-color: #fff;
 }
-.table-view li {
+.table-view .table-view-cell {
   position: relative;
   padding: 11px 60px 12px 15px;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
   background-position: 15px 100%;
   background-repeat: no-repeat;
 }
-.table-view li:last-child {
+.table-view .table-view-cell:last-child {
   background-image: none;
 }
-.table-view li > a:not([class*="button"]) {
+.table-view .table-view-cell > a:not([class*="button"]) {
   position: relative;
   display: block;
   padding: inherit;
   margin: -11px -60px -12px -15px;
   color: inherit;
 }
-.table-view li > a:not([class*="button"]):active {
+.table-view .table-view-cell > a:not([class*="button"]):active {
   background-color: #eee;
 }
-.table-view li p {
+.table-view .table-view-cell p {
   margin: 0;
 }
 .table-view.inset {
@@ -474,6 +482,18 @@ strong {
   margin-top: -15px;
 }
 
+.table-view-indented .table-view-cell {
+  padding-left: 60px;
+  background-position-x: 60px;
+}
+.table-view-indented .table-view-cell > a:not([class*="button"]) {
+  margin-left: -60px;
+}
+.table-view-indented .table-view-cell > .pull-left,
+.table-view-indented .table-view-cell > a:not([class*="button"]) .pull-left {
+  margin-right: 15px;
+}
+
 .popover .table-view {
   width: auto;
   max-height: 300px;
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index 23b3ad2..7616bb8 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -63,3 +63,11 @@ strong {
 .bar-header-secondary ~ .content {
   padding-top: 88px;
 }
+
+// Utility classes
+.pull-left {
+  float: left;
+}
+.pull-right {
+  float: right;
+}
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 35c8bc3..dcde6e2 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -9,7 +9,7 @@
   background-color: #fff;
 
   // Pad each table view item and add dividers
-  li {
+  .table-view-cell {
     position: relative;
     padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
     @include hairline(single, #c8c7cc, 320px, 15px); // Single grey border with a width of 320px and 15px offset.
@@ -117,6 +117,23 @@
   }
 }
 
+// Indented table views
+// --------------------------------------------------
+
+.table-view-indented .table-view-cell {
+  padding-left: 60px;
+  background-position-x: 60px; // Make room for your left aligned media/icons.
+
+  > a:not([class*="button"]) {
+    margin-left: -60px;
+  }
+
+  > .pull-left,
+  > a:not([class*="button"]) .pull-left {
+    margin-right: 15px;
+  }
+}
+
 // Table views in popovers
 // --------------------------------------------------