md segment wip

ionic/components/segment/modes/md.scss

@@ -13,10 +13,7 @@ $segment-button-md-border-color-activated:     map-get($colors-md, primary) !def
 $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
 
 
-ion-segment {
-
-  button,
-  [button] {
+.segment-button {
   border-width: 0;
   transition: 100ms all linear;
   font-size: $segment-button-md-font-size;
@@ -25,7 +22,8 @@ ion-segment {
   min-height: $segment-button-md-min-height;
   line-height: $segment-button-md-line-height;
 
-    &.activated, &.segment-activated {
+  &.activated,
+  &.segment-activated {
     color: $segment-button-md-text-color-activated;
     background-color: transparent;
     border-color: $segment-button-md-border-color-activated;
@@ -33,8 +31,6 @@ ion-segment {
 
   border-radius: 0;
   border-bottom: $segment-button-md-border-bottom;
-  }
-
 }
 
 .toolbar {
@@ -42,8 +38,8 @@ ion-segment {
   ion-segment {
     margin: 0 auto;
 
-    ion-segment-button[button][outline].activated,
-    ion-segment-button[button][outline].segment-activated {
+    .segment-button.activated,
+    .segment-button.segment-activated {
       background-color: transparent;
       opacity: 1;
     }
@@ -57,7 +53,6 @@ ion-segment {
 @mixin segment-button($button-color) {
   background-color: transparent;
 
-  &[outline] {
   color: $button-color;
 
   &.activated, &.segment-activated {
@@ -66,7 +61,6 @@ ion-segment {
     border-color: $button-color;
     opacity: 1;
   }
-  }
 }
 
 // Loop through all of the colors to change the segment colors
@@ -78,7 +72,7 @@ ion-segment {
   .toolbar[#{$color-name}] {
 
     ion-segment {
-      ion-segment-button[button] {
+      .segment-button {
         @include segment-button($inverse-color-value);
       }
     }
@@ -88,7 +82,7 @@ ion-segment {
     // this will take priority over the default toolbar colors
     @each $color-name, $color-value in $colors-md {
       ion-segment[#{$color-name}] {
-        ion-segment-button[button] {
+        .segment-button {
           @include segment-button($color-value);
         }
       }
@@ -97,7 +91,7 @@ ion-segment {
   }
 
   ion-segment[#{$color-name}] {
-    ion-segment-button[button] {
+    .segment-button {
       @include segment-button($color-value);
     }
 

ionic/components/segment/segment.scss

@@ -7,24 +7,23 @@ $segment-button-padding:    0 16px !default;
 
 
 ion-segment {
-
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   width: 100%;
+}
 
-  button,
-  [button] {
+.segment-button {
+  position: relative;
+  overflow: hidden;
+  display: block;
 
   margin-left: 0;
   margin-right: 0;
+  padding: $segment-button-padding;
 
   flex: 1;
-    display: block;
-    overflow: hidden;
-
-    padding: $segment-button-padding;
   width: 0;
 
   border-width: 1px 0px 1px 1px;
@@ -35,5 +34,4 @@ ion-segment {
   white-space: nowrap;
 
   background: none;
-  }
 }

ionic/components/segment/segment.ts

@@ -177,7 +177,7 @@ export class Segment extends Ion {
   ],
   host: {
     '(click)': 'click($event)',
-    '[class.segment-activated]': 'isActive',
+    '[class.segment-activated]': 'isActive'
   }
 })
 export class SegmentButton {
@@ -189,8 +189,8 @@ export class SegmentButton {
   ) {
     this.segment = segment;
 
-    renderer.setElementAttribute(elementRef, 'button', '');
-    renderer.setElementAttribute(elementRef, 'outline', '');
+    renderer.setElementClass(elementRef, 'segment-button', true);
+    renderer.setElementAttribute(elementRef, 'tappable', '');
   }
 
   /**

ionic/components/toolbar/modes/ios.scss

@@ -274,14 +274,16 @@ ion-buttons[right] {
 // iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
-[menu-toggle] {
+.toolbar {
+  [menu-toggle] {
     order: map-get($toolbar-order-ios, menu-toggle-start);
     cursor: pointer;
-}
+  }
 
-[menu-toggle][end],
-[menu-toggle][right] {
+  [menu-toggle][end],
+  [menu-toggle][right] {
     order: map-get($toolbar-order-ios, menu-toggle-end);
+  }
 }
 
 ion-segment-button[button] {