[Segment] secondary segment has wrong top border

[y0hami]

Bug Report

Expected result

Secondary segment should have a consistent border

Actual result

The top border is thicker and darker

Testcase

https://jsfiddle.net/ptu8ky0r/

https://fomantic-ui.com/elements/segment.html#emphasis

Version

2.7.1

[etshy]

You sure it wasn't intentional ?

I was sure it was like that for the segment to be "more noticeable".

Also the CSS rule that cause this is quite weird:

.ui.secondary.segment.segment.segment.segment.segment:not(.inverted) {
    border-top: 2px solid rgba(0, 0, 0, 0.6);
}

Why there are that much .segment ? is that part of why it has to be fixed ?

btw, just removing that rule seem enough to fix the issue.

Edit : just saw after some research that there is "conflict" between the secondary color and the secondary emphasis.

Maybe adding the emphasis class or something like that and "remove" the top-border on this class could fix it.

Like

.ui.secondary.emphasis:not(.inverted) {
    border-top: 1px solid rgba(34, 36, 38, 0.15);
}

But the multple .segment that comes from the each(@colors ... could overwrite that.

Why is there so much .segment in this part ?

each(@colors,{
  @color: replace(@key,'@','');
  @c: @colors[@@color][color];
  .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
    border-top: @coloredBorderSize solid @c;
  }
  .ui.inverted.@{color}.segment.segment.segment.segment.segment {
    background-color: @c;
    color: @white;
  }
})

I don't know really LESS so maybe it's necessary (or it's just to add "importance" to the rule ?)

[lubber-de]

@etshy This happened, because secondary is also part of the global color palette, but secondary segment is meant differently here...
I'll fix this by dropping support for secondary as a color for segment to gain the previous behavior.

Btw: The reason for so many .segment is to increase specificity and avoid !important

PR with the fix coming up next... 🙂 :

[etshy]

This happened, because secondary is also part of the global color palette, but secondary segment is meant differently here...

Yep, that's what I thought and maybe poorly explained ^^"

But if you drop secondary as a color, shouldn't you drop primary too ?
It could be weird to have a primary but no secondary` or more, no ?

Btw: The reason for so many .segment is to increase specificity and avoid !important

Yeah I thought it could be that.

[lubber-de]

@etshy Good point removing primary from color creation in segment aswell (had to, there was undocumented CSS for a primary segment 😲 )
See #366 for details.
It's fixed in upcoming 2.7.2 🙂