From aba66eb31375bf671bc36e29f11b18c347f8164e Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sun, 9 Feb 2014 19:22:27 -0800
Subject: [PATCH] adding media and positioning btns badges and toggle
 vertically center.

---
 components.html             | 106 +++++++++++++++---------------------
 dist/android-theme.css      |   6 +-
 dist/ios-theme.css          |  18 ++++++
 dist/ratchet.css            | 100 +++++++++++++++++++++++++---------
 docs-assets/css/docs.css    |  28 +++++++++-
 lib/sass/buttons.scss       |   5 +-
 lib/sass/mixins.scss        |  14 +++--
 lib/sass/push.scss          |  26 +++++++++
 lib/sass/table-views.scss   |  63 ++++++++-------------
 lib/sass/theme-android.scss |   6 --
 10 files changed, 223 insertions(+), 149 deletions(-)

diff --git a/components.html b/components.html
index b60c322..40eb225 100644
--- a/components.html
+++ b/components.html
@@ -376,20 +376,17 @@ quis nostrud exercitation ullamco.</p>
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
         <li class="table-view-cell">
-          <a>
-            <span class="icon icon-right pull-right"></span>
+          <a class="push-right">
             Item 1
           </a>
         </li>
         <li class="table-view-cell">
-          <a>
-            <span class="icon icon-right pull-right"></span>
+          <a class="push-right">
             Item 2
           </a>
         </li>
         <li class="table-view-cell">
-          <a>
-            <span class="icon icon-right pull-right"></span>
+          <a class="push-right">
             Item 3
           </a>
         </li>
@@ -399,20 +396,17 @@ quis nostrud exercitation ullamco.</p>
 {% highlight html %}
 <ul class="table-view">
   <li class="table-view-cell">
-    <a>
-      <span class="icon icon-right pull-right"></span>
+    <a class="push-right">
       Item 1
     </a>
   </li>
   <li class="table-view-cell">
-    <a>
-      <span class="icon icon-right pull-right"></span>
+    <a class="push-right">
       Item 2
     </a>
   </li>
   <li class="table-view-cell">
-    <a>
-      <span class="icon icon-right pull-right"></span>
+    <a class="push-right">
       Item 3
     </a>
   </li>
@@ -426,17 +420,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 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>
+        <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>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <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>
+  <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>
 </ul>
 {% endhighlight %}
 
@@ -448,23 +442,20 @@ quis nostrud exercitation ullamco.</p>
     <div class="component-example component-example-fullbleed">
       <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>
+          <a class="push-right">
+            <span class="badge">5</span>
             Item 1
           </a>
         </li>
         <li class="table-view-cell">
-          <a>
-            <span class="icon icon-right pull-right"></span>
-            <span class="badge pull-right">5</span>
+          <a class="push-right">
+            <span class="badge">5</span>
             Item 2
           </a>
         </li>
         <li class="table-view-cell">
-          <a>
-            <span class="icon icon-right pull-right"></span>
-            <span class="badge pull-right">5</span>
+          <a class="push-right">
+            <span class="badge">5</span>
             Item 3
           </a>
         </li>
@@ -474,23 +465,20 @@ quis nostrud exercitation ullamco.</p>
 {% highlight html %}
 <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>
+    <a class="push-right">
+      <span class="badge">5</span>
       Item 1
     </a>
   </li>
   <li class="table-view-cell">
-    <a>
-      <span class="icon icon-right pull-right"></span>
-      <span class="badge pull-right">5</span>
+    <a class="push-right">
+      <span class="badge">5</span>
       Item 2
     </a>
   </li>
   <li class="table-view-cell">
-    <a>
-      <span class="icon icon-right pull-right"></span>
-      <span class="badge pull-right">5</span>
+    <a class="push-right">
+      <span class="badge">5</span>
       Item 3
     </a>
   </li>
@@ -506,31 +494,28 @@ quis nostrud exercitation ullamco.</p>
       <ul class="table-view">
         <li class="table-view-cell media">
           <a>
-            <span class="icon icon-right pull-right"></span>
-            <span class="badge pull-right">5</span>
             <img class="media-object pull-left" src="http://placehold.it/42x42">
             <div class="media-body">
               Item 1
+              <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
             </div>
           </a>
         </li>
         <li class="table-view-cell media">
           <a>
-            <span class="icon icon-right pull-right"></span>
-            <span class="badge pull-right">5</span>
             <img class="media-object pull-left" src="http://placehold.it/42x42">
             <div class="media-body">
               Item 1
+              <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
             </div>
           </a>
         </li>
         <li class="table-view-cell media">
           <a>
-            <span class="icon icon-right pull-right"></span>
-            <span class="badge pull-right">5</span>
             <img class="media-object pull-left" src="http://placehold.it/42x42">
             <div class="media-body">
               Item 1
+              <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
             </div>
           </a>
         </li>
@@ -541,8 +526,7 @@ quis nostrud exercitation ullamco.</p>
 <ul class="table-view">
   <li class="table-view-cell media">
     <a>
-      <span class="icon icon-right pull-right"></span>
-      <span class="badge pull-right">5</span>
+      <span class="badge">5</span>
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
@@ -552,8 +536,7 @@ quis nostrud exercitation ullamco.</p>
   </li>
   <li class="table-view-cell media">
     <a>
-      <span class="icon icon-right pull-right"></span>
-      <span class="badge pull-right">5</span>
+      <span class="badge">5</span>
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
@@ -563,8 +546,7 @@ quis nostrud exercitation ullamco.</p>
   </li>
   <li class="table-view-cell media">
     <a>
-      <span class="icon icon-right pull-right"></span>
-      <span class="badge pull-right">5</span>
+      <span class="badge">5</span>
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
@@ -582,19 +564,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 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>
+        <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>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <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>
+  <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>
 </ul>
 {% endhighlight %}
 
@@ -607,19 +589,19 @@ quis nostrud exercitation ullamco.</p>
       <ul class="table-view">
         <li class="table-view-cell">
           Item 1
-          <div class="toggle pull-right">
+          <div class="toggle">
             <div class="toggle-handle"></div>
           </div>
         </li>
         <li class="table-view-cell">
           Item 2
-          <div class="toggle pull-right active">
+          <div class="toggle active">
             <div class="toggle-handle"></div>
           </div>
         </li>
         <li class="table-view-cell">
           Item 3
-          <div class="toggle pull-right">
+          <div class="toggle">
             <div class="toggle-handle"></div>
           </div>
         </li>
@@ -630,19 +612,19 @@ quis nostrud exercitation ullamco.</p>
 <ul class="table-view">
   <li class="table-view-cell">
     Item 1
-    <div class="toggle pull-right">
+    <div class="toggle">
       <div class="toggle-handle"></div>
     </div>
   </li>
   <li class="table-view-cell">
     Item 2
-    <div class="toggle pull-right active">
+    <div class="toggle active">
       <div class="toggle-handle"></div>
     </div>
   </li>
   <li class="table-view-cell">
     Item 3
-    <div class="toggle pull-right">
+    <div class="toggle">
       <div class="toggle-handle"></div>
     </div>
   </li>
diff --git a/dist/android-theme.css b/dist/android-theme.css
index 1c6bdc6..0a6c256 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -289,10 +289,6 @@ a:active {
   background-color: transparent;
 }
 
-.table-view .btn {
-  margin-top: -4px;
-}
-
 select,
 textarea,
 input[type="text"],
@@ -427,6 +423,7 @@ textarea,
   border-radius: 0;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
   transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
@@ -476,6 +473,7 @@ textarea,
   background-color: #33b5e5;
   border-color: #33b5e5;
   -webkit-transform: translate3d(50px, 0, 0);
+  -ms-transform: translate3d(50px, 0, 0);
   transform: translate3d(50px, 0, 0);
 }
 .toggle.active:before {
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 6a71d9c..6b9d800 100644
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@@ -24,10 +24,13 @@ a:active {
   color: #929292;
   background-color: rgba(247, 247, 247, 0.98);
   -webkit-transition: all;
+  -moz-transition: all;
   transition: all;
   -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
   -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
   transition-timing-function: linear;
 }
 .btn:active, .btn.active {
@@ -265,6 +268,7 @@ textarea,
 .segmented-control li {
   border-color: #929292;
   -webkit-transition: background-color 0.1s linear;
+  -moz-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
 .segmented-control li:active {
@@ -337,6 +341,7 @@ textarea,
 .popover {
   border-radius: 12px;
   -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
   transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:before {
@@ -358,10 +363,12 @@ textarea,
 
 .modal {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .modal.active {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 
@@ -371,8 +378,10 @@ textarea,
   -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
   box-shadow: inset 0 0 0 0 #e1e1e1;
   -webkit-transition-property: box-shadow, border;
+  -moz-transition-property: box-shadow, border;
   transition-property: box-shadow, border;
   -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
 .toggle .toggle-handle {
@@ -380,6 +389,7 @@ textarea,
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -webkit-transform, border, width;
   transition-property: -webkit-transform, border, width;
 }
 .toggle:before {
@@ -393,11 +403,13 @@ textarea,
 }
 .toggle.active .toggle-handle {
   -webkit-transform: translate3d(17px, 0, 0);
+  -ms-transform: translate3d(17px, 0, 0);
   transform: translate3d(17px, 0, 0);
 }
 .toggle.active:active .toggle-handle,
 .toggle.active .toggle-handle:active {
   -webkit-transform: translate3d(10px, 0, 0) !important;
+  -ms-transform: translate3d(10px, 0, 0) !important;
   transform: translate3d(10px, 0, 0) !important;
 }
 .toggle.active .toggle-handle {
@@ -406,24 +418,30 @@ textarea,
 
 .content.fade {
   -webkit-transition: opacity 0.2s ease-in-out;
+  -moz-transition: opacity 0.2s ease-in-out;
   transition: opacity 0.2s ease-in-out;
 }
 .content.slide {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
+  -moz-animation-name: fadeOverlay;
   animation-name: fadeOverlay;
   -webkit-animation-duration: 0.4s;
+  -moz-animation-duration: 0.4s;
   animation-duration: 0.4s;
 }
 .content.slide.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
+  -moz-animation-direction: reverse;
   animation-direction: reverse;
 }
 .content.slide.left {
   -webkit-transform: translate3d(-20%, 0, 0);
+  -ms-transform: translate3d(-20%, 0, 0);
   transform: translate3d(-20%, 0, 0);
 }
 
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 6f694ed..08ac538 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -361,6 +361,7 @@ p {
   background-color: #428bca;
 }
 .btn-primary:active, .btn-primary.active {
+  color: #fff;
   border: 1px solid #3071a9;
   background-color: #3071a9;
 }
@@ -371,6 +372,7 @@ p {
   background-color: #5cb85c;
 }
 .btn-positive:active, .btn-positive.active {
+  color: #fff;
   border: 1px solid #449d44;
   background-color: #449d44;
 }
@@ -381,6 +383,7 @@ p {
   background-color: #d9534f;
 }
 .btn-negative:active, .btn-negative.active {
+  color: #fff;
   border: 1px solid #c9302c;
   background-color: #c9302c;
 }
@@ -685,7 +688,7 @@ input[type="button"] {
 .table-view .table-view-cell {
   position: relative;
   overflow: hidden;
-  padding: 11px 15px;
+  padding: 11px 65px 11px 15px;
   border-bottom: 1px solid #dddddd;
 }
 .table-view .table-view-cell:last-child {
@@ -696,7 +699,7 @@ input[type="button"] {
   display: block;
   overflow: hidden;
   padding: inherit;
-  margin: -11px -15px;
+  margin: -11px -65px -11px -15px;
   color: inherit;
 }
 .table-view .table-view-cell > a:not(.btn):active {
@@ -738,37 +741,37 @@ input[type="button"] {
   margin-left: 10px;
 }
 
-.table-view .btn {
-  margin-top: -1px;
+.table-view-cell > .btn,
+.table-view-cell > .badge,
+.table-view-cell > .toggle,
+.table-view-cell > a > .btn,
+.table-view-cell > a > .badge,
+.table-view-cell > a > .toggle {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
 }
-
-.table-view .badge {
-  margin-top: 2px;
-}
-.table-view .badge.pull-left {
-  margin-right: 5px;
-}
-.table-view .badge.pull-right {
-  margin-left: 5px;
-}
-
-.table-view .toggle {
-  margin-top: -4px;
+.table-view-cell .push-left > .btn,
+.table-view-cell .push-left > .badge,
+.table-view-cell .push-left > .toggle,
+.table-view-cell .push-right > .btn,
+.table-view-cell .push-right > .badge,
+.table-view-cell .push-right > .toggle,
+.table-view-cell > a .push-left > .btn,
+.table-view-cell > a .push-left > .badge,
+.table-view-cell > a .push-left > .toggle,
+.table-view-cell > a .push-right > .btn,
+.table-view-cell > a .push-right > .badge,
+.table-view-cell > a .push-right > .toggle {
+  right: 35px;
 }
 
 .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;
-}
 
 input,
 textarea,
@@ -996,6 +999,7 @@ select {
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   -webkit-transform: translate3d(0, -15px, 0);
+  -ms-transform: translate3d(0, -15px, 0);
   transform: translate3d(0, -15px, 0);
 }
 .popover:before {
@@ -1013,6 +1017,7 @@ select {
 .popover.visible {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 .popover .bar ~ .table-view {
@@ -1058,16 +1063,20 @@ select {
   overflow: hidden;
   background-color: #fff;
   -webkit-transform: translate3d(0, 100%, 0);
+  -ms-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
+  -moz-transition: -webkit-transform 0.25s, opacity 0.25s;
   transition: -webkit-transform 0.25s, opacity 0.25s;
 }
 .modal.active {
   opacity: 1;
   height: 100%;
   -webkit-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform 0.25s;
+  -moz-transition: -webkit-transform 0.25s;
   transition: -webkit-transform 0.25s;
 }
 
@@ -1086,6 +1095,7 @@ select {
   font-size: 0;
   white-space: nowrap;
   -webkit-transition: all 0 linear;
+  -moz-transition: all 0 linear;
   transition: all 0 linear;
 }
 .slider .slide-group .slide {
@@ -1107,8 +1117,10 @@ select {
   border: 2px solid #ddd;
   border-radius: 20px;
   -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
   transition-property: background-color, border;
   -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
 .toggle .toggle-handle {
@@ -1122,8 +1134,10 @@ select {
   border: 1px solid #ddd;
   border-radius: 100px;
   -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -webkit-transform, border, width;
   transition-property: -webkit-transform, border, width;
   -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
 .toggle:before {
@@ -1142,6 +1156,7 @@ select {
 .toggle.active .toggle-handle {
   border-color: #5cb85c;
   -webkit-transform: translate3d(44px, 0, 0);
+  -ms-transform: translate3d(44px, 0, 0);
   transform: translate3d(44px, 0, 0);
 }
 .toggle.active:before {
@@ -1164,21 +1179,52 @@ select {
 .content.slide {
   z-index: 2;
   -webkit-transition: -webkit-transform 0.4s;
+  -moz-transition: -webkit-transform 0.4s;
   transition: -webkit-transform 0.4s;
   -webkit-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 .content.slide.left {
   z-index: 1;
   -webkit-transform: translate3d(-100%, 0, 0);
+  -ms-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
 }
 .content.slide.right {
   z-index: 3;
   -webkit-transform: translate3d(100%, 0, 0);
+  -ms-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
 }
 
+.push-left:after,
+.push-right:after {
+  position: absolute;
+  top: 50%;
+  display: inline-block;
+  color: #bbb;
+  font-family: Ratchicons;
+  font-size: inherit;
+  text-decoration: none;
+  line-height: 1;
+  cursor: default;
+  -webkit-font-smoothing: antialiased;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.push-left:after {
+  left: 15px;
+  content: '\e803';
+}
+
+.push-right:after {
+  right: 15px;
+  content: '\e800';
+}
+
 @font-face {
   font-family: Ratchicons;
   src: url("ratchicons/ratchicons.eot");
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 434fa08..2098766 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -39,6 +39,7 @@ body {
   color: #fff;
   opacity: .4;
   -webkit-transition: opacity 0.2s linear;
+  -moz-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
 .docs-nav .icon:hover,
@@ -71,6 +72,7 @@ body {
   color: #00d1fe;
   border-color: #00d1fe;
   -webkit-transition: all 0.2s linear;
+  -moz-transition: all 0.2s linear;
   transition: all 0.2s linear;
 }
 .docs-header-content .btn:hover {
@@ -293,6 +295,7 @@ body {
   padding-bottom: 8px;
   background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%);
   -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
+  -moz-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
   transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
 }
 .platform-toggle .segmented-control {
@@ -522,6 +525,7 @@ hr {
     background-size: 100%;
     background-repeat: no-repeat;
     -webkit-transition: background-image 0.1s linear;
+    -moz-transition: background-image 0.1s linear;
     transition: background-image 0.1s linear;
   }
   .device:after {
@@ -571,6 +575,7 @@ hr {
     padding-right: 0;
     opacity: .3;
     -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
     transition: opacity 0.2s ease-in-out;
   }
   .component.active {
@@ -806,10 +811,13 @@ hr {
   color: #929292;
   background-color: rgba(247, 247, 247, 0.98);
   -webkit-transition: all;
+  -moz-transition: all;
   transition: all;
   -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
   -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
   transition-timing-function: linear;
 }
 .platform-ios .btn:active, .platform-ios .btn.active {
@@ -1021,6 +1029,7 @@ hr {
 .platform-ios .segmented-control li {
   border-color: #929292;
   -webkit-transition: background-color 0.1s linear;
+  -moz-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
 .platform-ios .segmented-control li:active {
@@ -1089,6 +1098,7 @@ hr {
 .platform-ios .popover {
   border-radius: 12px;
   -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
   transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .platform-ios .popover:before {
@@ -1106,10 +1116,12 @@ hr {
 }
 .platform-ios .modal {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .platform-ios .modal.active {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .platform-ios .toggle {
@@ -1118,8 +1130,10 @@ hr {
   -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
   box-shadow: inset 0 0 0 0 #e1e1e1;
   -webkit-transition-property: box-shadow, border;
+  -moz-transition-property: box-shadow, border;
   transition-property: box-shadow, border;
   -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
 .platform-ios .toggle .toggle-handle {
@@ -1127,6 +1141,7 @@ hr {
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   -webkit-transition-property: -webkit-transform, border, width;
+  -moz-transition-property: -webkit-transform, border, width;
   transition-property: -webkit-transform, border, width;
 }
 .platform-ios .toggle:before {
@@ -1140,11 +1155,13 @@ hr {
 }
 .platform-ios .toggle.active .toggle-handle {
   -webkit-transform: translate3d(17px, 0, 0);
+  -ms-transform: translate3d(17px, 0, 0);
   transform: translate3d(17px, 0, 0);
 }
 .platform-ios .toggle.active:active .toggle-handle,
 .platform-ios .toggle.active .toggle-handle:active {
   -webkit-transform: translate3d(10px, 0, 0) !important;
+  -ms-transform: translate3d(10px, 0, 0) !important;
   transform: translate3d(10px, 0, 0) !important;
 }
 .platform-ios .toggle.active .toggle-handle {
@@ -1152,24 +1169,30 @@ hr {
 }
 .platform-ios .content.fade {
   -webkit-transition: opacity 0.2s ease-in-out;
+  -moz-transition: opacity 0.2s ease-in-out;
   transition: opacity 0.2s ease-in-out;
 }
 .platform-ios .content.slide {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  -moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .platform-ios .content.slide.sliding-in, .platform-ios .content.slide.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
+  -moz-animation-name: fadeOverlay;
   animation-name: fadeOverlay;
   -webkit-animation-duration: 0.4s;
+  -moz-animation-duration: 0.4s;
   animation-duration: 0.4s;
 }
 .platform-ios .content.slide.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
+  -moz-animation-direction: reverse;
   animation-direction: reverse;
 }
 .platform-ios .content.slide.left {
   -webkit-transform: translate3d(-20%, 0, 0);
+  -ms-transform: translate3d(-20%, 0, 0);
   transform: translate3d(-20%, 0, 0);
 }
 .platform-ios .device {
@@ -1433,9 +1456,6 @@ hr {
   border-bottom: 2px solid #a9a9a9;
   background-color: transparent;
 }
-.platform-android .table-view .btn {
-  margin-top: -4px;
-}
 .platform-android select,
 .platform-android textarea,
 .platform-android input[type="text"],
@@ -1558,6 +1578,7 @@ hr {
   border-radius: 0;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
   transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .platform-android .popover:before {
@@ -1604,6 +1625,7 @@ hr {
   background-color: #33b5e5;
   border-color: #33b5e5;
   -webkit-transform: translate3d(50px, 0, 0);
+  -ms-transform: translate3d(50px, 0, 0);
   transform: translate3d(50px, 0, 0);
 }
 .platform-android .toggle.active:before {
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index b5edf62..1fb50f3 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -44,6 +44,7 @@
 
   &:active,
   &.active {
+    color: #fff;
     border: 1px solid darken($primary-color, 10%);
     background-color: darken($primary-color, 10%);
   }
@@ -56,7 +57,8 @@
   background-color: $positive-color;
 
   &:active,
-  &.active{
+  &.active {
+    color: #fff;
     border: 1px solid darken($positive-color, 10%);
     background-color: darken($positive-color, 10%);
   }
@@ -70,6 +72,7 @@
 
   &:active,
   &.active {
+    color: #fff;
     border: 1px solid darken($negative-color, 10%);
     background-color: darken($negative-color, 10%);
   }
diff --git a/lib/sass/mixins.scss b/lib/sass/mixins.scss
index 7d02c95..441bbe1 100644
--- a/lib/sass/mixins.scss
+++ b/lib/sass/mixins.scss
@@ -12,12 +12,6 @@
           box-orient: $orient;
 }
 
-//Box flex
-@mixin box-flex($flex) {
-  -webkit-box-flex: $flex;
-          box-flex: $flex;
-}
-
 // Box shadow
 @mixin box-shadow($shadow...) {
   -webkit-box-shadow: $shadow;
@@ -41,6 +35,7 @@
 // --------------------------------------------------
 @mixin transform($transform) {
   -webkit-transform: $transform;
+      -ms-transform: $transform;
           transform: $transform;
 }
 
@@ -49,18 +44,22 @@
 // --------------------------------------------------
 @mixin transition($transition...) {
   -webkit-transition: $transition;
+     -moz-transition: $transition;
           transition: $transition;
 }
 @mixin transition-property($property...) {
   -webkit-transition-property: $property;
+     -moz-transition-property: $property;
           transition-property: $property;
 }
 @mixin transition-duration($duration...) {
   -webkit-transition-duration: $duration;
+     -moz-transition-duration: $duration;
           transition-duration: $duration;
 }
 @mixin transition-timing-function($function...) {
   -webkit-transition-timing-function: $function;
+     -moz-transition-timing-function: $function;
           transition-timing-function: $function;
 }
 
@@ -69,14 +68,17 @@
 // --------------------------------------------------
 @mixin animation-name($name) {
   -webkit-animation-name: $name;
+     -moz-animation-name: $name;
           animation-name: $name;
 }
 @mixin animation-duration($duration) {
   -webkit-animation-duration: $duration;
+     -moz-animation-duration: $duration;
           animation-duration: $duration;
 }
 @mixin animation-direction($direction) {
   -webkit-animation-direction: $direction;
+     -moz-animation-direction: $direction;
           animation-direction: $direction;
 }
 
diff --git a/lib/sass/push.scss b/lib/sass/push.scss
index 3537809..38f91ed 100644
--- a/lib/sass/push.scss
+++ b/lib/sass/push.scss
@@ -30,3 +30,29 @@
     }
   }
 }
+
+// Add chevrons to elements
+.push-left,
+.push-right {
+  &:after {
+    position: absolute;
+    top: 50%;
+    display: inline-block;
+    color: #bbb;
+    font-family: Ratchicons;
+    font-size: inherit;
+    text-decoration: none;
+    line-height: 1;
+    cursor: default;
+    -webkit-font-smoothing: antialiased;
+    @include transform(translateY(-50%));
+  }
+}
+.push-left:after {
+  left: 15px;
+  content: '\e803';
+}
+.push-right:after {
+  right: 15px;
+  content: '\e800';
+}
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index d099547..d9634cc 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -12,7 +12,7 @@
   .table-view-cell {
     position: relative;
     overflow: hidden;
-    padding: 11px 15px;
+    padding: 11px 65px 11px 15px;
     border-bottom: $border-default;
 
     // Remove the border from the last table view item
@@ -25,7 +25,7 @@
       display: block;
       overflow: hidden;
       padding: inherit;
-      margin: -11px -15px; // Make the entire list item tappable.
+      margin: -11px -65px -11px -15px; // Make the entire list item tappable.
       color: inherit;
 
       &:active {
@@ -83,50 +83,33 @@
   }
 }
 
-// Table-views with buttons
+
+// Table-views with buttons, badges and toggles
 // --------------------------------------------------
-
-.table-view .btn {
-  margin-top: -1px; // Center the btn inside the cell
-}
-
-
-// Table-views with badges
-// --------------------------------------------------
-.table-view .badge {
-  margin-top: 2px;
-
-  &.pull-left {
-    margin-right: 5px;
+.table-view-cell,
+.table-view-cell > a {
+  > .btn,
+  > .badge,
+  > .toggle {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    @include transform(translateY(-50%));
   }
-  &.pull-right {
-    margin-left: 5px;
+
+  // If the cell has a chevron, give some more room.
+  .push-left,
+  .push-right {
+    > .btn,
+    > .badge,
+    > .toggle {
+      right: 35px;
+    }
   }
 }
 
-
-// Table-views with toggles
-// --------------------------------------------------
-
-.table-view .toggle {
-  margin-top: -4px; // Center the toggle inside the cell
-}
-
-
 // Table-views with Ratchicons
 // --------------------------------------------------
 .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;
-  }
+  font-size: inherit
 }
diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss
index c05cd28..9ff7c61 100644
--- a/lib/sass/theme-android.scss
+++ b/lib/sass/theme-android.scss
@@ -420,12 +420,6 @@ a {
   }
 }
 
-// Table-views with buttons
-// --------------------------------------------------
-.table-view .btn {
-  margin-top: -4px; // Center the btn inside the cell
-}
-
 // Forms
 // --------------------------------------------------