update md segment

ionic/components.ios.scss

@@ -5,6 +5,7 @@
 
 // iOS Components
 @import
+  "components/app/modes/ios",
   "components/action-sheet/modes/ios",
   "components/button/modes/ios",
   "components/card/modes/ios",

ionic/components.md.scss

@@ -5,6 +5,7 @@
 
 // Material Design Components
 @import
+  "components/app/modes/md",
   "components/action-sheet/modes/md",
   "components/button/modes/md",
   "components/card/modes/md",

ionic/components/app/modes/ios.scss

@@ -9,8 +9,6 @@ a {
 }
 
 hr {
-  border-width: 0;
-  height: 1px;
   background-color: rgba(0, 0, 0, 0.12);
 }
 

ionic/components/app/modes/md.scss

@@ -9,8 +9,6 @@ a {
 }
 
 hr {
-  border-width: 0;
-  height: 1px;
   background-color: rgba(0, 0, 0, 0.08);
 }
 

ionic/components/app/normalize.scss

@@ -52,11 +52,10 @@ figure {
   margin: 1em 40px;
 }
 
-// Address differences between Firefox and other browsers.
 hr {
-  -moz-box-sizing: content-box;
   box-sizing: content-box;
-  height: 0;
+  height: 1px;
+  border-width: 0;
 }
 
 // Contain overflow in all browsers.

ionic/components/segment/modes/ios.scss

@@ -18,11 +18,15 @@ $segment-button-ios-hover-opacity:            0.16 !default;
 
 $segment-button-ios-toolbar-button-max-width: 100px !default;
 
+$segment-button-ios-padding:    0 16px !default;
+
 
 ion-segment {
+  padding: $segment-button-ios-padding;
 
   button,
   [button] {
+    border-width: 1px 0px 1px 1px;
     border-width: $segment-button-ios-border-width;
     border-style: solid;
 
@@ -68,6 +72,12 @@ ion-segment {
 
 }
 
+ion-segment-button[button] {
+  line-height: 2.4rem;
+  min-height: 2.4rem;
+  font-size: 1.2rem;
+}
+
 .toolbar {
 
   // TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed

ionic/components/segment/modes/md.scss

@@ -1,99 +1,80 @@
 @import "../../../globals.md";
 @import "../segment";
 
-// iOS Segment
+// Material Design Segment
 // --------------------------------------------------
 
-$segment-button-md-font-size:                  1.2rem !default;
+$segment-button-md-padding:                    0 6px !default;
 $segment-button-md-min-height:                 4.0rem !default;
 $segment-button-md-line-height:                4.0rem !default;
+$segment-button-md-font-size:                  1.2rem !default;
 
-$segment-button-md-text-color-activated:       map-get($colors-md, primary) !default;
+$segment-button-md-text-color-activated:       $toolbar-md-active-color !default;
-$segment-button-md-border-color-activated:     map-get($colors-md, primary) !default;
+$segment-button-md-border-color-activated:     $toolbar-md-active-color !default;
-$segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
+$segment-button-md-border-bottom-width:        2px !default;
+$segment-button-md-border-bottom-color:        rgba(#000000, 0.10) !default;
 
 
 .segment-button {
-  border-width: 0;
+  padding: $segment-button-md-padding;
-  transition: 100ms all linear;
+  border-bottom-width: $segment-button-md-border-bottom-width;
-  font-size: $segment-button-md-font-size;
+  border-bottom-style: solid;
-  opacity: 0.7;
+  border-bottom-color: $segment-button-md-border-bottom-color;
 
   min-height: $segment-button-md-min-height;
   line-height: $segment-button-md-line-height;
 
+  font-size: $segment-button-md-font-size;
+  text-transform: uppercase;
+  font-weight: 500;
+
+  opacity: 0.7;
+  color: $segment-button-md-text-color-activated;
+  background-color: transparent;
+  transition: 100ms all linear;
+
   &.activated,
   &.segment-activated {
-    color: $segment-button-md-text-color-activated;
-    background-color: transparent;
     border-color: $segment-button-md-border-color-activated;
   }
-
-  border-radius: 0;
-  border-bottom: $segment-button-md-border-bottom;
 }
 
 .toolbar {
 
   ion-segment {
     margin: 0 auto;
-
-    .segment-button.activated,
-    .segment-button.segment-activated {
-      background-color: transparent;
-      opacity: 1;
-    }
   }
 
-}
+  .segment-button.activated,
-
+  .segment-button.segment-activated {
-// Generate Default Segment Colors
-// --------------------------------------------------
-
-@mixin segment-button($button-color) {
-  background-color: transparent;
-
-  color: $button-color;
-
-  &.activated, &.segment-activated {
-    background-color: transparent;
-    color: $button-color;
-    border-color: $button-color;
     opacity: 1;
   }
+
 }
 
-// Loop through all of the colors to change the segment colors
+
-// based on the toolbar color or if it isn't in a toolbar then based on
+// Material Design Segment Button Mixin
-// the segment color value
+// --------------------------------------------------
+
+@mixin md-segment-button($color-name, $color-value) {
+
+  ion-segment[#{$color-name}] .segment-button {
+    color: $color-value;
+
+    &.activated,
+    &.segment-activated {
+      opacity: 1;
+      border-color: $color-value;
+      color: $color-value;
+    }
+  }
+
+}
+
+
+// Material Design Segment Color Generation
+// --------------------------------------------------
+
 @each $color-name, $color-value in $colors-md {
-  $inverse-color-value: inverse($color-value);
+  @include md-segment-button($color-name, $color-value);
-
-  .toolbar[#{$color-name}] {
-
-    ion-segment {
-      .segment-button {
-        @include segment-button($inverse-color-value);
-      }
-    }
-
-    // Loop through all of the colors again to change the segment colors
-    // for each toolbar based on the segment color
-    // this will take priority over the default toolbar colors
-    @each $color-name, $color-value in $colors-md {
-      ion-segment[#{$color-name}] {
-        .segment-button {
-          @include segment-button($color-value);
-        }
-      }
-    }
-
-  }
-
-  ion-segment[#{$color-name}] {
-    .segment-button {
-      @include segment-button($color-value);
-    }
-
-  }
 }

ionic/components/segment/segment.scss

@@ -3,8 +3,6 @@
 // Segment
 // --------------------------------------------------
 
-$segment-button-padding:    0 16px !default;
-
 
 ion-segment {
   display: flex;
@@ -16,22 +14,16 @@ ion-segment {
 
 .segment-button {
   position: relative;
-  overflow: hidden;
   display: block;
 
   margin-left: 0;
   margin-right: 0;
-  padding: $segment-button-padding;
 
   flex: 1;
   width: 0;
 
-  border-width: 1px 0px 1px 1px;
+  overflow: hidden;
-  border-radius: 0;
-
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-
-  background: none;
 }

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

@@ -25,8 +25,8 @@
   </ion-segment>
 </ion-toolbar>
 
-<ion-content padding>
+<div padding>
-  <p>Are we friends or enemies? <b>{{ relationship }}</b></p>
+  <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
 
   <h4>Map mode: NgControl</h4>
 
@@ -80,10 +80,10 @@
   </ion-segment>
 
   <p>Model Style: <b>Model {{ modelStyle }}</b></p>
-</ion-content>
+</div>
 
 <ion-toolbar position="bottom" primary>
-  <ion-segment [(ng-model)]="appType">
+  <ion-segment [(ng-model)]="appType" light>
     <ion-segment-button value="paid">
       Primary
     </ion-segment-button>
@@ -96,8 +96,8 @@
   </ion-segment>
 </ion-toolbar>
 
-<ion-toolbar position="bottom" light>
+<ion-toolbar position="bottom">
-  <ion-segment [(ng-model)]="appType" primary>
+  <ion-segment [(ng-model)]="appType" danger>
     <ion-segment-button value="paid">
       Light
     </ion-segment-button>
@@ -110,8 +110,8 @@
   </ion-segment>
 </ion-toolbar>
 
-<ion-toolbar position="bottom" light>
+<ion-toolbar position="bottom">
-  <ion-segment [(ng-model)]="appType">
+  <ion-segment [(ng-model)]="appType" dark>
     <ion-segment-button value="paid">
       Light
     </ion-segment-button>

ionic/components/toolbar/modes/ios.scss

@@ -277,7 +277,6 @@ ion-buttons[right] {
 .toolbar {
   [menu-toggle] {
     order: map-get($toolbar-order-ios, menu-toggle-start);
-    cursor: pointer;
   }
 
   [menu-toggle][end],
@@ -286,12 +285,6 @@ ion-buttons[right] {
   }
 }
 
-ion-segment-button[button] {
-  line-height: 2.4rem;
-  min-height: 2.4rem;
-  font-size: 1.2rem;
-}
-
 
 // iOS Toolbar Color Generation
 // --------------------------------------------------