refactor(segment): added MD styling to copy tabs, minus the animations

references #283

ionic/components/segment/modes/ios.scss

@@ -2,32 +2,79 @@
 // iOS Segment
 // --------------------------------------------------
 
+$segment-button-ios-bg-color:                 transparent !default;
+$segment-button-ios-bg-color-activated:       color(primary) !default;
+$segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
+$segment-button-ios-hover-opacity:            0.8 !default;
+
 
 .ion-segment {
 
   button,
   [button] {
     border-width: 1px;
+    border-style: solid;
 
     transition: 100ms all linear;
 
     min-height: 3.3rem;
     line-height: 3.3rem;
 
-    &.active {
+    background-color: $segment-button-ios-bg-color;
-      color: white;
+    color: $segment-button-ios-text-color;
-    }
 
-    border-style: solid;
+    &[outline] {
+      border: 1px solid $segment-button-ios-bg-color-activated;
+      background: $segment-button-ios-bg-color;
+      color: $segment-button-ios-bg-color-activated;
+
+      &.activated {
+        opacity: 1;
+        color: $segment-button-ios-text-color;
+        background-color: $segment-button-ios-bg-color-activated;
+      }
+    }
 
     &:first-of-type {
       border-right-width: 0px;
+      border-radius: $button-border-radius 0px 0px $button-border-radius;
+      margin-right: 0;
     }
 
     &:last-of-type {
       border-left-width: 0px;
+      border-radius: 0px $button-border-radius $button-border-radius 0px;
+      margin-left: 0;
     }
-
   }
 
 }
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color, $value in $colors {
+
+  ion-segment[#{$color}] {
+
+    ion-segment-button[button] {
+      $bg-color: $value;
+      $text-color: inverse($bg-color);
+
+      background-color: transparent;
+      color: $text-color;
+
+      &[outline] {
+        border-color: $bg-color;
+        background: $segment-button-ios-bg-color;
+        color: $bg-color;
+
+        &.activated {
+          opacity: 1;
+          color: $text-color !important;
+          background-color: $bg-color !important;
+        }
+      }
+    }
+  }
+}

ionic/components/segment/modes/md.scss

@@ -0,0 +1,55 @@
+
+// iOS Segment
+// --------------------------------------------------
+
+$segment-button-md-text-color-activated:       color(primary) !default;
+$segment-button-md-border-color-activated:     color(primary) !default;
+
+
+.ion-segment {
+
+  button,
+  [button] {
+    border-width: 0;
+    transition: 100ms all linear;
+
+    min-height: 3.3rem;
+    line-height: 3.3rem;
+
+    &.activated {
+      color: $segment-button-md-text-color-activated;
+      background-color: transparent;
+      border-color: $segment-button-md-border-color-activated;
+    }
+
+    border-radius: 0;
+    border-bottom: 2px solid transparent;
+  }
+}
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color, $value in $colors {
+
+  ion-segment[#{$color}] {
+
+    ion-segment-button[button] {
+      $bg-color: $value;
+      $text-color: inverse($bg-color);
+
+      background-color: transparent;
+      color: $text-color;
+
+      &[outline] {
+        color: $bg-color;
+
+        &.activated {
+          opacity: 1;
+          color: $bg-color !important;
+          border-color: $bg-color !important;
+        }
+      }
+    }
+  }
+}

ionic/components/segment/segment.scss

@@ -2,11 +2,6 @@
 // Segment
 // --------------------------------------------------
 
-$segment-button-bg-color:                 transparent !default;
-$segment-button-bg-color-activated:       color(primary) !default;
-$segment-button-text-color:               inverse($segment-button-bg-color-activated) !default;
-$segment-button-hover-opacity:            0.8 !default;
-
 
 ion-segment {
   display: block;
@@ -38,63 +33,5 @@ ion-segment {
     white-space: nowrap;
 
     background: none;
-
-    background-color: $segment-button-bg-color;
-    color: $segment-button-text-color;
-
-    &[outline] {
-      border: 1px solid $segment-button-bg-color-activated;
-      background: $segment-button-bg-color;
-      color: $segment-button-bg-color-activated;
-
-      &.activated {
-        opacity: 1;
-        color: $segment-button-text-color;
-        background-color: $segment-button-bg-color-activated;
-      }
-    }
-
-
-    &:first-of-type {
-      border-radius: $button-border-radius 0px 0px $button-border-radius;
-      margin-right: 0;
-    }
-
-    &:last-of-type {
-      border-right-width: 1px;
-      border-radius: 0px $button-border-radius $button-border-radius 0px;
-      margin-left: 0;
-    }
-
-  }
-
-}
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color, $value in $colors {
-
-  ion-segment[#{$color}] {
-
-    ion-segment-button[button] {
-      $bg-color: $value;
-      $text-color: inverse($bg-color);
-
-      background-color: transparent;
-      color: $text-color;
-
-      &[outline] {
-        border: 1px solid $bg-color;
-        background: $segment-button-bg-color;
-        color: $bg-color;
-
-        &.activated {
-          opacity: 1;
-          color: $text-color !important;
-          background-color: $bg-color !important;
-        }
-      }
-    }
   }
 }

ionic/components/segment/segment.ts

@@ -226,3 +226,37 @@ export class SegmentButton {
   }
 
 }
+
+// TODO Android animation similar to tabs
+
+// /**
+//  * @private
+//  * TODO
+//  */
+// @Directive({
+//   selector: 'tab-highlight'
+// })
+// class TabHighlight {
+//   constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
+//     if (config.get('mode') === 'md') {
+//       tabs.highlight = this;
+//       this.elementRef = elementRef;
+//     }
+//   }
+//
+//   select(tab) {
+//     setTimeout(() => {
+//       let d = tab.btn.getDimensions();
+//       let ele = this.elementRef.nativeElement;
+//       ele.style.transform = 'translate3d(' + d.left + 'px,0,0) scaleX(' + d.width + ')';
+//
+//       if (!this.init) {
+//         this.init = true;
+//         setTimeout(() => {
+//           ele.classList.add('animate');
+//         }, 64)
+//       }
+//     }, 32);
+//   }
+//
+// }

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

@@ -1,3 +1,16 @@
+<ion-toolbar>
+  <ion-title>
+    <ion-segment>
+      <ion-segment-button>
+        Friends
+      </ion-segment-button>
+      <ion-segment-button>
+        Enemies
+      </ion-segment-button>
+    </ion-segment>
+  </ion-title>
+</ion-toolbar>
+
 <ion-content padding>
   <form (submit)="doSubmit($event)" [ng-form-model]="myForm">
       <ion-segment ng-control="mapStyle" danger>
@@ -11,15 +24,7 @@
           Satellite
         </ion-segment-button>
       </ion-segment>
-      <ion-segment>
+      <button type="submit" button primary>Submit</button>
-        <ion-segment-button>
-          Friends
-        </ion-segment-button>
-        <ion-segment-button>
-          Enemies
-        </ion-segment-button>
-      </ion-segment>
-    <button type="submit" button primary>Submit</button>
   </form>
 
   Map mode: <b>{{myForm.controls.mapStyle.value}}</b>

ionic/ionic.md.scss

@@ -16,6 +16,7 @@
   "components/popup/modes/md",
   "components/radio/modes/md",
   "components/search-bar/modes/md",
+  "components/segment/modes/md",  
   "components/switch/modes/md",
   "components/tabs/modes/md",
   "components/tap-click/ripple";