gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ScheduleSearchPage: direction-switch exact Angular styles (130×40, extra-blue segmented)

Browse Source
This commit is contained in:
Anton
2026-04-20 12:53:39 +03:00
parent 85deac7b54
commit a361eeb7a5
1 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/schedule/components/ScheduleSearchPage.scss
+28 -22
View File
@@ -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;