[Segment] Stacked loading segment doesn't work

[GammaGames]

Bug Report

Steps to reproduce

1. Create stacked loading segment
2. Notice how it is not stacked
3. Also notice that the text is not greyed-out

Expected result

Stacked loading segment

Actual result

Non-stacked, semi-loading segment

Testcase

https://jsfiddle.net/Lxc6yr7v/

Screenshot (when possible)

Version

2.7.4

[lubber-de]

Unfortunately this isn't going to work because the stacked (and also piled) effect is done by making use of the :before and :after pseudo elements. The same pseudo elements are also used to create the loading circle, so having both in one element cannot work.
However there is, for example, a workaround by wrapping your stacked segment around a basic loading segment (yes, there is additional padding, but this could be adjusted manually)
See https://jsfiddle.net/m3yqwxou/

[GammaGames]

Ah, okay. I had seen the report from Semantic-Org/Semantic-UI/issues/6796 and thought I'd put it here since fomantic and semantic looked different.

The padding would be less of an issue if we implemented Semantic-Org/Semantic-UI/issues/6117 too, the bot closed it on me

[lubber-de]

@GammaGames Well...#702 😉

[GammaGames]

That was fast!

All the rules make me think though, would it be worth it to make more general css to follow BEM better? Instead of having a fitted segment and fitted item we could have a general fitted class that applies the rule to whatever you apply the class to. Other classes (like size modifiers) might be trickier to do though, it might have to look something like this:

:root {
  --font-size: 1rem;
}

.small {
  font-size: calc(var(--font-size) * 0.9);
}
.tiny {
  font-size: calc(var(--font-size) * 0.8);
}
.mini {
  font-size: calc(var(--font-size) * 0.7);
}

Tests could be automatically generated using combinations of the lists of blocks, elements, and blocks and might end up being more exhaustive, though harder to verify.
(This discussion might be better on #319)

[lubber-de]

You are basically right, but it's definately a topic and goal for 3.x as this needs heavy refactoring

[exoego]

I'll close this issue since this has a workaround suggested in #701 (comment) and labeled as wontfix.