setup for ios7 css

Gruntfile.js

@@ -60,7 +60,8 @@ module.exports = function(grunt) {
     sass: {
       dist: {
         files: {
-          'dist/ionic.css': 'scss/ionic.scss'
+          'dist/ionic.css': 'scss/ionic.scss',
+          'dist/ionic-ios7.css': 'scss/ios7/ios7.scss'
         }
       }
     },

dist/ionic-ios7.css

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+.ios7 .toggle .track {
+  /* the background of the toggle's track area */
+  /* also the track appearance when the toggle is "off" */
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 54px;
+  height: 32px;
+  border: solid 2px #dddddd;
+  border-radius: 20px;
+  background-color: white;
+  cursor: pointer;
+  transition: 0.4s ease; }
+.ios7 .toggle .switch {
+  /* the switch (circle) thats inside the toggle's track area */
+  /* also the appearance when the switch is "off" */
+  position: absolute;
+  display: block;
+  width: auto;
+  /* override defaults */
+  height: auto;
+  /* override defaults */
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  background-color: white;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 20px;
+  transition: 0.2s ease;
+  transition-property: left, right;
+  transition-delay: 0s, 0.05s; }
+.ios7 .toggle :checked + .track {
+  /* When the toggle is "on" */
+  /* the track when the toggle is "on" */
+  border-color: #4bd863;
+  background-color: #ccc;
+  box-shadow: inset 0 0 0 20px #4bd863;
+  transition: 0.2s ease;
+  /* the switch when the toggle is "on" */ }
+  .ios7 .toggle :checked + .track .switch {
+    background-color: white;
+    right: 0;
+    left: 20px;
+    -webkit-transform: none;
+    transition-delay: 0.05s, 0s; }

dist/ionic-simple.js

@@ -53,6 +53,6 @@
   }
 
   // global tap event listener polyfill for HTML elements that were "tapped" by the user
-  ionic.on("tap", tapPolyfill, window);
+  //ionic.on("tap", tapPolyfill, window);
 
 })(this, document, ionic);

dist/ionic.css

@@ -1828,46 +1828,38 @@ input[type="checkbox"][readonly] {
 /* the background of the toggle's track area */
 /* also the track appearance when the toggle is "off" */
 .toggle .track {
-  position: relative;
   display: inline-block;
   box-sizing: border-box;
   width: 54px;
   height: 32px;
-  border: solid 2px #dddddd;
+  border: solid 2px #e5e5e5;
   border-radius: 20px;
-  background-color: white;
+  background-color: #e5e5e5;
   cursor: pointer;
-  transition: 0.4s ease; }
+  transition-property: background-color, border;
+  transition-duration: 0.1s;
+  transition-timing-function: ease-in-out; }
 
-/* the switch (dot) thats inside the toggle's slide area */
+/* the switch (circle) thats inside the toggle's track area */
 /* also the appearance when the switch is "off" */
 .toggle .switch {
   position: absolute;
   display: block;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25);
-  border-radius: 20px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
   background-color: white;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 20px;
-  transition: 0.2s ease;
-  transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition: -webkit-transform 0.1s ease-in-out; }
 
 /* When the toggle is "on" */
 .toggle :checked + .track {
   /* the track when the toggle is "on" */
-  border-color: #4bd863;
-  background-color: #ccc;
-  box-shadow: inset 0 0 0 20px #4bd863;
-  transition: 0.2s ease;
+  border-color: #5f85ef;
+  background-color: #5f85ef;
   /* the switch when the toggle is "on" */ }
   .toggle :checked + .track .switch {
     background-color: white;
-    right: 0;
-    left: 20px;
-    transition-delay: 0.05s, 0s; }
+    -webkit-transform: translate3d(22px, 0, 0); }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],

dist/ionicIcons.css

@@ -1898,46 +1898,38 @@ input[type="checkbox"][readonly] {
 /* the background of the toggle's track area */
 /* also the track appearance when the toggle is "off" */
 .toggle .track {
-  position: relative;
   display: inline-block;
   box-sizing: border-box;
   width: 54px;
   height: 32px;
-  border: solid 2px #dddddd;
+  border: solid 2px #e5e5e5;
   border-radius: 20px;
-  background-color: white;
+  background-color: #e5e5e5;
   cursor: pointer;
-  transition: 0.4s ease; }
+  transition-property: background-color, border;
+  transition-duration: 0.1s;
+  transition-timing-function: ease-in-out; }
 
-/* the switch (dot) thats inside the toggle's slide area */
+/* the switch (circle) thats inside the toggle's track area */
 /* also the appearance when the switch is "off" */
 .toggle .switch {
   position: absolute;
   display: block;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25);
-  border-radius: 20px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
   background-color: white;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 20px;
-  transition: 0.2s ease;
-  transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition: -webkit-transform 0.1s ease-in-out; }
 
 /* When the toggle is "on" */
 .toggle :checked + .track {
   /* the track when the toggle is "on" */
-  border-color: #4bd863;
-  background-color: #ccc;
-  box-shadow: inset 0 0 0 20px #4bd863;
-  transition: 0.2s ease;
+  border-color: #5f85ef;
+  background-color: #5f85ef;
   /* the switch when the toggle is "on" */ }
   .toggle :checked + .track .switch {
     background-color: white;
-    right: 0;
-    left: 20px;
-    transition-delay: 0.05s, 0s; }
+    -webkit-transform: translate3d(22px, 0, 0); }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],

ext/simple/events.js

@@ -53,6 +53,6 @@
   }
 
   // global tap event listener polyfill for HTML elements that were "tapped" by the user
-  ionic.on("tap", tapPolyfill, window);
+  //ionic.on("tap", tapPolyfill, window);
 
 })(this, document, ionic);

package.json

@@ -6,7 +6,7 @@
     "grunt": "~0.4.1",
     "grunt-cli": "~0.1.9",
     "grunt-contrib-watch": "~0.5.3",
-    "grunt-contrib-copy": "~0.0.01",
+    "grunt-contrib-copy": "~0.4.1",
     "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-uglify": "~0.2.4",
     "grunt-contrib-jshint": "~0.6.4",

scss/_variables.scss

@@ -145,18 +145,20 @@ $toggle-height:                   32px;
 $toggle-border-width:             2px;
 $toggle-border-radius:            20px;
 
-$toggle-switch-radius:            20px;
+$toggle-switch-width:             $toggle-height - ($toggle-border-width * 2);
+$toggle-switch-height:            $toggle-switch-width;
+$toggle-switch-radius:            50%;
 
-$toggle-off-bg-color:             $white;
-$toggle-off-border-color:         #ddd;
+$toggle-off-bg-color:             #E5E5E5;
+$toggle-off-border-color:         #E5E5E5;
 
-$toggle-on-bg-color:              #4bd863;
+$toggle-on-bg-color:              #5f85ef;
 $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:      .2s;
+$toggle-transition-duration:      .1s;
 
 
 // Range

scss/ionic/_toggle.scss

@@ -12,7 +12,6 @@
 /* the background of the toggle's track area */
 /* also the track appearance when the toggle is "off" */
 .toggle .track {
-  position: relative;
   display: inline-block;
   box-sizing: border-box;
   width: $toggle-width;
@@ -22,25 +21,21 @@
   background-color: $toggle-off-bg-color;
   cursor: pointer;
 
-  transition: $toggle-transition-duration + .2s ease;
+  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 */
+/* the switch (circle) thats inside the toggle's track area */
 /* also the appearance when the switch is "off" */
 .toggle .switch {
   position: absolute;
   display: block;
-  box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25);
+  width: $toggle-switch-width;
+  height: $toggle-switch-height;
   border-radius: $toggle-switch-radius;
   background-color: $toggle-switch-off-bg-color;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: $toggle-border-radius;
-  
-  transition: $toggle-transition-duration ease;
-  transition-property: left, right;
-  transition-delay: 0s, .05s;
+  transition: -webkit-transform $toggle-transition-duration ease-in-out;
 }
 
 
@@ -49,16 +44,11 @@
 
   /* the track when the toggle is "on" */
   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 ease;
+  background-color: $toggle-on-bg-color;
 
   /* the switch when the toggle is "on" */
   .switch {
     background-color: $toggle-switch-on-bg-color;
-    right: 0;
-    left: $toggle-border-radius;
-
-    transition-delay: .05s, 0s;
+    -webkit-transform: translate3d( $toggle-width - $toggle-switch-width - ($toggle-border-width * 2) ,0,0);
   }
 }

scss/ios7/_toggle.scss

@@ -0,0 +1,78 @@
+$toggle-width:                    54px;
+$toggle-height:                   32px;
+$toggle-border-width:             2px;
+$toggle-border-radius:            20px;
+
+$toggle-switch-radius:            20px;
+
+$toggle-off-bg-color:             #fff;
+$toggle-off-border-color:         #ddd;
+
+$toggle-on-bg-color:              #4bd863;
+$toggle-on-border-color:          $toggle-on-bg-color;
+
+$toggle-switch-off-bg-color:      #fff;
+$toggle-switch-on-bg-color:       $toggle-switch-off-bg-color;
+
+$toggle-transition-duration:      .2s;
+
+
+.ios7 {
+
+  .toggle .track {
+    /* the background of the toggle's track area */
+    /* also the track appearance when the toggle is "off" */
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: $toggle-width;
+    height: $toggle-height;
+    border: solid $toggle-border-width $toggle-off-border-color;
+    border-radius: $toggle-border-radius;
+    background-color: $toggle-off-bg-color;
+    cursor: pointer;
+
+    transition: $toggle-transition-duration + .2s ease;
+  }
+
+  .toggle .switch {
+    /* the switch (circle) thats inside the toggle's track area */
+    /* also the appearance when the switch is "off" */
+    position: absolute;
+    display: block;
+    width: auto; /* override defaults */
+    height: auto; /* override defaults */
+    box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25);
+    border-radius: $toggle-switch-radius;
+    background-color: $toggle-switch-off-bg-color;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: $toggle-border-radius;
+    
+    transition: $toggle-transition-duration ease;
+    transition-property: left, right;
+    transition-delay: 0s, .05s;
+  }
+
+
+  .toggle :checked + .track {
+    /* When the toggle is "on" */
+
+    /* the track when the toggle is "on" */
+    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 ease;
+
+    /* the switch when the toggle is "on" */
+    .switch {
+      background-color: $toggle-switch-on-bg-color;
+      right: 0;
+      left: $toggle-border-radius;
+      -webkit-transform: none;
+      transition-delay: .05s, 0s;
+    }
+  }
+
+}

scss/ios7/ios7.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+@import
+  // Variables
+  "../mixins",
+  "../variables",
+
+  "toggle"; 

test/input-toggle.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="../dist/ionicons.css" rel="stylesheet">
     <link href="../dist/ionic.css" rel="stylesheet">
+    <link href="../dist/ionic-ios7.css" rel="stylesheet">
   </head>
   <body>
 
@@ -51,6 +52,27 @@
           <p><a class="button button-secondary" href="index.html">Homepage</a></p>
 
         </div>
+        
+        <ul class="ios7 list">
+          <li class="list-item">
+            Airplane Mode
+            <label class="toggle">
+               <input type="checkbox" name="airplaneMode">
+               <div class="track">
+                <div class="switch"></div>
+              </div>
+            </label>
+          </li>
+          <li class="list-item">
+            Do Not Disturb
+            <label class="toggle">
+               <input type="checkbox" name="doNotDisturb" checked="checked">
+               <div class="track">
+                <div class="switch"></div>
+              </div>
+            </label>
+          </li>
+        </ul>
       </main>
 
     </section>