source: sources/client/src/components/admin/ParkingZoneInfoEdit/ZoneSectorEdit/styles.js@ bc20307

Last change on this file since bc20307 was bc20307, checked in by Tasevski2 <39170279+Tasevski2@…>, 2 years ago

Push before video

  • Property mode set to 100644
File size: 4.8 KB
Line 
1import styled from 'styled-components';
2import {
3 Typography,
4 Divider,
5 TextField,
6 InputAdornment,
7 Select,
8} from '@mui/material';
9import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
10import HighlightOffIcon from '@mui/icons-material/HighlightOff';
11
12export const Wrapper = styled.div`
13 width: 500px;
14 height: 100%;
15 padding: 10px 20px;
16 border: 1px solid ${(props) => props.theme.palette.background.shadow};
17 box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
18`;
19
20export const Title = styled(Typography).attrs({
21 variant: 'h4',
22 textAlign: 'center',
23 marginBottom: '10px',
24 fontSize: '1.7rem',
25 fontWeight: 500,
26})``;
27
28export const DividerUnderTitle = styled(Divider).attrs({
29 sx: {
30 borderBottomWidth: '2px',
31 },
32})``;
33
34export const Characteristics = styled.div`
35 width: 100%;
36 display: flex;
37 flex-direction: column;
38 padding: 10px 0;
39`;
40
41export const KeyValueWrapper = styled.div`
42 width: 100%;
43 display: flex;
44 flex-direction: row;
45 justify-content: space-between;
46 align-items: center;
47 margin-top: 10px;
48`;
49
50export const Key = styled.p`
51 font-size: 1.4rem;
52 margin: 0;
53`;
54
55export const Value = styled(TextField).attrs({})`
56 margin: 0;
57 width: 50%;
58
59 input {
60 padding: 0 10px;
61 font-size: 1.5rem;
62 font-weight: 500;
63 height: 43px;
64 }
65`;
66
67export const TimeSelectInputsWrapper = styled.div`
68 display: flex;
69 flex-direction: row;
70 width: 50%;
71 align-items: center;
72 justify-content: space-evenly;
73`;
74
75export const TimeSelectInput = styled(Select).attrs({})`
76 position: relative;
77 > div {
78 width: 35px;
79 font-size: 1.5rem;
80 padding: 8.5px 30px 0 15px;
81 }
82`;
83
84export const TImeSelectInputsDivider = styled.p`
85 height: 2px;
86 width: 30px;
87 border-bottom: 2px solid black;
88`;
89
90export const ColorCircleWrapper = styled.div`
91 width: 50%;
92
93 > div > button {
94 border-radius: 50%;
95 margin: 4px;
96 width: 35px;
97 min-width: 35px;
98 height: 35px;
99 > span {
100 > div {
101 border-radius: 50%;
102 width: 35px;
103 min-width: 35px;
104 height: 35px;
105 }
106 }
107 }
108`;
109
110export const ZoneCenterLocation = styled.div`
111 display: flex;
112 flex-direction: column;
113 margin-top: 15px;
114`;
115
116export const SmallTitle = styled(Typography).attrs({
117 variant: 'h6',
118 textAlign: 'center',
119 marginBottom: '5px',
120 fontWeight: 500,
121 fontSize: '1.4rem',
122})``;
123
124export const LatLngCenter = styled.div`
125 display: flex;
126 flex-direction: row;
127 justify-content: space-between;
128 padding: 0 60px;
129`;
130
131export const LabelAndLatLngWrapper = styled.div`
132 display: flex;
133 flex-direction: column;
134 align-items: center;
135`;
136
137export const LatLngLabel = styled.label`
138 font-size: 1.1rem;
139`;
140
141export const LatLngValue = styled(TextField)`
142 margin: 0;
143 margin-top: 5px;
144 width: 95%;
145
146 input {
147 font-weight: 500;
148 font-size: 1.5rem;
149 text-align: center;
150 padding: 0 10px;
151 height: 43px;
152 }
153`;
154
155export const ZoneCornersLocation = styled.div`
156 width: 100%;
157 margin-top: 25px;
158`;
159
160export const TableWrapper = styled.div`
161 width: 80%;
162 margin: auto;
163 text-align: center;
164 table {
165 border-spacing: 0;
166 }
167
168 table tbody {
169 display: block;
170 max-height: 150px;
171 overflow-y: auto;
172 }
173 tbody::-webkit-scrollbar {
174 display: none;
175 }
176 table thead,
177 table tbody tr {
178 display: table;
179 width: 100%;
180 table-layout: fixed;
181 }
182 th,
183 td {
184 padding: 10px 5px;
185 font-size: 1.2rem;
186 }
187 th:first-of-type,
188 th:last-of-type {
189 width: 56px;
190 }
191 tbody tr td:first-of-type {
192 width: 56px;
193 padding-right: 10px;
194 padding: 0;
195 padding-left: 0;
196 border: 0;
197 }
198 tbody tr td:last-of-type {
199 width: 56px;
200 padding: 0;
201 border: 0;
202 }
203 thead th:nth-of-type(2) {
204 border: 1px solid black;
205 border-right: 2px solid black;
206 border-bottom: 2px solid black;
207 }
208 thead th:nth-of-type(3) {
209 border: 1px solid black;
210 border-left: 0;
211 border-bottom: 2px solid black;
212 }
213 tbody tr td:nth-of-type(2) {
214 border-right: 2px solid black;
215 border-left: 1px solid black;
216 }
217 tbody tr td:nth-of-type(3) {
218 border-right: 1px solid black;
219 }
220 tbody tr td {
221 border-bottom: 1px solid black;
222 }
223
224 tbody tr:last-of-type td {
225 border-bottom: 0;
226 }
227
228 td {
229 padding: 0;
230 }
231`;
232
233export const EditedInputAdornment = styled(InputAdornment)`
234 p {
235 font-size: 1.2rem;
236 }
237`;
238
239export const AddIcon = styled(AddCircleOutlineIcon).attrs((props) => ({
240 sx: {
241 fontSize: '2.5rem',
242 color: props.theme.palette.primary.main,
243 },
244}))``;
245
246export const DeleteIcon = styled(HighlightOffIcon).attrs((props) => ({
247 sx: {
248 fontSize: '2.5rem',
249 color: props.theme.palette.error.main,
250 },
251}))``;
252
253export const TableDataInput = styled.input`
254 width: 100%;
255 height: 47px;
256 padding: 3.5px 5px;
257 border: 0;
258 font-size: 1.2rem;
259 text-align: center;
260
261 &:focus {
262 background-color: rgba(0, 173, 124, 0.2);
263 font-weight: 600;
264 }
265`;
Note: See TracBrowser for help on using the repository browser.