71 lines
1.6 KiB
SCSS
71 lines
1.6 KiB
SCSS
@use "../../styles/variables" as vars;
|
||
@use "../../styles/colors" as colors;
|
||
|
||
.flight-status {
|
||
&--with-icon {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
// Angular's SVG sprite points the plane nose to the right; the inline
|
||
// 24×24 path in this component is nose-up, so rotate it 90° to match.
|
||
&__plane {
|
||
display: block;
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
&__label {
|
||
font-size: 12px;
|
||
color: colors.$text-color;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// Mirror the icon colour on the label (Angular's flight-status-colors
|
||
// maps Sent/InFlight/Landed/Arrived/Unknown all to $green, Cancelled
|
||
// to $red, Delayed to $orange, Scheduled to $blue).
|
||
&--cancelled &__label { color: colors.$red; }
|
||
&--arrived &__label,
|
||
&--landed &__label,
|
||
&--in-flight &__label,
|
||
&--departed &__label { color: colors.$green; }
|
||
&--delayed &__label { color: colors.$orange; }
|
||
&--scheduled &__label { color: colors.$blue; }
|
||
|
||
&__content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
& > *:not(:last-child) {
|
||
margin-right: vars.$space-s2;
|
||
}
|
||
}
|
||
|
||
&__indicator {
|
||
width: vars.$status-indicator-size;
|
||
height: vars.$status-indicator-size;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
background-color: colors.$light-gray;
|
||
border: 1px solid colors.$light-gray;
|
||
|
||
&--Finished,
|
||
&--arrived,
|
||
&--landed,
|
||
&--cancelled {
|
||
background-color: colors.$red;
|
||
border-color: colors.$red;
|
||
}
|
||
|
||
&--InProgress,
|
||
&--in-flight,
|
||
&--departed {
|
||
background-color: colors.$green;
|
||
border-color: colors.$green;
|
||
}
|
||
}
|
||
}
|