starting toggle

scss/_variables.scss

@@ -303,6 +303,31 @@ $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.scss

@@ -32,6 +32,7 @@
   "ionic/card",
   "ionic/form",
   "ionic/table",
+  "ionic/toggle",
 
   // Animations
   "ionic/animations";

scss/ionic/_button.scss

@@ -20,7 +20,6 @@
   &.button-block {
     display: block;
     margin: $button-block-margin;
-    width: 100%;
   }
 
   &.button-default {

scss/ionic/_scaffolding.scss

@@ -49,6 +49,10 @@ body {
   padding: $content-padding;
 }
 
+.inset {
+  margin: $inset-margin;
+}
+
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
 .has-header {
@@ -64,10 +68,6 @@ body {
   bottom: $tabs-height;
 }
 
-.inset {
-  margin: $inset-margin;
-}
-
 .rounded {
   border-radius: $border-radius-base;
 }

scss/ionic/_toggle.scss

@@ -0,0 +1,59 @@
+
+/* the overall container of the toggle */
+.toggle {
+  display: inline-block;
+}
+
+/* hide the actual checkbox */
+.toggle input {
+  display: none;
+}
+
+/* the background of the toggle's slide area */
+/* also the appearance when the slide is "off" */
+.toggle .slide {
+  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;
+
+  -webkit-transition-property: background-color, border;
+  -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 */
+/* also the appearance when the switch is "off" */
+.toggle .switch {
+  position: absolute;
+  display: block;
+  width: $toggle-switch-width;
+  height: $toggle-switch-height;
+  border-radius: $toggle-switch-radius;
+  background-color: $toggle-switch-off-bg-color;
+  -webkit-transition: -webkit-transform $toggle-transition-duration ease-in-out;
+  transition: -webkit-transform $toggle-transition-duration ease-in-out;
+}
+
+
+/* When the toggle is "on" */
+.toggle :checked + .slide {
+
+  /* the slide when the toggle is "on" */
+  border-color: $toggle-on-border-color;
+  background-color: $toggle-on-bg-color;
+
+  /* the switch when the toggle is "on" */
+  .switch {
+    background-color: $toggle-switch-on-bg-color;
+    -webkit-transform: translate3d($toggle-switch-on-position,0,0);
+  }
+}

test/input-toggle.html

@@ -16,8 +16,29 @@
         <h1 class="title">Input: Toggle</h1>
       </header>
 
-      <main class="content content-padded has-header">
-        todo
+      <main class="content has-header">
+        
+        <ul class="list">
+          <li class="list-item">
+            Airplane Mode
+            <label class="toggle">
+               <input type="checkbox" name="airplaneMode">
+               <div class="slide">
+                <div class="switch"></div>
+              </div>
+            </label>
+          </li>
+          <li class="list-item">
+            Do Not Disturb
+            <label class="toggle">
+               <input type="checkbox" name="doNotDistrube" checked="checked">
+               <div class="slide">
+                <div class="switch"></div>
+              </div>
+            </label>
+          </li>
+        </ul>
+
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>