/* ==========================================================================
Steps Progress.scss ========================================================================== */
// the progress bar element shows a user where they are in a series of // transactional steps. an example would be when registering for an event, // the user will need to login, answer questions, provide payment, then complete
// container .progress-bar-block {
margin: -2rem -2rem 3rem;
}
// progress items container, on a ul .progress-bar {
display: flex; list-style: none; margin: 0; padding: 0; width: 100%; // progress items, on a li .progress-point { color: rgba($black, .3); text-align: center; padding: 1rem 0; display: inline-block; flex-grow: 1; border-top: 2px solid $green; // by default we show the active bar color position: relative; @media (max-width: $medium-breakpoint) { text-indent: -9999px; padding: 0; height: 0; } // circle element &:after { content: ''; display: block; width: 7px; height: 7px; background-color: $green; // by default we show the active bar color border-radius: $global-rounded; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); } // the activated step &.active { color: rgba($black, .7); // targets all progress points after the .active point // all items after .active are show in gray ~ .progress-point { border-color: $gray-1; &:after { background-color: $gray-1; } } } }
}