toggle/range improvements

scss/_variables.scss

@@ -137,6 +137,58 @@ $input-group-addon-bg:            $gray-lighter !default;
 $input-group-addon-border-color:  $input-border-color !default;
 
 
+// Toggle
+// -------------------------------
+
+$toggle-width:                    54px;
+$toggle-height:                   32px;
+$toggle-border-width:             2px;
+$toggle-border-radius:            20px;
+
+$toggle-switch-radius:            20px;
+
+$toggle-off-bg-color:             $white;
+$toggle-off-border-color:         #ddd;
+
+$toggle-on-bg-color:              #4bd863;
+$toggle-on-border-color:          $toggle-on-bg-color;
+
+$toggle-switch-off-bg-color:      $white;
+$toggle-switch-on-bg-color:       $toggle-switch-off-bg-color;
+
+$toggle-transition-duration:      .3s;
+
+
+// Range
+// -------------------------------
+
+$range-track-height:           4px;
+$range-track-color:            #ccc;
+$range-slider-width:           20px;
+$range-slider-height:          20px;
+$range-slider-border-radius:   10px;
+
+
+// Form States and Alerts
+// -------------------------------
+
+$warning-text:       #c09853;
+$warning-bg:         #fcf8e3;
+$warning-border:     darken(adjust-hue($warning-bg, -10), 3%);
+
+$error-text:         #b94a48;
+$error-bg:           #f2dede;
+$error-border:       darken(adjust-hue($error-bg, -10), 3%);
+
+$success-text:       #468847;
+$success-bg:         #dff0d8;
+$success-border:     darken(adjust-hue($success-bg, -10), 5%);
+
+$info-text:          #3a87ad;
+$info-bg:            #d9edf7;
+$info-border:        darken(adjust-hue($info-bg, -10), 7%);
+
+
 // Buttons
 // -------------------------------
 
@@ -222,6 +274,7 @@ $bar-danger-border-color:     #bc4435;
 $bar-dark-bg:                 #444;
 $bar-dark-border-color:       #111;
 
+
 // Tabs
 // -------------------------------
 $tabs-height:                 49px !default;
@@ -283,51 +336,6 @@ $list-dark-background: $brand-dark;
 $list-dark-border: $brand-dark;
 
 
-// Form States and Alerts
-// -------------------------------
-
-$warning-text:       #c09853;
-$warning-bg:         #fcf8e3;
-$warning-border:     darken(adjust-hue($warning-bg, -10), 3%);
-
-$error-text:         #b94a48;
-$error-bg:           #f2dede;
-$error-border:       darken(adjust-hue($error-bg, -10), 3%);
-
-$success-text:       #468847;
-$success-bg:         #dff0d8;
-$success-border:     darken(adjust-hue($success-bg, -10), 5%);
-
-$info-text:          #3a87ad;
-$info-bg:            #d9edf7;
-$info-border:        darken(adjust-hue($info-bg, -10), 7%);
-
-
-// Toggle
-// -------------------------------
-
-$toggle-width:                    54px;
-$toggle-height:                   32px;
-$toggle-border-width:             2px;
-$toggle-border-radius:            20px;
-
-$toggle-switch-width:             $toggle-height - 4px;
-$toggle-switch-height:            $toggle-switch-width;
-$toggle-switch-radius:            50%;
-$toggle-switch-on-position:       $toggle-width - $toggle-switch-width - ($toggle-border-width * 2);
-
-$toggle-off-bg-color:             $gray-light;
-$toggle-off-border-color:         $toggle-off-bg-color;
-
-$toggle-on-bg-color:              $blue-dark;
-$toggle-on-border-color:          $toggle-on-bg-color;
-
-$toggle-switch-off-bg-color:      $white;
-$toggle-switch-on-bg-color:       $toggle-switch-off-bg-color;
-
-$toggle-transition-duration:      .1s;
-
-
 // Menus
 // -------------------------------
 

scss/ionic/_form.scss

@@ -243,16 +243,16 @@ input[type="range"] {
   margin-top: 20px;
   margin-bottom: 20px;
   width: auto;
-  height: 4px;
+  height: $range-track-height;
   outline: none;
-  border-radius: 4px;
+  border-radius: $range-track-height;
-  background-color: #b3b3b4;
+  background-color: $range-track-color;
   -webkit-appearance: none !important;
 
   &::-webkit-slider-thumb {
-    width: $toggle-switch-width;
+    width: $range-slider-width;
-    height: $toggle-switch-height;
+    height: $range-slider-height;
-    border-radius: $toggle-switch-radius;
+    border-radius: $range-slider-border-radius;
     background-color: $toggle-switch-off-bg-color;
     box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
     -webkit-appearance: none !important;

scss/ionic/_toggle.scss

@@ -9,9 +9,10 @@
   display: none;
 }
 
-/* the background of the toggle's slide area */
+/* the background of the toggle's track area */
-/* also the appearance when the slide is "off" */
+/* also the track appearance when the toggle is "off" */
-.toggle .slide {
+.toggle .track {
+  position: relative;
   display: inline-block;
   box-sizing: border-box;
   width: $toggle-width;
@@ -21,13 +22,7 @@
   background-color: $toggle-off-bg-color;
   cursor: pointer;
 
-  -webkit-transition-property: background-color, border;
+  transition: $toggle-transition-duration + .1s ease;
-  -webkit-transition-duration: $toggle-transition-duration;   
-  -webkit-transition-timing-function: ease-in-out;
-
-  transition-property: background-color, border;
-  transition-duration: $toggle-transition-duration;   
-  transition-timing-function: ease-in-out;
 }
 
 /* the switch (dot) thats inside the toggle's slide area */
@@ -35,26 +30,35 @@
 .toggle .switch {
   position: absolute;
   display: block;
-  width: $toggle-switch-width;
+  box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25);
-  height: $toggle-switch-height;
-  box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
   border-radius: $toggle-switch-radius;
   background-color: $toggle-switch-off-bg-color;
-  -webkit-transition: -webkit-transform $toggle-transition-duration ease-in-out;
+  left: 0;
-  transition: -webkit-transform $toggle-transition-duration ease-in-out;
+  top: 0;
+  bottom: 0;
+  right: $toggle-border-radius;
+  
+  transition: .2s ease;
+  transition-property: left, right;
+  transition-delay: 0s, .05s;
 }
 
 
 /* When the toggle is "on" */
-.toggle :checked + .slide {
+.toggle :checked + .track {
 
-  /* the slide when the toggle is "on" */
+  /* the track when the toggle is "on" */
   border-color: $toggle-on-border-color;
-  background-color: $toggle-on-bg-color;
+  background-color: #ccc;
+  box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color;
+  transition: $toggle-transition-duration - .2s ease;
 
   /* the switch when the toggle is "on" */
   .switch {
     background-color: $toggle-switch-on-bg-color;
-    -webkit-transform: translate3d($toggle-switch-on-position,0,0);
+    right: 0;
+    left: $toggle-border-radius;
+
+    transition-delay: .05s, 0s;
   }
 }

test/input-toggle.html

@@ -23,7 +23,7 @@
             Airplane Mode
             <label class="toggle">
                <input type="checkbox" name="airplaneMode">
-               <div class="slide">
+               <div class="track">
                 <div class="switch"></div>
               </div>
             </label>
@@ -32,7 +32,7 @@
             Do Not Disturb
             <label class="toggle">
                <input type="checkbox" name="doNotDisturb" checked="checked">
-               <div class="slide">
+               <div class="track">
                 <div class="switch"></div>
               </div>
             </label>