Shrink route-strip typography to match Angular's compact layout
Measuring Angular's computed styles on the deployed test page showed: dep/arr time: 20px / 500 / #022040 (mine: 32px / 500 / #222) strike time: 12px / #F37B09 (mine: 14px) city: 14px / 400 / #333 (mine: 20px / 500) airport: 12px / #657282 (mine: 12px / #8A8A8A) time label: 12px / #657282 (mine: 12px / #8A8A8A) time value: 12px / 400 / #F37B09 (mine: 14px / 600 / #222) time date: 10px / #333 (mine: 12px / blue) React was rendering each line roughly 1.5× bigger and bolder than the Angular reference, which made the route strip dominate the card instead of framing the 'Прибыл' status. Retune .leg-route__time / __city / __airport / __detail-{label,value,offset,date} to the measured Angular values.
This commit is contained in:
@@ -23,16 +23,19 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Route-strip times. Angular: 20px/500/#022040 bold navy; strike-through
|
||||
// slot underneath renders at 12px in the brand orange.
|
||||
&__time {
|
||||
font-size: 32px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
color: #022040;
|
||||
line-height: 1.1;
|
||||
|
||||
&-strike {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: colors.$orange;
|
||||
text-decoration: line-through;
|
||||
margin-top: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,16 +50,18 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// City name (Санкт-Петербург / Москва). Angular: 14px/regular/#333 —
|
||||
// the large departure/arrival time is the visual anchor, not the city.
|
||||
&__city {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__airport {
|
||||
font-size: 12px;
|
||||
color: #8a8a8a;
|
||||
margin-top: 4px;
|
||||
color: #657282;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&__center {
|
||||
@@ -178,31 +183,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Time-details block under the route strip. Angular keeps the whole
|
||||
// block compact: 12px labels in neutral grey, 12px regular values in
|
||||
// brand orange, and a small 10px date line in #333 below.
|
||||
&__detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 2px;
|
||||
|
||||
&-label {
|
||||
font-size: 12px;
|
||||
color: #8a8a8a;
|
||||
color: #657282;
|
||||
}
|
||||
|
||||
&-value {
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #022040;
|
||||
}
|
||||
|
||||
&-offset {
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
margin-left: 6px;
|
||||
font-size: 10px;
|
||||
color: #657282;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&-date {
|
||||
font-size: 12px;
|
||||
color: colors.$blue;
|
||||
font-size: 10px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user