- Issue created by @mably
All sizes are hard coded in pixels which make it quite hard to restyle it or make it more accessible.
Here is what happens if you simply try to make the circles bigger by increasing the pixel size (50px instead of 30px) :
We can also see that there isn't enough space to display text correctly.
Increasing the text width is also a bit painful to do, quite a few margins to re-calculate.
You'll find below a few CSS tweaks we added on our project to make it easier to adjust the appearance of the progress bar using CSS variables and the calc() function:
:root {
--maestro-circle-size: 1.8rem;
--maestro-label-width: 5rem;
--maestro-bar-width: 3.6rem;
--maestro-label-top: calc(var(--maestro-circle-size) + 0.4rem);
--maestro-label-circle-delta: calc(var(--maestro-label-width) - var(--maestro-circle-size)) / 2;
}
.maestro-status-circle-incomplete,
.maestro-status-circle-complete,
.maestro-status-circle-current {
width: var(--maestro-circle-size);
height: var(--maestro-circle-size);
line-height: var(--maestro-circle-size);
font-size: calc(var(--maestro-circle-size)*0.45);
}
.maestro-status-circle-complete span {
color: white;
}
.stage-status-message {
width: var(--maestro-label-width);
margin-left: calc(-1 * var(--maestro-circle-size) - var(--maestro-label-circle-delta));
top: var(--maestro-label-top);
}
.maestro-status-circle-incomplete-bar,
.maestro-status-circle-complete-bar,
.maestro-status-circle-current-bar {
width: var(--maestro-bar-width);
margin-top: calc(var(--maestro-circle-size)/2 - 2.5px);
margin-left: calc(-1 * var(--maestro-label-circle-delta) - 2px);
}
.maestro-timeline-wrapper {
height: auto;
margin-bottom: var(--maestro-circle-size);
}
Here is the final result after increasing the --maestro-circle-size variable from 1.8rem to 3.2rem:
All margins etc. a recalculated automatically using the CSS calc() function.
Active
3.1
Code