Steps Component

[NeilBrommer]

I've created steps component that may be useful here:

There's a CodePen with a working example.

---

The HTML structure looks like this:

<ul class="steps">
    <li><a href="#">Step 1</a></li>
    <li class="current-step"><a href="#">Step 2</a></li>
    <li><a href="#" tabindex="-1">Step 3</a></li>
    <li><a href="#" tabindex="-1">Step 4</a></li>
</ul>

and here's the SCSS:

.steps {
    display: flex;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    overflow-x: auto;

    li {
        position: relative;
        flex: 1 1 0;
        text-align: center;

        a {
            position: relative;
            display: inline-block;
            padding: 20px 10px 0;
            text-decoration: none;
            overflow-wrap: normal;
        }

        a::before {
            // The dots for each step

            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 1px;
            height: 0.6rem;
            //width: 0.6rem;
            aspect-ratio: 1;
            background-color: #ca1237;
            border: 4px solid #fff;
            border-radius: 50%;
            z-index: 1;
        }
    }

    li:not(:first-child)::before {
        // The line between items

        content: "";
        position: absolute;
        left: -50%;
        top: 9px;
        height: 2px;
        width: 100%;
        background-color: #ca1237;
    }

    li.current-step {
        a::before {
            // Special styling for the current step

            background-color: white;
            border-color: #ca1237;
            top: 4px;
            border-width: 2px;
        }
    }

    li.current-step ~ li {
        // Styling for steps after the current step

        &::before {
            background-color: #ccc !important;
        }

        a {
            color: #ccc !important;
            pointer-events: none;
        }

        a::before {
            background-color: #ccc;
        }
    }
}