search

octoshrimpy / bulma-o-steps

In-depth Steps component for Bulma.io
https://octoshrimpy.github.io/bulma-o-steps
GNU General Public License v3.0
84 stars 35 forks source link

Change the color between steps #10

Open Lucidiot opened 5 years ago

Lucidiot commented 5 years ago

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: Preview of a steps bar with custom colors between the steps

octoshrimpy commented 5 years ago

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 commented 5 years ago

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 commented 2 years ago

+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.

steps-segement-colors

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

octoshrimpy commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

TupleTechnologies commented 2 years ago

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