vpn.email
Version:
vpn.email client
122 lines (106 loc) • 2 kB
text/less
@import (once) "utils";
.wizard2 {
counter-reset: div;
position: relative;
width: 100%;
.clear-float;
.step {
width: auto;
//height: auto;
display: block;
float: left;
position: relative;
z-index: 1;
padding: 0 0 3rem;
}
.step:before {
content: counter(div);
counter-increment: div;
position: absolute;
font-size: .8rem;
bottom: 20px;
width: 24px;
text-align: center;
}
.step {
&.active {
border: 0;
//min-width: 200px;
&:before {
visibility: hidden;
}
}
&.prev {
border-left: 24px solid @grayLighter;
border-right: 1px solid darken(@grayLighter, 3%);
width: 0 ;
&:before {
left: 0 ;
margin-left: -24px;
color: @dark;
}
}
&.next {
border-left: 1px solid darken(@grayLighter, 3%);
border-right: 24px solid @cyan;
width: 0;
&:before {
left: 100%;
color: @white;
}
}
&.next + .next{
border-color: darken(@cyan, 5%);
}
&.next + .next + .next{
border-color: darken(@cyan, 10%);
}
&.next + .next + .next + .next{
border-color: darken(@cyan, 15%);
}
&.next + .next + .next + .next + .next{
border-color: darken(@cyan, 20%);
}
&.next + .next + .next + .next + .next + .next{
border-color: darken(@cyan, 30%);
}
&.next + .next + .next + .next + .next + .next + .next{
border-color: darken(@cyan, 35%);
}
&.next + .next + .next + .next + .next + .next + .next + .next{
border-color: darken(@cyan, 40%);
}
&.next + .next + .next + .next + .next + .next + .next + .next + .next{
border-color: darken(@cyan, 45%);
}
}
.step-content {
//height: 100%;
width: auto;
overflow: hidden;
padding: .625rem;
}
.step.prev, .step.next {
.step-content {
width: 0 ;
padding: 0 ;
}
}
}
.wizard2 {
.action-bar {
padding: 0 .625rem;
position: absolute;
bottom: 10px;
text-align: right;
z-index: 2;
.clear-float;
.button {
margin: 0 .125rem;
opacity: .6;
&:hover {
opacity: 1;
}
}
}
}