From 04a14ba269bfd61608b7080147629dc88a86bfae Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 17 Oct 2013 13:53:43 -0500
Subject: [PATCH] toggle within a list

---
 dist/css/ionic-scoped.css |  5 +++
 dist/css/ionic.css        |  6 +++
 scss/ionic/_toggle.scss   |  7 ++++
 test/input-toggle.html    | 79 +++++++++++++++------------------------
 4 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 4247f29e6e..8f55d2f2ba 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -2193,6 +2193,11 @@
   .ionic .toggle input:checked + .handle {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
+  .ionic .list-item-buttons.toggle {
+    position: absolute;
+    top: 5px;
+    right: 15px;
+    z-index: 3; }
   .ionic .radio-buttton-list .list-item-content {
     /* give some room to the right for the checkmark icon */
     padding-right: 60px; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index c691ab5849..d87208aefc 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2679,6 +2679,12 @@ input[type="checkbox"][readonly] {
   background-color: white;
   -webkit-transform: translate3d(22px, 0, 0); }
 
+.list-item-buttons.toggle {
+  position: absolute;
+  top: 5px;
+  right: 15px;
+  z-index: 3; }
+
 .radio-buttton-list .list-item-content {
   /* give some room to the right for the checkmark icon */
   padding-right: 60px; }
diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss
index b976622b4b..17f9858ea7 100644
--- a/scss/ionic/_toggle.scss
+++ b/scss/ionic/_toggle.scss
@@ -70,3 +70,10 @@
   background-color: $toggle-handle-on-bg-color;
   -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
 }
+
+.list-item-buttons.toggle {
+  position: absolute;
+  top: $list-item-padding / 3;
+  right: $list-item-padding;
+  z-index: 3;
+}
diff --git a/test/input-toggle.html b/test/input-toggle.html
index 008d927696..a5b2b8d14e 100644
--- a/test/input-toggle.html
+++ b/test/input-toggle.html
@@ -17,68 +17,51 @@
 
       <main class="content has-header">
         
-        <ul class="list">
+        <ul>
           <li class="list-item">
-            Airplane Mode
-            <label class="toggle" id="airplaneMode">
-               <input type="checkbox" name="airplaneMode">
+             <div class="list-item-content">
+              Flux Capacitor
+             </div>
+             <label class="list-item-buttons toggle">
+               <input type="checkbox" checked>
                <div class="handle"></div>
-            </label>
+             </label>
           </li>
           <li class="list-item">
-            Do Not Disturb
-            <label class="toggle" id="doNotDisturb">
-               <input type="checkbox" name="doNotDisturb" checked="checked">
+             <div class="list-item-content">
+              1.21 Gigawatts
+             </div>
+             <label class="list-item-buttons toggle">
+               <input type="checkbox" checked>
                <div class="handle"></div>
-            </label>
+             </label>
+          </li>
+          <li class="list-item">
+             <div class="list-item-content">
+              88 MPH
+             </div>
+             <label class="list-item-buttons toggle">
+               <input type="checkbox" checked>
+               <div class="handle"></div>
+             </label>
+          </li>
+          <li class="list-item">
+             <div class="list-item-content">
+              Plutonium Resupply
+             </div>
+             <label class="list-item-buttons toggle">
+               <input type="checkbox">
+               <div class="handle"></div>
+             </label>
           </li>
         </ul>
 
-        <div class="margin">
-          <p>
-            <button id="btnTest1">Toggle Airplane Mode</button>
-          </p>
-
-          <p>
-            <button id="btnTest2">Toggle Do Not Disturb</button>
-          </p>
-
-          <p><a class="button button-secondary" href="index.html">Homepage</a></p>
-
-        </div>
 
       </main>
 
     </div>
 
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="../dist/js/ionic.js"></script>
 
-
-    <!-- for testing only -->
-    <script>
-
-      $("#btnTest1").click(function(){
-        var toggle = $("#airplaneMode");
-        if( toggle.val() === true ) {
-          toggle.val(false);
-        } else {
-          toggle.val(true);
-        }
-      });
-
-      $("#btnTest2").click(function(){
-        var toggle = $("#doNotDisturb");
-        val = toggle.val();
-        return
-        if( toggle.val() === true ) {
-          toggle.val(false);
-        } else {
-          toggle.val(true);
-        }
-      });
-
-    </script>
-
   </body>
 </html>