refactor(segment): fixed border width with more than 3 buttons

Added another toolbar with 3 segments for testing and in order to fix
the width on iOS, references #356

ionic/components/segment/modes/ios.scss

@@ -46,11 +46,14 @@ $segment-button-ios-hover-opacity:            0.16 !default;
     }
 
     &:first-of-type {
-      border-right-width: 0px;
       border-radius: $button-border-radius 0px 0px $button-border-radius;
       margin-right: 0;
     }
 
+    &:not(:first-of-type) {
+      border-left-width: 0px;
+    }
+
     &:last-of-type {
       border-left-width: 0px;
       border-radius: 0px $button-border-radius $button-border-radius 0px;

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

@@ -10,3 +10,7 @@ it('standard should be selected', function() {
 it('model c should be selected', function() {
   element(by.css('.e2eSegmentModelC')).click();
 });
+
+it('top grossing should be selected', function() {
+  element(by.css('.e2eSegmentTopGrossing')).click();
+});

ionic/components/segment/test/basic/index.ts

@@ -15,6 +15,7 @@ class MyApp {
     });
 
     this.modelStyle = 'B';
+    this.appType = 'free';
   }
 
   doSubmit(event) {

ionic/components/segment/test/basic/main.html

@@ -44,6 +44,8 @@
     </span>
   </p>
 
+  <hr>
+
   <h4>Model style: NgModel</h4>
 
   <ion-segment [(ng-model)]="modelStyle" dark>
@@ -63,3 +65,19 @@
 
   <p>Model Style: <b>Model {{ modelStyle }}</b></p>
 </ion-content>
+
+<ion-toolbar position="bottom">
+  <ion-title>
+    <ion-segment [(ng-model)]="appType" primary>
+      <ion-segment-button value="paid">
+        Paid
+      </ion-segment-button>
+      <ion-segment-button value="free">
+        Free
+      </ion-segment-button>
+      <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+        Top Grossing
+      </ion-segment-button>
+    </ion-segment>
+  </ion-title>
+</ion-toolbar>