Initial commit

resources/sass/app.scss

@@ -0,0 +1,7 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,900&display=swap');
+
+// Variables
+@import 'vue-file-manager/_variables';
+@import 'vue-file-manager/_mixins';
+@import 'vue-file-manager/_forms';

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

@@ -0,0 +1,172 @@
+.form {
+
+  &.inline-form {
+    display: flex;
+    position: relative;
+    justify-content: center;
+
+    .input-wrapper {
+      position: relative;
+
+      .error-message {
+        position: absolute;
+        left: 0;
+        bottom: -25px;
+      }
+    }
+  }
+
+  &.block-form {
+
+    &.create-new-password {
+      .block-wrapper label {
+        width: 280px;
+      }
+    }
+
+    .block-wrapper {
+      display: flex;
+      align-items: center;
+      margin-top: 25px;
+      justify-content: center;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      label {
+        white-space: nowrap;
+        @include font-size(18);
+        font-weight: 700;
+        padding-right: 20px;
+        width: 200px;
+        text-align: right;
+      }
+    }
+
+    .button {
+      margin-top: 50px;
+    }
+  }
+}
+
+.input-wrapper {
+
+  .error-message {
+    @include font-size(14);
+    color: $danger;
+    padding-top: 5px;
+    display: block;
+    text-align: left;
+  }
+}
+
+input[type="password"],
+input[type="text"],
+input[type="email"] {
+  background: $light_background;
+  border: 1px solid transparent;
+  transition: 0.15s all ease;
+  @include font-size(16);
+  border-radius: 8px;
+  padding: 13px 20px;
+  appearance: none;
+  font-weight: 700;
+  outline: 0;
+  min-width: 310px;
+
+  &.is-error {
+    border-color: $danger;
+    box-shadow: 0 0 7px rgba($danger, 0.3);
+  }
+
+  &::placeholder {
+    color: $light_text;
+    @include font-size(16);
+  }
+
+  &:focus {
+    border-color: $theme;
+    box-shadow: 0 0 7px rgba($theme, 0.3);
+  }
+
+  &[disabled] {
+    color: $light_text;
+    cursor: not-allowed;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  .form {
+
+    .button {
+      margin-top: 20px;
+      width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    input {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    &.block-form {
+
+      .block-wrapper {
+        display: block;
+
+        label {
+          width: 100%;
+          padding-right: 0;
+          display: block;
+          margin-bottom: 7px;
+          text-align: left;
+          @include font-size(14);
+        }
+      }
+
+      .button {
+        margin-top: 25px;
+      }
+    }
+
+    &.inline-form {
+      display: block;
+
+      .input-wrapper .error-message {
+        position: relative;
+        bottom: 0;
+      }
+    }
+
+    .button {
+      padding: 14px 32px;
+    }
+  }
+
+
+  input[type="password"],
+  input[type="text"],
+  input[type="email"] {
+    padding: 14px 20px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+
+  input[type="password"],
+  input[type="text"],
+  input[type="email"] {
+    background: $dark_mode_foreground;
+
+
+    &::placeholder {
+      color: $dark_mode_text_secondary;
+    }
+
+    &[disabled] {
+      color: rgba($dark_mode_text_secondary, 15%);
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+@mixin text($font: "Open Sans", $font-size: 16, $color: $text-primary) {
+  font-family: $font, sans-serif;
+  font-size:($font-size/16) + 0em;
+  color: $color;
+}
+
+@mixin font-size($size) {
+  font-size:($size/16) + 0em;
+}
+
+@mixin transition($time: 0.3s) {
+  transition: $time all ease;
+}
+
+@mixin transform($effect) {
+  -webkit-transform: $effect;
+  -moz-transform: $effect;
+  transform: $effect;
+}
+
+@mixin no-yellow {
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 30px white inset;
+  }
+}

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

@@ -0,0 +1,18 @@
+// Colors
+$text: #35495d;
+$text-muted: lighten($text, 25%);
+
+$border: #F8F8FC;
+$theme: #00BC7E;
+$danger: #d22323;
+$light_text: #A4ADB6;
+$light_background: #f6f6f6;
+$dark_background: #EBEBEB;
+$shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
+
+// Dark Mode
+$dark_mode_vignette: rgba(0, 0, 0, 0.3);
+$dark_mode_background: #1a1f25;
+$dark_mode_foreground: #202733;
+$dark_mode_text_primary: #B8C4D0;
+$dark_mode_text_secondary: #6A8BAD;