Progress-based navigation bar, useful for checkouts or registrations.

Sass Mixin

@mixin progress()

Parameters

None.

Emmet Shorthand

nav.progress>ul>(li.complete*2>a)+(li.active>a)+(li*2>a)
<nav class=" progress">
    <ul class="progress__list">
        <li class="progress__item">
            <a class="progress__link -complete" href="#">
                <svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                    <circle cx="9" cy="19" r="2" />
                    <circle cx="17" cy="19" r="2" />
                    <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
                </svg>
                Nav Item 1
            </a>
        </li>
        <li class="progress__item">
            <a class="progress__link -complete" href="#">
                <svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                    <circle cx="9" cy="19" r="2" />
                    <circle cx="17" cy="19" r="2" />
                    <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
                </svg>
                Nav Item 2
            </a>
        </li>
        <li class="progress__item">
            <a class="progress__link -active" href="#">
                <svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                    <circle cx="9" cy="19" r="2" />
                    <circle cx="17" cy="19" r="2" />
                    <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
                </svg>
                Nav Item 3
            </a>
        </li>
        <li class="progress__item">
            <a class="progress__link" href="#">
                <svg class="progress__icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                    <circle cx="9" cy="19" r="2" />
                    <circle cx="17" cy="19" r="2" />
                    <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
                </svg>
                Nav Item 4
            </a>
        </li>
    </ul>
</nav>
  • Content:
    @use "/resources/styles/common" as *;
    @use "/resources/styles/config";
    
    ///
    /// PROGRESS provides a basic, pill-style progress nav bar like you
    /// might find as part of an ecommerce or registration process.
    ///
    .progress {
        &__list {
            @include no-bullets;
            display: flex;
            position: relative;
    
            &::before {
                border-left: 4px solid config.$blue-300;
                bottom: 1rem;
                content: '';
                left: calc(1rem - 2px);
                position: absolute;
                top: 1rem;
                z-index: -1;
            }
        }
    
        &__list {
            display: flex;
            flex-direction: column;
            gap: config.$v-space config.$h-space;
        }
    
        &__item {
            margin: 0;
        }
    
        &__link {
            align-items: center;
            color: config.$blue-400;
            display: flex;
            gap: config.$v-space config.$h-space;
    
            &:hover {
                color: config.$blue-600;
    
                .progress__icon {
                    background-color: config.$blue-600;
                }
            }
    
            &.-active {
                color: config.$blue-600;
                font-weight: bold;
    
                .progress__icon {
                    background-color: config.$blue-600;
                }
            }
        }
    
        &__icon {
            background-color: config.$blue-300;
            border-radius: 2rem;
            color: config.$white;
            height: 2rem;
            padding: .25rem;
            vertical-align: middle;
        }
    
        @include at(md) {
    
            &__list {
                flex-direction: row;
                justify-content: center;
    
                &::before {
                    display: none;
                }
            }
    
            &__link {
                flex-flow: column;
            }
        }
    }
  • URL: /components/raw/progress/_index.scss
  • Filesystem Path: resources/styles/atoms/progress/_index.scss
  • Size: 1.7 KB