Updates toggle switches' CSS animations based on iOS7

dist/ratchet.css

@@ -1012,6 +1012,14 @@ input[type="button"] {
   background-color: #fff;
   border: 2px solid #e6e6e6;
   border-radius: 20px;
+  -webkit-transition-property: -webkit-transform, box-shadow, border;
+  transition-property: -webkit-transform, box-shadow, border;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 .toggle .toggle-handle {
   position: absolute;
@@ -1033,8 +1041,9 @@ input[type="button"] {
   transition-timing-function: ease-in-out;
 }
 .toggle.active {
-  background-color: #4cd964;
   border: 2px solid #4cd964;
+  -webkit-box-shadow: inset 0 0 0 25px #4cd964;
+  box-shadow: inset 0 0 0 25px #4cd964;
 }
 .toggle.active .toggle-handle {
   border-color: #4cd964;

lib/sass/toggles.scss

@@ -9,6 +9,10 @@
   background-color: #fff;
   border: 2px solid #e6e6e6;
   border-radius: 20px;
+  @include transition-property(-webkit-transform, box-shadow, border);
+  @include transition-duration(0.3s);
+  @include transition-timing-function(ease-out);
+  @include transform(scale(1));
 
   // Sliding handle
   .toggle-handle {
@@ -29,8 +33,8 @@
 
   // Active state for toggle
   &.active {
-    background-color: $positive-color;
     border: 2px solid $positive-color;
+    @include box-shadow(inset 0 0 0 25px $positive-color);
   }
 
   // Active state for toggle handle