FlightCard: row grid [60px|120px|100px|1fr|85-145px|120px|1fr|10px] + padding 15px/20px (Angular parity)
This commit is contained in:
@@ -36,14 +36,19 @@
|
||||
// [number] 80px [logo] 120px [dep-time] 100px
|
||||
// [dep-station] minmax(45px, 145px) [status] minmax(85px, 145px)
|
||||
// [arr-time] 120px [arr-station] minmax(45px, 145px) [arrow] 10px
|
||||
// Mirrors Angular `flight-details-row-part-header :host` grid exactly:
|
||||
// [number] 60px [logo] 120px [dep-time] 100px
|
||||
// [dep-station] 1fr [status] minmax(85px, 145px)
|
||||
// [arr-time] 120px [arr-station] 1fr
|
||||
// plus `padding: $space-l $space-xl` (15px / 20px) instead of the
|
||||
// uniform 20px React was using — makes rows ~10px shorter per card.
|
||||
&__row {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
80px 120px 100px minmax(45px, 145px) minmax(85px, 145px)
|
||||
120px minmax(45px, 145px) 10px;
|
||||
60px 120px 100px 1fr minmax(85px, 145px) 120px 1fr 10px;
|
||||
align-items: center;
|
||||
gap: 0 vars.$space-l;
|
||||
padding: vars.$space-xl;
|
||||
padding: vars.$space-l vars.$space-xl;
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user