codenamecrud/codenamecrud

.bs-wizard
    margin-top: 40px
    border-bottom: solid 1px #e0e0e0
    padding: 0 0 10px 0
    > .bs-wizard-step
        padding: 0
        position: relative
        .bs-wizard-stepnum
            color: #595959
            font-size: 16px
            margin-bottom: 5px
            visibility: hidden

        .bs-wizard-info
            color: #999
            font-size: 14px

        >
            .bs-wizard-dot
                position: absolute
                width: 30px
                height: 30px
                display: block
                background: #fbe8aa
                top: 45px
                left: 50%
                margin-top: -15px
                margin-left: -15px
                //If you use compass, instead of the line below you could use +border-radius($radius, $vertical-radius)
                border-radius: 50%
                &:after
                    content: ' '
                    width: 14px
                    height: 14px
                    background: #fbbd19
                    //If you use compass, instead of the line below you could use +border-radius($radius, $vertical-radius)
                    border-radius: 50px
                    position: absolute
                    top: 8px
                    left: 8px


            .progress
                position: relative
                //If you use compass, instead of the line below you could use +border-radius($radius, $vertical-radius)
                border-radius: 0
                height: 8px
                //If you use compass, instead of the line below you could use +box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
                box-shadow: none
                margin: 20px 0
                > .progress-bar
                    width: 0
                    //If you use compass, instead of the line below you could use +box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
                    box-shadow: none
                    background: #fbe8aa



        &:first-child
            &.active > .progress > .progress-bar
                width: 0

            > .progress
                left: 50%
                width: 50%


        &:last-child
            &.active > .progress > .progress-bar
                width: 100%

            > .progress
                width: 50%


        &.disabled
            > .bs-wizard-dot
                background-color: #f5f5f5
                &:after
                    opacity: 0


            a.bs-wizard-dot


        + .bs-wizard-step

        &.complete > .progress > .progress-bar
            width: 100%
            position: relative

        &.active > .progress > .progress-bar
            width: 50%