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

Switch TransferBar + FullRouteTimeline to design tokens; correct transfer icon size (20.5×6.5)

Browse Source
This commit is contained in:
Anton
2026-04-20 03:26:10 +03:00
parent 0782674140
commit db697d4b5e
2 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/online-board/components/FullRouteTimeline/FullRouteTimeline.scss
+33 -23
View File
@@ -1,10 +1,13 @@
.full-route-timeline {
background: #fff;
border-radius: 8px;
padding: 16px 24px;
margin-bottom: 16px;
@use "../../../../styles/colors" as colors;
@use "../../../../styles/variables" as vars;
@media (max-width: 768px) {
.full-route-timeline {
background: colors.$white;
border-radius: 8px;
padding: vars.$space-l vars.$space-xl;
margin-bottom: vars.$space-l;
@media (max-width: 640px) {
display: none;
}
}
@@ -12,16 +15,16 @@
.timeline {
display: flex;
align-items: center;
gap: 16px;
gap: vars.$space-l;
&__arrow {
background: transparent;
border: 1px solid #d0dae5;
border: 1px solid colors.$border;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
color: #2060c0;
color: colors.$blue;
font-size: 16px;
&:disabled { opacity: 0.3; cursor: not-allowed; }
@@ -39,8 +42,15 @@
align-items: center;
gap: 8px;
&--times { font-size: 18px; font-weight: 500; color: #1a3a5c; }
&--stations { font-size: 14px; color: #666; }
&--times {
font-size: 18px;
font-weight: 500;
color: colors.$blue-dark;
}
&--stations {
font-size: 14px;
color: colors.$light-gray;
}
}
}
@@ -54,14 +64,14 @@
&__separator {
flex: 1;
height: 1px;
background: #d0dae5;
background: colors.$border;
}
&__number {
position: absolute;
top: -20px;
background: #e3f0ff;
color: #2060c0;
background: colors.$blue-icon;
color: colors.$blue;
border-radius: 10px;
padding: 2px 8px;
font-size: 12px;
@@ -70,11 +80,11 @@
&__duration {
font-size: 12px;
color: #666;
color: colors.$light-gray;
padding: 0 8px;
background: #fff;
background: colors.$white;
&--specifying { color: #ff9000; }
&--specifying { color: colors.$orange; }
}
}
@@ -86,9 +96,9 @@
&--right { align-items: flex-end; text-align: right; }
&--center { align-items: center; text-align: center; }
&__city { font-size: 14px; font-weight: 500; color: #1a3a5c; }
&__code { font-size: 12px; color: #666; }
&__terminal { font-size: 11px; color: #999; }
&__city { font-size: 14px; font-weight: 500; color: colors.$blue-dark; }
&__code { font-size: 12px; color: colors.$light-gray; }
&__terminal { font-size: 11px; color: colors.$light-gray; }
&--large { .station__city { font-size: 22px; } }
&--small { .station__city { font-size: 12px; } }
@@ -99,7 +109,7 @@
align-items: center;
gap: 8px;
&__arrow { color: #2060c0; }
&__city { font-size: 12px; color: #666; }
&__code { font-size: 14px; font-weight: 500; color: #1a3a5c; }
&__arrow { color: colors.$blue; }
&__city { font-size: 12px; color: colors.$light-gray; }
&__code { font-size: 14px; font-weight: 500; color: colors.$blue-dark; }
}
src/features/online-board/components/TransferBar/TransferBar.scss
+21 -13
View File
@@ -1,45 +1,53 @@
@use "../../../../styles/colors" as colors;
@use "../../../../styles/variables" as vars;
// Mirrors Angular's `transfer.component` host:
// background: $blue-extra-light (#f3f9ff), border: 1px $blue-light2,
// padding: $space-m $space-l (10px 15px), font-size: $font-size-s (12px).
// Icon SVG is a narrow horizontal arrow (~20.5×6.5px), not a 20×20 square.
.transfer-bar {
display: flex;
align-items: center;
gap: 16px;
background: #e3f0ff;
border: 1px solid #b8d4f0;
padding: 12px 16px;
gap: vars.$space-l;
background: colors.$blue-extra-light;
border: 1px solid colors.$blue-light2;
padding: vars.$space-m vars.$space-l;
min-height: 50px;
font-size: 13px;
font-size: 12px;
&--separated {
margin: 12px 0;
margin: vars.$space-m 0;
border-radius: 3px;
}
&__icon svg {
fill: #ff9000;
width: 20px;
height: 20px;
fill: colors.$orange;
width: 20.5px;
height: 6.5px;
}
&__content {
flex: 1;
display: flex;
gap: 16px;
gap: vars.$space-m;
align-items: center;
flex-wrap: wrap;
}
&__type { font-weight: 500; }
&__times { color: #1a3a5c; }
&__times { color: colors.$blue-dark; }
@media (max-width: 768px) {
@media (max-width: 640px) {
&__content {
flex-direction: column;
align-items: flex-start;
gap: vars.$space-s;
}
}
}
.transfer-time {
font-weight: 500;
color: #ff9000;
color: colors.$orange;
}