From 34bcf3ff32a329a2394ecefb7d498d50f168a210 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 18 Aug 2015 13:25:32 -0500
Subject: [PATCH] md switch

---
 ionic/components/radio/modes/material.scss  |  6 +-
 ionic/components/switch/modes/ios.scss      |  8 +-
 ionic/components/switch/modes/material.scss | 97 +++++++++++++++++++++
 ionic/ionic.material.scss                   |  1 +
 4 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 ionic/components/switch/modes/material.scss

diff --git a/ionic/components/radio/modes/material.scss b/ionic/components/radio/modes/material.scss
index a74fe2dc86..3f842dbb1b 100644
--- a/ionic/components/radio/modes/material.scss
+++ b/ionic/components/radio/modes/material.scss
@@ -60,10 +60,14 @@ $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
   .radio[mode=md][#{$color-name}] {
 
-    &[aria-checked=true] .radio-icon::after {
+    &[aria-checked=true] .radio-icon {
       border-color: $color-value;
     }
 
+    &[aria-checked=true] .radio-icon::after {
+      background: $color-value;
+    }
+
     &[aria-checked=true] {
       color: $color-value;
     }
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 330258aa57..71fbebdc80 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -43,16 +43,14 @@ $switch-ios-transition-duration:       200ms !default;
   }
 
   .switch-track {
-    background-color: $switch-ios-off-bg-color;
-    border: solid $switch-ios-border-width $switch-ios-off-border-color;
-    border-radius: $switch-ios-border-radius;
     width: 100%;
     height: 100%;
-
+    border: solid $switch-ios-border-width $switch-ios-off-border-color;
+    border-radius: $switch-ios-border-radius;
+    background-color: $switch-ios-off-bg-color;
     will-change: border-width, opacity;
     transition-property: border-width, opacity;
     transition-duration: $switch-ios-transition-duration + 50ms;
-    transition-delay: 100ms;
   }
 
   .switch-track::before {
diff --git a/ionic/components/switch/modes/material.scss b/ionic/components/switch/modes/material.scss
new file mode 100644
index 0000000000..207fd93db2
--- /dev/null
+++ b/ionic/components/switch/modes/material.scss
@@ -0,0 +1,97 @@
+
+// Material Design Switch
+// --------------------------------------------------
+
+$switch-md-active-color:              color(primary) !default;
+
+$switch-md-track-width:               36px !default;
+$switch-md-track-height:              14px !default;
+$switch-md-track-off-bg-color:        $list-border-color !default;
+$switch-md-track-on-bg-color:         lighten($switch-md-active-color, 20%) !default;
+
+$switch-md-handle-width:              20px !default;
+$switch-md-handle-height:             20px !default;
+$switch-md-handle-off-bg-color:       $background-color !default;
+$switch-md-handle-on-bg-color:        $switch-md-active-color !default;
+$switch-md-handle-box-shadow:         0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+
+$switch-md-transition-duration:       280ms !default;
+
+
+.switch[mode=md] {
+
+  .item-media {
+    margin: 0;
+    padding: 6px $item-md-padding-right 6px ($item-md-padding-left + 20);
+  }
+
+  .switch-icon {
+    position: relative;
+    pointer-events: none;
+  }
+
+  .switch-track {
+    width: $switch-md-track-width;
+    height: $switch-md-track-height;
+
+    background-color: $switch-md-track-off-bg-color;
+    border-radius: $switch-md-track-height;
+  }
+
+  .switch-handle {
+    position: absolute;
+    top: ($switch-md-handle-height - $switch-md-track-height) / -2;
+    left: 0;// ($switch-md-handle-height - $switch-md-track-height) / -2;
+
+    width: $switch-md-handle-width;
+    height: $switch-md-handle-height;
+
+    border-radius: 50%;
+    background-color: $switch-md-handle-off-bg-color;
+    box-shadow: $switch-md-handle-box-shadow;
+
+    will-change: transform;
+    transition-property: transform;
+    transition-duration: $switch-md-transition-duration;
+  }
+
+  &[aria-checked=true] .switch-track {
+    background-color: $switch-md-track-on-bg-color;
+  }
+
+  &[aria-checked=true] .switch-handle {
+    background-color: $switch-md-handle-on-bg-color;
+    transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
+  }
+
+}
+
+
+// Material Design Color Mixin
+// --------------------------------------------------
+
+@mixin switch-theme-md($color-name, $bg-on) {
+
+  .switch[mode=md][#{$color-name}] {
+
+    &[aria-checked=true] .switch-track {
+      background-color: lighten($bg-on, 20%);
+    }
+
+    &[aria-checked=true] .switch-handle {
+      background-color: $bg-on;
+    }
+
+  }
+
+}
+
+
+// Generate Material Design Switch Auxiliary Colors
+// --------------------------------------------------
+
+@each $color-name, $value in auxiliary-colors() {
+
+  @include switch-theme-md($color-name, $value);
+
+}
diff --git a/ionic/ionic.material.scss b/ionic/ionic.material.scss
index 3ef88baf30..b5305260fc 100644
--- a/ionic/ionic.material.scss
+++ b/ionic/ionic.material.scss
@@ -14,5 +14,6 @@
   "components/text-input/modes/material",
   "components/nav-bar/modes/material",
   "components/radio/modes/material",
+  "components/switch/modes/material",
   "components/tabs/modes/material";