.form-wizard { &:extend(.clearfix all); > .tabs { list-style: none; padding: 0; margin: 0; display: table; position: relative; width: 100%; > li { display: table-cell; width: 1%; text-align: center; background: darken(#fff, 1%); a { position: relative; display: block; padding: @base-padding @base-padding/2; color: @main-text-color; &:extend(.transall); > span { background: @secondary-color; font-size: @font-size-small; color: #fff; background: darken(@background-color, 2%); color: @main-text-color; padding: 2px 0; text-align: center; display: block; position: relative; margin: -@base-padding -@base-padding/2; margin-top: @base-padding; } &:after { content: ''; position: absolute; display: block; height: @base-padding; background: transparent; top: 100%; left: 0; right: 0; &:extend(.transall); } &:hover { background: #f7f7f7; } } + li { border-left: 1px solid @background-color; } &.active { a { color: darken(@main-text-color, 20%); &:after { background-color: fade(#000, 10%); } } } &.completed { background-color: #f7f7f7; } } } > .progress-indicator { @h: 10px; height: @base-padding; position: relative; background: transparent; width: 0%; overflow: hidden; .box-sizing(border-box); .transition(~"height 250ms cubic-bezier(0.190, 1.000, 0.220, 1.000), width 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000)"); > span { display: block; background: @brand-success; height: @h; line-height: 1; text-indent: -9999px; } } .tab-content { margin-top: @base-margin; strong { color: darken(@main-text-color, 10%); } label { color: @main-text-color; } .tab-pane { > .form-group { margin-bottom: @base-margin + @base-padding/2; &:last-child { margin-bottom: 0; } } } &.no-margin { margin-top: 0; .tab-pane.with-bg { padding-top: @default-padding/2; } } .tab-pane { &.with-bg { background: #fff; padding: @base-margin; } } } .pager { margin-top: @base-margin; .previous + .previous a { margin-left: @base-padding/2; } .next + .next a { margin-right: @base-padding/2; } .disabled a { .opacity(.5); } } }