mirror of
https://github.com/HSLdevcom/digitransit-ui
synced 2026-02-02 14:10:11 +01:00
906 lines
18 KiB
SCSS
906 lines
18 KiB
SCSS
.navi-start-container {
|
|
padding: 0 10px;
|
|
width: 100%;
|
|
|
|
button {
|
|
width: inherit;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: $navigation-background-color;
|
|
margin: 4px 0 0 0;
|
|
padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
|
|
gap: var(--space-s);
|
|
font-weight: normal;
|
|
border-radius: $border-radius-bigger;
|
|
letter-spacing: $letter-spacing;
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
span.icon-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
:last-of-type {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
span.icon-container:last-of-type {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.navigation-icon {
|
|
width: $navigation-icon-size;
|
|
height: $navigation-icon-size;
|
|
}
|
|
}
|
|
|
|
.bar {
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.notification-header {
|
|
font-size: $font-size-normal;
|
|
font-weight: $font-weight-medium;
|
|
text-align: left;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.navi-header-chain {
|
|
display: block;
|
|
}
|
|
|
|
.navi-card-container {
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 0 var(--space-s);
|
|
|
|
svg.mode {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
.navi-transfer-container {
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
margin-bottom: 2px;
|
|
|
|
.navi-transfer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.arrow-center {
|
|
.icon-container {
|
|
display: flex;
|
|
align-self: stretch;
|
|
height: 18px;
|
|
width: 14px;
|
|
|
|
.icon {
|
|
padding: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bar {
|
|
height: 18px;
|
|
|
|
.route-number {
|
|
font-size: $font-size-xxsmall;
|
|
min-width: fit-content;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
|
|
.vcenter-children {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.vehicle-number-container-v {
|
|
display: flex;
|
|
|
|
.vehicle-number {
|
|
color: white;
|
|
padding: 0 8px 0 2px;
|
|
font-size: 15px;
|
|
line-height: 15px;
|
|
}
|
|
|
|
.special-icon {
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.route-info {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
margin-bottom: var(--space-xs);
|
|
}
|
|
|
|
.extension-routenumber,
|
|
.route-info {
|
|
.route-number {
|
|
font-size: $font-size-xxsmall;
|
|
min-width: fit-content;
|
|
height: fit-content;
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
|
|
.vcenter-children {
|
|
.vehicle-number {
|
|
color: white;
|
|
margin-top: 5px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
display: flex;
|
|
}
|
|
|
|
.icon,
|
|
.special-icon {
|
|
height: 24px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.vehicle-number-container-v {
|
|
.vehicle-number {
|
|
margin: 0;
|
|
font-size: $font-size-normal;
|
|
padding: 0 var(--space-s) 0 var(--space-xxs);
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.boarding {
|
|
display: flex;
|
|
margin-top: 3px;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
|
|
&.with-icon {
|
|
.wait-duration {
|
|
margin-left: var(--space-l);
|
|
}
|
|
}
|
|
|
|
.headsign {
|
|
margin-left: var(--space-xs);
|
|
font-size: $font-size-small;
|
|
max-width: 85%;
|
|
text-align: left;
|
|
align-content: center;
|
|
line-height: 100%;
|
|
}
|
|
}
|
|
|
|
.compact-boarding {
|
|
display: flex;
|
|
margin-top: 3px;
|
|
align-items: flex-start;
|
|
flex-direction: row;
|
|
font-size: $font-size-xsmall;
|
|
font-weight: $font-weight-book;
|
|
|
|
.bar {
|
|
display: flex;
|
|
}
|
|
|
|
.route-number {
|
|
margin-top: 1px;
|
|
height: 16px;
|
|
|
|
.vcenter-children {
|
|
display: inline-flex;
|
|
align-self: stretch;
|
|
|
|
.special-icon {
|
|
font-size: $font-size-xsmall;
|
|
height: 18px;
|
|
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wait-duration {
|
|
margin-left: var(--space-s);
|
|
}
|
|
}
|
|
|
|
.navi-top-card {
|
|
border-radius: var(--radius-m);
|
|
min-height: 70px;
|
|
color: $black;
|
|
background-color: white !important;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: -0.3px;
|
|
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2);
|
|
width: inherit;
|
|
cursor: default;
|
|
font-size: $font-size-normal;
|
|
font-weight: $font-weight-book;
|
|
z-index: 1;
|
|
|
|
.navi-top-card-arrow {
|
|
.inverted {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.main-card {
|
|
width: inherit;
|
|
margin: var(--space-m) var(--space-m);
|
|
|
|
&.default-card-type {
|
|
animation: fadeInDefaultCard $slide-up-down-fade;
|
|
}
|
|
|
|
&.indoor-card-type {
|
|
margin-bottom: 0;
|
|
animation: fadeInIndoorCard $slide-up-down-fade;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: $black;
|
|
justify-content: center;
|
|
|
|
svg.mode {
|
|
margin-right: var(--space-s);
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
|
|
.instructions {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin-right: var(--space-m);
|
|
justify-content: center;
|
|
|
|
&.expanded {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.vehicle-leg {
|
|
display: flex;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.duration {
|
|
&.fade-out {
|
|
animation: fadeOut 3s forwards;
|
|
}
|
|
|
|
font-size: $font-size-xsmall;
|
|
font-weight: $font-weight-book;
|
|
display: flex;
|
|
}
|
|
|
|
.extension-container {
|
|
flex-direction: column;
|
|
transition: all 0.4s ease;
|
|
overflow-y: hidden;
|
|
|
|
.extension {
|
|
margin-left: calc(32px + var(--space-s));
|
|
|
|
&.no-vertical-margin {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.extension-divider {
|
|
height: 1px;
|
|
background: #ddd;
|
|
width: 100%;
|
|
margin-top: var(--space-s);
|
|
margin-bottom: var(--space-s);
|
|
|
|
&.no-vertical-margin {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.stop-count {
|
|
display: flex;
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.extension-routenumber {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: var(--space-s);
|
|
text-align: left;
|
|
margin-top: var(--space-m);
|
|
|
|
.bar {
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.headsign {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: var(--space-xs);
|
|
justify-content: center;
|
|
font-size: $font-size-small;
|
|
max-width: 85%;
|
|
line-height: 100%;
|
|
}
|
|
}
|
|
|
|
.extension-indoor-button,
|
|
.extension-indoor-container,
|
|
.extension-walk {
|
|
margin-bottom: var(--space-s);
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.wait-in-vehicle {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
text-align: start;
|
|
}
|
|
|
|
.icon-expand {
|
|
margin-top: 5px;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.icon-expand-small {
|
|
margin-top: 5px;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: var(--space-s);
|
|
}
|
|
|
|
.destination-container {
|
|
display: flex;
|
|
|
|
.destination-icon {
|
|
margin-right: 10px;
|
|
|
|
&.place {
|
|
fill: $to-color;
|
|
}
|
|
|
|
&.bus-stop {
|
|
color: $bus-color;
|
|
}
|
|
|
|
&.bus-express {
|
|
color: $bus-express-color;
|
|
}
|
|
|
|
&.speedtram {
|
|
color: $speedtram-color;
|
|
}
|
|
|
|
&.replacement-bus {
|
|
color: $replacement-bus-color;
|
|
}
|
|
|
|
&.tram-stop {
|
|
color: $tram-color;
|
|
}
|
|
|
|
&.subway-stop {
|
|
color: $metro-color;
|
|
}
|
|
|
|
&.rail-stop {
|
|
color: $rail-color;
|
|
}
|
|
|
|
&.ferry-stop {
|
|
color: $ferry-color;
|
|
}
|
|
|
|
&.ferry-external-stop {
|
|
color: $external-feed-color;
|
|
}
|
|
|
|
&.funicular-stop {
|
|
color: $funicular-color;
|
|
}
|
|
|
|
&.speedtram-stop {
|
|
color: $speedtram-color;
|
|
}
|
|
}
|
|
|
|
.destination {
|
|
text-align: left;
|
|
|
|
.details {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.address {
|
|
color: #888;
|
|
}
|
|
|
|
.platform-short {
|
|
width: unset;
|
|
font-family: $font-family;
|
|
font-size: $font-size-small;
|
|
letter-spacing: $letter-spacing;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
.platform-number-wrapper {
|
|
padding: 0 var(--space-xxs);
|
|
min-height: 16px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 13px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.indoor-container-clickable {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
.indoor-text {
|
|
display: flex;
|
|
color: $primary-color;
|
|
font-weight: $font-weight-medium;
|
|
line-height: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.indoor-arrow-icon {
|
|
margin-right: 11px;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
svg {
|
|
color: $primary-color;
|
|
|
|
&.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navi-indoor-one-step-info-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
|
|
.navi-indoor-step-info {
|
|
display: flex;
|
|
flex: 1;
|
|
font-size: 0.9375rem;
|
|
|
|
.navi-indoor-step-icon {
|
|
width: 24px;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
display: flex;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.navi-indoor-step-text {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.itinerary-map-action {
|
|
padding-bottom: 0;
|
|
|
|
.icon-container {
|
|
margin-top: 0;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.extension-indoor-container {
|
|
max-height: 170px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
padding-top: 8px;
|
|
padding-bottom: 16px;
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
rgba(51, 51, 51, 1) 90%,
|
|
rgba(0, 0, 0, 0) 95%
|
|
);
|
|
|
|
.navi-indoor-step-container {
|
|
display: flex;
|
|
|
|
.navi-indoor-step-info-container {
|
|
flex: 1;
|
|
|
|
.navi-indoor-step-info {
|
|
display: flex;
|
|
font-size: 0.9375rem;
|
|
max-height: 36px;
|
|
|
|
.navi-indoor-step-icon {
|
|
width: 24px;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
display: flex;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.navi-indoor-step-text {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.itinerary-map-action .icon-container {
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navi-indoor-step-line-container {
|
|
min-width: 28px;
|
|
position: relative;
|
|
|
|
.navi-indoor-step-line {
|
|
position: relative;
|
|
background-size: 100% auto;
|
|
background-position-y: 0;
|
|
background-position-x: 0;
|
|
background-repeat: no-repeat repeat;
|
|
border: none;
|
|
border-radius: 3px;
|
|
width: 6px;
|
|
left: 8px;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
|
|
.navi-indoor-step-line-circle-container {
|
|
position: absolute;
|
|
|
|
.navi-indoor-step-line-circle {
|
|
position: relative;
|
|
z-index: 9;
|
|
min-height: 36px;
|
|
|
|
> svg > circle.indoor-step-marker {
|
|
fill: #fff;
|
|
stroke: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.hide-card {
|
|
animation: hideTopCard $slide-up-down-animation;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.show-card {
|
|
animation: slideDownFromTop $slide-up-down-animation;
|
|
}
|
|
}
|
|
|
|
.navi-initializer-container {
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 0 var(--space-s);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xxs);
|
|
font-weight: 325;
|
|
font-size: 14px;
|
|
line-height: 21px;
|
|
|
|
&.slide-out {
|
|
animation: slideUpToTop 1s ease-in-out forwards;
|
|
}
|
|
|
|
.navi-initializer-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xxs);
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
background-color: white;
|
|
border-radius: var(--radius-m);
|
|
padding: var(--space-m);
|
|
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2);
|
|
text-align: center;
|
|
|
|
&.success {
|
|
background-color: $success-color;
|
|
gap: var(--space-xs);
|
|
|
|
button {
|
|
color: white;
|
|
background-color: $realtime-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigator-modal-container {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000; // higher than navbar
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.navigator-modal-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
z-index: 999; // higher than navbar, below modal body
|
|
height: 100%;
|
|
}
|
|
|
|
.navigator-modal {
|
|
position: fixed;
|
|
background: white;
|
|
width: 100%;
|
|
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
box-shadow: 0 -10px 10px 0 rgba(0, 52, 86, 0.1);
|
|
outline: none;
|
|
|
|
&.slide-in {
|
|
animation: slideUpFromBottom 0.5s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.navigator-modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: var(--space-xl) var(--space-l) var(--space-l) var(--space-l);
|
|
gap: var(--space-xl);
|
|
}
|
|
|
|
.info-stack {
|
|
position: relative;
|
|
letter-spacing: -0.3px;
|
|
width: inherit;
|
|
|
|
&.hide-card {
|
|
animation:
|
|
hideTopCard $slide-up-down-animation,
|
|
fadeOut $slide-up-down-fade;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.show-card {
|
|
animation:
|
|
slideDownFromTop $slide-up-down-animation,
|
|
fadeIn $slide-up-down-fade;
|
|
}
|
|
|
|
.info-stack-item {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px;
|
|
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2);
|
|
font-size: $font-size-xsmall;
|
|
font-weight: $font-weight-book;
|
|
margin-top: 5px;
|
|
color: $black;
|
|
line-height: 1.4;
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.navi-info-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.navi-alert-content {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
margin-left: var(--space-s, 8px);
|
|
margin-right: var(--space-m, 16px);
|
|
width: 100%;
|
|
}
|
|
|
|
&.info {
|
|
background-color: $infobox-color-generic-blue;
|
|
}
|
|
|
|
&.warning {
|
|
background-color: #fff8e8;
|
|
}
|
|
|
|
&.alert {
|
|
background-color: #fdf3f6;
|
|
}
|
|
|
|
.new-itinerary-search {
|
|
padding: var(--space-s, 16px) var(--space-xs, 8px) var(--space-s, 16px)
|
|
var(--space-s, 16px);
|
|
background: #0074bf;
|
|
color: #fff;
|
|
border-radius: 999px; // var(--radius-radius-medium, 8px);
|
|
margin-top: var(--space-s);
|
|
width: 220px;
|
|
}
|
|
|
|
&.slide-out-right {
|
|
animation: slideLeft 0.5s cubic-bezier(0.3, -0.05, 0.7, -0.5);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.info-close {
|
|
display: flex;
|
|
align-self: flex-start;
|
|
margin-left: 1px;
|
|
|
|
.icon-container {
|
|
height: 32px;
|
|
width: 32px;
|
|
|
|
.icon {
|
|
&.notification-close {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-icon {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&.show-card {
|
|
animation:
|
|
slideDownFromTop $slide-up-down-animation,
|
|
fadeIn $slide-up-down-fade;
|
|
}
|
|
|
|
&.hide-card {
|
|
animation:
|
|
hideTopCard $slide-up-down-animation,
|
|
fadeOut $slide-up-down-fade;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navi-bottom-sheet {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: $font-size-normal;
|
|
text-align: center;
|
|
margin: var(--space-m) var(--space-l);
|
|
|
|
&.ticket-link {
|
|
margin: var(--space-m) var(--space-m);
|
|
|
|
.navi-time {
|
|
align-items: inherit;
|
|
}
|
|
}
|
|
|
|
.navi-close-button {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 20px;
|
|
width: 100px;
|
|
height: 40px;
|
|
text-align: center;
|
|
background-color: white;
|
|
border-color: $cancelation-red;
|
|
color: $cancelation-red;
|
|
}
|
|
|
|
.navi-time {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
color: $black;
|
|
|
|
.navi-daytime {
|
|
font-size: $font-size-xsmall;
|
|
font-weight: $font-weight-book;
|
|
}
|
|
}
|
|
|
|
.navi-ticket-button {
|
|
border-radius: 20px;
|
|
width: 100px;
|
|
height: 40px;
|
|
text-align: center;
|
|
margin-left: 16px;
|
|
background-color: $primary-color;
|
|
color: white;
|
|
|
|
a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|