/* ------------------------------------------------------------------------------
*
* # Stepy wizard
*
* jQuery plugin which generates a customizable wizard from form fieldsets
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
.stepy-step {
padding: @panel-body-padding;
padding-top: 0;
}
// Header
// ------------------------------
.stepy-header {
list-style: none;
padding: 0;
margin: 0;
display: table;
table-layout: fixed;
width: 100%;
// Add top border if inside flat panel
.panel-flat > & {
border-top: 1px solid @panel-default-border;
}
// Nav list item
li {
cursor: pointer;
display: table-cell;
vertical-align: top;
width: auto;
padding: @content-padding-large 0;
text-align: center;
position: relative;
// Step nav text label
span {
display: block;
margin-top: 10px;
color: @text-muted;
}
// Line indicator
&:before,
&:after {
content: '';
display: block;
position: absolute;
top: 43px;
width: 50%;
height: 2px;
background-color: @brand-info;
z-index: 9;
}
&:before {
left: 0;
}
&:after {
right: 0;
}
&:first-child:before,
&:last-child:after {
content: none;
}
// Number indicator
div {
background-color: @brand-info;
font-size: 0;
position: relative;
color: #fff;
margin-left: auto;
margin-right: auto;
width: 38px;
height: 38px;
border: 2px solid @brand-info;
z-index: 10;
line-height: 34px;
text-align: center;
border-radius: 50%;
// Icon
&:after {
content: '\ed6c';
font-family: 'icomoon';
display: inline-block;
font-size: @icon-font-size;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 34px;
.transition(all 0.15s ease-in-out);
}
}
// Active step
&.stepy-active {
&:after,
~ li:before,
~ li:after {
background-color: #f5f5f5;
}
~ li div {
border-color: @gray-lighter;
background-color: #fff;
color: #ccc;
font-size: 14px;
&:after {
content: none;
}
}
// Icon container
div {
cursor: auto;
border-color: @brand-info;
background-color: #fff;
color: @brand-info;
&:after {
content: '\e913';
}
}
// Text label
span {
color: @text-color;
}
}
}
// Media queries
@media (max-width: @screen-sm) {
margin-bottom: @panel-body-padding;
// List item
li {
display: block;
float: left;
width: 50%;
padding-bottom: 0;
&:first-child:before,
&:last-child:after {
content: '';
}
&.stepy-active:last-child:after {
background-color: @brand-info;
}
}
}
@media (max-width: @screen-xs) {
// List item
li {
width: 100%;
&.stepy-active:after {
background-color: @brand-info;
}
}
}
}
// Pagination
// ------------------------------
.stepy-navigator {
text-align: right;
.btn + .btn {
margin-left: 5px;
}
}