diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 523c44483c..b8ed2d29ff 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/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 {
- color: white;
- }
+ background-color: $segment-button-ios-bg-color;
+ 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;
+ }
+ }
+ }
+ }
+}
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
new file mode 100644
index 0000000000..bcda5c5ad7
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+ }
+}
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 7540bf12ac..a4a7cd74a9 100644
--- a/ionic/components/segment/segment.scss
+++ b/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;
- }
- }
- }
}
}
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 8def668160..6112d0a317 100644
--- a/ionic/components/segment/segment.ts
+++ b/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);
+// }
+//
+// }
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index 13d8f8f474..d8d1894608 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -1,3 +1,16 @@
+
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
Map mode: {{myForm.controls.mapStyle.value}}
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index 2488864466..1435f54b44 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -15,7 +15,8 @@
"components/nav-bar/modes/md",
"components/popup/modes/md",
"components/radio/modes/md",
- "components/search-bar/modes/md",
+ "components/search-bar/modes/md",
+ "components/segment/modes/md",
"components/switch/modes/md",
"components/tabs/modes/md",
"components/tap-click/ripple";