nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-29 19:25:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

v1.5-alpha.1

Browse Source
This commit is contained in:
carodej
2020-05-15 17:31:25 +02:00
parent cfecf542ca
commit 41656235fc
97 changed files with 4108 additions and 2118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/sass/app.scss
Vendored
+200 -5
View File
@@ -1,10 +1,13 @@
// Fonts
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap');
// Variables
@import 'vue-file-manager/_variables';
@import 'vue-file-manager/_mixins';
//@import 'vue-file-manager/_forms';
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
#viewport {
display: flex;
width: 100%;
@include transition(200ms);
}
#application-wrapper {
display: flex;
@@ -14,4 +17,196 @@
position: relative;
width: 100%;
}
}
.menu-list-wrapper {
margin-bottom: 20px;
.menu-list-item {
display: block;
padding: 12px 15px 12px 25px;
text-decoration: none;
@include transition(150ms);
cursor: pointer;
position: relative;
white-space: nowrap;
&.link {
display: flex;
align-items: center;
&.is-active,
&.router-link-exact-active,
&:hover {
svg {
path, line, polyline, rect, circle {
stroke: $theme;
}
}
.label {
color: $theme;
}
}
.icon {
margin-right: 12px;
line-height: 0;
path, line, polyline, rect, circle {
stroke: $text;
}
}
.text-label {
@include font-size(16);
}
}
&:hover,
&.is-active {
.delete-icon {
display: block;
}
}
.folder-icon {
line-height: 0;
width: 15px;
margin-right: 9px;
vertical-align: middle;
margin-top: -1px;
}
.delete-icon {
display: none;
position: absolute;
right: 15px;
top: 50%;
@include transform(translateY(-50%));
}
.label {
@include font-size(13);
font-weight: 700;
vertical-align: middle;
white-space: nowrap;
max-width: 210px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
color: $text;
}
}
&.favourites {
&.is-dragenter .menu-list {
border: 2px dashed $theme;
border-radius: 8px;
}
.menu-list {
border: 2px dashed transparent;
.menu-list-item {
padding: 8px 23px;
.icon {
margin-right: 5px;
width: 20px;
path, line, polyline, rect, circle {
@include transition(150ms);
}
}
&:hover,
&.is-selected,
&.is-current {
.folder-icon {
path, line, polyline, rect, circle {
stroke: $theme;
}
}
.label {
color: $theme;
}
}
}
}
}
.empty-list {
@include font-size(12);
color: $text-muted;
display: block;
padding: 15px;
}
}
@media only screen and (max-width: 1024px) {
.menu-list-wrapper {
.menu-list-item {
padding: 12px 15px 12px 20px;
}
&.favourites {
.menu-list .menu-list-item {
padding: 8px 18px;
}
}
}
}
@media (prefers-color-scheme: dark) {
.menu-list-wrapper {
.menu-list-item {
&.link {
.icon {
path, line, polyline, rect, circle {
stroke: $dark_mode_text_primary;
}
}
}
.label {
color: $dark_mode_text_primary;
}
.icon {
path, line, polyline, rect, circle {
stroke: $dark_mode_text_primary;
}
}
&:hover {
background: rgba($theme, .1);
.label {
color: $theme;
}
.icon {
path, line, polyline, rect, circle {
stroke: $theme;
}
}
}
}
}
}
resources/sass/vue-file-manager/_auth-form.scss
Vendored
+213
View File
@@ -0,0 +1,213 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.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 !important;
color: $text;
}
}
.button {
margin-top: 50px;
}
}
}
.input-wrapper {
.error-message {
@include font-size(14);
color: $danger;
padding-top: 5px;
display: block;
text-align: left;
}
}
textarea {
width: 100%;
}
textarea,
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;
width: 100%;
&.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;
}
}
.additional-link {
@include font-size(16);
margin-top: 50px;
display: block;
color: $text;
b, a {
color: $theme;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
@media only screen and (max-width: 960px) {
.form {
.button {
margin-top: 20px;
width: 100%;
margin-left: 0;
margin-right: 0;
}
input, textarea {
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 !important;
@include font-size(14);
padding-top: 0;
}
}
.button {
margin-top: 25px;
margin-left: 0;
margin-right: 0;
}
}
&.inline-form {
display: block;
.input-wrapper .error-message {
position: relative;
bottom: 0;
}
}
.button {
padding: 14px 32px;
}
}
textarea,
input[type="password"],
input[type="text"],
input[type="email"] {
padding: 14px 20px;
}
}
@media (prefers-color-scheme: dark) {
.form {
&.block-form {
.block-wrapper label {
color: $dark_mode_text_primary;
}
}
}
textarea,
input[type="password"],
input[type="text"],
input[type="email"] {
background: $dark_mode_foreground;
color: $dark_mode_text_primary;
&::placeholder {
color: $dark_mode_text_secondary;
}
&[disabled] {
color: rgba($dark_mode_text_secondary, 15%);
}
}
}
resources/sass/vue-file-manager/_auth.scss
Vendored
+3
View File
@@ -1,3 +1,6 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.auth-form {
text-align: center;
max-width: 600px;
resources/sass/vue-file-manager/_forms.scss
Vendored
+16 -26
View File
@@ -1,4 +1,8 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.form {
max-width: 700px;
&.inline-form {
display: flex;
@@ -18,30 +22,15 @@
&.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;
}
margin-bottom: 20px;
label {
white-space: nowrap;
@include font-size(18);
@include font-size(12);
color: #AFAFAF;
font-weight: 700;
padding-right: 20px;
width: 200px;
text-align: right !important;
color: $text;
display: block;
margin-bottom: 5px;
}
}
@@ -70,16 +59,16 @@ textarea,
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);
@include transition(150ms);
@include font-size(15);
border-radius: 8px;
padding: 13px 20px;
appearance: none;
font-weight: 700;
outline: 0;
width: 100%;
background: $light_mode_input_background;
&.is-error {
border-color: $danger;
@@ -87,8 +76,9 @@ input[type="email"] {
}
&::placeholder {
color: $light_text;
@include font-size(16);
//color: $light_text;
color: rgba($text, 0.5);
@include font-size(15);
}
&:focus {
@@ -97,7 +87,7 @@ input[type="email"] {
}
&[disabled] {
color: $light_text;
background: hsl(0, 0%, 98%);
cursor: not-allowed;
}
}
resources/sass/vue-file-manager/_inapp-forms.scss
Vendored
+25 -7
View File
@@ -1,3 +1,6 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
// Forms
.form-wrapper {
padding: 0 20px;
@@ -34,29 +37,44 @@
}
.icon {
background: $theme;
padding: 14px 18px;
background: black;
padding: 15px 18px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
@include font-size(16);
text-align: center;
line-height: 0;
svg path {
fill: white;
path, polyline {
stroke: white;
}
}
}
}
.input-label {
@include font-size(15);
@include font-size(12);
color: $text;
font-weight: 700;
margin-bottom: 5px;
display: block;
margin-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
.inline-wrapper {
&.icon-append {
.icon {
background: rgba($theme, 0.1);
path, polyline {
stroke: $theme;
}
}
}
}
.input-label {
color: $dark_mode_text_primary;
}
resources/sass/vue-file-manager/_variables.scss
Vendored
+14 -7
View File
@@ -1,24 +1,31 @@
// Colors
$text: #1b2539;
$text: #1c1d1f;
$text-muted: #667b90;
$theme: #00BC7E;
$light_mode_border: rgba(0, 0, 0, 0.02);
$yellow: #FFBD2D;
$pink: #FE66A1;
$red: #FE6057;
$purple: #9D66FE;
$light_mode_border: #F8F8F8;
$danger: #fd397a;
$light_text: #A4ADB6;
$light_background: #f6f6f6;
$dark_background: #EBEBEB;
$shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
$light_mode_input_background: hsl(0, 0%, 98%);
$light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
$light_mode_vignette: rgba(9, 8, 12, 0.15);
$light_mode_vignette: rgba(9, 8, 12, 0.35);
// 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: #667b90;
$dark_mode_background: #111314;
$dark_mode_foreground: #1e2024;
$dark_mode_text_primary: #bec6cf;
$dark_mode_text_secondary: #79848f;
$dark_mode_vignette: rgba(22, 23, 27, 0.70);
$dark_mode_popup_shadow: 0 10px 30px rgba(0, 0, 0, .3);
$dark_mode_border_color: rgba(255, 255, 255, 0.02);