Match Angular mini-list header/time sizing + soften accordion headers
Measured computed styles on the deployed Angular reference: mini-list flight-number: 16px / 400 / #000 (mine: 12px / grey) mini-list time: 20px / 500 / #022040 (mine: 17px / 600 / #222) 'Детали рейса' header: 16px / 400 / #333 (mine: 18px / 500 / #222) 'Расписание рейса' hdr: 16px / 400 / #333 (mine: 18px / 500 / #222) React's mini-list was reading the carrier+number as secondary metadata and the time as a loud bold chunk; Angular reverses the hierarchy — the carrier+number is the tile's identifier, the time is a darker navy number-group. Retune both. Also drop the collapse-header weight on both details+schedule accordions so they read as section separators rather than section titles; the row content below is the focus.
This commit is contained in:
@@ -7,12 +7,14 @@
|
||||
border-top: 1px solid #e0e6f0;
|
||||
}
|
||||
|
||||
// 'Расписание рейса' header — 16px / 400 / #333 to match the sibling
|
||||
// 'Детали рейса' collapse row above.
|
||||
&__header {
|
||||
padding: 16px 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #222;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@@ -29,9 +29,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Angular renders the mini-list header ('SU 6272') darker and larger
|
||||
// than the surrounding meta: 16px / 400 / #000.
|
||||
&__flight-number {
|
||||
font-size: 12px;
|
||||
color: #8a8a8a;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -65,10 +68,12 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Depart/arrive times inside the mini-list item: 20px / 500 / #022040
|
||||
// (dark navy) to match Angular's big time-group.
|
||||
&__time {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #022040;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,12 +6,14 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 'Детали рейса' accordion header. Angular keeps this at 16px / 400 /
|
||||
// #333 — it's a section divider, not a page heading, so it stays quiet.
|
||||
.p-accordion-header {
|
||||
padding: 16px 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #222;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user