refactor(segment): cleaned up both iOS and md mode styling

Converted values to some sass variables, moved transition to after
button tap, added border bottom for md mode, reorganized the sass
variables by the order they’re used, removed the use of !important,
added iOS hover background-color. Closes #283

ionic/components/search-bar/search-bar.ts

@@ -92,7 +92,6 @@ export class SearchBar extends Ion {
   }
 
   inputChanged(event) {
-  console.log('input changed');
     this.writeValue(event.target.value);
     this.onChange(event.target.value);
   }

ionic/components/segment/modes/ios.scss

@@ -2,26 +2,31 @@
 // iOS Segment
 // --------------------------------------------------
 
+$segment-button-ios-border-width:             1px !default;
+$segment-button-ios-min-height:               3.0rem !default;
+$segment-button-ios-line-height:              3.0rem !default;
 $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;
+$segment-button-ios-font-size:                1.3rem !default;
+
+$segment-button-ios-bg-color-activated:       color(primary) !default;
+$segment-button-ios-activated-transition:     100ms all linear !default;
+$segment-button-ios-hover-opacity:            0.16 !default;
 
 
 .ion-segment {
 
   button,
   [button] {
-    border-width: 1px;
+    border-width: $segment-button-ios-border-width;
     border-style: solid;
 
-    transition: 100ms all linear;
+    min-height: $segment-button-ios-min-height;
-
+    line-height: $segment-button-ios-line-height;
-    min-height: 3.3rem;
-    line-height: 3.3rem;
 
     background-color: $segment-button-ios-bg-color;
     color: $segment-button-ios-text-color;
+    font-size: $segment-button-ios-font-size;
 
     &[outline] {
       border: 1px solid $segment-button-ios-bg-color-activated;
@@ -32,6 +37,11 @@ $segment-button-ios-hover-opacity:            0.8 !default;
         opacity: 1;
         color: $segment-button-ios-text-color;
         background-color: $segment-button-ios-bg-color-activated;
+        transition: $segment-button-ios-activated-transition;
+      }
+
+      &:hover:not(.activated) {
+        background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
       }
     }
 
@@ -71,8 +81,12 @@ $segment-button-ios-hover-opacity:            0.8 !default;
 
         &.activated {
           opacity: 1;
-          color: $text-color !important;
+          color: $text-color;
-          background-color: $bg-color !important;
+          background-color: $bg-color;
+        }
+
+        &:hover:not(.activated) {
+          background-color: rgba($bg-color, $segment-button-ios-hover-opacity);
         }
       }
     }

ionic/components/segment/modes/md.scss

@@ -2,11 +2,13 @@
 // iOS Segment
 // --------------------------------------------------
 
+$segment-button-md-font-size:                  1.2rem !default;
+$segment-button-md-min-height:                 4.0rem !default;
+$segment-button-md-line-height:                4.0rem !default;
+
 $segment-button-md-text-color-activated:       color(primary) !default;
 $segment-button-md-border-color-activated:     color(primary) !default;
-
+$segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
-$segment-button-md-min-height:                 5.0rem;
-$segment-button-md-line-height:                5.0rem;
 
 
 .ion-segment {
@@ -15,6 +17,7 @@ $segment-button-md-line-height:                5.0rem;
   [button] {
     border-width: 0;
     transition: 100ms all linear;
+    font-size: $segment-button-md-font-size;
 
     min-height: $segment-button-md-min-height;
     line-height: $segment-button-md-line-height;
@@ -26,7 +29,7 @@ $segment-button-md-line-height:                5.0rem;
     }
 
     border-radius: 0;
-    border-bottom: 2px solid transparent;
+    border-bottom: $segment-button-md-border-bottom;
   }
 }
 
@@ -49,8 +52,8 @@ $segment-button-md-line-height:                5.0rem;
 
         &.activated {
           opacity: 1;
-          color: $bg-color !important;
+          color: $bg-color;
-          border-color: $bg-color !important;
+          border-color: $bg-color;
         }
       }
     }

ionic/components/segment/segment.scss

@@ -2,6 +2,8 @@
 // Segment
 // --------------------------------------------------
 
+$segment-button-padding:    0 16px !default;
+
 
 ion-segment {
   display: block;
@@ -22,7 +24,7 @@ ion-segment {
     display: block;
     overflow: hidden;
 
-    padding: 0 16px;
+    padding: $segment-button-padding;
     width: 0;
 
     border-width: 1px 0px 1px 1px;

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

@@ -13,7 +13,8 @@ class MyApp {
     this.myForm = fb.group({
       mapStyle: ['hybrid', Validators.required]
     });
-    console.log(this.myForm);
+
+    this.modelStyle = 'B';
   }
 
   doSubmit(event) {

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

@@ -40,4 +40,22 @@
       <h2>Satellite!!</h2>
     </div>
   </div>
+
+  <hr>
+
+  <h3>NgModel</h3>
+
+  <ion-segment [(ng-model)]="modelStyle" dark>
+    <ion-segment-button value="A">
+      Model A
+    </ion-segment-button>
+    <ion-segment-button value="B">
+      Model B
+    </ion-segment-button>
+    <ion-segment-button value="C">
+      Model C
+    </ion-segment-button>
+  </ion-segment>
+
+  Model Style: <b>Model {{ modelStyle }}</b>
 </ion-content>