refactor(switch): changed some of the markup and flattened the css

references #689

ionic/components/switch/modes/ios.scss

@@ -1,5 +1,4 @@
 @import "../../../globals.ios";
-@import "../switch";
 
 // iOS Switch
 // --------------------------------------------------
@@ -21,108 +20,129 @@ $switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px
 
 $switch-ios-handle-background-color:   $switch-ios-background-color-off !default;
 
+$switch-ios-media-margin:              0 !default;
+$switch-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
+
 $switch-ios-transition-duration:       300ms !default;
 
+$switch-ios-disabled-opacity:          0.5 !default;
+$switch-ios-disabled-text-color:       $subdued-text-color !default;
+
 
 ion-switch {
+  display: block;
+  @include user-select-none();
 
   &.item.activated {
     background: $list-ios-background-color;
   }
+}
 
-  media-switch {
-    padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left);
-  }
-
-
-  // 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;
-    will-change: background-color;
-    transition: background-color $switch-ios-transition-duration;
-  }
-
-  &[aria-checked=true] switch-icon {
+ion-switch[aria-checked=true] {
+  .switch-icon {
     // bg track, when checked
     background-color: $switch-ios-background-color-on;
+
+    &:before {
+      // inner bg track's oval, when checked
+      transform: scale3d(0, 0, 0);
+    }
+
+    &:after {
+      // knob, when checked
+      transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
+    }
   }
 
+  .switch-activated .switch-icon {
+    &:before {
+      // inner bg track's oval, when checked
+      transform: scale3d(0, 0, 0);
+    }
 
-  // Switch Background Track, Inner Oval
-  // -----------------------------------------
+    &:after {
+      // when pressing down on the switch and IS checked
+      // make the knob wider and move it left a bit
+      left: $switch-ios-border-width - 6;
 
-  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;
-
-    will-change: transform;
-    transform: scale3d(1, 1, 1);
-    transition: transform $switch-ios-transition-duration;
+      // when pressing down on the switch and NOT checked
+      // then make the knob wider
+      width: $switch-ios-handle-width + 6;
+    }
   }
+}
 
-  &[aria-checked=true] switch-icon:before,
-  .switch-activated switch-icon:before {
-    // inner bg track's oval, when checked
-    transform: scale3d(0, 0, 0);
-  }
+// Switch Disabled
+// -----------------------------------------
 
+ion-switch[aria-disabled=true] {
+  opacity: $switch-ios-disabled-opacity;
+  color: $switch-ios-disabled-text-color;
+  pointer-events: none;
+}
 
-  // Switch Knob
-  // -----------------------------------------
+// Switch Wrapper
+// -----------------------------------------
 
-  switch-icon:after {
-    // knob, when not checked
-    content: '';
-    position: absolute;
-    top: $switch-ios-border-width;
-    left: $switch-ios-border-width;
+.switch-media {
+  margin: $switch-ios-media-margin;
+  cursor: pointer;
+  padding: $switch-ios-media-padding;
+}
 
-    width: $switch-ios-handle-width;
-    height: $switch-ios-handle-height;
+// Switch Background Track
+// -----------------------------------------
 
-    border-radius: $switch-ios-handle-radius;
-    background-color: $switch-ios-handle-background-color;
-    box-shadow: $switch-ios-handle-box-shadow;
+.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;
 
-    will-change: transform, width, left;
-    transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
-  }
+  background-color: $switch-ios-border-color-off;
+  transition: background-color $switch-ios-transition-duration;
+}
 
-  &[aria-checked=true] switch-icon:after {
-    // knob, when checked
-    transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
-  }
+// Switch Background Track, Inner Oval
+// -----------------------------------------
 
-  .switch-activated switch-icon:after {
-    // when pressing down on the switch and NOT checked
-    // then make the knob wider
-    width: $switch-ios-handle-width + 6;
-  }
+.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;
 
-  &[aria-checked=true] .switch-activated switch-icon:after {
-    // when pressing down on the switch and IS checked
-    // make the knob wider and move it left a bit
-    left: $switch-ios-border-width - 6;
-  }
+  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;
 }
 
 
@@ -133,7 +153,7 @@ ion-switch {
 
   ion-switch[#{$color-name}] {
 
-    &[aria-checked=true] switch-icon {
+    &[aria-checked=true] .switch-icon {
       background-color: $bg-on;
     }
 

ionic/components/switch/switch.scss

@@ -1,21 +0,0 @@
-@import "../../globals.core";
-
-// Switch
-// --------------------------------------------------
-
-
-ion-switch {
-  display: block;
-  @include user-select-none();
-}
-
-ion-switch media-switch {
-  margin: 0;
-  cursor: pointer;
-}
-
-ion-switch[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-color;
-  pointer-events: none;
-}

ionic/components/switch/switch.ts

@@ -9,7 +9,7 @@ import {pointerCoord} from '../../util/dom';
  * @private
  */
 @Directive({
-  selector: 'media-switch',
+  selector: '.switch-media',
   host: {
     '[class.switch-activated]': 'swtch.isActivated'
   }
@@ -97,9 +97,9 @@ class MediaSwitch {
       '<ion-item-content id="{{labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +
-      '<media-switch disable-activated>' +
-        '<switch-icon></switch-icon>' +
-      '</media-switch>' +
+      '<div disable-activated class="switch-media">' +
+        '<div class="switch-icon"></div>' +
+      '</div>' +
     `</div>`,
   directives: [MediaSwitch]
 })

ionic/components/switch/test/basic/e2e.ts

@@ -1,6 +1,6 @@
 
 it('should check apple via switch element click', function() {
-  element(by.css('[ng-control=appleCtrl] media-switch')).click();
+  element(by.css('[ng-control=appleCtrl] .switch-media')).click();
 });