diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/styles/input.scss | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/styles/input.scss')
-rw-r--r-- | src/styles/input.scss | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/src/styles/input.scss b/src/styles/input.scss new file mode 100644 index 000000000..814dce5f8 --- /dev/null +++ b/src/styles/input.scss | |||
@@ -0,0 +1,99 @@ | |||
1 | @import './config.scss'; | ||
2 | @import './mixins.scss'; | ||
3 | |||
4 | .franz-form { | ||
5 | .franz-form__field { | ||
6 | display: flex; | ||
7 | flex: 1; | ||
8 | flex-direction: column; | ||
9 | margin-bottom: 20px; | ||
10 | |||
11 | &.has-error { | ||
12 | .franz-form__input-wrapper { | ||
13 | border-color: $theme-brand-danger; | ||
14 | } | ||
15 | |||
16 | .franz-form__input-modifier { | ||
17 | border-color: $theme-brand-danger; | ||
18 | } | ||
19 | } | ||
20 | } | ||
21 | |||
22 | .franz-form__label { | ||
23 | @include formLabel(); | ||
24 | } | ||
25 | |||
26 | .franz-form__error { | ||
27 | color: $theme-brand-danger; | ||
28 | margin-top: 10px; | ||
29 | order: 2; | ||
30 | } | ||
31 | |||
32 | .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; | ||
38 | border: 1px solid $theme-gray-lighter; | ||
39 | flex-wrap: wrap; | ||
40 | } | ||
41 | |||
42 | .franz-form__input { | ||
43 | flex: 1; | ||
44 | border: 0; | ||
45 | background: none; | ||
46 | width: 100%; | ||
47 | padding: 8px; | ||
48 | // font-size: 18px; | ||
49 | color: $theme-gray; | ||
50 | } | ||
51 | |||
52 | .franz-form__input-prefix, | ||
53 | .franz-form__input-suffix { | ||
54 | padding: 0 10px; | ||
55 | background: $theme-gray-lighter; | ||
56 | color: $theme-gray-light; | ||
57 | line-height: 35px; | ||
58 | } | ||
59 | |||
60 | .franz-form__input-modifier { | ||
61 | padding: 0 20px; | ||
62 | border-left: 1px solid $theme-gray-lighter; | ||
63 | color: $theme-gray-light; | ||
64 | font-size: 20px; | ||
65 | } | ||
66 | |||
67 | .franz-form__password-score { | ||
68 | background: $theme-gray-lighter; | ||
69 | height: 5px; | ||
70 | flex-basis: 100%; | ||
71 | border-bottom-left-radius: 3px; | ||
72 | border-bottom-right-radius: 3px; | ||
73 | |||
74 | meter { | ||
75 | width: 100%; | ||
76 | height: 100%; | ||
77 | display: block; | ||
78 | border-bottom-left-radius: 3px; | ||
79 | border-bottom-right-radius: 3px; | ||
80 | overflow: hidden; | ||
81 | |||
82 | &::-webkit-meter-bar { | ||
83 | background: none; | ||
84 | } | ||
85 | |||
86 | &::-webkit-meter-even-less-good-value { | ||
87 | background: $theme-brand-danger; | ||
88 | } | ||
89 | |||
90 | &::-webkit-meter-suboptimum-value { | ||
91 | background: $theme-brand-warning; | ||
92 | } | ||
93 | |||
94 | &::-webkit-meter-optimum-value { | ||
95 | background: $theme-brand-success; | ||
96 | } | ||
97 | } | ||
98 | } | ||
99 | } | ||