toggle tap

dist/ionic.css

@@ -1778,7 +1778,7 @@ input[type="checkbox"][readonly] {
   border-radius: 20px;
   background-color: white;
   cursor: pointer;
-  transition: 0.3s ease; }
+  transition: 0.4s ease; }
 
 /* the switch (dot) thats inside the toggle's slide area */
 /* also the appearance when the switch is "off" */
@@ -1802,7 +1802,7 @@ input[type="checkbox"][readonly] {
   border-color: #4bd863;
   background-color: #ccc;
   box-shadow: inset 0 0 0 20px #4bd863;
-  transition: 0s ease;
+  transition: 0.2s ease;
   /* the switch when the toggle is "on" */ }
   .toggle :checked + .track .switch {
     background-color: white;

ext/simple/init.js

@@ -2,9 +2,9 @@
 
   // add tap events to links
   function onLinkTap(e) {
-    window.location = this.href;
-    return false;
+    this.click();
   }
+  
   function addTapToLinks() {
     for(var x = 0; x < document.links.length; x++) {
       if(!document.links[x]._hasTap) {
@@ -13,7 +13,7 @@
       }
     }
   }
-  
+
   ionic.ResetTap = function() {
     addTapToLinks()
   };

ext/simple/toggle.js

@@ -0,0 +1,28 @@
+(function(window) {
+
+  iconic = window.iconic || {};
+
+  // add tap events to links
+  function onToggleTap(e) {
+    if(e.currentTarget.control) {
+      e.currentTarget.control.checked = !e.currentTarget.control.checked;
+      e.stopPropagation();
+    }
+  }
+  
+  ionic.ResetToggles = function() {
+    var
+    x,
+    toggles = document.getElementsByClassName("toggle");
+
+    for(x = 0; x < toggles.length; x++) {
+      if(!toggles[x].hasTap) {
+        ionic.on('tap', onToggleTap, toggles[x]);
+        toggles[x].hasTap = true;
+      }
+    }
+  };
+
+  ionic.ResetToggles();
+
+})(this);

scss/ionic/_toggle.scss

@@ -22,7 +22,7 @@
   background-color: $toggle-off-bg-color;
   cursor: pointer;
 
-  transition: $toggle-transition-duration + .1s ease;
+  transition: $toggle-transition-duration + .2s ease;
 }
 
 /* the switch (dot) thats inside the toggle's slide area */
@@ -38,7 +38,7 @@
   bottom: 0;
   right: $toggle-border-radius;
   
-  transition: .2s ease;
+  transition: $toggle-transition-duration ease;
   transition-property: left, right;
   transition-delay: 0s, .05s;
 }
@@ -51,7 +51,7 @@
   border-color: $toggle-on-border-color;
   background-color: #ccc;
   box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color;
-  transition: $toggle-transition-duration - .2s ease;
+  transition: $toggle-transition-duration ease;
 
   /* the switch when the toggle is "on" */
   .switch {

test/input-toggle.html

@@ -55,8 +55,14 @@
 
     </section>
 
+    <script src="../js/gestures.js"></script>
+    <script src="../js/events.js"></script>
+    <script src="../ext/simple/init.js"></script>
+    <script src="../ext/simple/toggle.js"></script>
+
+
     <!-- for testing only -->
-    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script>
 
       $("#btnTest1").click(function(){