<template lang="pug">
main
  RouterView(v-slot="{ Component }")
    Transition
      KeepAlive
        Component.page(:is="Component")
</template>

<style lang="sass" scoped>
main
  position: relative
  overflow: hidden
  font-size: 1.5em
  background: #16a085

  > .page
    position: absolute
    width: 100%
    height: 100%

    display: flex
    flex-direction: column
    overflow-y: auto
    padding: 1em 4em

    background: inherit

  > .page.v-leave-active, > .page.v-enter-active
    transition: transform 0.3s ease

  > .page.v-enter-from
    transform: translateY(100%)
</style>
