.#{$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; @include clearfix(); 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; } } }