MainStyled.tsx
2.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import styled from 'styled-components';
export const Container = styled.div `
height : 100vh;
width : 100%;
display : flex;
flex-direction : column;
justify-content : center;
`;
export const InfoAndSearchWrapper = styled.div `
flex : 3;
display : flex;
flex-direction : row;
margin : 0 0 30px 0;
`;
export const InfoWrapper = styled.div `
flex : 2;
display : flex;
flex-direction : column;
padding : 10px;
`;
export const InfoSquare = styled.div `
border : 1px solid #ddd;
border-radius : 5px;
background-color : transparent;
flex : 10;
margin : 0 0 20px 0;
box-shadow: 0px 0px 5px #a0a0a0;
`;
export const NewPatientButton = styled.button `
flex : 1;
border : 1px solid #ddd;
background-color : transparent;
border-radius : 3px;
padding : 10px 30px;
transition : .25s all;
color : #343434;
cursor : pointer;
&:hover {
background-color : #343434;
color : #fff;
}
`;
export const SearchAndDetailWrapper = styled.div `
flex : 5;
display : flex;
flex-direction : column;
padding : 10px;
`;
export const SearchBarWrapper = styled.div `
flex : 1;
border : 1px solid #ddd;
border-radius : 3px;
background-color : transparent;
display : flex;
flex-direction : row;
padding : 10px;
align-items : center;
justify-content : space-between;
margin : 0 0 10px 0;
`;
export const SearchBar = styled.input `
border : none;
border-bottom : 2px solid #ddd;
width : 80%;
margin : 0 0 0 20px;
padding : 10px 0px;
`;
export const SearchButton = styled.button `
border : 1px solid #ddd;
background-color : transparent;
height : 50px;
width : 50px;
transition : .25s all;
cursor : pointer;
&:hover {
color : #fff;
background-color : #343434;
}
`;
export const SearchResultWrapper = styled.div `
flex : 5;
border : 1px solid #ddd;
border-radius : 3px;
background-color : transparent;
`;
export const BottleListWrapper = styled.div `
flex : 2;
display : flex;
flex-direction : row;
background-color : #ddd;
margin : 0 0 10px 0;
`;