136 lines
2.4 KiB
SCSS
136 lines
2.4 KiB
SCSS
@import "trigonometry";
|
|
|
|
$description-rotation: 60deg;
|
|
$description-width: 250px;
|
|
|
|
$trip-stop-marker-size: .9rem;
|
|
$trip-stop-marker-spacing: .75rem;
|
|
$trip-line-width: .2rem;
|
|
$trip-visited: rgba($dark, .3);
|
|
|
|
.trip {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.trip__stops {
|
|
padding-top: sin($description-rotation) * $description-width;
|
|
padding-right: cos($description-rotation) * $description-width;
|
|
padding-left: 0;
|
|
display: flex;
|
|
list-style: none;
|
|
overflow-x: auto;
|
|
|
|
@include no-scrollbars;
|
|
@extend .drag-scroll;
|
|
}
|
|
|
|
.trip__stop {
|
|
width: 2.5rem;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.trip__stop:first-child {
|
|
.trip__marker::before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.trip__stop:last-child {
|
|
.trip__marker::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.trip__marker {
|
|
width: $trip-stop-marker-size;
|
|
height: $trip-stop-marker-size;
|
|
border: $dark $trip-line-width solid;
|
|
border-radius: 100%;
|
|
background: white;
|
|
margin: $trip-stop-marker-spacing 0;
|
|
|
|
&::before, &::after {
|
|
content: "";
|
|
display: block;
|
|
height: $trip-line-width;
|
|
background: $dark;
|
|
width: calc(50% - #{$trip-stop-marker-size / 2});
|
|
position: absolute;
|
|
top: $trip-stop-marker-spacing + ($trip-stop-marker-size) / 2;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
&::after {
|
|
right: 0;
|
|
}
|
|
|
|
&::before {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.trip__stop--current .trip__marker {
|
|
box-shadow: 0 0 .5rem $dark;
|
|
}
|
|
|
|
@each $type, $color in $line-types {
|
|
.trip--#{$type} {
|
|
.trip__marker {
|
|
border-color: $color;
|
|
|
|
&::before, &::after {
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
.trip__stop--current .trip__marker {
|
|
box-shadow: 0 0 .5rem $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.trip__stop--visited {
|
|
.trip__marker {
|
|
border-color: $trip-visited;
|
|
&::before, &::after {
|
|
background: $trip-visited;
|
|
}
|
|
}
|
|
|
|
.trip__description, .trip__departure {
|
|
opacity: .4;
|
|
}
|
|
}
|
|
|
|
.trip__stop--visited + .trip__stop:not(.trip__stop--visited) .trip__marker {
|
|
&::before {
|
|
background: $trip-visited;
|
|
}
|
|
}
|
|
|
|
.trip__description {
|
|
display: flex;
|
|
transform: rotate(-$description-rotation) translateX(.75rem);
|
|
transform-origin: 0 50%;
|
|
max-width: $description-width;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
|
|
.stop {
|
|
width: max-content;
|
|
}
|
|
}
|
|
|
|
.trip__departure {
|
|
font-size: $small-font-size;
|
|
font-weight: bold;
|
|
margin-bottom: .5rem;
|
|
}
|