Showing
2 changed files
with
118 additions
and
0 deletions
frontend/src/components/Login.js
0 → 100644
1 | +import React from 'react'; | ||
2 | +import styled from 'styled-components'; | ||
3 | +import palette from '../lib/styles/palette'; | ||
4 | +import Button from './common/Button'; | ||
5 | + | ||
6 | +const FormBlock = styled.form` | ||
7 | + position: absolute; | ||
8 | + top: 50%; | ||
9 | + left: 50%; | ||
10 | + transform: translate(-50%, -50%); | ||
11 | + width: 25rem; | ||
12 | + padding: 2.5rem; | ||
13 | + box-sizing: border-box; | ||
14 | + border: 1px solid #dadce0; | ||
15 | + -webkit-border-radius: 8px; | ||
16 | + border-radius: 8px; | ||
17 | + text-align: center; | ||
18 | +`; | ||
19 | + | ||
20 | +const InputBox = styled.div` | ||
21 | + position: relative; | ||
22 | + input { | ||
23 | + width: 93%; | ||
24 | + padding: 0.625rem 10px; | ||
25 | + font-size: 1rem; | ||
26 | + letter-spacing: 0.062rem; | ||
27 | + margin-bottom: 1.875rem; | ||
28 | + border: 1px solid #ccc; | ||
29 | + background: transparent; | ||
30 | + border-radius: 4px; | ||
31 | + } | ||
32 | + .label { | ||
33 | + position: absolute; | ||
34 | + top: 0; | ||
35 | + left: 10px; | ||
36 | + padding: 0.625rem 0; | ||
37 | + font-size: 1rem; | ||
38 | + color: grey; | ||
39 | + pointer-events: none; | ||
40 | + transition: 0.5s; | ||
41 | + } | ||
42 | + | ||
43 | + input:focus ~ .label, | ||
44 | + input:valid ~ .label, | ||
45 | + input:not([value='']) ~ .label { | ||
46 | + top: -1.125rem; | ||
47 | + left: 10px; | ||
48 | + color: ${palette.blue6}; | ||
49 | + font-size: 0.75rem; | ||
50 | + background-color: #fff; | ||
51 | + height: 10px; | ||
52 | + padding-left: 5px; | ||
53 | + padding-right: 5px; | ||
54 | + } | ||
55 | + | ||
56 | + input:focus { | ||
57 | + outline: none; | ||
58 | + border: 2px solid ${palette.blue6}; | ||
59 | + } | ||
60 | + input[type='submit'] { | ||
61 | + border: none; | ||
62 | + outline: none; | ||
63 | + color: #fff; | ||
64 | + background-color: ${palette.blue6}; | ||
65 | + padding: 0.625rem 1.25rem; | ||
66 | + cursor: pointer; | ||
67 | + border-radius: 0.312rem; | ||
68 | + font-size: 1rem; | ||
69 | + float: right; | ||
70 | + } | ||
71 | + | ||
72 | + input[type='submit']:hover { | ||
73 | + background-color: ${palette.blue6}; | ||
74 | + box-shadow: 0 1px 1px 0 rgba(66, 133, 244, 0.45), | ||
75 | + 0 1px 3px 1px rgba(66, 133, 244, 0.3); | ||
76 | + } | ||
77 | +`; | ||
78 | + | ||
79 | +const ButtonBlock = styled.div` | ||
80 | + display: flex; | ||
81 | + justify-content: space-between; | ||
82 | + padding: 1rem; | ||
83 | +`; | ||
84 | + | ||
85 | +const Login = () => { | ||
86 | + return ( | ||
87 | + <FormBlock> | ||
88 | + <div>Logo</div> | ||
89 | + <h1>로그인</h1> | ||
90 | + <InputBox> | ||
91 | + <input type="email" id="email" name="email" value="" /> | ||
92 | + <div className="label">Email</div> | ||
93 | + </InputBox> | ||
94 | + <InputBox> | ||
95 | + <input type="text" name="text" value="" /> | ||
96 | + <div className="label">Password</div> | ||
97 | + </InputBox> | ||
98 | + <ButtonBlock> | ||
99 | + <div>홈으로</div> | ||
100 | + <Button color="blue">로그인</Button> | ||
101 | + </ButtonBlock> | ||
102 | + </FormBlock> | ||
103 | + ); | ||
104 | +}; | ||
105 | + | ||
106 | +export default Login; |
-
Please register or login to post a comment