Change the color between steps

[Lucidiot]

Currently, it is possible to customize colors for the step markers, but not for the .steps-segment::after pseudo-element that draws the line between steps. It could be possible to set colors on the .steps-segment element itself to customize this:

<ul class="steps">
  <li class="steps-segment is-warning">
    <a href="#" class="steps-marker"><a>
  </li>
  <li class="steps-segment is-danger is-active">
    <a href="#" class="steps-marker is-info"></a>
  </li>
  <li class="steps-segment">
    <a href="#" class="steps-marker"></a>
  </li>
</ul>

The above code would yield this:

[octoshrimpy]

I'm not sure I follow. Are you saying you'd like to see the ability to customize the ::after by targeting the segment itself?

[Lucidiot]

Exactly. The example code I put is just hypothetical of course, so if adding a class to the marker is easier, let's go with that. But the end goal is to have the ::after elements with customizable colors, yes.

[edub008]

+1

Please this is really needed and would make much more customizable and therefore valuable. Currently it seems only the steps themselves are customizable and not the line segments (both before and after the is-active node). Having to stick with the default green $success almost makes this un-usable.

@Lucidiot Were you able to find any temporary solutions (or even hacks) for this, even if ugly? :)

[octoshrimpy]

I will admit, I haven't touched this code in years. This is a good idea, I'm not sure how to go about it, as I no longer know how the code works. If anyone wants to collab for this feature, it would make it go by much faster.

[edub008]

@octoshrimpy Thanks for the quick reply, if I'm not mistaken the update would need to be made through SASS/CSS logic correct? I am definitely not an expert in that area but could potentially help after my current project ends in a 2-3 weeks.

[octoshrimpy]

That is correct. the whole project could use some refactoring into different files too...

[TupleTechnologies]

Looking for a solution to customise the step line color.

The values shown in the docs here do not work at all:

$steps-default-color: $grey-lighter
$steps-completed-color: $success
$steps-active-color: $success