refactor(segment): removed div wrapping segment buttons

references #356

ionic/components/segment/modes/ios.scss

@@ -17,11 +17,6 @@ $segment-button-ios-toolbar-button-max-width: 100px !default;
 
 
 ion-segment {
-  display: flex;
-  align-items: center;
-}
-
-.ion-segment {
 
   button,
   [button] {
@@ -70,15 +65,22 @@ ion-segment {
 
 }
 
-ion-toolbar {
-  .ion-segment {
-    justify-content: center;
+.toolbar {
+
+  // TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed
+  ion-segment {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
 
     button,
     [button] {
       max-width: $segment-button-ios-toolbar-button-max-width;
     }
   }
+
 }
 
 // Generate Default Button Colors
@@ -111,5 +113,6 @@ ion-toolbar {
         }
       }
     }
+
   }
 }

ionic/components/segment/modes/md.scss

@@ -11,7 +11,7 @@ $segment-button-md-border-color-activated:     color(primary) !default;
 $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
 
 
-.ion-segment {
+ion-segment {
 
   button,
   [button] {
@@ -32,13 +32,16 @@ $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !de
     border-radius: 0;
     border-bottom: $segment-button-md-border-bottom;
   }
+
 }
 
-ion-toolbar {
-  .ion-segment {
+.toolbar {
+
+  ion-segment {
     width: 95%;
     margin: 0 auto;
   }
+
 }
 
 // Generate Default Button Colors
@@ -65,5 +68,6 @@ ion-toolbar {
         }
       }
     }
+
   }
 }

ionic/components/segment/segment.scss

@@ -6,12 +6,10 @@ $segment-button-padding:    0 16px !default;
 
 
 ion-segment {
-  display: block;
-  width: 100%;
-}
 
-.ion-segment {
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex: 1;
   width: 100%;
 

ionic/components/segment/segment.ts

@@ -29,7 +29,7 @@ import {dom} from 'ionic/util';
   inputs: [
     'value'
   ],
-  template: '<div class="ion-segment"><ng-content></ng-content></div>',
+  template: '<ng-content></ng-content>',
   directives: [forwardRef(() => SegmentButton)]
 })
 export class Segment extends Ion {