¨4.0.1¨
This commit is contained in:
¨NW¨
537
resources/sass/install/pages/_install.scss
Normal file
537
resources/sass/install/pages/_install.scss
Normal file
@@ -0,0 +1,537 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user