setup wizard init

resources/sass/app.scss

@@ -273,6 +273,11 @@
   }
 }
 
+// Helpers
+.mt-70 {
+  margin-top: 70px;
+}
+
 @media only screen and (max-width: 1024px) {
 
   #single-page {

resources/sass/vue-file-manager/_auth-form.scss

@@ -7,6 +7,7 @@
     display: flex;
     position: relative;
     justify-content: center;
+    margin: 0 auto;
 
     .input-wrapper {
       position: relative;
@@ -45,6 +46,7 @@
         width: 200px;
         text-align: right !important;
         color: $text;
+        text-align: right;
       }
     }
 

resources/sass/vue-file-manager/_auth.scss

@@ -52,10 +52,6 @@
   .block-form {
     margin-left: auto;
     margin-right: auto;
-
-    .block-wrapper label {
-      text-align: right;
-    }
   }
 }
 

resources/sass/vue-file-manager/_forms.scss

@@ -8,6 +8,7 @@
     display: flex;
     position: relative;
     justify-content: center;
+    margin: 0 auto;
 
     .input-wrapper {
       position: relative;
@@ -33,14 +34,15 @@
     }
 
     .block-wrapper {
-      margin-bottom: 15px;
+      margin-bottom: 32px;
 
       label {
         @include font-size(14);
-        color: rgba($text, 0.7);
-        font-weight: 600;
+        color: rgba($text, 0.8);
+        font-weight: 700;
         display: block;
         margin-bottom: 7px;
+        text-align: left;
       }
 
       &:last-child {
@@ -107,11 +109,12 @@ input[type="email"] {
   font-weight: 700;
   outline: 0;
   width: 100%;
-  background: hsla(210, 10%, 98%, 1);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+  //background: hsla(210, 10%, 98%, 1);
 
   &.is-error {
     border-color: $danger;
-    box-shadow: 0 0 7px rgba($danger, 0.3);
+    box-shadow: 0 1px 5px rgba($danger, 0.3);
   }
 
   &::placeholder {
@@ -121,11 +124,12 @@ input[type="email"] {
 
   &:focus {
     border-color: $theme;
-    box-shadow: 0 0 7px rgba($theme, 0.3);
+    box-shadow: 0 1px 5px rgba($theme, 0.3);
   }
 
   &[disabled] {
-    background: hsl(0, 0%, 98%);
+    background: white;
+    color: rgba($text, 0.8);
     cursor: not-allowed;
   }
 }

resources/sass/vue-file-manager/_setup_wizard.scss

@@ -0,0 +1,81 @@
+.auth-form {
+
+  input {
+    min-width: initial;
+  }
+}
+
+.duplicator {
+
+  .duplicator-add-button {
+    width: 100%;
+  }
+
+  .duplicator-item {
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background: white;
+    padding: 25px;
+    margin: 0 -25px 32px;
+    position: relative;
+
+    .duplicator-title {
+      @include font-size(18);
+      margin-bottom: 20px;
+      display: block;
+      font-weight: 700;
+    }
+
+    .delete-item {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      cursor: pointer;
+
+      &:hover {
+
+        line {
+          stroke: $theme;
+        }
+      }
+    }
+
+    input,
+    textarea {
+      box-shadow: none;
+      background: #FAFAFA;
+    }
+  }
+}
+
+.form {
+  max-width: 580px;
+  text-align: left;
+}
+
+.submit-wrapper {
+  text-align: right;
+
+  .button {
+    margin: 58px 0 50px 0;
+    width: 100%;
+  }
+}
+
+.title-icon {
+  margin-bottom: 10px;
+  animation: spinner 5s linear infinite;
+
+  circle, path {
+    stroke: $theme;
+  }
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

resources/sass/vue-file-manager/_variables.scss

@@ -1,5 +1,5 @@
 // Colors
-$text: #1b2539;
+$text: #1B2539;
 $text-muted: rgba($text, 0.7);
 
 $theme: #00BC7E;