Match Angular per-carrier OperatorLogo aspect ratios (120x31 SU, etc)
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user