369 lines
7.1 KiB
CSS
369 lines
7.1 KiB
CSS
/*========================================================
|
|
DARK LAYOUT
|
|
=========================================================*/
|
|
.app-content .wizard
|
|
{
|
|
width: 100%;
|
|
}
|
|
.app-content .wizard .content
|
|
{
|
|
margin-left: 0 !important;
|
|
}
|
|
.app-content .wizard > .steps
|
|
{
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
}
|
|
.app-content .wizard > .steps .current-info
|
|
{
|
|
position: absolute;
|
|
left: -99999px;
|
|
}
|
|
.app-content .wizard > .steps > ul
|
|
{
|
|
display: table;
|
|
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
table-layout: fixed;
|
|
list-style: none;
|
|
}
|
|
.app-content .wizard > .steps > ul > li
|
|
{
|
|
position: relative;
|
|
|
|
display: table-cell;
|
|
|
|
width: auto;
|
|
|
|
text-align: center;
|
|
vertical-align: top;
|
|
}
|
|
.app-content .wizard > .steps > ul > li a
|
|
{
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
padding-top: 52px;
|
|
}
|
|
.app-content .wizard > .steps > ul > li:before
|
|
{
|
|
position: absolute;
|
|
z-index: 9;
|
|
left: 0;
|
|
|
|
display: block;
|
|
|
|
content: '';
|
|
}
|
|
.app-content .wizard > .steps > ul > li:after
|
|
{
|
|
position: absolute;
|
|
z-index: 9;
|
|
right: 0;
|
|
|
|
display: block;
|
|
|
|
content: '';
|
|
}
|
|
.app-content .wizard > .steps > ul > li:last-child:after
|
|
{
|
|
content: none;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.current > a
|
|
{
|
|
cursor: default;
|
|
|
|
color: #7367f0;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.current .step
|
|
{
|
|
color: #fff;
|
|
border-color: #7367f0;
|
|
background-color: #7367f0;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.disabled a
|
|
{
|
|
cursor: default;
|
|
|
|
color: #636363;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.disabled a:hover
|
|
{
|
|
cursor: default;
|
|
|
|
color: #636363;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.disabled a:focus
|
|
{
|
|
cursor: default;
|
|
|
|
color: #636363;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.disabled .step
|
|
{
|
|
color: #b8c2cc;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.done a
|
|
{
|
|
color: #636363;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.done a:hover
|
|
{
|
|
color: #636363;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.done a:focus
|
|
{
|
|
color: #636363;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.done .step
|
|
{
|
|
color: #b8c2cc;
|
|
border-color: #7367f0;
|
|
background-color: #fff;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.done:last-child .step
|
|
{
|
|
color: #fff;
|
|
border-color: #7367f0;
|
|
background-color: #7367f0;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.error > a
|
|
{
|
|
color: #ea5455;
|
|
}
|
|
.app-content .wizard > .steps > ul > li.error .step
|
|
{
|
|
color: #fff;
|
|
border-color: #ea5455;
|
|
background-color: #ea5455;
|
|
}
|
|
.app-content .wizard > .steps .step
|
|
{
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 0;
|
|
left: 50%;
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: -24px;
|
|
|
|
text-align: center;
|
|
|
|
background-color: #fff;
|
|
}
|
|
.app-content .wizard > .steps .step i
|
|
{
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.app-content .wizard > .content
|
|
{
|
|
position: relative;
|
|
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.app-content .wizard > .content > .title
|
|
{
|
|
position: absolute;
|
|
left: -99999px;
|
|
}
|
|
.app-content .wizard > .content > .body
|
|
{
|
|
padding: 0 20px;
|
|
}
|
|
.app-content .wizard > .content > iframe
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
border: 0 none;
|
|
}
|
|
.app-content .wizard > .actions
|
|
{
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
padding: 20px;
|
|
padding-top: 0;
|
|
|
|
text-align: right;
|
|
}
|
|
.app-content .wizard > .actions > ul
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
list-style: none;
|
|
}
|
|
.app-content .wizard > .actions > ul:after
|
|
{
|
|
display: table;
|
|
clear: both;
|
|
|
|
content: '';
|
|
}
|
|
.app-content .wizard > .actions > ul > li
|
|
{
|
|
float: left;
|
|
}
|
|
.app-content .wizard > .actions > ul > li + li
|
|
{
|
|
float: right;
|
|
|
|
margin-left: 10px;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a
|
|
{
|
|
display: block;
|
|
|
|
padding: 7px 12px;
|
|
|
|
color: #fff;
|
|
border: 1px solid transparent;
|
|
border-radius: .42rem;
|
|
background: #7367f0;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a:hover
|
|
{
|
|
-webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .05) inset;
|
|
box-shadow: 0 0 0 100px rgba(0, 0, 0, .05) inset;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a:focus
|
|
{
|
|
-webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .05) inset;
|
|
box-shadow: 0 0 0 100px rgba(0, 0, 0, .05) inset;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a:active
|
|
{
|
|
-webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .1) inset;
|
|
box-shadow: 0 0 0 100px rgba(0, 0, 0, .1) inset;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a[href='#previous']
|
|
{
|
|
color: #fff;
|
|
border-radius: .42rem;
|
|
background-color: #7367f0;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a[href='#previous']:hover
|
|
{
|
|
-webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .02) inset;
|
|
box-shadow: 0 0 0 100px rgba(0, 0, 0, .02) inset;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a[href='#previous']:focus
|
|
{
|
|
-webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .02) inset;
|
|
box-shadow: 0 0 0 100px rgba(0, 0, 0, .02) inset;
|
|
}
|
|
.app-content .wizard > .actions > ul > li > a[href='#previous']:active
|
|
{
|
|
-webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .04) inset;
|
|
box-shadow: 0 0 0 100px rgba(0, 0, 0, .04) inset;
|
|
}
|
|
.app-content .wizard > .actions > ul > li.disabled > a
|
|
{
|
|
color: #fff;
|
|
}
|
|
.app-content .wizard > .actions > ul > li.disabled > a:hover
|
|
{
|
|
color: #fff;
|
|
}
|
|
.app-content .wizard > .actions > ul > li.disabled > a:focus
|
|
{
|
|
color: #fff;
|
|
}
|
|
.app-content .wizard > .actions > ul > li.disabled > a[href='#previous']
|
|
{
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.app-content .wizard > .actions > ul > li.disabled > a[href='#previous']:hover
|
|
{
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.app-content .wizard > .actions > ul > li.disabled > a[href='#previous']:focus
|
|
{
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.app-content .wizard.wizard-circle > .steps > ul > li:before,
|
|
.app-content .wizard.wizard-circle > .steps > ul > li:after
|
|
{
|
|
top: 43px;
|
|
|
|
width: 50%;
|
|
height: 3px;
|
|
|
|
background-color: #7367f0;
|
|
}
|
|
.app-content .wizard.wizard-circle > .steps > ul > li.current:after
|
|
{
|
|
background-color: transparent;
|
|
}
|
|
.app-content .wizard.wizard-circle > .steps > ul > li.current ~ li:before
|
|
{
|
|
background-color: transparent;
|
|
}
|
|
.app-content .wizard.wizard-circle > .steps > ul > li.current ~ li:after
|
|
{
|
|
background-color: transparent;
|
|
}
|
|
.app-content .wizard.wizard-circle > .steps .step
|
|
{
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
line-height: 3rem;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
|
|
border: 3px solid #b8c2cc;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@media (max-width: 768px)
|
|
{
|
|
.app-content .wizard > .steps > ul
|
|
{
|
|
margin-bottom: 20px;
|
|
}
|
|
.app-content .wizard > .steps > ul > li
|
|
{
|
|
display: block;
|
|
float: left;
|
|
|
|
width: 33%;
|
|
}
|
|
.app-content .wizard > .steps > ul > li > a
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
.app-content .wizard > .steps > ul > li:last-child:after
|
|
{
|
|
content: '';
|
|
|
|
background-color: #7367f0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px)
|
|
{
|
|
.app-content .wizard > .steps > ul > li.current:after
|
|
{
|
|
background-color: #7367f0;
|
|
}
|
|
}
|