Match Angular per-carrier OperatorLogo aspect ratios (120x31 SU, etc)

This commit is contained in:
2026-04-20 03:30:15 +03:00
parent db697d4b5e
commit 1cd39b094e
+37 -9
View File
@@ -1,29 +1,57 @@
// Mirrors Angular's `_logos.scss` sizing: per-carrier @include scale()
// with a 120px base width and aspect-ratio-specific height. Most wide
// logos (SU, F7, KL…) render at ~120×31; FV/Rossiya is narrower, HZ/Aurora
// tall-square. We bake in the common ratios instead of a one-size-fits-all
// 90×24 that previously clipped SU's ascender.
.operator-logo {
display: inline-block;
width: 90px;
height: 24px;
width: 120px;
height: 31px;
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
flex-shrink: 0;
&--round {
// Angular: round badges are 36×36px square, designed as round
// icons (separate `round.png` asset). `contain` keeps the icon
// intact without cropping the wide-logo SVG.
width: 36px;
height: 36px;
background-size: contain;
background-position: center;
}
// Large (1.5× scale) used in the details-header badge. Angular keeps
// round icons the same size even when 'large' is set.
&--large {
width: 140px;
height: 36px;
width: 180px;
height: 46px;
&.operator-logo--round { width: 36px; height: 36px; }
}
// Carrier-specific aspect ratios transcribed from Angular's _logos.scss
// @include scale($width-base, $ratio) calls.
&--SU,
&--F7 { width: 120px; height: 31px; }
&--HZ { width: 80px; height: 44px; }
&--FV { width: 90px; height: 15px; }
&--RO { width: 120px; height: 40px; }
&--DP { width: 120px; height: 23px; }
&--KL { width: 120px; height: 53px; }
&--S7 { width: 120px; height: 40px; }
&--SN { width: 120px; height: 20px; }
&--FB { width: 120px; height: 36px; }
&--CI { width: 120px; height: 19px; }
&--AF { width: 120px; height: 15px; }
&--AZ { width: 120px; height: 29px; }
@media (min-width: 641px) and (max-width: 1050px) {
// Angular's tablets() scale: width & height * 0.75.
width: 90px;
height: 23px;
}
}
.details-header-badge__airline .operator-logo {
width: 140px;
height: 36px;
width: 180px;
height: 46px;
}