diff options
author | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
---|---|---|
committer | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/input.scss | |
parent | 5.0.0 beta.18 (diff) | |
download | ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip |
Update stylesheets and added darkMode variable and toggle.
Diffstat (limited to 'src/styles/input.scss')
-rw-r--r-- | src/styles/input.scss | 95 |
1 files changed, 51 insertions, 44 deletions
diff --git a/src/styles/input.scss b/src/styles/input.scss index 7042f56e8..f3c713f13 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -1,6 +1,34 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark .franz-form { | ||
5 | .franz-form__label { color: $dark-theme-gray-lightest; } | ||
6 | |||
7 | .franz-form__input-wrapper { | ||
8 | background: $dark-theme-gray-dark; | ||
9 | border: 1px solid $dark-theme-gray-light; | ||
10 | } | ||
11 | |||
12 | .franz-form__input { | ||
13 | color: $dark-theme-gray-lighter; | ||
14 | |||
15 | &::placeholder { color: $dark-theme-gray-light; } | ||
16 | } | ||
17 | |||
18 | .franz-form__input-prefix, | ||
19 | .franz-form__input-suffix { | ||
20 | background: $dark-theme-gray; | ||
21 | color: $dark-theme-gray-lighter; | ||
22 | } | ||
23 | |||
24 | .franz-form__input-modifier { | ||
25 | border-left: 1px solid $dark-theme-gray-light; | ||
26 | color: $dark-theme-gray-lighter; | ||
27 | } | ||
28 | |||
29 | .franz-form__password-score { background: $dark-theme-gray-dark; } | ||
30 | } | ||
31 | |||
4 | .franz-form { | 32 | .franz-form { |
5 | .franz-form__field { | 33 | .franz-form__field { |
6 | display: flex; | 34 | display: flex; |
@@ -9,19 +37,12 @@ | |||
9 | margin-bottom: 20px; | 37 | margin-bottom: 20px; |
10 | 38 | ||
11 | &.has-error { | 39 | &.has-error { |
12 | .franz-form__input-wrapper { | 40 | .franz-form__input-wrapper, |
13 | border-color: $theme-brand-danger; | 41 | .franz-form__input-modifier { border-color: $theme-brand-danger; } |
14 | } | ||
15 | |||
16 | .franz-form__input-modifier { | ||
17 | border-color: $theme-brand-danger; | ||
18 | } | ||
19 | } | 42 | } |
20 | } | 43 | } |
21 | 44 | ||
22 | .franz-form__label { | 45 | .franz-form__label { @include formLabel(); } |
23 | @include formLabel(); | ||
24 | } | ||
25 | 46 | ||
26 | .franz-form__error { | 47 | .franz-form__error { |
27 | color: $theme-brand-danger; | 48 | color: $theme-brand-danger; |
@@ -30,74 +51,60 @@ | |||
30 | } | 51 | } |
31 | 52 | ||
32 | .franz-form__input-wrapper { | 53 | .franz-form__input-wrapper { |
33 | display: flex; | ||
34 | width: 100%; | ||
35 | order: 1; | ||
36 | border-radius: $theme-border-radius-small; | ||
37 | background: $theme-gray-lightest; | 54 | background: $theme-gray-lightest; |
38 | border: 1px solid $theme-gray-lighter; | 55 | border: 1px solid $theme-gray-lighter; |
56 | border-radius: $theme-border-radius-small; | ||
57 | display: flex; | ||
39 | flex-wrap: wrap; | 58 | flex-wrap: wrap; |
59 | order: 1; | ||
60 | width: 100%; | ||
40 | } | 61 | } |
41 | 62 | ||
42 | .franz-form__input { | 63 | .franz-form__input { |
43 | flex: 1; | ||
44 | border: 0; | ||
45 | background: none; | 64 | background: none; |
46 | width: 100%; | 65 | border: 0; |
47 | padding: 8px; | ||
48 | // font-size: 18px; | ||
49 | color: $theme-gray; | 66 | color: $theme-gray; |
67 | flex: 1; | ||
68 | padding: 8px; | ||
69 | width: 100%; | ||
50 | 70 | ||
51 | &::placeholder { | 71 | &::placeholder { color: lighten($theme-gray-light, 10%); } |
52 | color: lighten($theme-gray-light, 10%); | ||
53 | } | ||
54 | } | 72 | } |
55 | 73 | ||
56 | .franz-form__input-prefix, | 74 | .franz-form__input-prefix, |
57 | .franz-form__input-suffix { | 75 | .franz-form__input-suffix { |
58 | padding: 0 10px; | ||
59 | background: $theme-gray-lighter; | 76 | background: $theme-gray-lighter; |
60 | color: $theme-gray-light; | 77 | color: $theme-gray-light; |
61 | line-height: 35px; | 78 | line-height: 35px; |
79 | padding: 0 10px; | ||
62 | } | 80 | } |
63 | 81 | ||
64 | .franz-form__input-modifier { | 82 | .franz-form__input-modifier { |
65 | padding: 0 20px; | ||
66 | border-left: 1px solid $theme-gray-lighter; | 83 | border-left: 1px solid $theme-gray-lighter; |
67 | color: $theme-gray-light; | 84 | color: $theme-gray-light; |
68 | font-size: 20px; | 85 | font-size: 20px; |
86 | padding: 0 20px; | ||
69 | } | 87 | } |
70 | 88 | ||
71 | .franz-form__password-score { | 89 | .franz-form__password-score { |
72 | background: $theme-gray-lighter; | 90 | background: $theme-gray-lighter; |
73 | height: 5px; | ||
74 | flex-basis: 100%; | ||
75 | border-bottom-left-radius: 3px; | 91 | border-bottom-left-radius: 3px; |
76 | border-bottom-right-radius: 3px; | 92 | border-bottom-right-radius: 3px; |
93 | flex-basis: 100%; | ||
94 | height: 5px; | ||
77 | 95 | ||
78 | meter { | 96 | meter { |
79 | width: 100%; | ||
80 | height: 100%; | ||
81 | display: block; | ||
82 | border-bottom-left-radius: 3px; | 97 | border-bottom-left-radius: 3px; |
83 | border-bottom-right-radius: 3px; | 98 | border-bottom-right-radius: 3px; |
99 | display: block; | ||
100 | height: 100%; | ||
84 | overflow: hidden; | 101 | overflow: hidden; |
102 | width: 100%; | ||
85 | 103 | ||
86 | &::-webkit-meter-bar { | 104 | &::-webkit-meter-bar { background: none; } |
87 | background: none; | 105 | &::-webkit-meter-even-less-good-value { background: $theme-brand-danger; } |
88 | } | 106 | &::-webkit-meter-suboptimum-value { background: $theme-brand-warning; } |
89 | 107 | &::-webkit-meter-optimum-value { background: $theme-brand-success; } | |
90 | &::-webkit-meter-even-less-good-value { | ||
91 | background: $theme-brand-danger; | ||
92 | } | ||
93 | |||
94 | &::-webkit-meter-suboptimum-value { | ||
95 | background: $theme-brand-warning; | ||
96 | } | ||
97 | |||
98 | &::-webkit-meter-optimum-value { | ||
99 | background: $theme-brand-success; | ||
100 | } | ||
101 | } | 108 | } |
102 | } | 109 | } |
103 | } | 110 | } |