nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-03 20:55:59 +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/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);