mirror of
https://github.com/HSLdevcom/digitransit-ui
synced 2025-07-27 23:35:15 +02:00
3367 lines
57 KiB
SCSS
3367 lines
57 KiB
SCSS
@charset "UTF-8";
|
|
|
|
$topbar-height: 40px;
|
|
$itinerary-tab-switch-height: 48px;
|
|
|
|
@mixin getCircleSvg($stroke, $fill) {
|
|
svg {
|
|
stroke: $stroke;
|
|
fill: $fill;
|
|
}
|
|
}
|
|
|
|
@mixin setModeCircles($fill) {
|
|
&.bus,
|
|
&.bus-local {
|
|
@include getCircleSvg($bus-color, $fill);
|
|
}
|
|
|
|
&.bus-express {
|
|
@include getCircleSvg($bus-express-color, $fill);
|
|
}
|
|
|
|
&.speedtram {
|
|
@include getCircleSvg($speedtram-color, $fill);
|
|
}
|
|
|
|
&.airplane {
|
|
@include getCircleSvg($airplane-color, $fill);
|
|
}
|
|
|
|
&.tram {
|
|
@include getCircleSvg($tram-color, $fill);
|
|
}
|
|
|
|
&.subway {
|
|
@include getCircleSvg($metro-color, $fill);
|
|
}
|
|
|
|
&.rail {
|
|
@include getCircleSvg($rail-color, $fill);
|
|
}
|
|
|
|
&.ferry {
|
|
@include getCircleSvg($ferry-color, $fill);
|
|
}
|
|
|
|
&.ferry-external {
|
|
@include getCircleSvg($external-feed-color, $fill);
|
|
}
|
|
|
|
&.citybike {
|
|
@include getCircleSvg($citybike-color, $fill);
|
|
}
|
|
|
|
&.walk {
|
|
@include getCircleSvg($walk-color, $fill);
|
|
}
|
|
|
|
&.wait {
|
|
@include getCircleSvg($wait-color, $fill);
|
|
}
|
|
|
|
&.bicycle {
|
|
@include getCircleSvg($bicycle-color, $fill);
|
|
}
|
|
|
|
&.bicycle_walk {
|
|
@include getCircleSvg($walk-color, $fill);
|
|
}
|
|
|
|
&.car {
|
|
@include getCircleSvg($car-color, $fill);
|
|
}
|
|
|
|
&.car_boarding {
|
|
@include getCircleSvg($car-color, $fill);
|
|
}
|
|
|
|
&.via {
|
|
@include getCircleSvg($walk-color, $fill);
|
|
}
|
|
|
|
&.call {
|
|
@include getCircleSvg($call-agency-color, $fill);
|
|
}
|
|
|
|
&.scooter {
|
|
@include getCircleSvg($scooter-color, $fill);
|
|
}
|
|
|
|
&.taxi-external {
|
|
@include getCircleSvg($external-feed-color, $fill);
|
|
}
|
|
|
|
&.replacement-bus {
|
|
@include getCircleSvg($replacement-bus-color, $fill);
|
|
}
|
|
}
|
|
|
|
.itinerary-list-container {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.itinerary-tabs__scroll {
|
|
background: $white;
|
|
padding: 0 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.itinerary-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
transform: scale(1); // start a new z-index context here
|
|
position: relative;
|
|
top: 5px;
|
|
|
|
.disclaimer-container {
|
|
background-color: $disclaimer-background-color;
|
|
font-weight: $font-weight-disclaimer;
|
|
border: 1px solid $disclaimer-border-color;
|
|
border-radius: $border-radius-disclaimer;
|
|
display: flex;
|
|
font-size: $font-size-xsmall;
|
|
padding: $padding-medium;
|
|
white-space: normal;
|
|
|
|
&.unknown-fare-disclaimer__leg {
|
|
@include font-book;
|
|
|
|
color: $gray;
|
|
flex-direction: column;
|
|
margin-bottom: $padding-large;
|
|
margin-top: $padding-medium;
|
|
|
|
.accent {
|
|
@include font-medium;
|
|
|
|
color: $black;
|
|
}
|
|
|
|
.ticket-info {
|
|
margin-top: $padding-medium;
|
|
|
|
.agency-link {
|
|
color: $primary-color;
|
|
display: block;
|
|
margin-top: $padding-medium;
|
|
|
|
a {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.unknown-fare-disclaimer__top {
|
|
@include font-medium;
|
|
|
|
margin-bottom: 5px;
|
|
margin-top: 9px;
|
|
|
|
.icon-container {
|
|
flex: 0;
|
|
font-size: 20px;
|
|
|
|
.icon {
|
|
color: $primary-color;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
}
|
|
|
|
.description-container {
|
|
flex: 1;
|
|
margin-left: $padding-medium;
|
|
}
|
|
}
|
|
}
|
|
|
|
.route-disclaimer-container {
|
|
background-color: $disclaimer-background-color;
|
|
font-weight: $font-weight-disclaimer;
|
|
border: 1px solid $disclaimer-border-color;
|
|
border-radius: $border-radius-disclaimer;
|
|
display: flex;
|
|
font-size: $font-size-xsmall;
|
|
padding: var(--space-s) $padding-medium;
|
|
white-space: normal;
|
|
margin-bottom: 5px;
|
|
margin-top: 9px;
|
|
|
|
.icon-container {
|
|
flex: 0;
|
|
font-size: 20px;
|
|
|
|
.icon {
|
|
&.info {
|
|
color: $primary-color;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.disclaimer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 0.7em;
|
|
|
|
.disclaimer-header {
|
|
display: flex;
|
|
font-size: $font-size-normal;
|
|
font-weight: $font-weight-medium;
|
|
line-height: 22px;
|
|
margin: 0 0 4px;
|
|
color: #333;
|
|
}
|
|
|
|
.disclaimer-content {
|
|
display: flex;
|
|
font-size: $font-size-normal;
|
|
margin-bottom: 8px;
|
|
color: #666;
|
|
line-height: 18px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.external-link {
|
|
color: $link-color;
|
|
text-decoration: none;
|
|
font-weight: $font-weight-medium;
|
|
|
|
.icon-container {
|
|
padding-left: var(--space-xxs);
|
|
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.itinerary-ticket-information,
|
|
.itinerary-co2-information {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.itinerary-leg-container {
|
|
.zone-dual {
|
|
min-height: 4em;
|
|
}
|
|
|
|
.zone-triple {
|
|
min-height: 6em;
|
|
}
|
|
|
|
.zone-dual,
|
|
.zone-triple {
|
|
.itinerary-time-column {
|
|
.time-column-zone-icons-container {
|
|
&.intermediate-leg {
|
|
top: -12px;
|
|
|
|
.zone-icon-container {
|
|
.circle {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
.zone-icon-container.zone-delimiter {
|
|
top: -4px;
|
|
|
|
.circle {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.zone-previous {
|
|
.leg-before-circle {
|
|
bottom: 0;
|
|
}
|
|
|
|
.leg-before-line {
|
|
height: 120%;
|
|
top: 0;
|
|
}
|
|
|
|
.itinerary-instruction-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
|
|
> div {
|
|
flex-grow: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-co2-information {
|
|
&.mobile {
|
|
padding-left: 5px;
|
|
|
|
.divider-bottom {
|
|
width: 365px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-co2-line {
|
|
position: relative;
|
|
|
|
.divider-top,
|
|
.divider-bottom {
|
|
border-bottom: 1px solid #ddd;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
|
|
@media print {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.co2-description-container {
|
|
display: flex;
|
|
gap: 20.01px;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
|
|
.icon-container {
|
|
.icon {
|
|
&.co2-leaf {
|
|
height: 25.06px;
|
|
width: 25.6px;
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-co2-description {
|
|
width: auto;
|
|
left: 70px;
|
|
top: 528px;
|
|
|
|
&.simple {
|
|
width: auto;
|
|
}
|
|
|
|
font-family: $font-family;
|
|
font-style: normal;
|
|
font-weight: $itinerary-co2-font-weight;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
letter-spacing: -0.03em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.emissions-info-link {
|
|
text-decoration: none;
|
|
font-weight: $font-weight-medium;
|
|
color: $primary-color;
|
|
font-size: $font-size-small;
|
|
}
|
|
|
|
.co2-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 5px 10px 5px 15px;
|
|
|
|
&.mobile {
|
|
flex-direction: row;
|
|
margin: 11px 10px 10px 6px;
|
|
}
|
|
|
|
@include min-width(tablet) {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.co2-title-container {
|
|
display: flex;
|
|
gap: 11.34px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.icon-container {
|
|
.icon {
|
|
&.co2-leaf {
|
|
height: 13.91px;
|
|
width: 14.22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-co2-title {
|
|
max-width: 250px;
|
|
height: 18px;
|
|
left: 48px;
|
|
top: 528px;
|
|
font-family: $font-family;
|
|
font-style: normal;
|
|
font-weight: $itinerary-co2-font-weight;
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
|
|
/* identical to box height */
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: -0.03em;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.itinerary-co2-value-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 2px 4px;
|
|
gap: 4px;
|
|
min-width: 37px;
|
|
height: 20px;
|
|
right: 82.38px;
|
|
top: 416px;
|
|
overflow: visible;
|
|
background: #f1f8eb;
|
|
border-radius: 4px;
|
|
|
|
.itinerary-co2-value {
|
|
min-width: 29px;
|
|
height: 16px;
|
|
font-family: $font-family;
|
|
font-style: normal;
|
|
font-weight: $itinerary-co2-badge-font-weight;
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
color: #3b7f00;
|
|
|
|
/* identical to box height */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.itinerary-main {
|
|
display: block;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.distance--itinerary-summary {
|
|
padding-left: 27px;
|
|
}
|
|
|
|
.duration--itinerary-summary,
|
|
.distance--itinerary-summary {
|
|
display: inline-flex;
|
|
position: relative;
|
|
top: 11px;
|
|
left: 12px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.driving-summary {
|
|
.icon.car {
|
|
top: 3px;
|
|
}
|
|
}
|
|
|
|
.summary {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.summary-divider {
|
|
height: 1px;
|
|
margin-left: 60px;
|
|
border-bottom: 1px solid #ddd;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.itinerary-summary-container {
|
|
padding: 0 65px;
|
|
}
|
|
|
|
.itinerary-summary {
|
|
position: relative;
|
|
width: 400px;
|
|
margin: 0 60px;
|
|
|
|
.divider-top,
|
|
.divider-bottom {
|
|
position: relative;
|
|
height: 1px;
|
|
border-top: 1px solid #ddd;
|
|
box-sizing: border-box;
|
|
|
|
@media print {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 5px;
|
|
margin-top: 1px;
|
|
position: relative;
|
|
height: 25px;
|
|
width: 25px;
|
|
|
|
&.clock {
|
|
height: 24.22px;
|
|
width: 24.22px;
|
|
top: 3.89px;
|
|
}
|
|
|
|
&.walk {
|
|
height: 25.32px;
|
|
width: 25.32px;
|
|
top: 3.44px;
|
|
}
|
|
|
|
&.bike {
|
|
height: 25.28px;
|
|
width: 25.28px;
|
|
top: 3.36px;
|
|
}
|
|
|
|
&.car {
|
|
height: 25.32px;
|
|
width: 25.32px;
|
|
top: 3.44px;
|
|
}
|
|
}
|
|
|
|
.duration,
|
|
.walk-distance {
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
|
|
span {
|
|
display: block;
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
font-weight: normal;
|
|
letter-spacing: -0.025em;
|
|
color: #666;
|
|
|
|
&::before {
|
|
content: attr(data-text);
|
|
}
|
|
}
|
|
|
|
&.no-duration {
|
|
align-self: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.citybike-duration-infobox {
|
|
display: flex;
|
|
height: auto;
|
|
background: $infobox-color-generic-blue;
|
|
border-radius: 5px;
|
|
margin: 15px;
|
|
padding: 15px;
|
|
justify-content: space-between;
|
|
flex-grow: 1;
|
|
align-items: start;
|
|
|
|
.left-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 15%;
|
|
padding-right: 10px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.right-column {
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
font-weight: $font-weight-medium;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.desktop .citybike-duration-infobox {
|
|
margin: 15px 3.125em 15px 4.125em;
|
|
}
|
|
|
|
.itinerary-icon-container {
|
|
position: absolute;
|
|
width: 17px;
|
|
height: 17px;
|
|
left: calc(-6px + 0.5rem);
|
|
z-index: 10;
|
|
|
|
&.start {
|
|
top: 12px;
|
|
}
|
|
|
|
&.bike-park {
|
|
width: 18px;
|
|
height: 18px;
|
|
top: 8px;
|
|
|
|
.icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
&.car-park {
|
|
width: 18px;
|
|
height: 18px;
|
|
top: 10px;
|
|
|
|
.icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
|
|
&.taxi {
|
|
.icon-container {
|
|
.icon {
|
|
width: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-icon {
|
|
position: absolute;
|
|
margin-left: -21px;
|
|
margin-top: 2px;
|
|
fill: currentcolor;
|
|
|
|
@mixin itineraryTableIcons {
|
|
font-size: $font-size-normal;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: -0.2em;
|
|
background-color: $white;
|
|
}
|
|
|
|
&.to-it {
|
|
@include itineraryTableIcons;
|
|
|
|
top: 4px;
|
|
}
|
|
|
|
&.from-it {
|
|
@include itineraryTableIcons;
|
|
|
|
top: -4px;
|
|
}
|
|
|
|
&.via-it {
|
|
@include itineraryTableIcons;
|
|
}
|
|
}
|
|
|
|
.itinerary-search-icon {
|
|
color: $primary-color;
|
|
}
|
|
|
|
.duration,
|
|
.walk-distance {
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.itinerary-disclaimer {
|
|
margin: 17px 15px 15px 15px;
|
|
white-space: normal;
|
|
color: #666;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.itinerary-empty-space {
|
|
min-height: 10px;
|
|
}
|
|
|
|
.mobile .itinerary-disclaimer {
|
|
padding: 0 0.6em;
|
|
}
|
|
|
|
.itinerary-ticket-external-link {
|
|
align-self: center;
|
|
|
|
.external-link-container {
|
|
width: 140px;
|
|
text-align: center;
|
|
border-radius: 25px;
|
|
border: 1px solid #666;
|
|
min-height: 30px;
|
|
|
|
a {
|
|
font-weight: $font-weight-medium;
|
|
color: #666;
|
|
font-size: $font-size-small;
|
|
padding-top: 3px;
|
|
}
|
|
}
|
|
|
|
.external-link-icon-outer {
|
|
color: white;
|
|
}
|
|
|
|
.external-link-icon {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.ticket-title {
|
|
min-width: 140px;
|
|
}
|
|
|
|
.itinerary-ticket-information,
|
|
.itinerary-co2-information {
|
|
display: flex;
|
|
color: $gray;
|
|
font-weight: $font-weight-book;
|
|
font-size: $font-size-small;
|
|
margin: 0 10px;
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
.itinerary-ticket-type,
|
|
.itinerary-co2-line {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
white-space: normal;
|
|
line-height: 1.33;
|
|
margin: 4px 0;
|
|
|
|
.ticket-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 2px 10px 2px 15px;
|
|
|
|
@include min-width(tablet) {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
.ticket-type-zone {
|
|
@include font-book;
|
|
|
|
align-items: center;
|
|
color: $gray;
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
|
|
.unknown-fare-container {
|
|
display: flex;
|
|
font-size: $font-size-normal;
|
|
|
|
.ticket-description {
|
|
padding-left: 6px;
|
|
}
|
|
}
|
|
|
|
&.multi-component + .multi-component {
|
|
border-top: 1px solid $light-gray;
|
|
padding-top: $padding-medium;
|
|
}
|
|
|
|
.fare-container {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
font-size: $font-size-normal;
|
|
}
|
|
|
|
.ticket-description {
|
|
display: flex;
|
|
color: #666;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ticket-identifier {
|
|
@include font-medium;
|
|
|
|
color: $black;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 1px;
|
|
|
|
svg {
|
|
color: $primary-color;
|
|
height: 18px;
|
|
width: 18px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.zone-ticket-multiple-options {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0;
|
|
|
|
span + span {
|
|
margin-left: $padding-xsmall;
|
|
}
|
|
|
|
.or {
|
|
padding: 0 3px;
|
|
flex: 0;
|
|
}
|
|
}
|
|
|
|
.zone-ticket {
|
|
color: #333;
|
|
letter-spacing: -0.03em;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
|
|
&.purchase {
|
|
color: #ffff;
|
|
}
|
|
}
|
|
|
|
.desktop {
|
|
.itinerary-ticket-information,
|
|
.itinerary-co2-information {
|
|
font-size: 0.9375rem;
|
|
width: 400px;
|
|
margin: 0 60px;
|
|
}
|
|
}
|
|
|
|
.call-agency {
|
|
background-color: yellow;
|
|
}
|
|
|
|
.leg-before-circle {
|
|
&.top {
|
|
top: 7px;
|
|
}
|
|
|
|
position: absolute;
|
|
z-index: 9;
|
|
|
|
@include setModeCircles(#fff);
|
|
|
|
&.circle-fill {
|
|
&.bus,
|
|
&.bus-local {
|
|
@include setModeCircles($bus-color);
|
|
}
|
|
|
|
&.airplane {
|
|
@include setModeCircles($airplane-color);
|
|
}
|
|
|
|
&.tram {
|
|
@include setModeCircles($tram-color);
|
|
}
|
|
|
|
&.subway {
|
|
@include setModeCircles($metro-color);
|
|
}
|
|
|
|
&.rail {
|
|
@include setModeCircles($rail-color);
|
|
}
|
|
|
|
&.ferry {
|
|
@include setModeCircles($ferry-color);
|
|
}
|
|
|
|
.ferry-external {
|
|
@include setModeCircles($external-feed-color);
|
|
}
|
|
|
|
&.funicular {
|
|
@include setModeCircles($funicular-color);
|
|
}
|
|
|
|
&.citybike {
|
|
@include setModeCircles($citybike-color);
|
|
}
|
|
|
|
&.airport-wait {
|
|
@include setModeCircles($wait-color);
|
|
}
|
|
|
|
&.walk {
|
|
@include setModeCircles($walk-color);
|
|
}
|
|
|
|
&.wait {
|
|
@include setModeCircles($wait-color);
|
|
}
|
|
|
|
&.bicycle {
|
|
@include setModeCircles($bicycle-color);
|
|
}
|
|
|
|
&.bicycle_walk {
|
|
@include setModeCircles($walk-color);
|
|
}
|
|
|
|
&.car {
|
|
@include setModeCircles($car-color);
|
|
}
|
|
|
|
&.car_boarding {
|
|
@include setModeCircles($car-color);
|
|
}
|
|
|
|
&.via {
|
|
@include setModeCircles($walk-color);
|
|
}
|
|
|
|
&.call {
|
|
@include setModeCircles($call-agency-color);
|
|
}
|
|
|
|
&.scooter {
|
|
@include setModeCircles($scooter-color);
|
|
}
|
|
|
|
&.taxi-external {
|
|
@include setModeCircles($external-feed-color);
|
|
}
|
|
|
|
&.replacement-bus {
|
|
@include setModeCircles($replacement-bus-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.leg-before-circle.airport-wait {
|
|
stroke: #888;
|
|
fill: white;
|
|
}
|
|
|
|
.row.itinerary-row {
|
|
font-size: 15px;
|
|
position: relative;
|
|
line-height: 1.1;
|
|
color: #aaa;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
|
|
&.padding-top {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.leg-before {
|
|
min-width: 25px;
|
|
max-width: 25px;
|
|
position: relative;
|
|
|
|
&.first-leg {
|
|
.leg-before-line.bicycle:not(.bottom) {
|
|
top: 38px;
|
|
height: 25%;
|
|
}
|
|
}
|
|
|
|
&.long.first {
|
|
.leg-before-line {
|
|
&.top {
|
|
height: 16%;
|
|
top: 22%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.long {
|
|
&.bicycle {
|
|
.leg-before-line {
|
|
background-position-y: 0;
|
|
height: 20%;
|
|
|
|
&.top {
|
|
height: 22%;
|
|
top: 16%;
|
|
}
|
|
|
|
&.middle {
|
|
top: 59%;
|
|
height: 13%;
|
|
}
|
|
|
|
&.bottom {
|
|
top: 92%;
|
|
height: 10%;
|
|
}
|
|
|
|
&.between-transit {
|
|
&.top {
|
|
height: 16%;
|
|
top: 12%;
|
|
}
|
|
|
|
&.middle {
|
|
top: 44%;
|
|
height: 11%;
|
|
}
|
|
|
|
&.second-middle {
|
|
top: 69%;
|
|
height: 11%;
|
|
}
|
|
|
|
&.bottom {
|
|
top: 94%;
|
|
height: 9%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.car {
|
|
.leg-before-line {
|
|
background-position-y: 0;
|
|
height: 20%;
|
|
|
|
&.before-transit {
|
|
&.top {
|
|
height: 22%;
|
|
top: 16%;
|
|
}
|
|
|
|
&.middle {
|
|
top: 59%;
|
|
height: 30%;
|
|
}
|
|
|
|
&.bottom {
|
|
top: 92%;
|
|
height: 10%;
|
|
background-position-y: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&.after-transit {
|
|
&.top {
|
|
height: 10%;
|
|
top: 16%;
|
|
}
|
|
|
|
&.middle {
|
|
top: 28%;
|
|
height: 45%;
|
|
}
|
|
|
|
&.bottom {
|
|
top: 92%;
|
|
height: 10%;
|
|
}
|
|
}
|
|
|
|
&.between-transit {
|
|
&.top {
|
|
height: 10%;
|
|
top: 12%;
|
|
}
|
|
|
|
&.middle {
|
|
top: 21%;
|
|
height: 34%;
|
|
}
|
|
|
|
&.second-middle {
|
|
top: 69%;
|
|
height: 23%;
|
|
}
|
|
|
|
&.bottom {
|
|
top: 92%;
|
|
height: 10%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-route-number {
|
|
position: absolute;
|
|
|
|
&.first {
|
|
top: 42%;
|
|
}
|
|
|
|
&.second {
|
|
top: 76%;
|
|
}
|
|
}
|
|
|
|
.itinerary-route-number.between-transit {
|
|
position: absolute;
|
|
|
|
&.first {
|
|
top: 31%;
|
|
}
|
|
|
|
&.second {
|
|
top: 57%;
|
|
}
|
|
|
|
&.third {
|
|
top: 82%;
|
|
}
|
|
}
|
|
|
|
&.scooter,
|
|
&.bicycle,
|
|
&.bicycle_walk {
|
|
.route-number {
|
|
.icon {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.scooter {
|
|
.route-number {
|
|
top: 64%;
|
|
right: 1px;
|
|
|
|
.icon-container .icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.walk,
|
|
&.bicycle {
|
|
:last-child {
|
|
bottom: initial;
|
|
}
|
|
|
|
.route-number {
|
|
top: 64%;
|
|
right: 1px;
|
|
|
|
.icon-container .icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
&.via {
|
|
.route-number {
|
|
top: 67%;
|
|
}
|
|
|
|
.itinerary-icon-container {
|
|
top: 7px;
|
|
}
|
|
|
|
.leg-before-line {
|
|
&.walk {
|
|
height: 55%;
|
|
background-position-y: 3px;
|
|
}
|
|
|
|
&.bottom {
|
|
height: 19%;
|
|
background-position-y: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.taxi-external {
|
|
.route-number {
|
|
top: 60%;
|
|
|
|
.icon-container {
|
|
.icon {
|
|
fill: black;
|
|
color: transparent;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.leg-before-line {
|
|
&.taxi-external {
|
|
height: calc(85px + var(--taxi-leg-line-top));
|
|
background-position-y: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&.bottom {
|
|
background-position-y: 5px;
|
|
border-radius: 3px;
|
|
height: calc(60px + var(--taxi-leg-line-bottom));
|
|
overflow: hidden;
|
|
top: calc(77% - var(--taxi-leg-line-bottom) * 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.car {
|
|
:last-child {
|
|
bottom: initial;
|
|
}
|
|
|
|
.route-number {
|
|
top: 60%;
|
|
right: 1px;
|
|
|
|
.icon-container .icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.leg-before-line {
|
|
&.car {
|
|
height: 25%;
|
|
top: 32%;
|
|
background-position-y: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&.bottom {
|
|
height: 19%;
|
|
background-position-y: 5px;
|
|
border-radius: 3px;
|
|
top: 84%;
|
|
}
|
|
}
|
|
|
|
&.via {
|
|
.route-number {
|
|
top: 67%;
|
|
}
|
|
|
|
.itinerary-icon-container {
|
|
top: 7px;
|
|
}
|
|
|
|
.leg-before-line {
|
|
&.walk {
|
|
height: 55%;
|
|
background-position-y: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&.bottom {
|
|
height: 19%;
|
|
background-position-y: 5px;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.first {
|
|
.leg-before-line {
|
|
top: 42px;
|
|
height: calc(100% - 30px);
|
|
|
|
&.taxi {
|
|
top: 30px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.leg-before-circle {
|
|
&.top {
|
|
top: 35px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:last-child {
|
|
bottom: -2.5em;
|
|
}
|
|
|
|
&.end {
|
|
:last-child {
|
|
top: 4px;
|
|
}
|
|
}
|
|
|
|
&.wait {
|
|
.icon.wait {
|
|
color: #333;
|
|
}
|
|
|
|
:last-child {
|
|
bottom: initial;
|
|
}
|
|
|
|
.route-number {
|
|
top: 64%;
|
|
left: 1px;
|
|
|
|
.icon-container {
|
|
.icon {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.leg-before-line {
|
|
height: 100%;
|
|
top: 0.7em;
|
|
position: absolute;
|
|
left: 7px;
|
|
border-left: 8px solid;
|
|
|
|
&.airport-wait {
|
|
border-radius: 4px;
|
|
border-color: #888;
|
|
}
|
|
|
|
&.wait {
|
|
height: 50%;
|
|
border: 4px solid;
|
|
border-radius: 4px;
|
|
|
|
&.bottom {
|
|
height: 18%;
|
|
top: 85%;
|
|
|
|
&.return-citybike {
|
|
top: calc(85% - 13px);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bicycle {
|
|
border-left: 8px solid #ccc;
|
|
border-radius: 3px;
|
|
top: 30px;
|
|
height: 32%;
|
|
|
|
&.bottom {
|
|
height: 15%;
|
|
top: 88%;
|
|
}
|
|
}
|
|
|
|
&.scooter {
|
|
border-left: 6px solid;
|
|
border-radius: 3px;
|
|
height: calc(58% + var(--scooter-amount));
|
|
left: 8px;
|
|
|
|
&.settings {
|
|
height: calc(56% + var(--scooter-amount));
|
|
}
|
|
|
|
&.bottom {
|
|
height: calc(23% + var(--scooter-amount) * 1.7);
|
|
overflow: hidden;
|
|
top: calc(90% - var(--scooter-amount) * 3.4);
|
|
|
|
&.settings {
|
|
height: calc(30% + var(--scooter-amount));
|
|
top: calc(75% - var(--scooter-amount));
|
|
}
|
|
}
|
|
}
|
|
|
|
&.walk {
|
|
height: 48%;
|
|
|
|
&.bottom {
|
|
background-position-y: 5px;
|
|
height: 19%;
|
|
top: 85%;
|
|
|
|
&.return-citybike {
|
|
margin-top: 6px;
|
|
height: 30%;
|
|
}
|
|
}
|
|
|
|
&.return-citybike {
|
|
height: calc(48% + 13px);
|
|
}
|
|
}
|
|
|
|
&.walk,
|
|
&.bicycle_walk,
|
|
&.car_boarding,
|
|
&.car-park-walk {
|
|
background-size: 100% auto;
|
|
background-position-y: 8px;
|
|
background-position-x: 0;
|
|
background-repeat: no-repeat repeat;
|
|
border: none;
|
|
width: 6px;
|
|
left: 8px;
|
|
}
|
|
|
|
&.car {
|
|
height: 48%;
|
|
border-radius: 3px;
|
|
|
|
&.bottom {
|
|
background-position-y: 5px;
|
|
height: 19%;
|
|
top: 85%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-time-column {
|
|
font-size: 1em;
|
|
text-align: center;
|
|
color: $black;
|
|
margin-bottom: 0.5em;
|
|
flex-grow: 0;
|
|
top: 10px;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.time-column-zone-icons-container {
|
|
position: relative;
|
|
top: 37.5px;
|
|
|
|
&.single {
|
|
top: 52.5px;
|
|
}
|
|
|
|
&.intermediate-leg {
|
|
position: relative;
|
|
float: right;
|
|
top: -16px;
|
|
|
|
.zone-icon-container {
|
|
.circle {
|
|
padding: 0 3px 0 4px;
|
|
}
|
|
|
|
&.zone-delimiter {
|
|
top: -4px;
|
|
|
|
.circle {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
padding: 4px 4px 2px 1px;
|
|
}
|
|
|
|
.unknown {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
&.multi-letter-container {
|
|
padding-right: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zone-icon-container {
|
|
position: relative;
|
|
padding: 4px 4px 7px 1px;
|
|
margin-right: 3px;
|
|
|
|
&.zone-delimiter {
|
|
border-top: 1px solid $light-gray;
|
|
}
|
|
|
|
&.unknown-container {
|
|
padding: 4px 4px 2px 1px;
|
|
}
|
|
|
|
.circle {
|
|
font-size: 16px;
|
|
margin-left: 5px;
|
|
line-height: 20px;
|
|
padding: 0 3px 0 3px;
|
|
height: 1.25rem;
|
|
|
|
&.multi-letter {
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.circle:not(.multi-letter) {
|
|
width: 1.25rem;
|
|
}
|
|
|
|
.unknown {
|
|
margin-right: 0;
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.call {
|
|
.route-number {
|
|
padding-top: 2em;
|
|
}
|
|
}
|
|
|
|
.itinerary-time-column-time {
|
|
margin-bottom: 0.3em;
|
|
margin-left: calc(16px - 1rem);
|
|
color: $black;
|
|
text-decoration: none;
|
|
font-size: 0.9375rem;
|
|
|
|
&.via-arrival-time,
|
|
&.via-departure-time {
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
span {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
&.realtime-icon.realtime {
|
|
top: -0.3em;
|
|
left: -0.4em;
|
|
position: absolute;
|
|
}
|
|
|
|
font-size: 14pt;
|
|
}
|
|
|
|
.unknown {
|
|
font-size: 14pt;
|
|
}
|
|
|
|
.icon-badge {
|
|
font-size: 12pt;
|
|
}
|
|
|
|
.leg-call {
|
|
.icon {
|
|
font-size: 1.8em;
|
|
}
|
|
}
|
|
|
|
.original-time {
|
|
text-decoration: line-through;
|
|
color: $gray;
|
|
}
|
|
|
|
.vehicle-number.long {
|
|
overflow: hidden;
|
|
width: inherit;
|
|
}
|
|
}
|
|
|
|
.special-icon {
|
|
&.call,
|
|
&.disruption {
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
margin-left: 1em;
|
|
position: absolute;
|
|
margin-top: -1em;
|
|
}
|
|
|
|
.icon-badge {
|
|
left: -0.5em;
|
|
top: -0.75em;
|
|
}
|
|
}
|
|
|
|
.itinerary-instruction-column.start::before {
|
|
content: '';
|
|
}
|
|
|
|
.itinerary-instruction-column.end::before {
|
|
content: '';
|
|
}
|
|
|
|
.itinerary-instruction-column.via::before {
|
|
content: '';
|
|
}
|
|
|
|
.itinerary-main > div:nth-child(1)::after {
|
|
content: '';
|
|
}
|
|
|
|
.itinerary-instruction-column.intermediate:not(.to)::after {
|
|
top: 0;
|
|
}
|
|
|
|
.itinerary-instruction-column.walk:not(.to)::after {
|
|
border-left-style: dotted;
|
|
}
|
|
|
|
.itinerary-instruction-column.car-park-walk:not(.to)::after {
|
|
border-left-style: dotted;
|
|
}
|
|
|
|
.itinerary-instruction-column.bicycle_walk:not(.to)::after {
|
|
border-left-style: dotted;
|
|
}
|
|
|
|
.itinerary-instruction-column.citybike_walk:not(.to)::after {
|
|
border-left-style: dotted;
|
|
}
|
|
|
|
.itinerary-instruction-column.via:not(.to)::after {
|
|
border-left-style: dotted;
|
|
}
|
|
|
|
.itinerary-instruction-column {
|
|
@include font-book;
|
|
|
|
padding-left: 0.5em;
|
|
min-height: 4.15em;
|
|
padding-right: 0;
|
|
|
|
.divider {
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
|
|
.interline-info-container {
|
|
margin-top: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
padding: 7px 13px 11px 0;
|
|
color: #333;
|
|
|
|
.bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.no-wrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.icon-container {
|
|
margin-top: 5px;
|
|
min-width: 42px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&.intermediate {
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
min-height: 10px;
|
|
|
|
.itinerary-leg-row-intermediate {
|
|
cursor: pointer;
|
|
color: #333;
|
|
font-size: 0.9375rem;
|
|
font-weight: $font-weight-medium;
|
|
padding-bottom: 22px;
|
|
display: flex;
|
|
|
|
.itinerary-arrow-icon {
|
|
font-size: 10px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.itinerary-mapmarker-icon {
|
|
font-size: 12px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.itinerary-intermediate-stop-name {
|
|
flex-grow: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-icon {
|
|
font-size: 13px;
|
|
margin-left: -24px;
|
|
}
|
|
|
|
.alternative-legs-information {
|
|
color: $gray;
|
|
|
|
:first-child {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&.open {
|
|
.itinerary-search-icon {
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.intermediate-stop-info-container,
|
|
.alternative-legs-info-container {
|
|
@media print {
|
|
span > svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
font-size: 0.9375rem;
|
|
|
|
.itinerary-search-icon {
|
|
font-size: 18px;
|
|
margin-right: 14px;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&.open {
|
|
.itinerary-search-icon {
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.via {
|
|
min-height: 5em;
|
|
}
|
|
|
|
&.end {
|
|
min-height: 3em;
|
|
}
|
|
|
|
.itinerary-leg-row-with-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #333;
|
|
|
|
&.withPadding {
|
|
padding: 0.625em 0;
|
|
}
|
|
|
|
.leg-header {
|
|
font-size: 15px;
|
|
font-weight: $font-weight-book;
|
|
max-height: 33px;
|
|
|
|
&.scooter-return {
|
|
min-height: 40px;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-first-row-return-bike {
|
|
.itinerary-leg-row {
|
|
width: 100%;
|
|
}
|
|
|
|
min-height: 60px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: #333;
|
|
font-size: 0.9375rem;
|
|
align-items: center;
|
|
|
|
&.scooter {
|
|
min-height: 40px;
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-first-row {
|
|
min-height: 60px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
white-space: normal;
|
|
color: $black;
|
|
|
|
@include font-medium;
|
|
|
|
padding: 0.625em 0;
|
|
border-top: 1px solid #ddd;
|
|
font-size: 0.9375rem;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
|
|
&.via {
|
|
height: 78px;
|
|
}
|
|
|
|
.itinerary-leg-row {
|
|
a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
&.first {
|
|
border-top: none;
|
|
}
|
|
|
|
.place {
|
|
font-size: 0.813rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.platform-short {
|
|
@include font-medium;
|
|
|
|
padding-left: 7px;
|
|
font-weight: normal;
|
|
font-size: 0.813rem;
|
|
}
|
|
|
|
.platform-number-wrapper {
|
|
padding: 3px 10px 3px 10px;
|
|
border-radius: 5px;
|
|
margin: 0 3px 0 3px;
|
|
background-color: $background-color-lighter;
|
|
font-weight: $font-weight-medium;
|
|
font-family: $id-font-family;
|
|
}
|
|
|
|
.stop-code-container {
|
|
padding-top: 5px;
|
|
|
|
.itinerary-stop-code {
|
|
margin-left: 0;
|
|
font-family: $id-font-family;
|
|
}
|
|
}
|
|
|
|
.inline-icon {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.itinerary-leg-first-row__arrow {
|
|
@include font-medium;
|
|
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
span.itinerary-stop-code {
|
|
vertical-align: 2px;
|
|
}
|
|
|
|
.icon-container {
|
|
.icon {
|
|
font-size: 24px;
|
|
|
|
&.itinerary-arrow-icon {
|
|
font-size: 10px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
&.itinerary-mapmarker-icon {
|
|
font-size: 12px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> :first-child {
|
|
flex-grow: 1;
|
|
max-width: calc(100% - 20px);
|
|
}
|
|
|
|
&.alight {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.itinerary-transit-leg-route-with-link {
|
|
display: flex;
|
|
background-color: $background-color-lighter;
|
|
border-radius: 5px;
|
|
margin-bottom: 8px;
|
|
color: $black;
|
|
|
|
.link-to-stop {
|
|
right: 10px;
|
|
position: absolute;
|
|
top: 34%;
|
|
}
|
|
|
|
.link-to-e-scooter-operator {
|
|
margin: auto 10px auto auto;
|
|
color: $link-color;
|
|
}
|
|
|
|
.itinerary-with-link {
|
|
display: flex;
|
|
padding: 7px;
|
|
|
|
.itinerary-with-link-text-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.headsign {
|
|
font-weight: $font-weight-medium;
|
|
display: block;
|
|
font-size: 15px;
|
|
padding: 2px 0 3px 6px;
|
|
}
|
|
|
|
.settings {
|
|
font-weight: $font-weight-medium;
|
|
display: block;
|
|
font-size: 15px;
|
|
padding: 2px 0 3px 6px;
|
|
color: $link-color;
|
|
}
|
|
|
|
span.itinerary-stop-code {
|
|
margin-left: 5px;
|
|
padding: 0 6px;
|
|
border-radius: 10%;
|
|
}
|
|
|
|
.citybike-station-text {
|
|
padding-left: 6px;
|
|
font-size: 13px;
|
|
font-weight: $font-weight-book;
|
|
color: #666;
|
|
}
|
|
|
|
.citybike-icon {
|
|
margin: auto;
|
|
float: left;
|
|
|
|
&.small {
|
|
.icon-badge {
|
|
top: 2.33em;
|
|
left: 1.66em;
|
|
}
|
|
}
|
|
|
|
padding-right: 2px;
|
|
|
|
.icon-badge {
|
|
height: 1.34em;
|
|
width: 1.34em;
|
|
top: 2.33em;
|
|
left: 1.66em;
|
|
border-radius: 50%;
|
|
|
|
.badge-text {
|
|
font-family: $font-family-narrow;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.badge-circle {
|
|
stroke-width: 6%;
|
|
}
|
|
|
|
@media print {
|
|
left: 155px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scooter-icon .icon-container .icon {
|
|
background-color: $scooter-color;
|
|
color: #fff;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.citybike-info {
|
|
position: absolute;
|
|
bottom: 74px;
|
|
}
|
|
|
|
.taxi-icon .icon-container .icon {
|
|
display: flex;
|
|
color: $external-feed-color;
|
|
border-radius: 3px;
|
|
font-size: 24px;
|
|
fill: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-transit-leg-route {
|
|
display: flex;
|
|
background-color: $background-color-lighter;
|
|
border-radius: 5px;
|
|
margin-bottom: 2px;
|
|
|
|
&.long-name {
|
|
display: block;
|
|
|
|
.headsign {
|
|
padding: 0 10px 10px 10px;
|
|
width: calc(100% - 42px);
|
|
}
|
|
}
|
|
|
|
.bar-container {
|
|
padding: 7px;
|
|
min-width: calc(3.75em + 14px);
|
|
height: calc(1.5em + 14px);
|
|
font-size: 16px;
|
|
white-space: nowrap;
|
|
|
|
&.long {
|
|
width: calc(100% - 42px);
|
|
}
|
|
|
|
.bar {
|
|
width: 100%;
|
|
background-color: currentcolor;
|
|
height: 1.5em;
|
|
border-radius: $border-radius;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.occupancy-icon-container {
|
|
color: white;
|
|
margin-left: auto;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.vcenter-children {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.subicon-info,
|
|
.subicon-caution {
|
|
font-size: 50% !important;
|
|
}
|
|
|
|
.vehicle-number-container-v {
|
|
width: calc(100% - 1.5em);
|
|
|
|
.vehicle-number {
|
|
color: $white;
|
|
left: 1.5em;
|
|
width: 2.25em;
|
|
text-align: center;
|
|
padding: 4px 0 0 0;
|
|
|
|
&.long {
|
|
left: 1.7em;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.vehicle-number.airplane {
|
|
width: auto;
|
|
padding: 4px 4px 0 0;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
z-index: 1;
|
|
top: 0;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.headsign {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.leg-departure-time {
|
|
margin: 7px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.distance-bold {
|
|
font-weight: 500;
|
|
}
|
|
|
|
&.alternative-leg-suggestion {
|
|
border: 2px solid $background-color-lighter;
|
|
background-color: white;
|
|
}
|
|
|
|
.capacity-icon-container {
|
|
color: #007ac9;
|
|
margin-top: 2px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-text-gray {
|
|
@include font-book;
|
|
|
|
color: $gray;
|
|
}
|
|
|
|
.itinerary-transit-leg-route,
|
|
.itinerary-via-leg-duration {
|
|
@extend .itinerary-leg-text-gray;
|
|
|
|
margin-top: 1px;
|
|
overflow: hidden;
|
|
color: #333;
|
|
font-size: 0.813rem;
|
|
font-weight: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.disruption {
|
|
&.no-header {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
border-radius: 5px;
|
|
border: solid 1px #ddd;
|
|
margin-bottom: 10px;
|
|
|
|
&.no-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 15px 8px 12px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.disruption-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 18px;
|
|
margin: 3px 0 8px 9px;
|
|
|
|
&.no-header {
|
|
margin: 0;
|
|
}
|
|
|
|
.inline-icon {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.notification-icon {
|
|
align-self: baseline;
|
|
}
|
|
|
|
.info-notification {
|
|
.info-content {
|
|
&.no-header {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
flex: 1;
|
|
font-size: $font-size-xsmall;
|
|
color: #333;
|
|
margin: 0 25px 8px 8px;
|
|
line-height: 1.23;
|
|
letter-spacing: -0.43px;
|
|
}
|
|
|
|
.info-header {
|
|
font-size: $font-size-xsmall;
|
|
font-weight: bold;
|
|
margin: 0 4px 0 8px;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
flex: 1;
|
|
font-size: $font-size-xsmall;
|
|
color: #333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
margin: 0 4px 0 8px;
|
|
line-height: 1.23;
|
|
letter-spacing: -0.43px;
|
|
}
|
|
|
|
.disruption-link-arrow {
|
|
margin-top: 5px;
|
|
font-size: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.disruption-link-container {
|
|
border: none;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.disruption-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 15px 8px 12px;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-action-content {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
:first-child {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-action {
|
|
border-top: 1px solid #ddd;
|
|
padding: 1.2em 0;
|
|
margin-bottom: 0.1em;
|
|
min-height: 60px;
|
|
height: auto;
|
|
font-size: 0.9375rem;
|
|
|
|
@extend .itinerary-leg-text-gray;
|
|
|
|
.route-number {
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 1.2em;
|
|
left: -1.6em;
|
|
|
|
.icon {
|
|
font-size: 24px;
|
|
|
|
.walk {
|
|
background-color: $white;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.subway-entrance-info-container {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 24px;
|
|
margin-top: 1px;
|
|
|
|
.subway-entrance-info-text {
|
|
margin-right: 0.4em;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
}
|
|
|
|
.subway-entrance-info-icon {
|
|
width: 24px;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
display: flex;
|
|
margin-right: 1px;
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-intermediate-stops {
|
|
margin-top: 12px;
|
|
padding-bottom: 0;
|
|
|
|
@extend .itinerary-leg-text-gray;
|
|
}
|
|
|
|
.intermediate-stops-button-container {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.intermediate-stops-clickable,
|
|
.alternative-legs-clickable {
|
|
height: 60px;
|
|
|
|
> * {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.icon-container {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.intermediate-stops-amount {
|
|
color: $primary-color;
|
|
font-weight: $font-weight-medium;
|
|
line-height: 1.2;
|
|
border-bottom: none;
|
|
padding-right: 4px;
|
|
|
|
@media print {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.intermediate-stops-duration {
|
|
color: $gray;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-instruction-column.airport-wait {
|
|
.info-message {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
color: #333;
|
|
|
|
.icon-container {
|
|
margin-right: 10px;
|
|
|
|
svg {
|
|
fill: $primary-color;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-instruction-column.airplane {
|
|
.itinerary-leg-first-row {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-map-action {
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
padding-bottom: 6px;
|
|
|
|
.icon-container {
|
|
padding-right: 11px;
|
|
margin-top: 4px;
|
|
|
|
.icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.bp-large .row.itinerary-row .itinerary-instruction-column:not(.to)::after {
|
|
left: 3px;
|
|
}
|
|
|
|
.bp-large .row.itinerary-row {
|
|
margin-left: 0;
|
|
|
|
.itinerary-time-column {
|
|
@include font-medium;
|
|
|
|
.itinerary-time-column-time {
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.unknown {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.icon-badge {
|
|
font-size: 16px;
|
|
top: -1.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row.itinerary-route-information {
|
|
text-align: center;
|
|
left: 2em;
|
|
right: 2em;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
border-top: solid 1px $light-gray;
|
|
border-bottom: solid 1px $light-gray;
|
|
width: calc(100% - 2em);
|
|
|
|
div {
|
|
border-right: solid 1px $light-gray;
|
|
|
|
&.noborder {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
span.itinerary-stop-code {
|
|
@include font-medium;
|
|
|
|
color: $gray;
|
|
border: solid 1px $light-gray;
|
|
border-radius: $border-radius-small;
|
|
padding: 1px 4px;
|
|
margin-right: 5px;
|
|
font-size: 0.688rem;
|
|
}
|
|
|
|
div.itinerary-container-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: height 500ms;
|
|
|
|
&.minimized {
|
|
max-height: 0;
|
|
}
|
|
|
|
&:empty {
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.itinerary-slide-container {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
min-height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.itinerary-leg-agency {
|
|
@extend .itinerary-leg-text-gray;
|
|
|
|
.agency-link-container {
|
|
max-width: calc(100% - 1em);
|
|
white-space: nowrap;
|
|
margin-top: 0.7em;
|
|
margin-bottom: 0.8em;
|
|
|
|
.agency-link {
|
|
font-size: 0.625rem;
|
|
|
|
a {
|
|
font-weight: $font-weight-medium;
|
|
color: $link-button-color;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.external-link-icon-outer {
|
|
color: white;
|
|
}
|
|
|
|
.external-link-icon {
|
|
color: $link-button-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-no-route-found {
|
|
margin: 1em;
|
|
}
|
|
|
|
.swipe-header-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-shadow: none;
|
|
z-index: 10;
|
|
|
|
.desktop-view-divider {
|
|
border-top: 1px solid #ddd;
|
|
width: 400px;
|
|
|
|
@media print {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&.swipe-mobile-divider {
|
|
border-bottom: 1px solid #ddd;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
&.swipe-desktop-view {
|
|
font-size: 12px;
|
|
|
|
&.scrolled {
|
|
box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.swipe-header {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
padding: 10px 0 10px 0;
|
|
outline: 0;
|
|
width: 100%;
|
|
|
|
&.swipe-desktop-view {
|
|
max-width: 250px;
|
|
padding: 15px 0 15px 0;
|
|
}
|
|
}
|
|
|
|
.swipe-tab-indicator {
|
|
min-height: 8px;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.swipe-tab-ball {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
border: solid 2px $medium-gray;
|
|
background-color: $medium-gray;
|
|
transition: 0.5s;
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
|
|
&.selected {
|
|
width: 8px;
|
|
height: 8px;
|
|
border: solid 2px $black;
|
|
background-color: $black;
|
|
}
|
|
|
|
&.decreasing {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
&.decreasing-small {
|
|
width: 2px;
|
|
height: 2px;
|
|
border: solid 1px $medium-gray;
|
|
}
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.swipe-container {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-basis: 200px;
|
|
padding-bottom: 0.7em;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.swipe-scroll-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: white;
|
|
}
|
|
|
|
.swipe-button-container {
|
|
&.active {
|
|
cursor: pointer;
|
|
}
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-grow: 0;
|
|
padding: 0 1em 0 1em;
|
|
}
|
|
|
|
.swipe-button .icon {
|
|
fill: $primary-color;
|
|
height: 1.3em;
|
|
width: 1.3em;
|
|
margin: 0;
|
|
|
|
&.disabled {
|
|
fill: $medium-gray;
|
|
}
|
|
}
|
|
|
|
.swipe-scroll-container {
|
|
flex-basis: 0;
|
|
flex-grow: 1;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.itinerary-tab {
|
|
@include font-medium;
|
|
|
|
letter-spacing: -0.025em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-height: 100%;
|
|
max-height: 100%;
|
|
|
|
.desktop-title {
|
|
.title-container {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.swipeable-tab {
|
|
&.inactive > .itinerary-tab {
|
|
> .itinerary-tabs__scroll {
|
|
display: none;
|
|
}
|
|
|
|
> .itinerary-summary-container > .itinerary-summary {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.false > .itinerary-tab {
|
|
> .itinerary-tabs__scroll {
|
|
width: 100vw;
|
|
}
|
|
|
|
> .itinerary-summary-container {
|
|
width: 100vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.intermediate-stop-no-stops {
|
|
color: $gray;
|
|
font-weight: $font-weight-book;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.desktop .itinerary-intermediate-stop-name {
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.itinerary-tab .itinerary-timeframe {
|
|
background-color: $white;
|
|
}
|
|
|
|
.timeframe-nextday {
|
|
background-color: $gray;
|
|
line-height: 1;
|
|
|
|
@include font-narrow-medium;
|
|
|
|
color: $white;
|
|
border-radius: $border-radius-small;
|
|
padding: $padding-xsmall $padding-small;
|
|
}
|
|
|
|
.date-warning {
|
|
font-size: 0.9375rem;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.itinerary-heading {
|
|
padding-left: 25px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.icon.via {
|
|
color: $black;
|
|
}
|
|
|
|
.itinerary-time-column.via-time-column {
|
|
margin-top: -12px;
|
|
}
|
|
|
|
.via-divider {
|
|
text-align: center;
|
|
overflow: hidden;
|
|
line-height: 1px;
|
|
}
|
|
|
|
.via-divider > .via-divider-line {
|
|
display: inline-block;
|
|
border-top: 1px solid $gray;
|
|
width: 90%;
|
|
margin-right: 5%;
|
|
height: 1px;
|
|
}
|
|
|
|
.itinerary-call-agency-warning {
|
|
width: calc(100% - 23px);
|
|
position: absolute;
|
|
margin-top: 2em;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
border-radius: $border-radius;
|
|
height: calc(100% - 2.3em);
|
|
top: -0.4em;
|
|
}
|
|
|
|
.itinerary-instruction-column.call {
|
|
.itinerary-transit-leg-route.call {
|
|
padding-top: $padding-medium;
|
|
|
|
&.call,
|
|
&.disruption {
|
|
margin-top: $padding-large;
|
|
padding-top: 1em;
|
|
padding-right: 1em;
|
|
padding-left: 0.5em;
|
|
width: 100%;
|
|
background-color: rgba(254, 209, 0, 0.1);
|
|
border: 1px solid #fed100;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.call-icon {
|
|
padding-right: 0.5em;
|
|
height: 5em;
|
|
width: 5em;
|
|
}
|
|
}
|
|
|
|
.warning-message {
|
|
white-space: normal;
|
|
color: $black;
|
|
font-size: $font-size-xsmall;
|
|
|
|
.route-name {
|
|
@include font-medium;
|
|
}
|
|
}
|
|
}
|
|
|
|
.call-button {
|
|
width: calc(100% - 13px);
|
|
|
|
@include font-medium;
|
|
|
|
color: white;
|
|
background: $standalone-btn-color;
|
|
vertical-align: middle;
|
|
border-radius: 1.5em;
|
|
padding: 0.6em 1.5em;
|
|
text-align: center;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
margin-right: auto;
|
|
cursor: pointer;
|
|
|
|
@include font-medium;
|
|
|
|
font-weight: 600;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.itinerary-warning-route-description {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.itinerary-warning-agency-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.agency-link-container {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.vehicle-number-container-v {
|
|
.vehicle-number {
|
|
mask-image: none;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.print-itinerary-button-container {
|
|
display: flex;
|
|
padding: 0 $padding-medium;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.mobile .print-itinerary-button-container {
|
|
display: none;
|
|
}
|
|
|
|
$font-print-decrease: 0.7;
|
|
|
|
.print-itinerary-container {
|
|
background-color: #fff;
|
|
padding-bottom: 2em;
|
|
padding-left: 3em;
|
|
padding-right: 3em;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.print-itinerary-header-container {
|
|
width: 100%;
|
|
display: block;
|
|
padding-bottom: $padding-xlarge;
|
|
|
|
.header {
|
|
font-size: $font-size-xlarge;
|
|
}
|
|
}
|
|
|
|
.print-itinerary-header-top {
|
|
display: flex;
|
|
|
|
.header {
|
|
font-size: 1.62rem;
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.subheader {
|
|
padding-bottom: $padding-large;
|
|
font-size: $font-size-large;
|
|
}
|
|
|
|
.headers-container {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.print-itinerary-header-bottom {
|
|
display: flex;
|
|
border-top: 1px solid #1b1a18;
|
|
border-bottom: 1px solid #1b1a18;
|
|
padding-top: $padding-medium;
|
|
padding-bottom: $padding-medium;
|
|
justify-content: space-between;
|
|
|
|
.print-itinerary-header-single {
|
|
display: flex;
|
|
}
|
|
|
|
.header-icon {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.icon,
|
|
.header-icon {
|
|
color: $black;
|
|
height: 2.45em;
|
|
min-width: 2.4em;
|
|
max-width: 3em;
|
|
text-align: center;
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
.header-details-title {
|
|
font-size: $font-size-small;
|
|
}
|
|
|
|
.header-details-content {
|
|
font-weight: $font-weight-medium;
|
|
font-size: $font-size-large;
|
|
|
|
@media print {
|
|
font-size: $font-size-large * $font-print-decrease;
|
|
}
|
|
}
|
|
|
|
.fare-details {
|
|
background-color: $black;
|
|
color: #fff;
|
|
display: inline-block;
|
|
border-radius: 10px;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
padding: 0.1em;
|
|
padding-right: 0.5em;
|
|
padding-left: 0.5em;
|
|
margin-left: 0.5em;
|
|
-webkit-print-color-adjust: exact;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
span {
|
|
font-size: $font-size-small;
|
|
}
|
|
}
|
|
}
|
|
|
|
.print-itinerary-allLegs {
|
|
width: 100%;
|
|
}
|
|
|
|
.print-itinerary-leg {
|
|
display: block;
|
|
|
|
.print-itinerary-leg-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.itinerary-left {
|
|
width: 4.3em;
|
|
margin-right: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.itinerary-icon {
|
|
position: initial;
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
|
|
.vehicle-number {
|
|
margin-top: -0.6em;
|
|
}
|
|
|
|
.icon {
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
}
|
|
|
|
.wait {
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
.itinerary-timestamp {
|
|
color: $black;
|
|
font-weight: $font-weight-medium;
|
|
font-size: $font-size-large;
|
|
|
|
@media print {
|
|
font-size: $font-size-large * $font-print-decrease;
|
|
}
|
|
}
|
|
|
|
.itinerary-circleline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.from {
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
}
|
|
|
|
.to {
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
|
|
&.end {
|
|
background: #fff;
|
|
}
|
|
|
|
&.wait,
|
|
.airport-wait {
|
|
color: $wait-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line-circle {
|
|
// We need to hide the end of the dotted line behind the markers
|
|
z-index: 1;
|
|
}
|
|
|
|
.leg-before-line {
|
|
height: 95%;
|
|
margin: -4px 0;
|
|
border-left: 8px solid;
|
|
flex-grow: 1;
|
|
|
|
&.walk,
|
|
&.bicycle_walk,
|
|
&.car-park-walk {
|
|
border-color: transparent $walk-color transparent transparent;
|
|
border-style: dotted;
|
|
border-width: 8px;
|
|
margin: -19px 0 -16px -8px;
|
|
}
|
|
|
|
&.wait {
|
|
color: $wait-color;
|
|
}
|
|
}
|
|
|
|
.intermediate-stops {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.itinerary-leg-stopname {
|
|
font-family: $font-family;
|
|
font-weight: $font-weight-medium;
|
|
font-size: $font-size-large;
|
|
color: $black;
|
|
|
|
.stop-code {
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
@media print {
|
|
font-size: $font-size-large * $font-print-decrease;
|
|
}
|
|
}
|
|
|
|
.itinerary-center {
|
|
margin-left: 1em;
|
|
width: 100%;
|
|
border-bottom: 2px dotted #1b1a18;
|
|
margin-bottom: 1em;
|
|
display: flex;
|
|
|
|
&.end {
|
|
border-bottom: none;
|
|
min-height: 11em;
|
|
}
|
|
|
|
&.walk,
|
|
&.bicycle_walk {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.itinerary-leg-stopname {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
.itinerary-instruction {
|
|
color: $black;
|
|
font-size: $font-size-large;
|
|
|
|
@media print {
|
|
font-size: $font-size-large * $font-print-decrease;
|
|
}
|
|
}
|
|
|
|
.intermediate-stops-count {
|
|
font-weight: $font-weight-medium;
|
|
font-size: $font-size-large;
|
|
|
|
@media print {
|
|
font-size: $font-size-large * $font-print-decrease;
|
|
}
|
|
}
|
|
|
|
.intermediate-stops-duration {
|
|
font-weight: $font-weight-medium;
|
|
font-size: $font-size-normal;
|
|
|
|
@media print {
|
|
font-size: $font-size-normal * $font-print-decrease;
|
|
}
|
|
}
|
|
|
|
.intermediate-stop-single {
|
|
font-size: $font-size-normal;
|
|
|
|
@media print {
|
|
font-size: $font-size-normal * $font-print-decrease;
|
|
}
|
|
}
|
|
|
|
.itinerary-center-left {
|
|
width: 66%;
|
|
|
|
@media print {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.itinerary-center-right {
|
|
display: none;
|
|
|
|
&.scooter,
|
|
&.walk,
|
|
&.bicycle_walk,
|
|
&.bicycle {
|
|
display: block;
|
|
margin-left: auto;
|
|
height: 16em;
|
|
width: 16em;
|
|
|
|
@media print {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.transfermap-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.print-itinerary-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
|
|
.background-gradient {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile {
|
|
.date-warning {
|
|
padding-left: 5%;
|
|
}
|
|
|
|
.itinerary-tab {
|
|
position: relative;
|
|
z-index: 2;
|
|
background-color: white;
|
|
}
|
|
|
|
.itinerary-tabs__scroll {
|
|
padding: 0;
|
|
position: relative;
|
|
top: 0.4375rem;
|
|
|
|
&.multirow {
|
|
top: 1.5625rem;
|
|
}
|
|
}
|
|
|
|
.itinerary-main {
|
|
margin: 0 0.4em 0 0.6em;
|
|
}
|
|
|
|
.itinerary-row {
|
|
.leg-before-line {
|
|
&.call {
|
|
height: 105%;
|
|
}
|
|
}
|
|
|
|
.special-icon {
|
|
&.call,
|
|
&.disruption {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-transit-leg-route {
|
|
&.call,
|
|
&.disruption {
|
|
max-width: auto;
|
|
}
|
|
}
|
|
|
|
.print-itinerary {
|
|
right: 1em;
|
|
}
|
|
|
|
.itinerary-summary {
|
|
flex-grow: 0;
|
|
flex-shrink: 0; // for ie mobile
|
|
color: #333;
|
|
position: relative;
|
|
justify-content: unset;
|
|
font-weight: $font-weight-book;
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
top: 0;
|
|
margin-left: 0;
|
|
margin-bottom: 0;
|
|
min-height: 60px;
|
|
white-space: nowrap;
|
|
|
|
.duration,
|
|
.walk-distance {
|
|
align-self: unset;
|
|
margin-right: 9px;
|
|
}
|
|
|
|
.duration--itinerary-summary {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.distance--itinerary-summary {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.divider-bottom {
|
|
left: 10px;
|
|
right: 10px;
|
|
width: calc(100% - 20px);
|
|
|
|
@media print {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-container {
|
|
.address {
|
|
padding-bottom: 0.5em;
|
|
}
|
|
}
|
|
|
|
.summary-notification {
|
|
margin: 0 auto;
|
|
width: calc(100% - 2em);
|
|
max-width: 400px;
|
|
height: max-content;
|
|
border-radius: 5px;
|
|
padding: 18px 32px 18px 16px;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
|
|
&.caution {
|
|
background: $background-color-lighter;
|
|
}
|
|
|
|
&.info {
|
|
background: $info-background-color;
|
|
}
|
|
}
|
|
|
|
.in-the-past {
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.routing-feedback-container {
|
|
background-color: $selector-background-color;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.routing-feedback-header-container {
|
|
padding: 15px;
|
|
}
|
|
|
|
.routing-feedback-link {
|
|
background: white;
|
|
width: 60%;
|
|
border-radius: 50vh;
|
|
padding: 5px;
|
|
color: $primary-color;
|
|
border: 1px solid #888;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.alternative-vehicle-info {
|
|
background-color: $infobox-color-generic-blue;
|
|
margin-top: 30px;
|
|
border: 1px solid $infobox-border-color;
|
|
|
|
.info-icon {
|
|
margin-right: 1em;
|
|
margin-top: 0.5em;
|
|
color: $info-icon-blue;
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
.alternative-vehicle-info-header {
|
|
display: flex;
|
|
font-size: $font-size-normal;
|
|
font-weight: $font-weight-medium;
|
|
line-height: 22px;
|
|
margin: 0 0 4px;
|
|
color: #333;
|
|
}
|
|
|
|
.alternative-vehicle-info-content {
|
|
display: flex;
|
|
font-size: $font-size-normal;
|
|
margin-bottom: 8px;
|
|
color: #666;
|
|
line-height: 18px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
}
|
|
|
|
.rental-vehicle-link {
|
|
.external-link-container {
|
|
border: none !important;
|
|
|
|
.external-link {
|
|
font-weight: $font-weight-medium;
|
|
font-size: 15px;
|
|
color: $link-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|