flylocal-web/components/FlightsFlyout.vue

<template>
  <div class="flyout flyout--book">
    <NuxtLink
      :to="'/flights/' + selectedOrig.iata + '/' + selectedDest.iata"
      :class="['btn btn--primary btn--large',{'btn--empty': !selectedOrig.iata || !selectedDest.iata}]"
    >
      <span :class="['btn__content']">
        see fights from <strong>{{ selectedOrig.municipality }}</strong> to <strong>{{ selectedDest.municipality }}</strong>
      </span>
    </NuxtLink>
  </div>
</template>

<script>
export default {
  props: {
    selectedOrig: {
      type: [Object],
      default () {
        return {}
      }
    },
    selectedDest: {
      type: [Object],
      default () {
        return {}
      }
    }
  }
}
</script>

<style>
.flyout {
  background: white;
  border-radius: 3rem 3rem 0 0;
  padding: 3rem;
  pointer-events: all;
}

.btn__content {
  transition: width 0s 5s;
}

.btn.btn--empty {
  background: lightgray;
}

.btn.btn--large {
  font-size: 2rem;
}
</style>