fix(segment): add the active background color to the colorized segmen…

…ts and remove activated css closes #5308
ionic-team · Feb 12, 2016 · df9a4df · df9a4df
1 parent 5f254f2
commit df9a4df
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/ionic/components/segment/segment.ios.scss b/ionic/components/segment/segment.ios.scss
@@ -46,10 +46,10 @@ $segment-button-ios-toolbar-button-max-width: 100px !default;
     background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
     transition: $segment-button-ios-hover-transition;
   }
-  
+
   &:active:not(.segment-activated) {
-      background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-active-opacity);
-      transition: $segment-button-ios-active-transition;
+    background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-active-opacity);
+    transition: $segment-button-ios-active-transition;
   }
 
   &:first-of-type {
@@ -100,7 +100,10 @@ $segment-button-ios-toolbar-button-max-width: 100px !default;
       background-color: rgba($color-value, $segment-button-ios-hover-opacity);
     }
 
-    &.activated,
+    &:active:not(.segment-activated) {
+      background-color: rgba($color-value, $segment-button-ios-active-opacity);
+    }
+
     &.segment-activated {
       color: inverse($color-value);
       background-color: $color-value;
@@ -119,4 +122,4 @@ $segment-button-ios-toolbar-button-max-width: 100px !default;
   .toolbar[#{$color-name}] .segment-button.segment-activated {
     color: $color-value;
   }
-}
+}