flylocal-web/components/ChosenFlights.vue

<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>