You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
3.2 KiB
163 lines
3.2 KiB
<template>
|
|
<div class="chosen-wrapper">
|
|
<div class="chosen-cols">
|
|
<div class="chosen-col">
|
|
<label for="" class="chosen-text">
|
|
{{ selectedOrig.municipality }}
|
|
</label>
|
|
<h1 class="chosen-text">
|
|
{{ selectedOrig.iata }}
|
|
</h1>
|
|
<span v-if="departure" class="date-badge">
|
|
{{ departure }} {{ (departureTime ? '@' + departureTime : '') }}
|
|
</span>
|
|
</div>
|
|
<div class="chosen-col">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-arrow-right-circle"
|
|
width="100"
|
|
height="100"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M18 15l3 -3l-3 -3" />
|
|
<circle cx="5" cy="12" r="2" />
|
|
<path d="M7 12h14" />
|
|
</svg>
|
|
</div>
|
|
<div class="chosen-col">
|
|
<label for="" class="chosen-text">
|
|
{{ selectedDest.municipality }}
|
|
</label>
|
|
<h1 class="chosen-text">
|
|
{{ selectedDest.iata }}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
selectedOrig: {
|
|
type: [Object],
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
selectedDest: {
|
|
type: [Object],
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
departure: {
|
|
type: [String],
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
departureTime: {
|
|
type: [String],
|
|
default () {
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.chosen-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.chosen-cols {
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: #003c79;
|
|
border-radius: 1rem;
|
|
padding: 0.5rem 2rem;
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
max-width: 450px;
|
|
|
|
--knockout-size: 0.75rem;
|
|
}
|
|
|
|
.chosen-col:nth-of-type(2) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.chosen-col:nth-of-type(2) svg {
|
|
margin-top: -0.9rem;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.chosen-col:nth-of-type(2)::before {
|
|
content: "";
|
|
height: var(--knockout-size);
|
|
width: var(--knockout-size);
|
|
background-color: white;
|
|
border-radius: 0 0 999px 999px;
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.chosen-col:nth-of-type(2)::after {
|
|
content: "";
|
|
height: var(--knockout-size);
|
|
width: var(--knockout-size);
|
|
background-color: white;
|
|
border-radius: 999px 999px 0 0;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.flyout .chosen-col:nth-of-type(2)::before,
|
|
.flyout .chosen-col:nth-of-type(2)::after {
|
|
background-color: #007fff;
|
|
}
|
|
|
|
label.chosen-text {
|
|
color: #007fff;
|
|
line-height: 0.8;
|
|
font-size: 0.8rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.header__col:nth-child(3) label.chosen-text {
|
|
text-align: right;
|
|
}
|
|
|
|
h1.chosen-text {
|
|
font-size: 3rem;
|
|
line-height: 0.8;
|
|
font-weight: 500;
|
|
color: #eee;
|
|
}
|
|
|
|
.date-badge {
|
|
background: white;
|
|
border-radius: 999px;
|
|
padding: 0 0.5em;
|
|
line-height: 1;
|
|
display: inline-block;
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|