fix toggles js up. broke ios toggles

dist/android-theme.css

@@ -335,16 +335,42 @@ textarea,
   display: none;
 }
 
+.toggle {
+  width: 104px;
+  height: 28px;
+  border: 2px solid #d7d7d7;
+  border-radius: 0;
+  background-color: #d7d7d7;
+}
 .toggle .toggle-handle {
-  border: 1px solid #b1b1b1;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 24px;
+  border: 0;
+  border-radius: 0;
+  background-color: #bebebe;
 }
-.toggle:active .toggle-handle {
-  width: 35px;
+.toggle:before {
+  top: 1px;
+  right: auto;
+  left: 11px;
+  z-index: 3;
+  color: #fff;
 }
 .toggle.active {
-  border: 2px solid #99cc00;
-  background-color: #99cc00;
+  background-color: #d7d7d7;
 }
 .toggle.active .toggle-handle {
-  border-color: #99cc00;
+  margin-right: 2px;
+  background-color: #33b5e5;
+  border-color: #33b5e5;
+  -webkit-transform: translate3d(50px, 0, 0);
+  transform: translate3d(50px, 0, 0);
+}
+.toggle.active:before {
+  left: auto;
+  right: 15px;
+  color: #fff;
+  content: "On";
 }

dist/ratchet.js

@@ -720,9 +720,9 @@
     if (!toggle) return;
 
     var handle      = toggle.querySelector('.toggle-handle');
-    var toggleWidth = toggle.offsetWidth;
-    var handleWidth = handle.offsetWidth;
-    var offset      = toggle.classList.contains('active') ? (toggleWidth - handleWidth) - 2 : 0;
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
 
     start     = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
     touchMove = false;
@@ -737,9 +737,9 @@
 
     var handle      = toggle.querySelector('.toggle-handle');
     var current     = e.touches[0];
-    var toggleWidth = toggle.offsetWidth;
-    var handleWidth = 28;
-    var offset      = (toggleWidth - handleWidth) - 2;
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = toggleWidth - handleWidth;
 
     touchMove = true;
     distanceX = current.pageX - start.pageX;
@@ -760,9 +760,9 @@
     if (!toggle) return;
 
     var handle      = toggle.querySelector('.toggle-handle');
-    var toggleWidth = toggle.offsetWidth;
-    var handleWidth = 28;
-    var offset      = (toggleWidth - handleWidth) - 2;
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = (toggleWidth - handleWidth);
     var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
 
     if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';

docs-assets/css/docs.css

@@ -1489,18 +1489,44 @@ hr {
 .platform-android .popover:before {
   display: none;
 }
+.platform-android .toggle {
+  width: 104px;
+  height: 28px;
+  border: 2px solid #d7d7d7;
+  border-radius: 0;
+  background-color: #d7d7d7;
+}
 .platform-android .toggle .toggle-handle {
-  border: 1px solid #b1b1b1;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 24px;
+  border: 0;
+  border-radius: 0;
+  background-color: #bebebe;
 }
-.platform-android .toggle:active .toggle-handle {
-  width: 35px;
+.platform-android .toggle:before {
+  top: 1px;
+  right: auto;
+  left: 11px;
+  z-index: 3;
+  color: #fff;
 }
 .platform-android .toggle.active {
-  border: 2px solid #99cc00;
-  background-color: #99cc00;
+  background-color: #d7d7d7;
 }
 .platform-android .toggle.active .toggle-handle {
-  border-color: #99cc00;
+  margin-right: 2px;
+  background-color: #33b5e5;
+  border-color: #33b5e5;
+  -webkit-transform: translate3d(50px, 0, 0);
+  transform: translate3d(50px, 0, 0);
+}
+.platform-android .toggle.active:before {
+  left: auto;
+  right: 15px;
+  color: #fff;
+  content: "On";
 }
 .platform-android .device {
   font-family: 'Roboto', sans-serif;

lib/js/toggles.js

@@ -26,9 +26,9 @@
     if (!toggle) return;
 
     var handle      = toggle.querySelector('.toggle-handle');
-    var toggleWidth = toggle.offsetWidth;
-    var handleWidth = handle.offsetWidth;
-    var offset      = toggle.classList.contains('active') ? (toggleWidth - handleWidth) - 2 : 0;
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
 
     start     = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
     touchMove = false;
@@ -43,9 +43,9 @@
 
     var handle      = toggle.querySelector('.toggle-handle');
     var current     = e.touches[0];
-    var toggleWidth = toggle.offsetWidth;
-    var handleWidth = 28;
-    var offset      = (toggleWidth - handleWidth) - 2;
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = toggleWidth - handleWidth;
 
     touchMove = true;
     distanceX = current.pageX - start.pageX;
@@ -66,9 +66,9 @@
     if (!toggle) return;
 
     var handle      = toggle.querySelector('.toggle-handle');
-    var toggleWidth = toggle.offsetWidth;
-    var handleWidth = 28;
-    var offset      = (toggleWidth - handleWidth) - 2;
+    var toggleWidth = toggle.clientWidth;
+    var handleWidth = handle.clientWidth;
+    var offset      = (toggleWidth - handleWidth);
     var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
 
     if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';

lib/sass/theme-android.scss

@@ -479,20 +479,45 @@ textarea,
 // Toggles styles
 // --------------------------------------------------
 .toggle {
+  width: 104px;
+  height: 28px;
+  border: 2px solid #d7d7d7;
+  border-radius: 0;
+  background-color: #d7d7d7;
+  
   // Sliding handle
   .toggle-handle {
-    border: $border-default;
+    top: 0;
+    left: 0;
+    width: 50px;
+    height: 24px;
+    border: 0;
+    border-radius: 0;
+    background-color: #bebebe;
   }
-  &:active .toggle-handle {
-    width: 35px;
+  &:before {
+    top: 1px;
+    right: auto;
+    left: 11px;
+    z-index: 3;
+    color: #fff;
   }
+
   // Active state for toggle
   &.active {
-    border: 2px solid $positive-color;
-    background-color: $positive-color;
+    background-color: #d7d7d7;
 
     .toggle-handle {
-      border-color: $positive-color;
+      margin-right: 2px;
+      background-color: $primary-color;
+      border-color: $primary-color;
+      @include transform(translate3d(50px,0,0)); 
+    }
+    &:before {
+      left: auto;
+      right: 15px;
+      color: #fff;
+      content: "On";
     }
   }
 }