Skip to content

Commit 0c393c7

Browse files
claraniclarani
committed
front: rem to px in /modules
Signed-off-by: Clara Ni <[email protected]>
1 parent ea79898 commit 0c393c7

21 files changed

+297
-297
lines changed

‎front/src/modules/conflict/styles/_conflictList.scss

+33-33
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
.conflicts-list {
22
margin-top: auto;
3-
margin-inline: -1.5rem;
3+
margin-inline: -24px;
44
&.expanded {
5-
margin-inline: -1.5rem;
5+
margin-inline: -24px;
66
position: absolute;
77
bottom: 0;
88
z-index: 2;
99
width: 100%;
1010
}
1111
.conflicts-list-header {
12-
border-bottom: 0.0625rem solid var(--error80);
12+
border-bottom: 1px solid var(--error80);
1313
background-color: var(--error60);
1414
color: var(--white100);
15-
height: 2.9375rem;
15+
height: 47px;
1616
display: flex;
1717
justify-content: space-between;
18-
padding: 0.6875rem 1rem 0.75rem 1rem;
18+
padding: 11px 16px 12px 16px;
1919
h2 {
2020
color: var(--white100);
2121
font-size: 1.125rem;
22-
line-height: 1.5rem;
22+
line-height: 24px;
2323
font-weight: 600;
2424
}
2525
}
@@ -28,86 +28,86 @@
2828
display: none;
2929
color: var(--black100);
3030
background-color: var(--error60);
31-
box-shadow: inset 0 0.0625rem var(--error30);
31+
box-shadow: inset 0 1px var(--error30);
3232

3333
&.expanded {
3434
display: block;
3535
overflow: auto;
36-
max-height: calc(50vh - 4.0625rem);
36+
max-height: calc(50vh - 65px);
3737
}
3838

3939
.conflict-card {
4040
background-color: var(--white100);
41-
margin: 0.25rem 0.5rem;
42-
border-radius: 0.25rem;
41+
margin: 4px 8px;
42+
border-radius: 4px;
4343
display: flex;
44-
min-height: 5.5rem;
44+
min-height: 88px;
4545

4646
.trains-info {
4747
font-family: 'IBM Plex Mono', monospace;
48-
flex-basis: calc(43.3% - 0.0313rem);
49-
border-right: 0.0313rem solid var(--grey20);
48+
flex-basis: calc(43.3% - .5008px);
49+
border-right: .5008px solid var(--grey20);
5050

5151
.conflict-type {
5252
font-family: 'IBM Plex Sans';
53-
height: 2.3125rem;
53+
height: 37px;
5454
color: var(--black100);
5555
font-size: 1.125rem;
56-
line-height: 1.5rem;
56+
line-height: 24px;
5757
font-weight: 600;
58-
padding: 0.5625rem 0 0.25rem 0.75rem;
58+
padding: 9px 0 4px 12px;
5959
margin: 0;
6060
}
6161

6262
.start-and-end-time {
6363
display: flex;
64-
gap: 1rem;
64+
gap: 16px;
6565
.start-time {
66-
padding-left: 0.75rem;
66+
padding-left: 12px;
6767
color: var(--black100);
6868
font-size: 0.875rem;
6969
font-weight: 600;
70-
line-height: 1.25rem;
70+
line-height: 20px;
7171
}
7272
.end-time {
7373
color: var(--black100);
7474
font-size: 0.875rem;
75-
line-height: 1.25rem;
75+
line-height: 20px;
7676
}
7777
}
7878

7979
.departure-date {
80-
padding-left: 0.75rem;
80+
padding-left: 12px;
8181
color: var(--grey50);
8282
font-size: 0.75rem;
83-
line-height: 1.25rem;
84-
margin-bottom: 0.9375rem;
83+
line-height: 20px;
84+
margin-bottom: 15px;
8585
}
8686
}
8787

8888
.trains-name {
89-
flex-basis: calc(56.7% - 0.0313rem);
90-
border-left: 0.0313rem solid var(--grey20);
89+
flex-basis: calc(56.7% - .5008px);
90+
border-left: .5008px solid var(--grey20);
9191
display: flex;
9292
flex-wrap: wrap;
93-
padding: 1rem 0 1rem 1rem;
94-
gap: 0.5rem;
93+
padding: 16px 0 16px 16px;
94+
gap: 8px;
9595

9696
.train-name-card {
9797
font-family: 'IBM Plex Mono', monospace;
98-
height: 1.5rem;
99-
max-width: 13.0437rem;
98+
height: 24px;
99+
max-width: 208.6992px;
100100
text-overflow: ellipsis;
101101
white-space: nowrap;
102102
overflow: hidden;
103103
background-color: var(--error5);
104104
color: var(--error80);
105-
border: 0.0625rem solid var(--error30);
106-
border-radius: 0.25rem;
107-
padding: 0.125rem 0.5rem;
105+
border: 1px solid var(--error30);
106+
border-radius: 4px;
107+
padding: 2px 8px;
108108
font-size: 0.875rem;
109109
font-weight: 600;
110-
line-height: 1.25rem;
110+
line-height: 20px;
111111
}
112112
}
113113
}

‎front/src/modules/infra/styles/_infraSelector.scss

+35-35
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.infra-loader-absolute {
22
display: block;
3-
height: calc(100% - 3.5rem);
3+
height: calc(100% - 56px);
44
width: 100%;
55
left: 0;
66
top: 0;
@@ -10,7 +10,7 @@
1010
}
1111

1212
.infra-input-filter {
13-
margin-bottom: 0.5rem;
13+
margin-bottom: 8px;
1414
}
1515

1616
.infraselector-button {
@@ -19,7 +19,7 @@
1919
.infra-lock {
2020
display: flex;
2121
align-items: center;
22-
margin-right: 0.5rem;
22+
margin-right: 8px;
2323
text-transform: uppercase;
2424
}
2525
}
@@ -31,7 +31,7 @@
3131
margin: 0;
3232
border: none;
3333
font-size: 0.9rem;
34-
line-height: 2.2rem;
34+
line-height: 35.2px;
3535
font-weight: 400;
3636
text-transform: uppercase;
3737
background: none;
@@ -57,7 +57,7 @@
5757
padding: 0;
5858
transition: 0.2s;
5959
width: 100%;
60-
margin-bottom: 0.5rem;
60+
margin-bottom: 8px;
6161
border-radius: 4px;
6262
text-align: left;
6363
font-weight: 100;
@@ -68,7 +68,7 @@
6868
text-transform: uppercase;
6969
small {
7070
font-size: 0.6rem;
71-
margin-right: 0.25rem;
71+
margin-right: 4px;
7272
}
7373
}
7474
&.unlocked {
@@ -108,11 +108,11 @@
108108
}
109109
}
110110
.infraslist-item-choice-main {
111-
padding: 0 0.25rem;
111+
padding: 0 4px;
112112
display: flex;
113113
align-items: center;
114114
justify-content: space-between;
115-
height: 2rem;
115+
height: 32px;
116116
span {
117117
display: flex;
118118
}
@@ -121,10 +121,10 @@
121121
display: flex;
122122
align-items: center;
123123
justify-content: space-between;
124-
padding: 0.25rem 0.25rem 0;
124+
padding: 4px 4px 0;
125125
font-size: 0.6rem;
126-
height: 1rem;
127-
line-height: 1.25rem;
126+
height: 16px;
127+
line-height: 20px;
128128
font-weight: 500;
129129
}
130130
}
@@ -133,9 +133,9 @@
133133
.infraslist-item-edition {
134134
display: flex;
135135
align-items: center;
136-
height: 3.5rem;
136+
height: 56px;
137137
position: relative;
138-
margin-bottom: 0.5rem;
138+
margin-bottom: 8px;
139139
&.disabled {
140140
opacity: 0.25;
141141
}
@@ -150,13 +150,13 @@
150150
align-items: center;
151151
flex-grow: 1;
152152
overflow: hidden;
153-
padding-left: 0.5rem;
153+
padding-left: 8px;
154154
}
155155
.infraslist-item-delete-button-container {
156156
display: flex;
157157
align-items: center;
158158
justify-content: center;
159-
width: 8rem;
159+
width: 128px;
160160
}
161161
.infraslist-item-edition-delete-buttons {
162162
display: flex;
@@ -204,12 +204,12 @@
204204
border-radius: 4px 0 0 4px;
205205
}
206206
.infraslist-item-edition-main {
207-
padding: 0 0.25rem;
207+
padding: 0 4px;
208208
display: flex;
209209
align-items: center;
210210
font-size: 0.9rem;
211-
height: 2rem;
212-
line-height: 1rem;
211+
height: 32px;
212+
line-height: 16px;
213213
input {
214214
background: none;
215215
}
@@ -220,11 +220,11 @@
220220
display: flex;
221221
align-items: center;
222222
color: var(--coolgray7);
223-
padding: 0 0.25rem 0 0.25rem;
223+
padding: 0 4px 0 4px;
224224
text-transform: uppercase;
225225
small {
226226
font-size: 0.6rem;
227-
margin-right: 0.25rem;
227+
margin-right: 4px;
228228
}
229229
}
230230
}
@@ -233,17 +233,17 @@
233233
align-items: center;
234234
background-color: var(--coolgray3);
235235
justify-content: space-between;
236-
padding: 0.25rem 0.25rem 0;
236+
padding: 4px 4px 0;
237237
font-size: 0.6rem;
238-
height: 1rem;
239-
line-height: 1.25rem;
238+
height: 16px;
239+
line-height: 20px;
240240
font-weight: 500;
241241
}
242242
}
243243
.infraslist-item-actionsbar {
244244
display: flex;
245245
justify-content: around;
246-
width: 8rem;
246+
width: 128px;
247247
}
248248
.infraslist-item-action {
249249
display: flex;
@@ -253,16 +253,16 @@
253253
background-color: var(--coolgray1);
254254
flex-grow: 1;
255255
border: none;
256-
height: 3.25rem;
256+
height: 52px;
257257
transition:
258258
background-color 0.4s,
259259
color 0.4s;
260-
width: 2rem;
260+
width: 32px;
261261
.spinner-border {
262262
color: var(--coolgray7);
263263
width: 1em;
264264
height: 1em;
265-
border-width: 0.15rem;
265+
border-width: 2.4px;
266266
}
267267
&:last-child {
268268
border-radius: 0 4px 4px 0;
@@ -274,7 +274,7 @@
274274
background-color: var(--coolgray3);
275275
}
276276
&.waiting {
277-
width: 8rem;
277+
width: 128px;
278278
}
279279
&.unlock {
280280
color: var(--green);
@@ -284,14 +284,14 @@
284284
}
285285
}
286286
&.cancel {
287-
width: 4rem;
287+
width: 64px;
288288
&:hover {
289289
background-color: var(--coolgray11);
290290
color: var(--white);
291291
}
292292
}
293293
&.check {
294-
width: 4rem;
294+
width: 64px;
295295
color: var(--green);
296296
&:hover {
297297
background-color: var(--green);
@@ -308,7 +308,7 @@
308308
&.delete {
309309
margin-left: 0;
310310
margin-right: 0;
311-
width: 4rem;
311+
width: 64px;
312312
color: var(--red);
313313
&:first-child {
314314
border-radius: 4px 0 0 4px;
@@ -330,20 +330,20 @@
330330
}
331331

332332
.infra-add {
333-
padding: 0.5rem;
333+
padding: 8px;
334334
border: 2px solid var(--green);
335335
border-radius: 4px;
336336
.infra-add-error {
337-
height: 1rem;
338-
margin: 0.5rem 0;
337+
height: 16px;
338+
margin: 8px 0;
339339
text-align: center;
340340
color: var(--red);
341341
}
342342
.infra-add-import-input-file {
343343
display: flex;
344344
align-items: center;
345345
color: var(--coolgray9);
346-
padding: 0.5rem;
346+
padding: 8px;
347347
border: 2px dashed var(--coolgray3);
348348
border-radius: 4px;
349349
width: 100%;

0 commit comments

Comments
 (0)