md switch

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;
     }

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 {

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);
+
+}

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";