fix(rtl): add segment rtl support

[AmitMY]

Short description of what this resolves:

add segment rtl support

Changes proposed in this pull request:

Fixes:

Ionic Version: 3.x

[brandyscarney]

Only issue I see with this is the thicker border width for the last 2 segments when there are more than 2 segment buttons:

I have to head out for a bit but I can look into fixing it later or tomorrow if you don't. :)

[AmitMY]

@brandyscarney I think that fixes it.
Normally, everything has a border right, and only first need border left. here first does not need the left because it is (in ltr perspective) last

[brandyscarney]

@AmitMY Looks great! Thanks! 😄

[manucorporat]

@brandyscarney @AmitMY I don't want to be touchy, but I think this is a over-complicated and difficult to maintain fix, why we just don't use:

[dir="rtl"] ion-segment {
  flex-direction: row-reverse;
}

?

[AmitMY]

@manucorporat I think I briefly considered it, then dismissed
The reason is that it reverses the order of the columns..

This is LTR:

This is RTL (before this fix):

And this is RTL with row-reverse:

Finally, this is RTL after this fix: (which is the desired behavior)

It might not look as desired in English, but in an RTL language like Hebrew you can feel the difference:

[manucorporat]

@AmitMY ok, I think I get it. Sorry for the ignorance :)