diff --git a/src/features/online-board/components/BoardDetailsHeader/actions.scss b/src/features/online-board/components/BoardDetailsHeader/actions.scss index f6b0ed6d..df78d648 100644 --- a/src/features/online-board/components/BoardDetailsHeader/actions.scss +++ b/src/features/online-board/components/BoardDetailsHeader/actions.scss @@ -1,3 +1,5 @@ +@use "../../../../styles/colors" as colors; + .flight-action-btn { padding: 8px 16px; border-radius: 6px; @@ -13,30 +15,30 @@ } &--orange { - background: #ff9000; - color: #fff; + background: colors.$orange; + color: colors.$white; &:hover:not(:disabled) { - background: #e68200; + background: colors.$orange--hover; } } &--blue-light { - background: #e3f0ff; - color: #1a3a5c; + background: colors.$blue-icon; + color: colors.$blue-dark; &:hover:not(:disabled) { - background: #c7dff5; + background: colors.$border-blue; } } &--transparent { background: transparent; padding: 8px; - color: #2060c0; + color: colors.$blue; &:hover:not(:disabled) { - background: rgba(32, 96, 192, 0.08); + background: rgba(27, 98, 180, 0.08); } } diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss index aed880df..72b131e3 100644 --- a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss +++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss @@ -22,7 +22,7 @@ align-items: center; &:hover { - color: #2457ff; + color: colors.$blue; } } diff --git a/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss b/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss index ebdd3905..81d8b9c7 100644 --- a/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss +++ b/src/features/online-board/components/FlightsMiniList/FlightsMiniList.scss @@ -35,7 +35,7 @@ } &--selected { - box-shadow: inset 0 0 0 2px #2457ff; + box-shadow: inset 0 0 0 2px colors.$blue; background: colors.$blue-extra-light; } } @@ -56,9 +56,9 @@ display: inline-flex; font-size: 14px; - &--blue { color: #2457ff; } - &--green { color: #6da244; } - &--cancelled { color: #e55353; } + &--blue { color: colors.$blue; } + &--green { color: colors.$green; } + &--cancelled { color: colors.$red; } } &__times { diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss index 9e6427c1..1ba8e250 100644 --- a/src/features/online-board/components/OnlineBoardDetailsPage.scss +++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss @@ -101,18 +101,18 @@ &__center--finished { .leg-route__status-text { - color: #6da244; + color: colors.$green; text-align: right; align-self: flex-end; } - .leg-route__bar-inner { background: #6da244; } - .leg-route__plane-marker { color: #6da244; } + .leg-route__bar-inner { background: colors.$green; } + .leg-route__plane-marker { color: colors.$green; } } &__center--in-flight { - .leg-route__status-text { color: #6da244; } - .leg-route__bar-inner { background: #6da244; } - .leg-route__plane-marker { color: #6da244; } + .leg-route__status-text { color: colors.$green; } + .leg-route__bar-inner { background: colors.$green; } + .leg-route__plane-marker { color: colors.$green; } } &__center--progress { @@ -120,9 +120,9 @@ } &__center--cancelled { - .leg-route__status-text { color: #e55353; } + .leg-route__status-text { color: colors.$red; } .leg-route__bar { background: #fbd4d4; } - .leg-route__bar-inner { background: #e55353; } + .leg-route__bar-inner { background: colors.$red; } } &__duration { diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss index b2e2df6f..d0e9b185 100644 --- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss +++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss @@ -21,7 +21,7 @@ align-items: center; &:hover { - color: #2457ff; + color: colors.$blue; } } @@ -105,7 +105,7 @@ &__subtitle { font-size: 14px; font-weight: 600; - color: #2457ff; + color: colors.$blue; word-break: break-word; } @@ -121,7 +121,7 @@ &--inprogress, &--started { - color: #6da244; + color: colors.$green; } &--finished { @@ -129,7 +129,7 @@ } &--expected { - color: #2457ff; + color: colors.$blue; } &--specified { diff --git a/src/features/online-board/components/details-panels/panels.scss b/src/features/online-board/components/details-panels/panels.scss index 414662c2..5adb3e49 100644 --- a/src/features/online-board/components/details-panels/panels.scss +++ b/src/features/online-board/components/details-panels/panels.scss @@ -1,3 +1,5 @@ +@use "../../../../styles/colors" as colors; + .details-panel { padding: 12px 0; font-size: 14px; @@ -41,7 +43,7 @@ padding: 2px 8px; border-radius: 4px; background: #f0f4f8; - color: #2060c0; + color: colors.$blue; font-size: 12px; } @@ -92,7 +94,7 @@ } &__prop--link .aircraft-panel__value { - color: #2457ff; + color: colors.$blue; } } @@ -108,7 +110,7 @@ text-decoration: none; &:hover { - color: #2457ff; + color: colors.$blue; } img { diff --git a/src/features/schedule/components/DayGroupedFlightList.scss b/src/features/schedule/components/DayGroupedFlightList.scss index f1b51f7a..dca23c0b 100644 --- a/src/features/schedule/components/DayGroupedFlightList.scss +++ b/src/features/schedule/components/DayGroupedFlightList.scss @@ -44,7 +44,7 @@ border: 0; padding: 1px 2px; cursor: pointer; - color: #b3becd; + color: colors.$border-blue; line-height: 0; border-radius: 2px; diff --git a/src/features/schedule/components/ScheduleFilter.scss b/src/features/schedule/components/ScheduleFilter.scss index c723dd87..5ede5cf4 100644 --- a/src/features/schedule/components/ScheduleFilter.scss +++ b/src/features/schedule/components/ScheduleFilter.scss @@ -110,6 +110,6 @@ cursor: pointer; transition: background-color 150ms ease; - &:hover { background: #1c45cc; } + &:hover { background: colors.$blue--hover; } } } diff --git a/src/features/schedule/components/ScheduleFlightBody.scss b/src/features/schedule/components/ScheduleFlightBody.scss index 30a5b4e5..7117f6ea 100644 --- a/src/features/schedule/components/ScheduleFlightBody.scss +++ b/src/features/schedule/components/ScheduleFlightBody.scss @@ -111,7 +111,7 @@ svg { width: 20px; height: 7px; - fill: #ff9000; + fill: colors.$orange; } } @@ -192,7 +192,7 @@ } &__buy-btn { - background: #ff9000; + background: colors.$orange; color: #fff; border: none; border-radius: 4px; @@ -218,7 +218,7 @@ min-width: 150px; transition: background-color 150ms ease; - &:hover { background: #1c45cc; } + &:hover { background: colors.$blue--hover; } } // ----- horizontal timeline (route summary) ----------------------------- diff --git a/src/ui/city-autocomplete/CityAutocomplete.scss b/src/ui/city-autocomplete/CityAutocomplete.scss index f7fc2c3f..1ff6c353 100644 --- a/src/ui/city-autocomplete/CityAutocomplete.scss +++ b/src/ui/city-autocomplete/CityAutocomplete.scss @@ -61,7 +61,7 @@ } &__input--has-error { - box-shadow: 0 0 0 1px #e55353; + box-shadow: 0 0 0 1px colors.$red; } &__search-button { @@ -79,7 +79,7 @@ &::before { content: "▾"; display: inline-block; - color: #2457ff; + color: colors.$blue; } &:hover { @@ -125,7 +125,7 @@ } .tooltip { - color: #e55353; + color: colors.$red; font-size: 12px; margin-bottom: 4px; } diff --git a/src/ui/city-autocomplete/CityPickerPopup.scss b/src/ui/city-autocomplete/CityPickerPopup.scss index 1187ce62..5d7d3671 100644 --- a/src/ui/city-autocomplete/CityPickerPopup.scss +++ b/src/ui/city-autocomplete/CityPickerPopup.scss @@ -20,7 +20,7 @@ background-color: #f3f9ff; border: none; border-right: 1px solid colors.$border-input; - color: #2457ff; + color: colors.$blue; font-weight: 700; font-size: 14px; cursor: pointer; diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss index dbe7e079..c2db9db6 100644 --- a/src/ui/flights/FlightCard.scss +++ b/src/ui/flights/FlightCard.scss @@ -196,9 +196,9 @@ // Angular shows a leading dot whose colour matches the boarding state. // Default is grey ('Уточняется' / 'Запланирован'); active states get // coloured dots. - &--finished .flight-card__status-dot { background: #41b04c; } - &--inprogress .flight-card__status-dot { background: #2060c0; } - &--expected .flight-card__status-dot { background: #ff9000; } + &--finished .flight-card__status-dot { background: colors.$green; } + &--inprogress .flight-card__status-dot { background: colors.$blue; } + &--expected .flight-card__status-dot { background: colors.$orange; } &--specified .flight-card__status-dot { background: #8a8a8a; } &--scheduled .flight-card__status-dot { background: #8a8a8a; } } @@ -258,7 +258,7 @@ } &__buy-btn { - background: #ff9000; + background: colors.$orange; color: #fff; border: none; border-radius: 4px; @@ -284,7 +284,7 @@ transition: background-color 150ms ease; &:hover { - background: #1c45cc; + background: colors.$blue--hover; } } diff --git a/src/ui/flights/FlightStatus.scss b/src/ui/flights/FlightStatus.scss index c20fa9c9..3fecdea2 100644 --- a/src/ui/flights/FlightStatus.scss +++ b/src/ui/flights/FlightStatus.scss @@ -26,11 +26,11 @@ // Mirror the icon colour on the label so "Отменен"/"Прибыл"/"В полете" // read at a glance (Angular does the same). - &--cancelled &__label { color: #e55353; } + &--cancelled &__label { color: colors.$red; } &--arrived &__label, - &--landed &__label { color: #6da244; } + &--landed &__label { color: colors.$green; } &--in-flight &__label, - &--departed &__label { color: #2457ff; } + &--departed &__label { color: colors.$blue; } &--delayed &__label { color: #f29f3a; } &__content {