diff --git a/src/features/schedule/components/ScheduleSearchPage.scss b/src/features/schedule/components/ScheduleSearchPage.scss index 5c148bbc..d8bca885 100644 --- a/src/features/schedule/components/ScheduleSearchPage.scss +++ b/src/features/schedule/components/ScheduleSearchPage.scss @@ -31,47 +31,53 @@ } // `Туда / Обратно` segmented switch in the sticky header for round- -// trip schedules. Mirrors Angular's `schedule-direction-switch`: two -// flat buttons with a plane icon, the active one filled white. +// trip schedules. Mirrors Angular `schedule-direction-switch.component` +// exactly: fixed-width 130×40 buttons with an extra-blue border, the +// active button filled extra-blue with white text. .schedule-direction-switch { display: flex; - gap: 0; - background: colors.$blue-extra-light; - border-bottom: 1px solid colors.$border; &__btn { - flex: 1; - display: inline-flex; + display: flex; align-items: center; justify-content: center; - gap: 8px; - padding: 12px 16px; - background: transparent; - border: 0; - border-right: 1px solid colors.$border; - color: colors.$light-gray; - font-size: 14px; + width: 130px; + height: 40px; + background: colors.$white; + border: 1px solid colors.$extra-blue; + color: colors.$extra-blue; + font-size: 12px; font-weight: 500; + line-height: 16px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; + border-radius: 0; - &:last-child { border-right: 0; } + &:first-child { + border-right: none; + border-top-left-radius: vars.$border-radius; + border-bottom-left-radius: vars.$border-radius; + } - &:hover { - background: colors.$blue-extra-light; - color: colors.$blue; + &:last-child { + border-left: none; + border-top-right-radius: vars.$border-radius; + border-bottom-right-radius: vars.$border-radius; } &--active { - background: colors.$white; - color: colors.$blue; + background: colors.$extra-blue; + color: colors.$white; - .schedule-direction-switch__icon { color: colors.$blue; } + .schedule-direction-switch__icon { color: colors.$white; } } } &__icon { - color: colors.$light-gray; + margin-right: 5px; + width: 19px; + height: 19px; + color: colors.$extra-blue; transition: color 120ms ease; fill: currentColor;