user management v1.6-alpha.1

resources/sass/app.scss

@@ -1,5 +1,4 @@
 // Fonts
-
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
@@ -19,14 +18,60 @@
   }
 }
 
+#single-page {
+  overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding-left: 25px;
+  padding-right: 25px;
+
+  .page-content {
+    height: 100%;
+    max-width: 1024px;
+    width: 100%;
+    margin: 0 auto;
+
+    .full-width {
+      max-width: 100%;
+    }
+  }
+}
+
 .menu-list-wrapper {
-  margin-bottom: 20px;
+
+  &.vertical {
+    margin-bottom: 20px;
+
+    .menu-list-item {
+      display: block;
+      padding: 12px 15px 12px 25px;
+    }
+  }
+
+  &.horizontal {
+    display: flex;
+    border-bottom: 2px solid $light_mode_border;
+    margin-bottom: 30px;
+    overflow-x: auto;
+
+    .menu-list-item {
+      display: inline-block;
+      padding: 20px 10px;
+      margin: 0 10px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &.router-link-exact-active {
+        border-bottom: 2px solid $theme;
+      }
+    }
+  }
 
   .menu-list-item {
-    display: block;
-    padding: 12px 15px 12px 25px;
     text-decoration: none;
-    @include transition(150ms);
     cursor: pointer;
     position: relative;
     white-space: nowrap;
@@ -165,10 +210,26 @@
   }
 }
 
+@media only screen and (max-width: 960px) {
+
+  #single-page {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
 
+  .empty-note {
+    color: $dark_mode_text_secondary;
+  }
+
   .menu-list-wrapper {
 
+    &.horizontal {
+      border-bottom: 2px solid $dark_mode_border_color;
+    }
+
     .menu-list-item {
 
       &.link {

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

@@ -22,6 +22,16 @@
 
   &.block-form {
 
+    .wrapper-inline {
+      display: flex;
+      margin: 0 -15px;
+
+      .block-wrapper {
+        width: 100%;
+        padding: 0 15px;
+      }
+    }
+
     .block-wrapper {
       margin-bottom: 20px;
 
@@ -32,6 +42,10 @@
         display: block;
         margin-bottom: 5px;
       }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
 
     .button {
@@ -40,15 +54,12 @@
   }
 }
 
-.input-wrapper {
-
-  .error-message {
-    @include font-size(14);
-    color: $danger;
-    padding-top: 5px;
-    display: block;
-    text-align: left;
-  }
+.error-message {
+  @include font-size(14);
+  color: $danger;
+  padding-top: 5px;
+  display: block;
+  text-align: left;
 }
 
 textarea {
@@ -58,6 +69,7 @@ textarea {
 textarea,
 input[type="password"],
 input[type="text"],
+input[type="number"],
 input[type="email"] {
   border: 1px solid transparent;
   @include transition(150ms);
@@ -76,7 +88,6 @@ input[type="email"] {
   }
 
   &::placeholder {
-    //color: $light_text;
     color: rgba($text, 0.5);
     @include font-size(15);
   }
@@ -108,6 +119,13 @@ input[type="email"] {
   }
 }
 
+.form-group-label {
+  @include font-size(17);
+  font-weight: 500;
+  margin-bottom: 25px;
+  display: block;
+}
+
 @media only screen and (max-width: 960px) {
   .form {
 
@@ -163,12 +181,20 @@ input[type="email"] {
 
   textarea,
   input[type="password"],
+  input[type="number"],
   input[type="text"],
   input[type="email"] {
     padding: 14px 20px;
   }
 }
 
+@media only screen and (max-width: 690px) {
+
+  .form.block-form .wrapper-inline {
+    display: block;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
 
   .form {
@@ -184,6 +210,7 @@ input[type="email"] {
   textarea,
   input[type="password"],
   input[type="text"],
+  input[type="number"],
   input[type="email"] {
     background: $dark_mode_foreground;
     color: $dark_mode_text_primary;

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

@@ -3,6 +3,7 @@ $text: #1c1d1f;
 $text-muted: rgba($text, 0.7);
 
 $theme: #00BC7E;
+$theme_light: #ECF7F2;
 
 $yellow: #FFBD2D;
 $pink: #FE66A1;