fix firefox toggle, closes #69

requires another element :(

dist/css/ionic.css

@@ -3911,31 +3911,27 @@ input[type="checkbox"][readonly] {
   position: relative;
   display: inline-block; }
 
-.toggle input[type="checkbox"] {
+/* hide the actual input checkbox */
-  /* set the actual checkbox input to have a width/height */
+.toggle input {
-  /* but hide its appearance, then use :after to style it */
+  display: none; }
+
+/* the track appearance when the toggle is "off" */
+.toggle .track {
+  display: inline-block;
+  box-sizing: border-box;
   width: 54px;
   height: 32px;
-  border: 0;
+  border: solid 2px #e5e5e5;
-  background: transparent;
+  border-radius: 20px;
-  -webkit-appearance: none;
+  background-color: #e5e5e5;
-  /* the track appearance when the toggle is "off" */ }
+  content: ' ';
-  .toggle input[type="checkbox"]:after {
+  cursor: pointer;
-    display: inline-block;
+  transition-timing-function: ease-in-out;
-    box-sizing: border-box;
+  transition-duration: 0.1s;
-    width: 100%;
+  transition-property: background-color, border; }
-    height: 100%;
-    border: solid 2px #e5e5e5;
-    border-radius: 20px;
-    background-color: #e5e5e5;
-    content: ' ';
-    cursor: pointer;
-    transition-timing-function: ease-in-out;
-    transition-duration: 0.1s;
-    transition-property: background-color, border; }
 
 /* the handle (circle) thats inside the toggle's track area */
-/* also the appearance when the handle is "off" */
+/* also the handle's appearance when it is "off" */
 .toggle .handle {
   position: absolute;
   top: 2px;
@@ -3945,25 +3941,26 @@ input[type="checkbox"][readonly] {
   height: 28px;
   border-radius: 50%;
   background-color: white;
-  transition: -webkit-transform 0.1s ease-in-out;
+  -webkit-transition: 0.1s ease-in-out;
+  transition: 0.1s ease-in-out;
   /* used to create a larger (but hidden) hit area to slide the handle */ }
   .toggle .handle:before {
     position: absolute;
-    top: -2px;
+    top: -4px;
-    left: -16px;
+    left: -22px;
-    display: table;
+    padding: 19px 35px;
-    padding: 17px 30px;
     content: " "; }
 
-/* The track when the toggle is "on" */
+/* the track when the toggle is "on" */
-.toggle input:checked:after {
+.toggle input:checked + .track {
   border-color: #4a87ee;
   background-color: #4a87ee; }
 
 /* the handle when the toggle is "on" */
-.toggle input:checked + .handle {
+.toggle input:checked + .track .handle {
-  background-color: white;
+  -webkit-transform: translate(22px, 0);
-  -webkit-transform: translate3d(22px, 0, 0); }
+  transform: translate(22px, 0);
+  background-color: white; }
 
 /* make sure list item content have enough padding on right to fit the toggle */
 .item-toggle .item-content {

dist/js/ionic-angular.js

@@ -1351,7 +1351,7 @@ angular.module('ionic.ui.toggle', [])
     replace: true,
     require: '?ngModel',
     scope: true,
-    template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
+    template: '<div class="toggle"><input type="checkbox"><div class="track"><div class="handle"></div></div></div>',
 
     link: function($scope, $element, $attr, ngModel) {
       var checkbox, handle;

js/ext/angular/src/directive/ionicToggle.js

@@ -8,7 +8,7 @@ angular.module('ionic.ui.toggle', [])
     replace: true,
     require: '?ngModel',
     scope: true,
-    template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
+    template: '<div class="toggle"><input type="checkbox"><div class="track"><div class="handle"></div></div></div>',
 
     link: function($scope, $element, $attr, ngModel) {
       var checkbox, handle;

scss/_mixins.scss

@@ -197,6 +197,13 @@
 // CSS3 PROPERTIES
 // --------------------------------------------------
 
+// Appearance
+@mixin appearance($val) {
+  -webkit-appearance: $val;
+  -moz-appearance: $val;
+  appearance: $val;
+}
+
 // Border Radius
 @mixin border-radius($radius) {
   -webkit-border-radius: $radius;

scss/_toggle.scss

@@ -8,35 +8,30 @@
   display: inline-block;
 }
 
-.toggle input[type="checkbox"] {
+/* hide the actual input checkbox */
-  /* set the actual checkbox input to have a width/height */
+.toggle input {
-  /* but hide its appearance, then use :after to style it */
+  display: none;
+}
+
+/* the track appearance when the toggle is "off" */
+.toggle .track {
+  display: inline-block;
+  box-sizing: border-box;
   width: $toggle-width;
   height: $toggle-height;
-  border: 0;
+  border: solid $toggle-border-width $toggle-off-border-color;
-  background: transparent;
+  border-radius: $toggle-border-radius;
-  -webkit-appearance: none;
+  background-color: $toggle-off-bg-color;
+  content: ' ';
+  cursor: pointer;
 
-  /* the track appearance when the toggle is "off" */
+  transition-timing-function: ease-in-out;
-  &:after {
+  transition-duration: $toggle-transition-duration;
-    display: inline-block;
+  transition-property: background-color, border;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    border: solid $toggle-border-width $toggle-off-border-color;
-    border-radius: $toggle-border-radius;
-    background-color: $toggle-off-bg-color;
-    content: ' ';
-    cursor: pointer;
-
-    transition-timing-function: ease-in-out;
-    transition-duration: $toggle-transition-duration;
-    transition-property: background-color, border;
-  }
 }
 
 /* the handle (circle) thats inside the toggle's track area */
-/* also the appearance when the handle is "off" */
+/* also the handle's appearance when it is "off" */
 .toggle .handle {
   position: absolute;
   top: $toggle-border-width;
@@ -46,29 +41,28 @@
   height: $toggle-handle-height;
   border-radius: $toggle-handle-radius;
   background-color: $toggle-handle-off-bg-color;
-  transition: -webkit-transform $toggle-transition-duration ease-in-out;
+  @include transition($toggle-transition-duration ease-in-out);
 
   /* used to create a larger (but hidden) hit area to slide the handle */
   &:before {
     position: absolute;
-    top: -2px;
+    top: -4px;
-    left: ( ($toggle-handle-width / 2) * -1) - 2;
+    left: ( ($toggle-handle-width / 2) * -1) - 8;
-    display: table;
+    padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
-    padding: ($toggle-handle-height / 2) + 3 ($toggle-handle-width + 2);
     content: " ";
   }
 }
 
-/* The track when the toggle is "on" */
+/* the track when the toggle is "on" */
-.toggle input:checked:after {
+.toggle input:checked + .track {
   border-color: $toggle-on-border-color;
   background-color: $toggle-on-bg-color;
 }
 
   /* the handle when the toggle is "on" */
-.toggle input:checked + .handle {
+.toggle input:checked + .track .handle {
+  @include translate($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0);
   background-color: $toggle-handle-on-bg-color;
-  -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
 }
 
 /* make sure list item content have enough padding on right to fit the toggle */

test/input-toggle.html

@@ -22,7 +22,9 @@
            </div>
            <label class="toggle">
              <input type="checkbox" checked>
-             <div class="handle"></div>
+             <div class="track">
+               <div class="handle"></div>
+             </track>
            </label>
         </li>
         <li class="item item-toggle">
@@ -31,7 +33,9 @@
            </div>
            <label class="toggle">
              <input type="checkbox" checked>
-             <div class="handle"></div>
+             <div class="track">
+               <div class="handle"></div>
+             </track>
            </label>
         </li>
         <li class="item item-toggle">
@@ -40,7 +44,9 @@
            </div>
            <label class="toggle">
              <input type="checkbox">
-             <div class="handle"></div>
+             <div class="track">
+               <div class="handle"></div>
+             </track>
            </label>
         </li>
         <li class="item item-toggle">
@@ -49,7 +55,9 @@
            </div>
            <label class="toggle">
              <input type="checkbox">
-             <div class="handle"></div>
+             <div class="track">
+               <div class="handle"></div>
+             </track>
            </label>
         </li>
         <li class="item item-toggle">
@@ -58,7 +66,9 @@
            </div>
            <label class="toggle">
              <input type="checkbox" checked>
-             <div class="handle"></div>
+             <div class="track">
+               <div class="handle"></div>
+             </track>
            </label>
         </li>
         <li class="item item-toggle">
@@ -67,7 +77,9 @@
            </div>
            <label class="toggle">
              <input type="checkbox">
-             <div class="handle"></div>
+             <div class="track">
+               <div class="handle"></div>
+             </track>
            </label>
         </li>
       </ul>