354 lines
9.3 KiB
Plaintext
354 lines
9.3 KiB
Plaintext
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Steps wizard
|
|
*
|
|
* An all-in-one wizard plugin that is extremely flexible, compact and feature-rich
|
|
*
|
|
* Version: 1.2
|
|
* Latest update: Aug 10, 2016
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
|
|
// Core
|
|
// ------------------------------
|
|
|
|
.wizard {
|
|
width: 100%;
|
|
|
|
// Title
|
|
> .steps .current-info,
|
|
> .content > .title {
|
|
position: absolute;
|
|
left: -99999px;
|
|
}
|
|
|
|
// Wizard content
|
|
> .content {
|
|
position: relative;
|
|
width: auto;
|
|
padding: 0;
|
|
|
|
> .body {
|
|
padding: 0 @content-padding-large;
|
|
}
|
|
|
|
> iframe {
|
|
border: 0 none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Steps list
|
|
// ------------------------------
|
|
|
|
.wizard {
|
|
|
|
// Steps
|
|
> .steps {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
|
|
// Wizard nav
|
|
> ul {
|
|
display: table;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
// Wizard nav item
|
|
> li {
|
|
display: table-cell;
|
|
width: auto;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
// Link
|
|
a {
|
|
position: relative;
|
|
padding-top: 48px;
|
|
margin-top: @line-height-computed;
|
|
margin-bottom: @line-height-computed;
|
|
display: block;
|
|
}
|
|
|
|
// Steps indicator line
|
|
&: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;
|
|
}
|
|
|
|
// Current step
|
|
&.current {
|
|
&:after,
|
|
~ li:before,
|
|
~ li:after {
|
|
background-color: @gray-lighter;
|
|
}
|
|
|
|
// Link
|
|
> a {
|
|
color: @text-color;
|
|
cursor: default;
|
|
}
|
|
|
|
// Icon container
|
|
.number {
|
|
font-size: 0;
|
|
border-color: @brand-info;
|
|
background-color: #fff;
|
|
color: @brand-info;
|
|
|
|
// Icon
|
|
&:after {
|
|
content: '\e913';
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Disabled
|
|
&.disabled {
|
|
a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @text-muted;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Completed step
|
|
&.done {
|
|
|
|
// Link
|
|
a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @text-muted;
|
|
}
|
|
}
|
|
|
|
// Icon container
|
|
.number {
|
|
font-size: 0;
|
|
background-color: @brand-info;
|
|
border-color: @brand-info;
|
|
color: #fff;
|
|
|
|
// Icon
|
|
&:after {
|
|
content: '\ed6f';
|
|
font-family: 'icomoon';
|
|
display: inline-block;
|
|
font-size: @icon-font-size;
|
|
line-height: ((@icon-font-size * 2) + 2); // Double icon + 2px border
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
.transition(all 0.15s ease-in-out);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Error
|
|
&.error {
|
|
.number {
|
|
border-color: @brand-danger;
|
|
color: @brand-danger;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Media queries
|
|
@media (max-width: @screen-xs-max) {
|
|
margin-bottom: @line-height-computed;
|
|
|
|
// Nav item
|
|
> li {
|
|
display: block;
|
|
float: left;
|
|
width: 50%;
|
|
|
|
> a {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:first-child:before,
|
|
&:last-child:after {
|
|
content: '';
|
|
}
|
|
|
|
&:last-child:after {
|
|
background-color: @brand-info;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: @screen-xs) {
|
|
|
|
// Nav item
|
|
> li {
|
|
width: 100%;
|
|
|
|
&.current:after {
|
|
background-color: @brand-info;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Numbers and icons
|
|
.number {
|
|
background-color: @panel-bg;
|
|
color: #ccc;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
margin-left: -19px;
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 2px solid @gray-lighter;
|
|
font-size: 14px;
|
|
border-radius: 50%;
|
|
z-index: 10;
|
|
line-height: 34px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// Add top border if inside flat panel
|
|
.panel-flat > & {
|
|
> .steps > ul {
|
|
border-top: 1px solid @panel-inner-border;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Steps pagination
|
|
// ------------------------------
|
|
|
|
.wizard {
|
|
|
|
// Container
|
|
> .actions {
|
|
position: relative;
|
|
display: block;
|
|
text-align: right;
|
|
padding: @content-padding-large;
|
|
padding-top: 0;
|
|
|
|
// Paging list
|
|
> ul {
|
|
float: right;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
// Paging item
|
|
> li {
|
|
float: left;
|
|
|
|
// Add horizontal spacing
|
|
& + li {
|
|
margin-left: @content-padding-small;
|
|
}
|
|
|
|
// Button styling
|
|
> a {
|
|
background: @brand-primary;
|
|
color: #fff;
|
|
display: block;
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
border-radius: @border-radius-base;
|
|
border: 1px solid transparent;
|
|
|
|
// Hover state
|
|
&:hover,
|
|
&:focus {
|
|
.box-shadow(0 0 0 100px fade(#000, 5%) inset);
|
|
}
|
|
|
|
// Active state
|
|
&:active {
|
|
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
|
}
|
|
|
|
// "Previous" button
|
|
&[href="#previous"] {
|
|
background-color: @btn-default-bg;
|
|
color: @btn-default-color;
|
|
border: 1px solid @btn-default-border;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.box-shadow(0 0 0 100px fade(#000, 1%) inset);
|
|
}
|
|
|
|
&:active {
|
|
.box-shadow(0 0 0 100px fade(#000, 3%) inset)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Disabled button
|
|
&.disabled > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @text-muted;
|
|
}
|
|
|
|
&[href="#previous"] {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|