Implement new step-by-step setup
This commit is contained in:
Joseph Schorr
parent
28d319ad26
commit
c8229b9c8a
20 changed files with 1393 additions and 599 deletions
|
|
@ -366,10 +366,6 @@
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
.config-setup-tool .cor-floating-bottom-bar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.config-setup-tool .cor-floating-bottom-bar button i.fa {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
|
@ -418,3 +414,285 @@
|
|||
font-family: Consolas, "Lucida Console", Monaco, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.co-m-loader, .co-m-inline-loader {
|
||||
min-width: 28px; }
|
||||
|
||||
.co-m-loader {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -11px 0 0 -13px; }
|
||||
|
||||
.co-m-inline-loader {
|
||||
display: inline-block;
|
||||
cursor: default; }
|
||||
.co-m-inline-loader:hover {
|
||||
text-decoration: none; }
|
||||
|
||||
.co-m-loader-dot__one, .co-m-loader-dot__two, .co-m-loader-dot__three {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
-ms-animation-fill-mode: both;
|
||||
-o-animation-fill-mode: both;
|
||||
animation-name: bouncedelay;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-delay: 0;
|
||||
animation-direction: normal;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: forwards;
|
||||
animation-play-state: running;
|
||||
-webkit-animation-name: bouncedelay;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-webkit-animation-delay: 0;
|
||||
-webkit-animation-direction: normal;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-webkit-animation-play-state: running;
|
||||
-moz-animation-name: bouncedelay;
|
||||
-moz-animation-duration: 1s;
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
-moz-animation-delay: 0;
|
||||
-moz-animation-direction: normal;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
-moz-animation-play-state: running;
|
||||
display: inline-block;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: #419eda;
|
||||
border-radius: 100%;
|
||||
display: inline-block; }
|
||||
|
||||
.co-m-loader-dot__one {
|
||||
animation-delay: -0.32s;
|
||||
-webkit-animation-delay: -0.32s;
|
||||
-moz-animation-delay: -0.32s;
|
||||
-ms-animation-delay: -0.32s;
|
||||
-o-animation-delay: -0.32s; }
|
||||
|
||||
.co-m-loader-dot__two {
|
||||
animation-delay: -0.16s;
|
||||
-webkit-animation-delay: -0.16s;
|
||||
-moz-animation-delay: -0.16s;
|
||||
-ms-animation-delay: -0.16s;
|
||||
-o-animation-delay: -0.16s; }
|
||||
|
||||
@-webkit-keyframes bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0.25, 0.25);
|
||||
-moz-transform: scale(0.25, 0.25);
|
||||
-ms-transform: scale(0.25, 0.25);
|
||||
-o-transform: scale(0.25, 0.25);
|
||||
transform: scale(0.25, 0.25); }
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1); } }
|
||||
|
||||
@-moz-keyframes bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0.25, 0.25);
|
||||
-moz-transform: scale(0.25, 0.25);
|
||||
-ms-transform: scale(0.25, 0.25);
|
||||
-o-transform: scale(0.25, 0.25);
|
||||
transform: scale(0.25, 0.25); }
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1); } }
|
||||
|
||||
@-ms-keyframes bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0.25, 0.25);
|
||||
-moz-transform: scale(0.25, 0.25);
|
||||
-ms-transform: scale(0.25, 0.25);
|
||||
-o-transform: scale(0.25, 0.25);
|
||||
transform: scale(0.25, 0.25); }
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1); } }
|
||||
|
||||
@keyframes bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0.25, 0.25);
|
||||
-moz-transform: scale(0.25, 0.25);
|
||||
-ms-transform: scale(0.25, 0.25);
|
||||
-o-transform: scale(0.25, 0.25);
|
||||
transform: scale(0.25, 0.25); }
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1); } }
|
||||
|
||||
.co-dialog .modal-body {
|
||||
padding: 10px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.co-dialog .modal-content {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.co-dialog.fatal-error .modal-content {
|
||||
padding-left: 175px;
|
||||
}
|
||||
|
||||
.co-dialog.fatal-error .alert-icon-container-container {
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
left: -175px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.co-dialog.fatal-error .alert-icon-container {
|
||||
height: 100%;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.co-dialog.fatal-error .alert-icon {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
border-right: 1px solid #eee;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.co-dialog.fatal-error .alert-icon:before {
|
||||
content: "\f071";
|
||||
font-family: FontAwesome;
|
||||
font-size: 60px;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
color: #c53c3f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.co-dialog .modal-header .cor-step-bar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.co-dialog .modal-footer.working {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.co-dialog .modal-footer.working .cor-loader-inline {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.co-dialog .modal-footer .left-align {
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.co-dialog .modal-footer .left-align i.fa-warning {
|
||||
color: #ffba35;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.co-dialog .modal-footer .left-align i.fa-check {
|
||||
color: green;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element {
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
position: relative;
|
||||
color: #ddd;
|
||||
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element.text {
|
||||
margin-left: 24px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element.icon {
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element.active {
|
||||
color: #53a3d9;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element:first-child:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 14px;
|
||||
border-top: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element.icon:before {
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element.text:before {
|
||||
left: -22px;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element.active:before {
|
||||
border-top: 2px solid #53a3d9;
|
||||
}
|
||||
|
||||
|
||||
.co-step-bar .co-step-element.text {
|
||||
border-radius: 100%;
|
||||
border: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.co-step-bar .co-step-element.text.active {
|
||||
border: 2px solid #53a3d9;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.co-dialog .modal-dialog {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.co-alert .co-step-bar {
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
}
|
||||
Reference in a new issue