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/auth.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/auth.scss')
-rw-r--r-- | src/styles/auth.scss | 121 |
1 files changed, 56 insertions, 65 deletions
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 9ad71867c..34bfa1805 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -1,144 +1,135 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark.auth { | ||
4 | background: $dark-theme-gray-darkest; | ||
5 | |||
6 | .auth__container { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 50px rgba($dark-theme-black, .2); | ||
9 | } | ||
10 | |||
11 | .auth__logo.auth__logo--sm { | ||
12 | border: 4px solid $dark-theme-black; | ||
13 | box-shadow: 0 0 6px rgba($dark-theme-black, .5); | ||
14 | } | ||
15 | |||
16 | .auth__links { | ||
17 | background: $dark-theme-gray-dark; | ||
18 | |||
19 | a { color: $dark-theme-gray-lighter; } | ||
20 | } | ||
21 | |||
22 | .legal { | ||
23 | color: $dark-theme-gray-lighter; | ||
24 | |||
25 | a { color: $dark-theme-gray-lightest; } | ||
26 | } | ||
27 | } | ||
28 | |||
3 | .auth { | 29 | .auth { |
30 | background: $theme-brand-primary; | ||
4 | display: flex; | 31 | display: flex; |
5 | justify-content: center; | 32 | justify-content: center; |
6 | background: $theme-brand-primary; | ||
7 | 33 | ||
8 | .auth__layout { | 34 | .auth__layout { |
9 | width: 100%; | 35 | width: 100%; |
10 | &>div>span { | ||
11 | width: 100%; | ||
12 | } | ||
13 | // display: flex; | ||
14 | // align-items: center; | ||
15 | // justify-content: center; | ||
16 | // flex-direction: column; | ||
17 | |||
18 | // @media only screen and (max-height : 700px) { | ||
19 | // margin: 100px 0; | ||
20 | // } | ||
21 | 36 | ||
22 | &>div { | 37 | & > div { |
38 | align-items: center; | ||
23 | display: flex; | 39 | display: flex; |
24 | justify-content: center; | 40 | justify-content: center; |
25 | align-items: center; | ||
26 | 41 | ||
27 | &>span { | 42 | & > span { |
28 | position: absolute; | 43 | position: absolute; |
44 | width: 100%; | ||
29 | } | 45 | } |
30 | } | 46 | } |
31 | } | 47 | } |
32 | 48 | ||
33 | .auth__container { | 49 | .auth__container { |
34 | position: relative; | ||
35 | width: 350px; | ||
36 | height: auto; | ||
37 | margin: 40px auto 0 auto; | ||
38 | background: #FFF; | 50 | background: #FFF; |
39 | // padding: 20px; | ||
40 | border-radius: $theme-border-radius; | 51 | border-radius: $theme-border-radius; |
41 | box-shadow: 0 0 50px rgba(black, 0.2); | 52 | box-shadow: 0 0 50px rgba(black, .2); |
53 | height: auto; | ||
54 | margin: 40px auto 0; | ||
55 | position: relative; | ||
56 | width: 350px; | ||
42 | 57 | ||
43 | &.auth__container--signup { | 58 | &.auth__container--signup { width: 450px; } |
44 | width: 450px; | ||
45 | // margin-left: auto; | ||
46 | // margin-right: auto; | ||
47 | } | ||
48 | } | 59 | } |
49 | 60 | ||
50 | .auth__logo { | 61 | .auth__logo { |
62 | border-radius: $theme-border-radius; | ||
51 | display: block; | 63 | display: block; |
52 | width: 150px; | ||
53 | height: auto; | 64 | height: auto; |
54 | margin: -105px auto 20px auto; | 65 | margin: -105px auto 20px auto; |
55 | border-radius: $theme-border-radius; | 66 | width: 150px; |
56 | 67 | ||
57 | &.auth__logo--sm { | 68 | &.auth__logo--sm { |
58 | border: 4px solid #FFF; | 69 | border: 4px solid #FFF; |
59 | box-shadow: 0 0 6px rgba(black, 0.5); | ||
60 | border-radius: 100%; | 70 | border-radius: 100%; |
71 | box-shadow: 0 0 6px rgba(black, .5); | ||
61 | } | 72 | } |
62 | } | 73 | } |
63 | 74 | ||
64 | .auth__form { | 75 | .auth__form { |
65 | padding: 20px; | 76 | padding: 20px; |
66 | 77 | ||
67 | h1 { | 78 | h1 { text-align: center; } |
68 | text-align: center; | ||
69 | } | ||
70 | } | 79 | } |
71 | 80 | ||
72 | .auth__button { | 81 | .auth__button { |
73 | width: 100%; | 82 | width: 100%; |
74 | 83 | ||
75 | &.auth__button--skip { | 84 | &.auth__button--skip { margin: 10px auto 0; } |
76 | margin: 10px auto 0; | ||
77 | } | ||
78 | } | 85 | } |
79 | 86 | ||
80 | .auth__links { | 87 | .auth__links { |
81 | padding: 20px; | ||
82 | background: $theme-gray-lighter; | 88 | background: $theme-gray-lighter; |
83 | border-bottom-left-radius: $theme-border-radius; | 89 | border-bottom-left-radius: $theme-border-radius; |
84 | border-bottom-right-radius: $theme-border-radius; | 90 | border-bottom-right-radius: $theme-border-radius; |
91 | padding: 20px; | ||
85 | 92 | ||
86 | a { | 93 | a { |
87 | display: block; | 94 | display: block; |
88 | text-align: center; | ||
89 | color: $theme-gray; | 95 | color: $theme-gray; |
90 | margin-bottom: 8px; | 96 | margin-bottom: 8px; |
97 | text-align: center; | ||
91 | 98 | ||
92 | &:last-of-type { | 99 | &:last-of-type { margin-bottom: 0; } |
93 | margin-bottom: 0; | ||
94 | } | ||
95 | } | 100 | } |
96 | } | 101 | } |
97 | 102 | ||
98 | .auth__adlk { | 103 | .auth__adlk { |
104 | bottom: 15px; | ||
99 | position: absolute; | 105 | position: absolute; |
100 | right: 25px; | 106 | right: 25px; |
101 | bottom: 15px; | ||
102 | 107 | ||
103 | img { | 108 | img { width: 65px; } |
104 | width: 65px; | ||
105 | } | ||
106 | } | 109 | } |
107 | 110 | ||
108 | .auth__letter { | 111 | .auth__letter { margin-bottom: 30px; } |
109 | margin-bottom: 30px; | 112 | .scroll-container { z-index: 10; } |
110 | } | 113 | .info-bar { position: absolute; } |
111 | |||
112 | .scroll-container { | ||
113 | z-index: 10; | ||
114 | } | ||
115 | |||
116 | .info-bar { | ||
117 | position: absolute; | ||
118 | } | ||
119 | 114 | ||
120 | &__scroll-container { | 115 | &__scroll-container { |
121 | overflow: scroll; | ||
122 | width: 100%; | ||
123 | max-height: 100vh; | 116 | max-height: 100vh; |
124 | padding: 80px 0; | 117 | padding: 80px 0; |
118 | overflow: scroll; | ||
119 | width: 100%; | ||
125 | } | 120 | } |
126 | 121 | ||
127 | .available-services { | 122 | .available-services { margin-bottom: 15px; } |
128 | margin-bottom: 15px; | ||
129 | } | ||
130 | 123 | ||
131 | .unavailable-services { | 124 | .unavailable-services { |
132 | margin: 15px 0; | 125 | margin: 15px 0; |
133 | 126 | ||
134 | p { | 127 | p { text-transform: capitalize; } |
135 | text-transform: capitalize; | ||
136 | } | ||
137 | } | 128 | } |
138 | 129 | ||
139 | .legal { | 130 | .legal { |
140 | text-align: center; | ||
141 | margin-top: 20px; | ||
142 | color: $theme-gray-light; | 131 | color: $theme-gray-light; |
132 | margin-top: 20px; | ||
133 | text-align: center; | ||
143 | } | 134 | } |
144 | } | 135 | } |