Steps Component For Bulma.io

An in-depth steps extension for multi-step forms or wizards

Installation

An extension for the Bulma CSS framework. See the Readme on Github for installation instructions.


Colors Yes
Sizes Yes
Variables Yes

Documentation #

The steps list is useful for tracking progress in multi steps forms or wizards.

You can use the is-active modifier to set the current active step. Any step before or after the active step will be styled differently.

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

Marker Content #

You can display information inside markers. About 2 or 3 characters or an icon will fit.

  • 1
  • xyz
  • -3-
      
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker">1</span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker">xyz</span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker">-3-</span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker">
          <span class="icon">
            <i class="fa fa-check"></i>
          </span>
        </span>
      </li>
    </ul>
    
      

Step Content #

Use the steps-content class to add content to a steps-segment.

If the last step also has content, use the is-balanced modifier on the root steps element, to make sure that the last step has the same width as the other steps.

  • Step 1

    This is the first step, which means you start here.

  • Step 2

    This is the second step. Once you complete the first step, you will end up here.

  • Step 3

    This is the third step. This is halfway between the start and the end.

  • Step 4

    The fourth step. Nearly there!

  • Step 5

    And finally the last step. You have successfully completed all 5 steps.

      
    <ul class="steps is-balanced">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 1</p>
          <p>This is the first step, which means you start here.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 2</p>
          <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 3</p>
          <p>This is the third step. This is halfway between the start and the end.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 4</p>
          <p>The fourth step. Nearly there!</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 5</p>
          <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </div>
      </li>
    </ul>
    
      

Use the has-content-centered class to align the content directly underneath the marker.

You can omit the is-balanced modifier, since has-content-centered will make sure the steps are always balanced.

  • Step 1

    This is the first step, which means you start here.

  • Step 2

    This is the second step. Once you complete the first step, you will end up here.

  • Step 3

    This is the third step. This is halfway between the start and the end.

  • Step 4

    The fourth step. Nearly there!

  • Step 5

    And finally the last step. You have successfully completed all 5 steps.

        
    <ul class="steps has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 1</p>
          <p>This is the first step, which means you start here.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 2</p>
          <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 3</p>
          <p>This is the third step. This is halfway between the start and the end.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 4</p>
          <p>The fourth step. Nearly there!</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 5</p>
          <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </div>
      </li>
    </ul>
    
        

Use the is-divider-content modifier to align content with the divider.

If the last step has no content, omit the is-balanced modifier on the root element to make sure the last step stays flush with the right edge.

  • Action 1

  • Action 2

  • Action 3

  • Action 4

      
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 1</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 2</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 3</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 4</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
      

Use has-content-above modifier to move the steps above the marker.

  • Step 1

    This is the first step, which means you start here.

  • Step 2

    This is the second step. Once you complete the first step, you will end up here.

  • Step 3

    This is the third step. This is halfway between the start and the end.

  • Step 4

    The fourth step. Nearly there!

  • Step 5

    And finally the last step. You have successfully completed all 5 steps.

      
    <ul class="steps is-balanced has-content-above">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 1</p>
          <p>This is the first step, which means you start here.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 2</p>
          <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 3</p>
          <p>This is the third step. This is halfway between the start and the end.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 4</p>
          <p>The fourth step. Nearly there!</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 5</p>
          <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </div>
      </li>
    </ul>
    
      

has-content-above also works with is-divider-content

  • Step 1

  • Step 2

  • Step 3

  • Step 4

  • Step 5

          
        <ul class="steps has-content-above">
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 1</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 2</p>
            </div>
          </li>
          <li class="steps-segment is-active">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 3</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 4</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 5</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
          </li>
        </ul>
        
          

Add a sibling to .steps-content with the class of .extra-data to create between-steps data. It works with .has-content-above as well.

Be aware that it is floating and therefore does not occupy space within the DOM. Add margins above and below as needed.

  • Step 1

  • Step 2

    Hello, there.
  • Step 3

  • Step 1

  • Step 2

    General Kenobi!
  • Step 3

            
        <div class="columns">
          <div class="column">
            <ul class="steps has-content-centered">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
                <div class="extra-data">Hello, there.</div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="column">
            <ul class="steps has-content-centered has-content-above">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
                <div class="extra-data">General Kenobi!</div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
        </div>


        
            

Use .has-overflow-left or .has-overflow-right to allow extra data to overflow. By default, it will center and text-wrap for you.

  • Step 1

  • Step 2

    This snippet overflows from step 3, and stays right-aligned.
  • Step 3

  • Step 1

    This one overflows from step 1 in the opposite direction.
  • Step 2

  • Step 3

            
        <div class="columns">
          <div class="column">
            <ul class="steps has-content-centered">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
                <div class="extra-data has-overflow-left">
                  <span>This snippet overflows from step 3, and stays right-aligned.</span>
                </div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="column">
            <ul class="steps has-content-centered">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
                <div class="extra-data has-overflow-right">
                  <span>This one overflows from step 1 in the opposite direction.</span>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
        </div>


        
            

Colors #

Every marker can have a different color. This can be used to indicate steps with errors, for example.

  • 1
    is-white
  • 2
    is-light
  • 3
    is-dark
  • 4
    is-black
          
    <ul class="steps has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker is-white">1</span>
        <div class="steps-content">
          <code>is-white</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-light">2</span>
        <div class="steps-content">
          <code>is-light</code>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker is-dark">3</span>
        <div class="steps-content">
          <code>is-dark</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-black">4</span>
        <div class="steps-content">
          <code>is-black</code>
        </div>
      </li>
    </ul>
    
          
  • 1
    is-primary
  • 2
    is-info
  • 3
    is-success
  • 4
    is-warning
  • 5
    is-danger
          
    <ul class="steps has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker is-primary">1</span>
        <div class="steps-content">
          <code>is-primary</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-info">2</span>
        <div class="steps-content">
          <code>is-info</code>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker is-success">3</span>
        <div class="steps-content">
          <code>is-success</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-warning">4</span>
        <div class="steps-content">
          <code>is-warning</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-danger">5</span>
        <div class="steps-content">
          <code>is-danger</code>
        </div>
      </li>
    </ul>
    
          

Sizes #

You can use the is-small, is-medium or is-large modifiers to change the size.

      
    <ul class="steps is-small">...</ul>
    <ul class="steps">...</ul>
    <ul class="steps is-medium">...</ul>
    <ul class="steps is-large">...</ul>
    
      

Or if you want to go really small, use the is-thin modifier to have 1px wide dividers. The markers will also be made smaller, so you can't put anything inside them anymore.

      
    <ul class="steps is-thin">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
      

Narrow #

By default, the steps component will take up the entire width. Add the is-narrow modifier to only take up as much space as needed.

You can combine that with the is-centered or is-right modifiers to change the alignment.

      
    <ul class="steps is-narrow">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-narrow is-centered">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-narrow is-right">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
      

Short #

By default, the steps component with is-vertical modifier will take up the entire height. Add the is-short modifier to only take up as much space as needed.

You can combine that with the is-centered or is-right modifiers to change the alignment.

      
    <ul class="steps is-vertical is-short">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-vertical is-short is-centered">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-vertical is-short is-bottom">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
      

Marker Style #

The marker can be styled using the is-hollow modifier. It can apply to all steps by defining it on the root steps element or each marker separately.

For all steps

          
    <ul class="steps is-hollow">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
          

Per step

          
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker is-hollow"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-hollow"></span>
      </li>
    </ul>
    
          

Divider Styles #

The divider can be styled using the is-dashed modifier, has-gaps modifier or both. They can apply to all steps by defining it on the root steps element or each step separately.

is-dashed

For all steps

          
    <ul class="steps is-dashed">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
          

Per step

  • Next step unreachable

          
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active is-dashed">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="heading">Next step unreachable</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
          

has-gaps

For all steps

          
    <ul class="steps has-gaps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
          

Per step

          
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active has-gaps">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
          

Alignment #

The steps are displayed vertically on mobile and horizontally on bigger sizes by default.

You can use the is-horizontal or is-vertical modifiers to always force the steps in a certain alignment no matter the screen size.

Always horizontal

      
    <ul class="steps is-horizontal">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    
      

Always vertical

  • 2000

    Lorem Ipsum Dolor Sit Amet

  • 2002

    Maecenas Ultrices Aliquet Velit Vitae

  • 2007

    Aliquam Quis Scelerisque Mauris Nullam

  • 2012

    Etiam A Nunc Vitae Nunc

  • 2017

    In Sed Vehicula Est Vivamus

        
    <ul class="steps is-vertical">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2000</p>
          <p>Lorem Ipsum Dolor Sit Amet</p>
        </div>
      </li>
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2002</p>
          <p>Maecenas Ultrices Aliquet Velit Vitae</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2007</p>
          <p>Aliquam Quis Scelerisque Mauris Nullam</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2012</p>
          <p>Etiam A Nunc Vitae Nunc</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2017</p>
          <p>In Sed Vehicula Est Vivamus</p>
        </div>
      </li>
    </ul>
    
        

Example #

Putting things together, we can make a checkout form for a shopping website.

      
    <ul class="steps is-narrow is-medium is-centered has-content-centered">
      <li class="steps-segment">
        <a href="#" class="has-text-dark">
          <span class="steps-marker">
            <span class="icon">
              <i class="fa fa-shopping-cart"></i>
            </span>
          </span>
          <div class="steps-content">
            <p class="heading">Shopping Cart</p>
          </div>
        </a>
      </li>
      <li class="steps-segment">
        <a href="#" class="has-text-dark">
          <span class="steps-marker">
            <span class="icon">
              <i class="fa fa-user"></i>
            </span>
          </span>
          <div class="steps-content">
            <p class="heading">User Information</p>
          </div>
        </a>
      </li>
      <li class="steps-segment is-active has-gaps">
        <span class="steps-marker">
          <span class="icon">
            <i class="fa fa-usd"></i>
          </span>
        </span>
        <div class="steps-content">
          <p class="heading">Payment</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-hollow">
          <span class="icon">
            <i class="fa fa-check"></i>
          </span>
        </span>
        <div class="steps-content">
          <p class="heading">Confirmation</p>
        </div>
      </li>
    </ul>
    
      

SASS Mixin Helpers #

There are a few helpers available to make it easy to directly target step segments if you want to create custom step styles. They are steps-all-segments, steps-inactive-segments and steps-active-segment.

For example, if you create a my-step-style class in a .sass file like this:

      // in a .sass file
      .my-step-style
        +steps-active-segment
          .steps-content
            font-weight: bold

        +steps-inactive-segments
          .steps-content
            color: $grey-lighter
    

Then using the my-step-style class on the root steps element will add the custom styles.

  • Step 1

  • Step 2

  • Step 3

  • Step 4

  • Step 5

      
    <ul class="steps my-step-style has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 1</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 2</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 3</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 4</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 5</p>
        </div>
      </li>
    </ul>
    
      

There is no steps-completed-segments mixin available, due to the way the code is structured (and css3 limitations). If you want to target those, use the steps-all-segments mixin to set that style and override it with the steps-active-segment and steps-inactive-segments mixins.


Variables #

You can use these variables to customize this . Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$steps-default-color $grey-lighter
$steps-completed-color $uccess
$steps-active-color $success
$steps-horizontal-min-width 10em
$steps-vertical-min-height 4em
$steps-marker-size 2
$steps-divider-size .4em
$steps-gap-size .3rem
$steps-hollow-border-size .3em
$steps-thin-divider-size 1px
$steps-thin-marker-size .8em

Problems? #

Have an issue? Please create an issue on Github and I will look at it.