WebStackPage.github.io/assets/less/xenon-less/forms-wizard.less

.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);
		}
	}
}