Segment: add transition to hover

[brandyscarney]

Hover needs to be lighter but tap can stay the same as it is now

[jgw96]

Should just be able to change the opacity to fix this right? If so i can knock this out real quick.
$segment-button-ios-hover-opacity: 0.16 !default;

[brandyscarney]

The opacity on hover needs to be lightened to 0.1, but when the activated class is applied it should keep the 0.16 opacity. Then the transition needs to be on the hover as well. If you want to knock it out let me know. :)

Hover (0.1 opacity):

Activated (0.16 opacity)

Active (1.0 opacity)

https://github.com/driftyco/ionic/blob/2.0/ionic/components/segment/segment.ios.scss

[jgw96]

Ill handle this one. (:

[brandyscarney]

@jgw96 Cool, thanks! Let me know if you have any questions!

[jgw96]

@brandyscarney no probs!

[jgw96]

@brandyscarney quick question, the activated class seems to be applied to the segment when the segment is selected, aka clicked, so shouldn't it be at 1.0 opacity then? So you would have hover with 0.1 opacity and then when the selected class is applied it goes to 1.0 opacity. With your pic/explanation above it seems that we want to make the opacity 0.16 when the activated class is applied, but that means when that segment is chosen it goes to 0.16 opacity, which is pretty ugly.

[brandyscarney]

Sorry I should have looked at the exact names before responding. So it should be:

.segment-button:hover 0.1 opacity
.segment-button:active 0.16 opacity
.segment-activated 1.0 opacity

The active is only while pressing on the button and then on release it changes to the solid background.

[jgw96]

No, your perfectly fine, that makes much more sense now. Thanks for the response!

[jgw96]

Pull request submitted above! Thanks for the help @brandyscarney If i need to change anything just tell me and ill change it.

[brandyscarney]

@jgw96 Thank you for the PR! I haven't checked on this in awhile, but I see Adam merged it! I added a fix for the colorized segments, too. Thanks again. 😄