fix(segment): tap acivation working. Fixes #663

ionic/components/segment/modes/ios.scss

@@ -36,14 +36,14 @@ ion-segment {
       background: $segment-button-ios-bg-color;
       color: $segment-button-ios-bg-color-activated;
 
-      &.activated {
+      &.segment-activated {
         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) {
+      &:hover:not(.segment-activated) {
         background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
       }
     }
@@ -95,13 +95,13 @@ ion-segment {
     background: $segment-button-ios-bg-color;
     color: $button-color;
 
-    &.activated {
+    &.segment-activated {
       opacity: 1;
       color: $activated-text-color;
       background-color: $button-color;
     }
 
-    &:hover:not(.activated) {
+    &:hover:not(.segment-activated) {
       background-color: rgba($button-color, $segment-button-ios-hover-opacity);
     }
   }

ionic/components/segment/modes/md.scss

@@ -24,7 +24,7 @@ ion-segment {
     min-height: $segment-button-md-min-height;
     line-height: $segment-button-md-line-height;
 
-    &.activated {
+    &.activated, &.segment-activated {
       color: $segment-button-md-text-color-activated;
       background-color: transparent;
       border-color: $segment-button-md-border-color-activated;
@@ -41,7 +41,8 @@ ion-segment {
   ion-segment {
     margin: 0 auto;
 
-    ion-segment-button[button][outline].activated {
+    ion-segment-button[button][outline].activated,
+    ion-segment-button[button][outline].segment-activated {
       background-color: transparent;
     }
   }
@@ -57,7 +58,7 @@ ion-segment {
   &[outline] {
     color: $button-color;
 
-    &.activated {
+    &.activated, &.segment-activated {
       background-color: transparent;
       color: $button-color;
       border-color: $button-color;

ionic/components/segment/segment.ts

@@ -132,7 +132,7 @@ export class Segment extends Ion {
   ],
   host: {
     '(click)': 'click($event)',
-    '[class.activated]': 'isActive',
+    '[class.segment-activated]': 'isActive',
   }
 })
 export class SegmentButton {