<template> <article class="content-page" :class="{ 'is-mounted': isMounted }" > <h1 v-if="heading !== ''" class="page-heading page-title">{{ heading }}</h1> <section class="content-container load-transition"> <div v-if="$slots.default" class="content"> <slot></slot> </div> </section> <div v-if="$slots.background" class="background"> <slot name="background"></slot> </div> </article> </template> <script> export default { props: { heading: { type: String, required: false, default: '', } }, data () { return { isMounted: false, } }, mounted () { this.$nextTick(() => { this.isMounted = true }) }, } </script> <style lang="scss" scoped> $z-index-bottom: 5; $z-index-top: 10; .content-page { display: flex; flex-direction: column; width: 100%; height: 100%; padding: $site-menu__header-width 0 0 0; overflow-y: auto; @media (min-width: $bp__layout) { padding: 0 0 0 $site-menu__header-width; overflow-y: hidden; } background-color: $color__neutral-100; } .content-container { z-index: $z-index-top; position: relative; height: 100%; width: 100%; @media (min-width: $bp__layout) { position: absolute; top: 0; right: 0; overflow-y: auto; overflow-x: hidden; } } .content { position: absolute; display: flex; align-items: stretch; justify-content: stretch; width: 100%; min-height: 100%; top: 0; right: 0; padding: .5rem 1rem 2rem; @media (min-width: $bp__layout) { width: 50%; padding: 1rem; background-color: rgba(0, 0, 0, .5); } color: #fff; // TEMP } .page-heading { z-index: $z-index-top; position: relative; } .background { z-index: $z-index-bottom; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: .5; @media (min-width: $bp__layout) { opacity: 1; } } .load-transition { transition: 2s 2s; opacity: 0; @at-root .is-mounted & { opacity: 1; } } </style>