1 | import { css } from 'lit-element/lit-element.js';
|
2 | import '@kano/styles/typography.js';
|
3 | import '@kano/styles/color.js';
|
4 | export const styles = css `
|
5 |
|
6 | @font-face {
|
7 | font-family: 'proxima';
|
8 | src: url("https://cdn.kano.me/fonts/proxima_soft_regular.woff2");
|
9 | src: url("https://cdn.kano.me/fonts/proxima_soft_regular.woff") format("woff"),
|
10 | url("https://cdn.kano.me/fonts/proxima_soft_regular.ttf") format("truetype"),
|
11 | }
|
12 |
|
13 | @font-face {
|
14 | font-family: 'proxima';
|
15 | font-weight: 500;
|
16 | src: url("https://cdn.kano.me/fonts/proxima_soft_semibold.woff2");
|
17 | src: url("https://cdn.kano.me/fonts/proxima_soft_semibold.woff") format("woff"),
|
18 | url("https://cdn.kano.me/fonts/proxima_soft_semibold.ttf") format("truetype"),
|
19 | }
|
20 |
|
21 | @font-face {
|
22 | font-family: 'proxima';
|
23 | font-weight: 600;
|
24 | src: url("https://cdn.kano.me/fonts/proxima_soft_bold.woff2");
|
25 | src: url("https://cdn.kano.me/fonts/proxima_soft_bold.woff") format("woff"),
|
26 | url("https://cdn.kano.me/fonts/proxima_soft_bold.ttf") format("truetype"),
|
27 | }
|
28 |
|
29 | :host {
|
30 | font-family: "proxima", Helvetica, Arial, sans-serif;
|
31 | display: flex;
|
32 | flex-direction: column;
|
33 | padding: 0;
|
34 | margin: 0 auto;
|
35 | }
|
36 |
|
37 | .main-section {
|
38 | display: flex;
|
39 | justify-content: center;
|
40 | height: 100%;
|
41 | flex-wrap: wrap;
|
42 | }
|
43 |
|
44 | .form-template {
|
45 | display: flex;
|
46 | flex-wrap: wrap;
|
47 | justify-content: space-between;
|
48 | flex: 1;
|
49 | }
|
50 | .form-template > div {
|
51 | width: 100%;
|
52 | }
|
53 |
|
54 | .form-wrapper {
|
55 | position: relative;
|
56 | }
|
57 |
|
58 | h1,
|
59 | h2,
|
60 | h3,
|
61 | h4,
|
62 | p,
|
63 | a,
|
64 | input {
|
65 | font-family: "proxima", Helvetica, Arial, sans-serif;
|
66 | line-height: 1.25em;
|
67 | }
|
68 |
|
69 |
|
70 | p,
|
71 | span {
|
72 | color: #9FA4A8;
|
73 | }
|
74 |
|
75 | h2, h3, h4 {
|
76 | color: #414a51;
|
77 | text-align: left;
|
78 | }
|
79 | h2 {
|
80 | font-size: 24px;
|
81 | }
|
82 |
|
83 | h3 {
|
84 | font-size: 20px;
|
85 | margin: 0;
|
86 | }
|
87 |
|
88 | p {
|
89 | font-size: 20px;
|
90 | margin: 0;
|
91 | }
|
92 |
|
93 | p.color-grey {
|
94 | color: #9FA4A8;
|
95 | }
|
96 |
|
97 | a {
|
98 | color: #FF6900;
|
99 | margin-bottom: 20px;
|
100 | text-decoration: none;
|
101 | }
|
102 |
|
103 | button {
|
104 | font-family: "proxima", Helvetica, Arial, sans-serif;
|
105 | text-align: center;
|
106 | margin-top: 20px;
|
107 | }
|
108 |
|
109 | input {
|
110 | display: block;
|
111 | outline: none;
|
112 | font-size: 16px;
|
113 | font-weight: 500;
|
114 | margin: 6px 0 15px;
|
115 | }
|
116 |
|
117 | input[type="text"]::placeholder,
|
118 | input[type="email"]::placeholder,
|
119 | input[type="password"]::placeholder {
|
120 | color: var(--color-grey);
|
121 | }
|
122 |
|
123 | input[type="text"],
|
124 | input[type="email"],
|
125 | input[type="password"] {
|
126 | width: 100%;
|
127 | color: #414A51;
|
128 | box-sizing: border-box;
|
129 | width: 100%;
|
130 | min-height: 39px;
|
131 | padding-left: 10px;
|
132 | border-radius: 6px;
|
133 | border: 1px solid var(--color-stone);
|
134 | }
|
135 |
|
136 | input[type="text"]:focus,
|
137 | input[type="email"]:focus,
|
138 | input[type="password"]:focus {
|
139 | border-color: #1093F5;
|
140 | }
|
141 |
|
142 | label {
|
143 | font-weight: bold;
|
144 | font-size: 12px;
|
145 | color: #9FA4A8;
|
146 | }
|
147 |
|
148 | .error {
|
149 | color: var(--color-kano-orange);
|
150 | font-size: 14px;
|
151 | font-weight: bold;
|
152 | text-align: center;
|
153 | max-width: 275px;
|
154 | }
|
155 |
|
156 | .eye-toggle {
|
157 | position: absolute;
|
158 | right: 0;
|
159 | top: 50%;
|
160 | transform: translateY(-50%);
|
161 | width: 16px;
|
162 | height: 16px;
|
163 | padding: 8px 10px;
|
164 | cursor: pointer;
|
165 | }
|
166 |
|
167 | .input-wrapper {
|
168 | position: relative;
|
169 | }
|
170 | .link-wrapper a.privacy {
|
171 | margin-bottom: 0px;
|
172 | font-weight: bold;
|
173 | color: var(--color-grey);
|
174 | }
|
175 |
|
176 | .link-wrapper p {
|
177 | font-weight: bold;
|
178 | font-size: 14px;
|
179 | padding: 0;
|
180 | color: var(--color-grey);
|
181 | }
|
182 |
|
183 | .link-wrapper {
|
184 | align-self: flex-end;
|
185 | display: flex;
|
186 | flex-direction: row;
|
187 | justify-content: space-between;
|
188 | align-items: center;
|
189 | width: 100%;
|
190 | height: 32px;
|
191 | margin: 16px 0 12px;
|
192 | padding: 0 10px;
|
193 | font-size: 14px;
|
194 | }
|
195 | .link-wrapper__info {
|
196 | display: flex;
|
197 | align-items: center;
|
198 | }
|
199 | .link-wrapper__info img {
|
200 | margin-right: 14px;
|
201 | }
|
202 |
|
203 | [hidden] {
|
204 | display: none;
|
205 | }
|
206 |
|
207 | .privacy-wrapper {
|
208 | text-align: center;
|
209 | }
|
210 |
|
211 | .intro {
|
212 | font-weight: bold;
|
213 | font-size: 16px;
|
214 | color: var(--color-kano-orange);
|
215 | }
|
216 | .password__username {
|
217 | font-size: 40px;
|
218 | color: #6767EC;
|
219 | margin: 8px 0 1px;
|
220 | max-width: 420px;
|
221 | overflow: hidden;
|
222 | text-overflow: ellipsis;
|
223 | }
|
224 | .password__input {
|
225 | margin: 6px 0 0;
|
226 | }
|
227 | .breaker {
|
228 | height: 1px;
|
229 | background-color: #C4C4C4;
|
230 | border-radius: 6px;
|
231 | }
|
232 | .instruction {
|
233 | font-size: 16px;
|
234 | font-weight: 500;
|
235 | margin: 6px 0px 16px;
|
236 | }
|
237 | .input-title {
|
238 | font-weight: bold;
|
239 | font-size: 14px;
|
240 | color: #6767EC;
|
241 | }
|
242 |
|
243 | .header {
|
244 | background-color: var(--color-stone);
|
245 | border-radius: 6px 6px 0 0;
|
246 | padding: 20px;
|
247 | }
|
248 | .button-wrapper {
|
249 | display: flex;
|
250 | justify-content: space-between;
|
251 | align-items: center;
|
252 | margin-top: 20px;
|
253 | }
|
254 | .button-wrapper button {
|
255 | min-width: min-content;
|
256 | margin: 0;
|
257 | font-family: "proxima", Helvetica, Arial, sans-serif;
|
258 | }
|
259 | .button-wrapper__exit {
|
260 | font-weight: bold;
|
261 | float: right;
|
262 | margin: 10px 0;
|
263 | }
|
264 | `;
|
265 |
|
\ | No newline at end of file |