1 | import styled, { keyframes } from "styled-components";
|
---|
2 |
|
---|
3 | export const AddOpinionButton = styled.button`
|
---|
4 | font-family: "Roboto Mono", monospace;
|
---|
5 | background-color: #0066cc;
|
---|
6 | border: none;
|
---|
7 | color: white;
|
---|
8 | padding: 8px 16px;
|
---|
9 | text-align: center;
|
---|
10 | font-size: 16px;
|
---|
11 | opacity: 0.6;
|
---|
12 | transition: 0.3s;
|
---|
13 | text-decoration: none;
|
---|
14 | cursor: pointer;
|
---|
15 | &:hover {
|
---|
16 | opacity: 1;
|
---|
17 | }
|
---|
18 | float: right;
|
---|
19 | font-weight: bold;
|
---|
20 | `;
|
---|
21 |
|
---|
22 | export const Modal = styled.div`
|
---|
23 | display: ${(props) => props.display};
|
---|
24 | position: fixed;
|
---|
25 | z-index: 1;
|
---|
26 | left: 0;
|
---|
27 | top: 0;
|
---|
28 | width: 100%;
|
---|
29 | height: auto;
|
---|
30 | overflow: auto;
|
---|
31 | background-color: rgb(0, 0, 0);
|
---|
32 | background-color: rgba(0, 0, 0, 0.4);
|
---|
33 | `;
|
---|
34 |
|
---|
35 | const animatetop = keyframes`
|
---|
36 | from {
|
---|
37 | top: -300px;
|
---|
38 | opacity: 0;
|
---|
39 | }
|
---|
40 | to {
|
---|
41 | top: 0;
|
---|
42 | opacity: 1;
|
---|
43 | }
|
---|
44 | `;
|
---|
45 |
|
---|
46 | export const ModalContent = styled.div`
|
---|
47 | background-color: #fefefe;
|
---|
48 | margin: 15% auto;
|
---|
49 | padding: 20px;
|
---|
50 | border: 1px solid #888;
|
---|
51 | width: 80%;
|
---|
52 | animation: ${animatetop} 0.4s;
|
---|
53 | `;
|
---|
54 |
|
---|
55 | export const ModalClose = styled.span`
|
---|
56 | color: white;
|
---|
57 | float: right;
|
---|
58 | font-size: 28px;
|
---|
59 | font-weight: bold;
|
---|
60 | transition: 0.4s;
|
---|
61 | &:hover,
|
---|
62 | :focus {
|
---|
63 | background-color: black;
|
---|
64 | text-decoration: none;
|
---|
65 | cursor: pointer;
|
---|
66 | }
|
---|
67 | `;
|
---|
68 |
|
---|
69 | export const ModalHeader = styled.div`
|
---|
70 | padding: 2px 16px;
|
---|
71 | background-color: rgba(0, 102, 204, 0.6);
|
---|
72 | color: white;
|
---|
73 | height: 40px;
|
---|
74 | margin-bottom: 30px;
|
---|
75 | `;
|
---|
76 |
|
---|
77 | export const ModalFooter = styled.button`
|
---|
78 | padding: 2px 16px;
|
---|
79 | background-color: rgba(0, 102, 204, 1);
|
---|
80 | opacity: 0.6;
|
---|
81 | color: white;
|
---|
82 | height: 40px;
|
---|
83 | margin-top: 30px;
|
---|
84 | transition: 0.4s;
|
---|
85 | &:hover {
|
---|
86 | opacity: 1;
|
---|
87 | cursor: pointer;
|
---|
88 | }
|
---|
89 | font-family: "Roboto Mono", monospace;
|
---|
90 | width: 100%;
|
---|
91 | border: 0;
|
---|
92 | font-size: 18px;
|
---|
93 | font-weight: bold;
|
---|
94 | `;
|
---|
95 |
|
---|
96 | export const ModalBody = styled.div`
|
---|
97 | padding: 2px 16px;
|
---|
98 | `;
|
---|
99 |
|
---|
100 | export const ModalInput = styled.input`
|
---|
101 | margin-top: 5px;
|
---|
102 | margin-bottom: 5px;
|
---|
103 | display: block;
|
---|
104 | height: 30px;
|
---|
105 | width: 372px;
|
---|
106 | padding: 12px 16px;
|
---|
107 | border: 1px solid #ccc;
|
---|
108 | `;
|
---|
109 |
|
---|
110 | export const ModalTextarea = styled.textarea`
|
---|
111 | margin-top: 5px;
|
---|
112 | margin-bottom: 5px;
|
---|
113 | display: block;
|
---|
114 | padding: 12px 16px;
|
---|
115 | border: 1px solid #ccc;
|
---|
116 | resize: none;
|
---|
117 | `;
|
---|