mirror of
https://github.com/HSLdevcom/digitransit-ui
synced 2025-09-22 06:32:48 +02:00
2586 lines
49 KiB
SCSS
2586 lines
49 KiB
SCSS
@charset "UTF-8";
|
|
|
|
$topbar-height: 40px;
|
|
$itinerary-tab-switch-height: 48px;
|
|
|
|
@mixin getCircleSvg($stroke, $fill) {
|
|
svg {
|
|
stroke: $stroke;
|
|
fill: $fill;
|
|
}
|
|
//content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle stroke-width='2' stroke='#{rgba($stroke, 0.9999999)}' fill='#{$fill}' cx='11' cy='10' r='4'/></svg>");
|
|
}
|
|
|
|
@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);
|
|
}
|
|
&.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);
|
|
}
|
|
&.via {
|
|
@include getCircleSvg($walk-color, $fill);
|
|
}
|
|
&.call {
|
|
@include getCircleSvg($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: rgba(254, 209, 0, 0.1);
|
|
border: 1px solid #fed100;
|
|
border-radius: 3px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.description-container {
|
|
flex: 1;
|
|
margin-left: $padding-medium;
|
|
}
|
|
}
|
|
}
|
|
|
|
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 #dddddd;
|
|
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: 325;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
letter-spacing: -0.03em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.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: 11px 10px 10px 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: 325;
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
/* identical to box height */
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: -0.03em;
|
|
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.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: rgba(100, 190, 30, 0.15);
|
|
border-radius: 4px;
|
|
|
|
.itinerary-co2-value {
|
|
min-width: 29px;
|
|
height: 16px;
|
|
|
|
font-family: $font-family;
|
|
font-style: normal;
|
|
font-weight: 325;
|
|
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;
|
|
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 #dddddd;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.itinerary-summary-container {
|
|
padding: 0 65px;
|
|
}
|
|
|
|
.itinerary-summary {
|
|
position: relative;
|
|
|
|
.divider-top,
|
|
.divider-bottom {
|
|
position: relative;
|
|
width: 400px;
|
|
height: 1px;
|
|
left: -5px;
|
|
border-top: 1px solid #dddddd;
|
|
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: #E5F2FA;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.ticket-type-agency-link {
|
|
flex: 0;
|
|
.external-link-container {
|
|
width: 120px;
|
|
text-align: center;
|
|
border-radius: 25px;
|
|
border: 1px solid #888;
|
|
min-height: 28px;
|
|
.external-link {
|
|
font-weight: $font-weight-medium;
|
|
color: $primary-color;
|
|
font-size: $font-size-small;
|
|
padding-top: 3px;
|
|
}
|
|
&:hover {
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
@media print {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.itinerary-ticket-type, .itinerary-co2-line {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
white-space: normal;
|
|
line-height: 1.33;
|
|
|
|
.ticket-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 11px 10px 10px 15px;
|
|
@include min-width(tablet) {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
.ticket-type-agency-link {
|
|
align-self: center;
|
|
}
|
|
|
|
.ticket-type-zone {
|
|
@include font-book;
|
|
align-items: center;
|
|
color: $gray;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.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: #666666;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.ticket-type-agency-link {
|
|
flex-grow: 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
&.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);
|
|
}
|
|
&.via {
|
|
@include setModeCircles($walk-color);
|
|
}
|
|
&.call {
|
|
@include setModeCircles($bus-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.leg-before-circle.airport-wait {
|
|
stroke: #888888;
|
|
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 {
|
|
.leg-before-line {
|
|
background-position-y: 0;
|
|
height: 20%;
|
|
&.top {
|
|
height: 22%;
|
|
top: 16%;
|
|
}
|
|
&.middle {
|
|
top: 59%;
|
|
height: 13%;
|
|
}
|
|
&.bottom {
|
|
top: 92%;
|
|
height: 10%;
|
|
}
|
|
}
|
|
}
|
|
.itinerary-route-number {
|
|
position: absolute;
|
|
&.first {
|
|
top: 42%;
|
|
}
|
|
&.second {
|
|
top: 76%;
|
|
}
|
|
}
|
|
&.bicycle,
|
|
&.bicycle_walk {
|
|
.route-number {
|
|
.icon {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.car {
|
|
.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);
|
|
}
|
|
.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: #888888;
|
|
}
|
|
&.wait {
|
|
height: 50%;
|
|
border: 4px solid;
|
|
border-radius: 4px;
|
|
&.bottom {
|
|
height: 18%;
|
|
top: 85%;
|
|
&.return-citybike {
|
|
top: calc(85% - 13px);
|
|
}
|
|
}
|
|
}
|
|
&.bicycle {
|
|
border-left: 6px solid #ccc;
|
|
border-radius: 3px;
|
|
top: 30px;
|
|
height: 32%;
|
|
&.bottom {
|
|
height: 15%;
|
|
top: 88%;
|
|
}
|
|
}
|
|
&.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-park-walk {
|
|
background-size: 100% auto;
|
|
background-position-y: 8px;
|
|
background-position-x: 0px;
|
|
background-repeat: no-repeat repeat;
|
|
border: none;
|
|
width: 6px;
|
|
left: 8px;
|
|
}
|
|
&.call {
|
|
border-left: dashed 1px;
|
|
border-right: dashed 1px;
|
|
border-color: #aaaaaa;
|
|
width: 6px;
|
|
height: 100%;
|
|
background: $white;
|
|
}
|
|
&.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: 0px 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: 0px;
|
|
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: 0px;
|
|
}
|
|
|
|
.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 #dddddd;
|
|
}
|
|
.interline-info-container {
|
|
margin-top: 12px;
|
|
border: 1px solid #dddddd;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
padding: 7px 13px 11px 0;
|
|
color: #333333;
|
|
.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-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-bike {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 34px;
|
|
color: #333;
|
|
padding: 0.625em 0;
|
|
border-top: 1px solid #ddd;
|
|
.citybike-leg-header {
|
|
font-size: 15px;
|
|
font-weight: $font-weight-book;
|
|
max-height: 33px;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.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: 0px 3px 0px 3px;
|
|
background-color: #f4f4f5;
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
.stop-code-container {
|
|
padding-top: 5px;
|
|
.itinerary-stop-code {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
> :first-child {
|
|
flex-grow: 1;
|
|
max-width: calc(100% - 20px);
|
|
}
|
|
}
|
|
.itinerary-transit-leg-route-bike {
|
|
display: flex;
|
|
background-color: #f4f4f5;
|
|
border-radius: 5px;
|
|
margin-bottom: 8px;
|
|
color: $black;
|
|
.link-to-stop {
|
|
right: 10px;
|
|
position: absolute;
|
|
top: 34%;
|
|
}
|
|
.citybike-itinerary {
|
|
padding: 7px;
|
|
.citybike-itinerary-text-container {
|
|
display: flow-root;
|
|
}
|
|
.headsign {
|
|
font-weight: $font-weight-medium;
|
|
display: block;
|
|
font-size: 15px;
|
|
padding: 2px 0 3px 6px;
|
|
}
|
|
span.itinerary-stop-code {
|
|
margin-left: 5px;
|
|
padding: 0px 6px;
|
|
border-radius: 10%;
|
|
}
|
|
.citybike-station-text {
|
|
padding-left: 6px;
|
|
font-size: 13px;
|
|
font-weight: $font-weight-book;
|
|
color: #666666;
|
|
}
|
|
.citybike-icon {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.citybike-info {
|
|
position: absolute;
|
|
bottom: 74px;
|
|
}
|
|
}
|
|
}
|
|
.itinerary-transit-leg-route {
|
|
display: flex;
|
|
background-color: #f4f4f5;
|
|
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;
|
|
}
|
|
.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 #f4f4f5;
|
|
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 {
|
|
border-radius: 5px;
|
|
border: solid 1px #dddddd;
|
|
margin-bottom: 10px;
|
|
|
|
.disruption-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 18px;
|
|
margin: 3px 0px 8px 0;
|
|
.inline-icon {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
.notification-icon {
|
|
align-self: baseline;
|
|
}
|
|
|
|
.info-notification {
|
|
.info-content {
|
|
flex: 1;
|
|
font-size: $font-size-xsmall;
|
|
color: #333333;
|
|
margin: 0 4px 0 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: #333333;
|
|
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: 0px;
|
|
}
|
|
|
|
.disruption-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 15px 8px 12px;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-action {
|
|
border-top: 1px solid #ddd;
|
|
padding: 1.2em 0;
|
|
margin-bottom: 1px;
|
|
height: 60px;
|
|
font-size: 0.9375rem;
|
|
@extend .itinerary-leg-text-gray;
|
|
.itinerary-leg-action-content {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
:first-child {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
.route-number {
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 1.2em;
|
|
left: -1.6em;
|
|
.icon {
|
|
font-size: 24px;
|
|
.walk {
|
|
background-color: $white;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itinerary-leg-intermediate-stops {
|
|
margin-top: 12px;
|
|
padding-bottom: 0px;
|
|
@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: #FFFFFF;
|
|
border: 1px solid #DDDDDD;
|
|
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-color;
|
|
max-width: 100%;
|
|
}
|
|
.external-link-icon-outer {
|
|
color: white;
|
|
}
|
|
.external-link-icon {
|
|
color: $link-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 #dddddd;
|
|
width: 400px;
|
|
@media print {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&.swipe-mobile-divider {
|
|
border-bottom: 1px solid #dddddd;
|
|
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: 0px;
|
|
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);
|
|
//background-color: rgba(254, 209, 0, 0.3);
|
|
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 {
|
|
padding-top: $padding-medium;
|
|
&.call,
|
|
&.disruption {
|
|
padding-top: 2em;
|
|
padding-right: 1em;
|
|
width: 90%;
|
|
background-color: rgba(254, 209, 0, 0.3);
|
|
}
|
|
}
|
|
.warning-message {
|
|
white-space: normal;
|
|
color: $black;
|
|
.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: 10px;
|
|
margin-bottom: 1.5em;
|
|
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;
|
|
&.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;
|
|
border-radius: 5px;
|
|
padding: 18px 32px 18px 16px;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
&.caution {
|
|
background: #f4f4f5;
|
|
}
|
|
&.info {
|
|
background: #e5f1f9;
|
|
}
|
|
}
|
|
|
|
.in-the-past {
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.routing-feedback-container {
|
|
background-color: #f4f4f4;
|
|
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;
|
|
}
|