538 lines
11 KiB
SCSS
538 lines
11 KiB
SCSS
.installer-wrapper {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.installer-box {
|
|
height: 560px;
|
|
width: 850px;
|
|
min-width: 850px;
|
|
margin: 50px 0;
|
|
background: #ffffff;
|
|
border: 5px solid $color-slate-100;
|
|
border-radius: $radius-default;
|
|
box-shadow: 0 10px 50px -3px rgb(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.installer-left-sidebar {
|
|
width: 260px;
|
|
min-width: 260px;
|
|
padding: 25px 20px 20px 16px;
|
|
background: $color-slate-100;
|
|
|
|
.logo {
|
|
svg {
|
|
width: 60px;
|
|
}
|
|
}
|
|
|
|
.step-list {
|
|
margin: 45px 0 auto;
|
|
}
|
|
|
|
.step-list-item {
|
|
margin-bottom: 25px;
|
|
z-index: 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:not(:last-child):before,
|
|
&:not(:last-child):after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 20px;
|
|
width: 2px;
|
|
}
|
|
|
|
&:not(:last-child):before {
|
|
height: 130%;
|
|
background: $color-slate-300;
|
|
opacity: 0.4;
|
|
z-index: -20;
|
|
}
|
|
|
|
&:not(:last-child):after {
|
|
height: 0%;
|
|
background: $color-primary-500;
|
|
opacity: 0.3;
|
|
transition: 300ms ease-out;
|
|
z-index: -10;
|
|
}
|
|
|
|
&.active {
|
|
.icon {
|
|
color: $color-primary-500;
|
|
background: $color-slate-100;
|
|
border-color: $color-primary-500;
|
|
|
|
.circle {
|
|
background: $color-primary-500;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
color: $color-gray-800;
|
|
}
|
|
|
|
.excerpt {
|
|
color: $color-gray-500;
|
|
}
|
|
}
|
|
|
|
&.complete {
|
|
&:not(:last-child):after {
|
|
height: 130%;
|
|
}
|
|
|
|
.icon {
|
|
color: #ffffff;
|
|
background: $color-primary-500;
|
|
border-color: $color-primary-500;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
height: 22px;
|
|
width: 22px;
|
|
min-width: 22px;
|
|
margin: 1px 15px 0 0;
|
|
color: darken($color-slate-300, 10%);
|
|
background: $color-slate-100;
|
|
border: 2px solid $color-slate-300;
|
|
transition: $transition-default;
|
|
|
|
.circle {
|
|
height: 14px;
|
|
width: 14px;
|
|
background: darken($color-slate-300, 10%);
|
|
}
|
|
|
|
.mdi {
|
|
-webkit-text-stroke-width: 0.5px;
|
|
transition: $transition-default;
|
|
}
|
|
}
|
|
|
|
.cursor-pointer {
|
|
.title {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 4px;
|
|
color: $color-gray-500;
|
|
}
|
|
|
|
.excerpt {
|
|
font-size: 13px;
|
|
color: $color-gray-400;
|
|
}
|
|
}
|
|
|
|
.app-version {
|
|
font-size: 13px;
|
|
font-weight: $font-medium;
|
|
color: $color-gray-500;
|
|
}
|
|
}
|
|
|
|
.installer-main-content {
|
|
padding: 20px 20px 14px;
|
|
border-radius: 0 $radius-default 0 0;
|
|
|
|
.header {
|
|
margin-bottom: 20px;
|
|
|
|
h3 {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.has-scrollable-content {
|
|
height: calc(100% - 48px);
|
|
}
|
|
|
|
.content {
|
|
border: 1px solid $color-slate-200;
|
|
border-radius: $radius-default;
|
|
}
|
|
|
|
.scrollable-content {
|
|
left: 0;
|
|
top: 1px;
|
|
bottom: 1px;
|
|
width: 100%;
|
|
padding: 2px 15px 4px;
|
|
}
|
|
|
|
.box {
|
|
&:last-child {
|
|
.table {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 10px;
|
|
|
|
.mdi {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.mdi-checkbox-marked-circle {
|
|
color: $color-green-500;
|
|
}
|
|
|
|
.mdi-close-circle {
|
|
color: $color-red-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.configuration {
|
|
.scrollable-content {
|
|
padding: 9px 15px 0;
|
|
}
|
|
|
|
.alert {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.configuration-form {
|
|
.box {
|
|
margin-bottom: 10px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
|
|
> div {
|
|
&:last-child {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.complete {
|
|
height: 100%;
|
|
|
|
.check-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
position: relative;
|
|
margin-bottom: 25px;
|
|
border-radius: $radius-full;
|
|
box-sizing: content-box;
|
|
border: 4px solid $color-primary-500;
|
|
|
|
&::before {
|
|
top: 3px;
|
|
left: -2px;
|
|
width: 30px;
|
|
transform-origin: 100% 50%;
|
|
border-radius: 100px 0 0 100px;
|
|
}
|
|
|
|
&::after {
|
|
top: 0;
|
|
left: 30px;
|
|
width: 60px;
|
|
transform-origin: 0 50%;
|
|
border-radius: 0 100px 100px 0;
|
|
animation: rotate-circle 4.25s ease-in;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
height: 100px;
|
|
position: absolute;
|
|
background: $color-white;
|
|
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.icon-line {
|
|
height: 5px;
|
|
background-color: $color-primary-500;
|
|
display: block;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
z-index: 10;
|
|
|
|
&.line-tip {
|
|
top: 46px;
|
|
left: 14px;
|
|
width: 25px;
|
|
transform: rotate(45deg);
|
|
animation: icon-line-tip 0.75s;
|
|
}
|
|
|
|
&.line-long {
|
|
top: 38px;
|
|
right: 8px;
|
|
width: 47px;
|
|
transform: rotate(-45deg);
|
|
animation: icon-line-long 0.75s;
|
|
}
|
|
}
|
|
|
|
.icon-circle {
|
|
top: -4px;
|
|
left: -4px;
|
|
z-index: 10;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: $radius-full;
|
|
position: absolute;
|
|
box-sizing: content-box;
|
|
border: 4px solid rgba(0, 104, 225, 0.5);
|
|
}
|
|
|
|
.icon-fix {
|
|
top: 8px;
|
|
width: 5px;
|
|
left: 26px;
|
|
z-index: 1;
|
|
height: 85px;
|
|
position: absolute;
|
|
transform: rotate(-45deg);
|
|
background-color: $color-white;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 50px;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.links {
|
|
animation-delay: 1.3s;
|
|
|
|
li {
|
|
&:last-child {
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.link {
|
|
height: 135px;
|
|
width: 150px;
|
|
text-decoration: none;
|
|
background: $color-white;
|
|
border: 1px solid $color-slate-200;
|
|
border-radius: $radius-default;
|
|
transition: $transition-default;
|
|
|
|
&:hover {
|
|
background: $color-primary-500;
|
|
border-color: $color-primary-500;
|
|
|
|
.mdi,
|
|
b {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.mdi {
|
|
font-size: 60px;
|
|
margin-top: 4px;
|
|
color: lighten($color-slate-600, 3%);
|
|
transition: $transition-default;
|
|
}
|
|
|
|
b {
|
|
color: $color-slate-500;
|
|
transition: $transition-default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 14px;
|
|
|
|
.btn-light {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-circle {
|
|
0% {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
5% {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
12% {
|
|
transform: rotate(-405deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(-405deg);
|
|
}
|
|
}
|
|
|
|
@keyframes icon-line-tip {
|
|
0% {
|
|
width: 0;
|
|
left: 1px;
|
|
top: 19px;
|
|
}
|
|
|
|
54% {
|
|
width: 0;
|
|
left: 1px;
|
|
top: 19px;
|
|
}
|
|
|
|
70% {
|
|
width: 50px;
|
|
left: -8px;
|
|
top: 37px;
|
|
}
|
|
|
|
84% {
|
|
width: 17px;
|
|
left: 21px;
|
|
top: 48px;
|
|
}
|
|
|
|
100% {
|
|
width: 25px;
|
|
left: 14px;
|
|
top: 45px;
|
|
}
|
|
}
|
|
|
|
@keyframes icon-line-long {
|
|
0% {
|
|
width: 0;
|
|
right: 46px;
|
|
top: 54px;
|
|
}
|
|
|
|
65% {
|
|
width: 0;
|
|
right: 46px;
|
|
top: 54px;
|
|
}
|
|
|
|
84% {
|
|
width: 55px;
|
|
right: 0px;
|
|
top: 35px;
|
|
}
|
|
|
|
100% {
|
|
width: 47px;
|
|
right: 8px;
|
|
top: 38px;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(lg) {
|
|
.installer-box {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
html,
|
|
body {
|
|
height: auto;
|
|
}
|
|
|
|
.installer-box {
|
|
height: auto;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.installer-left-sidebar {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 20px 15px !important;
|
|
|
|
.step-list {
|
|
margin: 40px 0 40px -2px;
|
|
}
|
|
}
|
|
|
|
.installer-main-content {
|
|
padding: 15px;
|
|
|
|
.has-scrollable-content {
|
|
height: auto;
|
|
}
|
|
|
|
.content {
|
|
height: 430px;
|
|
}
|
|
|
|
.configuration-form {
|
|
.title {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
&.form-horizontal {
|
|
.form-group {
|
|
margin-bottom: 14px;
|
|
}
|
|
}
|
|
|
|
.col-form-label {
|
|
margin-bottom: 5px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.complete {
|
|
padding: 40px 0;
|
|
|
|
.title {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.links {
|
|
li:last-child {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
.link {
|
|
height: 100px;
|
|
width: 110px;
|
|
|
|
.mdi {
|
|
font-size: 36px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|