amis2/scss/components/_wizard.scss

.#{$ns}Wizard {
    @include clearfix();

    position: relative;

    &,
    &-tabs {
        padding: 0;

        .Badge {
            display: inline-block;
            width: $Wizard-badge-size;
            height: $Wizard-badge-size;
            font-size: $Wizard-badge-fontSize;
            line-height: $Wizard-badge-size;
            color: $Wizard-badge-color;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            background-color: $Wizard-badge-bg;
            border-radius: $Wizard-badge-borderRadius; // font-weight: 700;
            text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
            margin-right: $Wizard-badge-marginRight;
            border: $Wizard-badge-border;
            box-sizing: content-box;

            // &--primary {
            //     background-color: $primary;
            // }

            // &--secondary {
            //     background-color: $secondary;
            // }

            // &--success {
            //     background-color: $success;
            // }

            // &--info {
            //     background-color: $info;
            // }

            // &--warning {
            //     background-color: $warning;
            // }

            // &--danger {
            //     background-color: $danger;
            // }

            // &--light {
            //     background-color: $light;
            // }

            // &--dark {
            //     background-color: $dark;
            // }
            &.is-active {
                color: $white;
                background-color: $Wizard-badge-onActive-backgroundColor;
            }
        }

        ul li.active {
            color: $info;
        }

        .#{$ns}Panel-footer > .#{$ns}Form-group,
        .#{$ns}Panel-footer > .btn {
            margin-left: px2rem(5px);
        }

        > ul.nav {
            padding: 0;
            margin: 0;
            border: $borderWidth solid $borderColor;

            li {
                position: relative;
                float: left;
                padding: 0 px2rem(15px) 0 px2rem(25px);
                margin: 0;
                color: #999999;
                cursor: pointer;
                height: $Wizard-steps-height;
                line-height: $Wizard-steps-height;

                a {
                    border: 0 none !important;
                    background: transparent !important;
                    color: inherit;
                    display: inline;
                    padding: 0;

                    div {
                        display: inline;
                    }
                }

                &:first-child {
                    padding-left: px2rem(15px);
                    border-radius: px2rem(4px) 0 0 0;
                }

                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    right: px2rem(-10px);
                    border: px2rem(20px) solid transparent;
                    border-right: 0;
                    border-left: px2rem(10px) solid $borderColor;
                    border-left-color: rgba(0, 0, 0, 0.05);
                    z-index: 1;
                    bottom: 0;
                }

                &:after {
                    right: px2rem(-9px);
                    border-left-color: $Wizard-steps-bg;
                    z-index: 2;
                }

                &.is-active {
                    color: $Wizard-steps-li-onActive-color;
                    background: #fff;
                }

                &.is-active:after {
                    border-left-color: #fff;
                }
            }

            // .Badge {
            //     margin-right: px2rem(4px);
            // }
        }
    }

    &-steps {
        font-size: $fontSizeBase;
        padding: $Wizard-steps-padding;
        background-color: $Wizard-steps-bg;
        border-bottom: $Wizard-steps-borderWidth solid $borderColor;
        text-align: $Wizard-steps-textAlign;
        height: $Wizard-steps-height;

        ul {
            display: $Wizard-steps-ulDisplay;
            padding: 0;
            margin: 0;
            list-style: none outside none;

            li {
                position: relative;
                float: left;
                padding: 0 px2rem(15px) 0 px2rem(25px);
                margin: 0;
                color: #999999;
                cursor: default;
                height: $Wizard-steps-height;
                line-height: $Wizard-steps-height;

                &:first-child {
                    padding-left: px2rem(15px);
                    border-radius: px2rem(4px) 0 0 0;
                }

                &:before,
                &:after {
                    font-family: $Wizard-steps-liVender;
                    content: $Wizard-steps-liAfterContent;
                    position: absolute;
                    bottom: 0;
                    right: px2rem(-10px);
                    border: $Wizard-steps-liAfterBorder;
                    border-right: 0;
                    border-left: px2rem(10px) solid $borderColor;
                    border-left-color: rgba(0, 0, 0, 0.05);
                    z-index: 2;
                }

                &:after {
                    right: px2rem(-9px);
                    border-left-color: $Wizard-steps-bg;
                    z-index: 2;
                }

                &.is-active {
                    color: $Wizard-steps-li-onActive-color;
                    background: $Wizard-steps-li-onActive-bg;
                }

                &.is-active:after {
                    border-left-color: $Wizard-steps-li-onActive-arrow-bg;
                }

                &.is-complete,
                &.is-complete:hover {
                    color: $Wizard-steps-li-onActive-color;
                    cursor: pointer;
                    background: $Wizard-steps-bg--isComplete;
                }

                &.is-complete:after {
                    border-left-color: #f1f5f9;
                }
            }

            // .Badge {
            //     margin-right: px2rem(4px);
            // }
        }
    }

    &-stepContent {
        padding: $Wizard-stepsContent-padding;

        & .Step-pane {
            display: none;

            &.is-active {
                display: inherit;
            }
        }
    }

    &--vertical {
        float: left;
        border-bottom: none;
        margin-bottom: px2rem(30px); // padding: 0;

        &.#{$ns}Wizard-steps {
            height: auto;
        }

        & + .#{$ns}Wizard-stepContent {
            zoom: 1;
            overflow: hidden;
            padding-left: px2rem(40px);
        }

        & li {
            background-color: $Wizard-steps-bg;
        }

        & ul li {
            height: px2rem(40px);
            line-height: px2rem(40px);
            position: relative;
            float: none;
            border-bottom: $borderWidth solid $borderColor;
            padding-left: px2rem(15px); // &:before,
            // &:after {
            // border: px2rem(20px) solid transparent;
            // content: '';
            // }
        }

        & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
            clear: both;
        }
    }
}