10/UI/Workflow center step label unibe-178

[catenglaender]

Issue

Fixed pixel values cause step lables and description to appear offcenter.

Height of icon and min-width is completely unconnected which leaves a lot to chance and magic numbers.

Change

Reverting content-sizing back to content-box, so inner height can be equal to icon height, then center the content spans using flexbox.

[yvseiler]

Thanks a lot @catenglaender

Perhaps because of our changes with commit mOS style feature it seems to me, that we need some little adjustments:

• adjustment of dashed line

.il-workflow-container .text {
margin-left: math.ceil($il-workflow-icon-size*0.75);
...

should be 1px more, my suggestion: math.ceil($il-workflow-icon-size*0.8)

• padding between circle and text

...
padding: 0 0 $il-padding-xxxlarge-horizontal $il-workflow-icon-size * 1.5; 
}

I get padding: 0 0 33px 22px in my browser inspector for this. Not sure, but it seems, there is something wrong with the calculation? $il-workflow-icon-size * 1.5 should be 22*1.5=33. Or what do I missunderstand?

22px padding-right is a little bit to less, so it would be great if we could increase that to something between 28-33px

Could you have a look on this two picky issues? :-)

Thanks a lot! Best regards
@yvseiler