From c1af0e741be340368153a767fcdc242456452671 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 11:44:15 -0500
Subject: [PATCH] refactor(switch): flattened markup and added some Sass vars

references #689
---
 ionic/components/switch/modes/ios.scss | 144 +++++++++++++------------
 ionic/components/switch/modes/md.scss  | 118 ++++++++++++--------
 2 files changed, 151 insertions(+), 111 deletions(-)

diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index a96ab37399..22ac526f20 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -15,7 +15,7 @@ $switch-ios-background-color-on:       map-get($colors-ios, primary) !default;
 
 $switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
 $switch-ios-handle-height:             $switch-ios-handle-width !default;
-$switch-ios-handle-radius:             $switch-ios-handle-height / 2 !default;
+$switch-ios-handle-border-radius:      $switch-ios-handle-height / 2 !default;
 $switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
 
 $switch-ios-handle-background-color:   $switch-ios-background-color-off !default;
@@ -26,9 +26,12 @@ $switch-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($i
 $switch-ios-transition-duration:       300ms !default;
 
 $switch-ios-disabled-opacity:          0.5 !default;
-$switch-ios-disabled-text-color:       $subdued-text-color !default;
+$switch-ios-disabled-text-color:       $subdued-text-ios-color !default;
 
 
+// Switch
+// -----------------------------------------
+
 ion-switch {
   display: block;
   @include user-select-none();
@@ -38,6 +41,78 @@ ion-switch {
   }
 }
 
+
+// Switch Wrapper
+// -----------------------------------------
+
+.switch-media {
+  margin: $switch-ios-media-margin;
+  padding: $switch-ios-media-padding;
+  cursor: pointer;
+}
+
+
+// Switch Background Track
+// -----------------------------------------
+
+.switch-icon {
+  // bg track, when not checked
+  position: relative;
+  display: block;
+  width: $switch-ios-width;
+  height: $switch-ios-height;
+  border-radius: $switch-ios-border-radius;
+  pointer-events: none;
+
+  background-color: $switch-ios-border-color-off;
+  transition: background-color $switch-ios-transition-duration;
+}
+
+
+// Switch Background Track, Inner Oval
+// -----------------------------------------
+
+.switch-icon:before {
+  // inner bg track's oval, when not checked
+  content: '';
+  position: absolute;
+  top: $switch-ios-border-width;
+  right: $switch-ios-border-width;
+  left: $switch-ios-border-width;
+  bottom: $switch-ios-border-width;
+
+  border-radius: $switch-ios-border-radius;
+  background-color: $switch-ios-background-color-off;
+
+  transform: scale3d(1, 1, 1);
+  transition: transform $switch-ios-transition-duration;
+}
+
+
+// Switch Knob
+// -----------------------------------------
+
+.switch-icon:after {
+  // knob, when not checked
+  content: '';
+  position: absolute;
+  top: $switch-ios-border-width;
+  left: $switch-ios-border-width;
+
+  width: $switch-ios-handle-width;
+  height: $switch-ios-handle-height;
+
+  border-radius: $switch-ios-handle-border-radius;
+  background-color: $switch-ios-handle-background-color;
+  box-shadow: $switch-ios-handle-box-shadow;
+
+  transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
+}
+
+
+// Switch Checked
+// -----------------------------------------
+
 ion-switch[aria-checked=true] {
   .switch-icon {
     // bg track, when checked
@@ -72,6 +147,7 @@ ion-switch[aria-checked=true] {
   }
 }
 
+
 // Switch Disabled
 // -----------------------------------------
 
@@ -81,70 +157,6 @@ ion-switch[aria-disabled=true] {
   pointer-events: none;
 }
 
-// Switch Wrapper
-// -----------------------------------------
-
-.switch-media {
-  margin: $switch-ios-media-margin;
-  cursor: pointer;
-  padding: $switch-ios-media-padding;
-}
-
-// Switch Background Track
-// -----------------------------------------
-
-.switch-icon {
-  // bg track, when not checked
-  position: relative;
-  display: block;
-  width: $switch-ios-width;
-  height: $switch-ios-height;
-  border-radius: $switch-ios-border-radius;
-  pointer-events: none;
-
-  background-color: $switch-ios-border-color-off;
-  transition: background-color $switch-ios-transition-duration;
-}
-
-// Switch Background Track, Inner Oval
-// -----------------------------------------
-
-.switch-icon:before {
-  // inner bg track's oval, when not checked
-  content: '';
-  position: absolute;
-  top: $switch-ios-border-width;
-  right: $switch-ios-border-width;
-  left: $switch-ios-border-width;
-  bottom: $switch-ios-border-width;
-
-  border-radius: $switch-ios-border-radius;
-  background-color: $switch-ios-background-color-off;
-
-  transform: scale3d(1, 1, 1);
-  transition: transform $switch-ios-transition-duration;
-}
-
-// Switch Knob
-// -----------------------------------------
-
-.switch-icon:after {
-  // knob, when not checked
-  content: '';
-  position: absolute;
-  top: $switch-ios-border-width;
-  left: $switch-ios-border-width;
-
-  width: $switch-ios-handle-width;
-  height: $switch-ios-handle-height;
-
-  border-radius: $switch-ios-handle-radius;
-  background-color: $switch-ios-handle-background-color;
-  box-shadow: $switch-ios-handle-box-shadow;
-
-  transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
-}
-
 
 // iOS Switch Color Mixin
 // --------------------------------------------------
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index 92e61a56d6..0b081adcb6 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -1,5 +1,4 @@
 @import "../../../globals.md";
-@import "../switch";
 
 // Material Design Switch
 // --------------------------------------------------
@@ -16,69 +15,98 @@ $switch-md-handle-height:                20px !default;
 $switch-md-handle-background-color-off:  $background-md-color !default;
 $switch-md-handle-background-color-on:   $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-handle-border-radius:         50% !default;
+
+$switch-md-media-margin:                 0 !default;
+$switch-md-media-padding:                12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
 
 $switch-md-transition-duration:          300ms !default;
 
+$switch-md-disabled-opacity:             0.5 !default;
+$switch-md-disabled-text-color:          $subdued-text-md-color !default;
+
+
+// Switch
+// -----------------------------------------
 
 ion-switch {
-
-  media-switch {
-    padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left;
-  }
+  display: block;
+  @include user-select-none();
+}
 
 
-  // Switch Background Track
-  // -----------------------------------------
+// Switch Wrapper
+// -----------------------------------------
 
-  switch-icon {
-    // bg track, when not checked
-    position: relative;
-    display: block;
-    width: $switch-md-track-width;
-    height: $switch-md-track-height;
-    pointer-events: none;
-    border-radius: $switch-md-track-height;
-
-    background-color: $switch-md-track-background-color-off;
-    will-change: background-color;
-    transition: background-color $switch-md-transition-duration
-  }
-
-  &[aria-checked=true] switch-icon {
-    // bg track, when not checked
-    background-color: $switch-md-track-background-color-on;
-  }
+.switch-media {
+  margin: $switch-md-media-margin;
+  padding: $switch-md-media-padding;
+  cursor: pointer;
+}
 
 
-  // Switch Knob
-  // -----------------------------------------
+// Switch Background Track
+// -----------------------------------------
 
-  switch-icon:after {
-    // knob, when not checked
-    content: '';
-    position: absolute;
-    top: ($switch-md-handle-height - $switch-md-track-height) / -2;
-    left: 0;
+.switch-icon {
+  // bg track, when not checked
+  position: relative;
+  display: block;
+  width: $switch-md-track-width;
+  height: $switch-md-track-height;
+  pointer-events: none;
+  border-radius: $switch-md-track-height;
 
-    width: $switch-md-handle-width;
-    height: $switch-md-handle-height;
+  background-color: $switch-md-track-background-color-off;
+  transition: background-color $switch-md-transition-duration
+}
 
-    border-radius: 50%;
-    box-shadow: $switch-md-handle-box-shadow;
 
-    background-color: $switch-md-handle-background-color-off;
+// Switch Knob
+// -----------------------------------------
 
-    will-change: transform, background-color;
-    transition-property: transform, background-color;
-    transition-duration: $switch-md-transition-duration;
-  }
+.switch-icon:after {
+  // knob, when not checked
+  content: '';
+  position: absolute;
+  top: ($switch-md-handle-height - $switch-md-track-height) / -2;
+  left: 0;
 
-  &[aria-checked=true] switch-icon:after {
+  width: $switch-md-handle-width;
+  height: $switch-md-handle-height;
+
+  border-radius: $switch-md-handle-border-radius;
+  box-shadow: $switch-md-handle-box-shadow;
+
+  background-color: $switch-md-handle-background-color-off;
+
+  transition-property: transform, background-color;
+  transition-duration: $switch-md-transition-duration;
+}
+
+
+// Switch Checked
+// -----------------------------------------
+
+ion-switch[aria-checked=true] .switch-icon {
+  // bg track, when not checked
+  background-color: $switch-md-track-background-color-on;
+
+  &:after {
     // knob, when not checked
     background-color: $switch-md-handle-background-color-on;
     transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
   }
+}
 
+
+// Switch Disabled
+// -----------------------------------------
+
+ion-switch[aria-disabled=true] {
+  opacity: $switch-md-disabled-opacity;
+  color: $switch-md-disabled-text-color;
+  pointer-events: none;
 }
 
 
@@ -89,11 +117,11 @@ ion-switch {
 
   ion-switch[#{$color-name}] {
 
-    &[aria-checked=true] switch-icon {
+    &[aria-checked=true] .switch-icon {
       background-color: lighten($bg-on, 25%);
     }
 
-    &[aria-checked=true] switch-icon:after {
+    &[aria-checked=true] .switch-icon:after {
       background-color: $bg-on;
     }