[Segment] Introducing stackable horizontal segments

[lubber-de]

Description

Added stackable variant to horizontal segments to make those segments wrap if needed

Testcase

http://jsfiddle.net/tmxLgno1/2/
Remove CSS to see usual behavior without stackable support

Screenshot

Normal behavior: .ui.horizontal.segments

New behavior: .ui.stackable.horizontal.segments

[y0hami]

LGTM

[ko2in]

There is an issue with the left border with this change.

The left border will need to remove for every first segment in a row.

[y0hami]

@ko2in @lubber-de this will be due to the horizontal divider still being applied.

[lubber-de]

@ko2in @hammy2899
Unfortunately, you cannot determine, if an element has wrapped by flex-wrap, but for usual horizontal segments the left border of the first segment is removed by default, causing the visual issue

ui.horizontal.segments > .segment:first-child {
    border-left: none;
}

I suggest not doing this for stackable horizontal segments , then at least it looks consistent again

[lubber-de]

@ko2in @hammy2899 changed it accordingly

[ko2in]

@lubber-de Using pseudo element ::after could also solve this problem. It even gives the same look for both left and right border of the segment wrapper.

You can check in this fiddle.

[lubber-de]

@ko2in Very nice visual trick to cover that border 👌 , but only if the background has exactly the same color for every segment inside. Also the top and bottom border should not get covered (overlays the vertical dividers by one pixel)
In most of the cases the background might stay white anyway, but i would not force a white covering border (which would need to force a white default background also) for the whole group.
If the background changes or a color like inverted red is used in one of the segments this get's a bit weird. In any of that case you won't recognize the slighly bolder left border anyway

http://jsfiddle.net/Lpavt5ek/1/
http://jsfiddle.net/Lpavt5ek/2/

[ko2in]

@lubber-de Yes. Not perfect with background. Your fix might be more suitable for this reason.

[ColinFrick]

LGTM

[y0hami]

LGTM