From 63dfbbd9efa9dc9cc9400f176ed8646dbd2840a8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 17 Oct 2013 14:05:47 -0500
Subject: [PATCH] .toggle-item for list items

---
 dist/css/ionic-scoped.css |  6 +++++-
 dist/css/ionic.css        |  7 ++++++-
 scss/ionic/_toggle.scss   |  8 +++++++-
 test/input-toggle.html    | 17 ++++++++---------
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 8f55d2f2ba..1ab4f21b66 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -185,6 +185,8 @@
   /* also the appearance when the handle is "off" */
   /* The track when the toggle is "on" */
   /* the handle when the toggle is "on" */
+  /* make sure list item content have enough padding on right to fit the toggle */
+  /* position the toggle to the right within a list item */
   @keyframes fadein {
     from {
       opacity: 0.7; }
@@ -2193,7 +2195,9 @@
   .ionic .toggle input:checked + .handle {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
-  .ionic .list-item-buttons.toggle {
+  .ionic .toggle-item .list-item-content {
+    padding-right: 99px; }
+  .ionic .toggle-item .toggle {
     position: absolute;
     top: 5px;
     right: 15px;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index d87208aefc..929e364825 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2679,7 +2679,12 @@ input[type="checkbox"][readonly] {
   background-color: white;
   -webkit-transform: translate3d(22px, 0, 0); }
 
-.list-item-buttons.toggle {
+/* make sure list item content have enough padding on right to fit the toggle */
+.toggle-item .list-item-content {
+  padding-right: 99px; }
+
+/* position the toggle to the right within a list item */
+.toggle-item .toggle {
   position: absolute;
   top: 5px;
   right: 15px;
diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss
index 17f9858ea7..287f440ecb 100644
--- a/scss/ionic/_toggle.scss
+++ b/scss/ionic/_toggle.scss
@@ -71,7 +71,13 @@
   -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
 }
 
-.list-item-buttons.toggle {
+/* make sure list item content have enough padding on right to fit the toggle */
+.toggle-item .list-item-content {
+  padding-right: ($list-item-padding * 3) + $toggle-width;
+}
+
+/* position the toggle to the right within a list item */
+.toggle-item .toggle {
   position: absolute;
   top: $list-item-padding / 3;
   right: $list-item-padding;
diff --git a/test/input-toggle.html b/test/input-toggle.html
index a5b2b8d14e..fa723e442c 100644
--- a/test/input-toggle.html
+++ b/test/input-toggle.html
@@ -18,45 +18,44 @@
       <main class="content has-header">
         
         <ul>
-          <li class="list-item">
+          <li class="list-item toggle-item">
              <div class="list-item-content">
               Flux Capacitor
              </div>
-             <label class="list-item-buttons toggle">
+             <label class="toggle">
                <input type="checkbox" checked>
                <div class="handle"></div>
              </label>
           </li>
-          <li class="list-item">
+          <li class="list-item toggle-item">
              <div class="list-item-content">
               1.21 Gigawatts
              </div>
-             <label class="list-item-buttons toggle">
+             <label class="toggle">
                <input type="checkbox" checked>
                <div class="handle"></div>
              </label>
           </li>
-          <li class="list-item">
+          <li class="list-item toggle-item">
              <div class="list-item-content">
               88 MPH
              </div>
-             <label class="list-item-buttons toggle">
+             <label class="toggle">
                <input type="checkbox" checked>
                <div class="handle"></div>
              </label>
           </li>
-          <li class="list-item">
+          <li class="list-item toggle-item">
              <div class="list-item-content">
               Plutonium Resupply
              </div>
-             <label class="list-item-buttons toggle">
+             <label class="toggle">
                <input type="checkbox">
                <div class="handle"></div>
              </label>
           </li>
         </ul>
 
-
       </main>
 
     </div>