From bbf1910c4f341554f92a16cdb949a5828373acbd Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 1 Feb 2014 16:34:58 -0800
Subject: [PATCH] remove chevron.scss and just use icons now. \o/

---
 components.html           | 80 +++++++++++++++++++--------------------
 dist/ratchet.css          | 79 ++++++++++++++++----------------------
 lib/sass/badges.scss      | 14 +++++++
 lib/sass/buttons.scss     |  8 ++++
 lib/sass/chevrons.scss    | 29 --------------
 lib/sass/ratchet.scss     |  1 -
 lib/sass/ratchicons.scss  | 19 ++++++++++
 lib/sass/table-views.scss | 40 +-------------------
 lib/sass/toggles.scss     |  9 +++++
 one.html                  |  2 +-
 10 files changed, 125 insertions(+), 156 deletions(-)
 delete mode 100644 lib/sass/chevrons.scss

diff --git a/components.html b/components.html
index 9d1f400..d3044c3 100644
--- a/components.html
+++ b/components.html
@@ -341,20 +341,20 @@ quis nostrud exercitation ullamco.</p>
       <ul class="table-view">
         <li class="table-view-cell">
           <a>
+            <span class="icon icon-right pull-right"></span>
             Item 1
-            <span class="chevron"></span>
           </a>
         </li>
         <li class="table-view-cell">
           <a>
+            <span class="icon icon-right pull-right"></span>
             Item 2
-            <span class="chevron"></span>
           </a>
         </li>
         <li class="table-view-cell">
           <a>
+            <span class="icon icon-right pull-right"></span>
             Item 3
-            <span class="chevron"></span>
           </a>
         </li>
       </ul>
@@ -364,20 +364,20 @@ quis nostrud exercitation ullamco.</p>
 <ul class="table-view">
   <li class="table-view-cell">
     <a>
+      <span class="icon icon-right pull-right"></span>
       Item 1
-      <span class="chevron"></span>
     </a>
   </li>
   <li class="table-view-cell">
     <a>
+      <span class="icon icon-right pull-right"></span>
       Item 2
-      <span class="chevron"></span>
     </a>
   </li>
   <li class="table-view-cell">
     <a>
+      <span class="icon icon-right pull-right"></span>
       Item 3
-      <span class="chevron"></span>
     </a>
   </li>
 </ul>
@@ -390,17 +390,17 @@ quis nostrud exercitation ullamco.</p>
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
-        <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
-        <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
+        <li class="table-view-cell">Item 1 <span class="badge pull-right">4</span></li>
+        <li class="table-view-cell">Item 2 <span class="badge pull-right">1</span></li>
+        <li class="table-view-cell">Item 3 <span class="badge pull-right">5</span></li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
-  <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
-  <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
+  <li class="table-view-cell">Item 1 <span class="badge pull-right">4</span></li>
+  <li class="table-view-cell">Item 2 <span class="badge pull-right">1</span></li>
+  <li class="table-view-cell">Item 3 <span class="badge pull-right">5</span></li>
 </ul>
 {% endhighlight %}
 
@@ -413,23 +413,23 @@ quis nostrud exercitation ullamco.</p>
       <ul class="table-view">
         <li class="table-view-cell">
           <a>
+            <span class="icon icon-right pull-right"></span>
+            <span class="badge pull-right">5</span>
             Item 1
-            <span class="chevron"></span>
-            <span class="badge">4</span>
           </a>
         </li>
         <li class="table-view-cell">
           <a>
+            <span class="icon icon-right pull-right"></span>
+            <span class="badge pull-right">5</span>
             Item 2
-            <span class="chevron"></span>
-            <span class="badge">1</span>
           </a>
         </li>
         <li class="table-view-cell">
           <a>
+            <span class="icon icon-right pull-right"></span>
+            <span class="badge pull-right">5</span>
             Item 3
-            <span class="chevron"></span>
-            <span class="badge">5</span>
           </a>
         </li>
       </ul>
@@ -439,23 +439,23 @@ quis nostrud exercitation ullamco.</p>
 <ul class="table-view">
   <li class="table-view-cell">
     <a>
+      <span class="icon icon-right pull-right"></span>
+      <span class="badge pull-right">5</span>
       Item 1
-      <span class="chevron"></span>
-      <span class="badge">4</span>
     </a>
   </li>
   <li class="table-view-cell">
     <a>
+      <span class="icon icon-right pull-right"></span>
+      <span class="badge pull-right">5</span>
       Item 2
-      <span class="chevron"></span>
-      <span class="badge">1</span>
     </a>
   </li>
   <li class="table-view-cell">
     <a>
+      <span class="icon icon-right pull-right"></span>
+      <span class="badge pull-right">5</span>
       Item 3
-      <span class="chevron"></span>
-      <span class="badge">5</span>
     </a>
   </li>
 </ul>
@@ -468,19 +468,19 @@ quis nostrud exercitation ullamco.</p>
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
-        <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
-        <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
-        <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
+        <li class="table-view-cell">Item 1 <a class="btn pull-right">Button</a></li>
+        <li class="table-view-cell">Item 2 <a class="btn btn-primary pull-right">Button</a></li>
+        <li class="table-view-cell">Item 3 <a class="btn btn-positive pull-right">Button</a></li>
+        <li class="table-view-cell">Item 4 <a class="btn btn-negative pull-right">Button</a></li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
-  <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
-  <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
-  <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
+  <li class="table-view-cell">Item 1 <a class="btn pull-right">Button</a></li>
+  <li class="table-view-cell">Item 2 <a class="btn btn-primary pull-right">Button</a></li>
+  <li class="table-view-cell">Item 3 <a class="btn btn-positive pull-right">Button</a></li>
+  <li class="table-view-cell">Item 4 <a class="btn btn-negative pull-right">Button</a></li>
 </ul>
 {% endhighlight %}
 
@@ -493,19 +493,19 @@ quis nostrud exercitation ullamco.</p>
       <ul class="table-view">
         <li class="table-view-cell">
           Item 1
-          <div class="toggle">
+          <div class="toggle pull-right">
             <div class="toggle-handle"></div>
           </div>
         </li>
         <li class="table-view-cell">
           Item 2
-          <div class="toggle active">
+          <div class="toggle pull-right active">
             <div class="toggle-handle"></div>
           </div>
         </li>
         <li class="table-view-cell">
           Item 3
-          <div class="toggle">
+          <div class="toggle pull-right">
             <div class="toggle-handle"></div>
           </div>
         </li>
@@ -516,19 +516,19 @@ quis nostrud exercitation ullamco.</p>
 <ul class="table-view">
   <li class="table-view-cell">
     Item 1
-    <div class="toggle">
+    <div class="toggle pull-right">
       <div class="toggle-handle"></div>
     </div>
   </li>
   <li class="table-view-cell">
     Item 2
-    <div class="toggle active">
+    <div class="toggle pull-right active">
       <div class="toggle-handle"></div>
     </div>
   </li>
   <li class="table-view-cell">
     Item 3
-    <div class="toggle">
+    <div class="toggle pull-right">
       <div class="toggle-handle"></div>
     </div>
   </li>
@@ -1043,9 +1043,9 @@ document
             <ul class="table-view">
               <li class="table-view-cell">
                 <a href="{{ page.base_url }}two.html" data-transition="slide-in">
+                  <span class="icon icon-right pull-right"></span>
                   Load new page with push
                 </a>
-                <span class="chevron"></span>
               </li>
             </ul>
           </div>
@@ -1061,9 +1061,9 @@ document
     <ul class="table-view">
       <li class="table-view-cell">
         <a href="{{ page.base_url }}two.html" data-transition="slide-in">
+          <span class="icon icon-right pull-right"></span>
           Load new page with push
         </a>
-        <span class="chevron"></span>
       </li>
     </ul>
   </div>
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 9c4161a..ce77de6 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -423,7 +423,7 @@ p {
 }
 .table-view .table-view-cell {
   position: relative;
-  padding: 11px 60px 12px 15px;
+  padding: 11px 15px 12px 15px;
   border-bottom: 1px solid #dddddd;
 }
 .table-view .table-view-cell:last-child {
@@ -433,7 +433,7 @@ p {
   position: relative;
   display: block;
   padding: inherit;
-  margin: -11px -60px -12px -15px;
+  margin: -11px -15px -12px -15px;
   color: inherit;
 }
 .table-view .table-view-cell > a:not(.btn):active {
@@ -461,30 +461,6 @@ p {
 .table-view .table-view-divider:last-child {
   border-radius: 0 0 6px 6px;
 }
-.table-view .chevron,
-.table-view .btn,
-.table-view .badge,
-.table-view .toggle {
-  position: absolute;
-  top: 50%;
-  right: 10px;
-}
-.table-view .chevron {
-  margin-top: -10px;
-}
-.table-view .badge {
-  margin-top: -9px;
-}
-.table-view .chevron + .badge {
-  right: 30px;
-}
-.table-view .btn {
-  left: auto;
-  margin-top: -12px;
-}
-.table-view .toggle {
-  margin-top: -15px;
-}
 
 .table-view-indented .table-view-cell {
   padding-left: 59px;
@@ -771,27 +747,8 @@ input[type="button"] {
   margin-right: 5px;
 }
 
-.chevron {
-  display: block;
-  height: 20px;
-}
-.chevron:before, .chevron:after {
-  position: relative;
-  display: block;
-  width: 10px;
-  height: 3px;
-  background-color: #c7c7cc;
-  content: '';
-}
-.chevron:before {
-  top: 6px;
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-.chevron:after {
-  top: 8px;
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
+.table-view .btn {
+  margin-top: -1px;
 }
 
 .badge {
@@ -857,6 +814,16 @@ input[type="button"] {
   margin-right: 10px;
 }
 
+.table-view .badge {
+  margin-top: 2px;
+}
+.table-view .badge.pull-left {
+  margin-right: 5px;
+}
+.table-view .badge.pull-right {
+  margin-left: 5px;
+}
+
 .segmented-control {
   position: relative;
   display: table;
@@ -1115,6 +1082,10 @@ input[type="button"] {
   display: none;
 }
 
+.table-view .toggle {
+  margin-top: -4px;
+}
+
 .content.fade {
   left: 0;
   opacity: 0;
@@ -1242,3 +1213,17 @@ input[type="button"] {
   font-size: 24px;
   margin-top: 11px;
 }
+
+.table-view .icon {
+  margin-top: 3px;
+  font-size: inherit;
+}
+.table-view .icon.icon-left, .table-view .icon.icon-right {
+  color: #bbb;
+}
+.table-view .icon.pull-left {
+  margin-right: 5px;
+}
+.table-view .icon.pull-right {
+  margin-left: 5px;
+}
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index 6807543..be32f3f 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -83,3 +83,17 @@
   right: 0;
   margin-right: 10px;
 }
+
+// Ratchicons in table-views
+.table-view {
+  .badge {
+    margin-top: 2px;
+
+    &.pull-left {
+      margin-right: 5px;
+    }
+    &.pull-right {
+      margin-left: 5px;
+    }
+  }
+}
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 359fb5d..67d7c86 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -198,3 +198,11 @@ input[type="button"] {
     }
   }
 }
+
+// Buttons in table-views
+// --------------------------------------------------
+.table-view {
+  .btn {
+    margin-top: -1px; // Center the btn inside the cell
+  }
+}
diff --git a/lib/sass/chevrons.scss b/lib/sass/chevrons.scss
deleted file mode 100644
index 43e33bb..0000000
--- a/lib/sass/chevrons.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-//
-// Chevrons
-// --------------------------------------------------
-
-.chevron {
-  display: block;
-  height: 20px;
-
-  // Base styles for both halves of the chevron
-  &:before,
-  &:after {
-    position: relative;
-    display: block;
-    width: 10px;
-    height: 3px;
-    background-color: #c7c7cc;
-    content: '';
-  }
-
-  // Position and rotate respective halves of the chevron
-  &:before {
-    top: 6px;
-    @include transform(rotate(45deg));
-  }
-  &:after {
-    top: 8px;
-    @include transform(rotate(-45deg));
-  }
-}
diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss
index cb069d7..1704869 100644
--- a/lib/sass/ratchet.scss
+++ b/lib/sass/ratchet.scss
@@ -15,7 +15,6 @@
 @import "table-views.scss";
 @import "forms.scss";
 @import "buttons.scss";
-@import "chevrons.scss";
 @import "badges.scss";
 @import "segmented-controls.scss";
 @import "popovers.scss";
diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss
index 87ba3fd..ae50d8a 100644
--- a/lib/sass/ratchicons.scss
+++ b/lib/sass/ratchicons.scss
@@ -54,4 +54,23 @@
     font-size: 24px;
     margin-top: 11px;
   }
+}
+
+// Ratchicons in table-views
+.table-view {
+  .icon {
+    margin-top: 3px;
+    font-size: inherit;
+
+    &.icon-left,
+    &.icon-right {
+      color: #bbb;
+    }
+    &.pull-left {
+      margin-right: 5px;
+    }
+    &.pull-right {
+      margin-left: 5px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index b91bc83..d79d911 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -11,7 +11,7 @@
   // Pad each table view item and add dividers
   .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.
+    padding: 11px 15px 12px 15px;
     border-bottom: $border-default;
 
     // Remove the border from the last table view item
@@ -23,7 +23,7 @@
       position: relative;
       display: block;
       padding: inherit;
-      margin: -11px -60px -12px -15px; // Make the entire list item tappable.
+      margin: -11px -15px -12px -15px; // Make the entire list item tappable.
       color: inherit;
 
       &:active {
@@ -61,42 +61,6 @@
       border-radius: 0 0 $border-radius $border-radius;
     }
   }
-
-
-  // Right-aligned subcontent in table views (chevrons, buttons, badges and toggles)
-  // -------------------------------------------------------------------------------
-
-  .chevron,
-  .btn,
-  .badge,
-  .toggle {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-  }
-
-  // Position chevrons/badges vertically centered on the right in table view items
-  .chevron {
-    margin-top: -10px; // Half height of chevron
-  }
-  .badge {
-    margin-top: -9px; // Aligned just right
-  }
-
-  // Push badge over if there's a sibling chevron
-  .chevron + .badge {
-    right: 30px;
-  }
-
-  // Position buttons vertically centered on the right in table view items
-  .btn {
-    left: auto;
-    margin-top: -12px; // Half height of button
-  }
-  
-  .toggle {
-    margin-top: -15px; // Half height of toggle
-  }
 }
 
 // Indented table views
diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss
index c87a528..419ca37 100644
--- a/lib/sass/toggles.scss
+++ b/lib/sass/toggles.scss
@@ -58,3 +58,12 @@
     display: none;
   }
 }
+
+
+// Toggles in table-views
+// --------------------------------------------------
+.table-view {
+  .toggle {
+    margin-top: -4px; // Center the toggle inside the cell
+  }
+}
diff --git a/one.html b/one.html
index c719fb1..5dc8466 100644
--- a/one.html
+++ b/one.html
@@ -30,9 +30,9 @@
         <ul class="table-view">
           <li class="table-view-cell">
             <a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
+                <span class="icon icon-right pull-right"></span>
                 Load new page with push
             </a>
-            <span class="chevron"></span>
           </li>
         </ul>
       </div>