¨4.0.1¨

resources/sass/install/abstracts/_variables.scss

@@ -0,0 +1,66 @@
+// Font family
+$font-inter: "Inter", Arial, sans-serif;
+
+// Font weight
+$font-regular: 400;
+$font-medium: 500;
+$font-semi-bold: 600;
+
+// Colors
+$color-white: #ffffff;
+
+$color-primary-500: #0068e1;
+$color-primary-600: #004fc8;
+
+$color-slate-50: #f8fafc;
+$color-slate-100: #f1f5f9;
+$color-slate-200: #e2e8f0;
+$color-slate-300: #cbd5e1;
+$color-slate-400: #94a3b8;
+$color-slate-500: #64748b;
+$color-slate-600: #475569;
+$color-slate-700: #334155;
+$color-slate-800: #1e293b;
+$color-slate-900: #0f172a;
+$color-slate-950: #020617;
+
+$color-gray-50: #f9fafb;
+$color-gray-100: #f3f4f6;
+$color-gray-200: #e5e7eb;
+$color-gray-300: #d1d5db;
+$color-gray-400: #9ca3af;
+$color-gray-500: #6b7280;
+$color-gray-600: #4b5563;
+$color-gray-700: #374151;
+$color-gray-800: #1f2937;
+$color-gray-900: #111827;
+$color-gray-950: #030712;
+
+$color-green-50: #f0fdf4;
+$color-green-100: #dcfce7;
+$color-green-200: #bbf7d0;
+$color-green-300: #86efac;
+$color-green-400: #4ade80;
+$color-green-500: #22c55e;
+$color-green-600: #16a34a;
+$color-green-700: #15803d;
+$color-green-800: #166534;
+$color-green-900: #14532d;
+$color-green-950: #14532d;
+
+$color-red-50: #fef2f2;
+$color-red-100: #fee2e2;
+$color-red-200: #fecaca;
+$color-red-300: #fca5a5;
+$color-red-400: #f87171;
+$color-red-500: #ef4444;
+$color-red-600: #dc2626;
+$color-red-700: #b91c1c;
+$color-red-800: #991b1b;
+$color-red-900: #7f1d1d;
+$color-red-950: #450a0a;
+
+// Miscellaneous
+$radius-default: 8px;
+$radius-full: 50%;
+$transition-default: 150ms ease-out;

resources/sass/install/base/_reset.scss

@@ -0,0 +1,48 @@
+html,
+body {
+    height: 100%;
+}
+
+body {
+    direction: ltr;
+    font-family: $font-inter;
+    font-weight: $font-regular;
+    font-size: 14px;
+    font-style: normal;
+    min-width: 320px;
+    color: $color-gray-600;
+    background: $color-slate-200 url(../../images/installer-bg.png) no-repeat
+        center center;
+    background-size: cover;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+label,
+b {
+    font-weight: $font-medium;
+    color: $color-gray-800;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+.simplebar-scrollbar::before {
+    background: $color-slate-300;
+}

resources/sass/install/base/_typography.scss

@@ -0,0 +1,29 @@
+h1 {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+}
+
+h2 {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+}
+
+h3 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+}
+
+h4 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+}
+
+h5 {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+}
+
+h6 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+}

resources/sass/install/components/_alert.scss

@@ -0,0 +1,11 @@
+.alert {
+    --bs-alert-margin-bottom: 15px;
+    --bs-alert-border-radius: #{$radius-default};
+}
+
+.alert-danger {
+    --bs-alert-color: #{$color-red-800};
+    --bs-alert-bg: #{$color-red-100};
+    --bs-alert-border-color: #{$color-red-100};
+    --bs-alert-link-color: #{$color-red-900};
+}

resources/sass/install/components/_button.scss

@@ -0,0 +1,91 @@
+.btn {
+    --bs-btn-font-size: 14px;
+    --bs-btn-font-weight: #{$font-medium};
+    --bs-btn-line-height: 20px;
+    --bs-btn-padding-x: 16px;
+    --bs-btn-padding-y: 6px;
+    --bs-btn-border-radius: #{$radius-default};
+    --bs-btn-box-shadow: none;
+    --bs-btn-focus-box-shadow: none;
+    --bs-btn-disabled-opacity: 0.6;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-primary {
+    --bs-btn-color: #{$color-white};
+    --bs-btn-hover-color: #{$color-white};
+    --bs-btn-active-color: #{$color-white};
+    --bs-btn-bg: #{$color-primary-500};
+    --bs-btn-hover-bg: #{$color-primary-600};
+    --bs-btn-active-bg: #{$color-primary-600};
+    --bs-btn-border-color: #{$color-primary-500};
+    --bs-btn-hover-border-color: #{$color-primary-600};
+    --bs-btn-active-border-color: #{$color-primary-600};
+    --bs-btn-disabled-bg: #{$color-primary-600};
+    --bs-btn-disabled-border-color: #{$color-primary-600};
+}
+
+.btn-light {
+    --bs-btn-color: #{$color-gray-500};
+    --bs-btn-hover-color: #{$color-primary-600};
+    --bs-btn-active-color: #{$color-primary-600};
+    --bs-btn-bg: #{$color-white};
+    --bs-btn-hover-bg: #{$color-white};
+    --bs-btn-active-bg: #{$color-white};
+    --bs-btn-border-color: #{$color-gray-300};
+    --bs-btn-hover-border-color: #{$color-primary-500};
+    --bs-btn-active-border-color: #{$color-primary-500};
+    --bs-btn-disabled-color: #{$color-gray-500};
+    --bs-btn-disabled-bg: #{$color-gray-100};
+    --bs-btn-disabled-border-color: #{$color-gray-100};
+}
+
+.btn-close {
+    --bs-btn-close-color: #{$color-slate-900};
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.btn-loading {
+    --bs-btn-color: transparent;
+    --bs-btn-hover-color: transparent;
+    --bs-btn-active-color: transparent;
+    --bs-btn-disabled-color: transparent;
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: "";
+        left: 50%;
+        top: 50%;
+        height: 18px;
+        width: 18px;
+        border-radius: $radius-full;
+        animation: button-spin-loader 800ms linear infinite;
+    }
+
+    &:before {
+        border: 1px solid transparent;
+        border-top-color: $color-white;
+    }
+
+    &:after {
+        border: 1px solid rgba($color-white, 0.25);
+    }
+}
+
+@keyframes button-spin-loader {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}

resources/sass/install/components/_form.scss

@@ -0,0 +1,132 @@
+.form-horizontal {
+    .form-group {
+        margin-bottom: 20px;
+    }
+}
+
+.form-group {
+    margin-bottom: 14px;
+}
+
+label {
+    > .required {
+        margin-left: 4px;
+        color: $color-red-500;
+    }
+
+    > .mdi {
+        font-size: 14px;
+        color: $color-gray-600;
+    }
+}
+
+.form-label,
+.col-form-label {
+    font-weight: $font-medium;
+    display: flex;
+    color: $color-gray-700;
+}
+
+.form-label {
+    margin-bottom: 5px;
+}
+
+.col-form-label {
+    align-self: flex-start;
+    padding-top: 5px;
+}
+
+.input-group-text {
+    color: $color-gray-500;
+    background: lighten($color-gray-100, 1%);
+    border: 1px solid lighten($color-slate-300, 4%);
+
+    .mdi {
+        color: lighten($color-gray-500, 4%);
+    }
+}
+
+.form-control,
+.form-select {
+    font-size: 14px;
+    line-height: 20px;
+    color: $color-gray-500;
+    border-radius: $radius-default;
+    border-color: lighten($color-slate-300, 4%);
+
+    &:focus {
+        color: $color-slate-600;
+        border-color: $color-primary-500;
+        box-shadow: none;
+        text-overflow: ellipsis;
+    }
+
+    &:placeholder-shown {
+        text-overflow: ellipsis;
+    }
+
+    &.active {
+        border-color: $color-primary-500;
+    }
+}
+
+.form-control {
+    padding: 7px 11px;
+
+    &:disabled {
+        color: $color-gray-500;
+        background: lighten($color-slate-100, 2%);
+        opacity: 0.8;
+    }
+}
+
+.form-select {
+    padding: 7px 35px 7px 11px;
+    background-image: url(../../images/arrow-down.svg);
+    background-size: 20px 20px;
+    background-position: right 8px center;
+    cursor: pointer;
+}
+
+.form-check-group {
+    .form-check {
+        margin-bottom: 11px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.form-check-label {
+    font-weight: $font-medium;
+}
+
+.input-group-row {
+    margin-bottom: 20px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.form-footer {
+    padding-top: 20px;
+    border-top: 1px solid lighten($color-slate-300, 4%);
+}
+
+.invalid-feedback,
+.text-muted {
+    display: block;
+    margin: 3px 0 -5px;
+}
+
+.invalid-feedback {
+    font-size: 14px;
+    color: $color-red-500;
+}
+
+.text-muted {
+    font-size: 14px;
+    color: lighten($color-gray-500, 10%) !important;
+}

resources/sass/install/components/_table.scss

@@ -0,0 +1,34 @@
+.table {
+    tr {
+        &:first-child {
+            td {
+                padding-top: 10px;
+            }
+        }
+    }
+
+    th,
+    td {
+        &:first-child {
+            padding-left: 0;
+        }
+
+        &:last-child {
+            padding-right: 0;
+            text-align: right;
+        }
+    }
+
+    th {
+        font-weight: $font-semi-bold;
+        color: $color-gray-700;
+        border-color: $color-slate-200;
+    }
+
+    td {
+        padding: 4px;
+        color: $color-gray-600;
+        border-bottom: none;
+        vertical-align: middle;
+    }
+}

resources/sass/install/main.scss

@@ -0,0 +1,20 @@
+@import "bootstrap/scss/bootstrap";
+@import "@mdi/font/css/materialdesignicons";
+@import "simplebar-vue/dist/simplebar.min";
+@import "animate.css/animate";
+@import "abstracts/_variables";
+@import "base/_reset";
+@import "base/_typography";
+@import "components/_button";
+@import "components/_form";
+@import "components/_table";
+@import "components/_alert";
+@import "pages/_install";
+
+[v-cloak] {
+    display: none !important;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}

resources/sass/install/pages/_install.scss

@@ -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;
+        }
+    }
+}