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