marc-leopold/app/components/NoContent.vue

78 lines
1.6 KiB
Vue

<template>
<article class="is-mounted no-content-page no-content-bg">
<h1 class="no-content-heading page-title">{{ heading }}</h1>
<p class="no-content-text">{{ message }}</p>
</article>
</template>
<script>
export default {
name: 'NoContent',
props: {
heading: {
type: String,
required: true,
},
message: {
type: String,
required: false,
default () {
return 'This page blah blah ...'
},
}
}
}
</script>
<style scoped lang="scss">
.no-content-page {
display: flex;
align-items: center;
flex-direction: column;
height: 100%;
text-align: center;
padding: $site-menu__header-height * 2 1rem 0;
@media (min-width: $bp__layout) {
padding: 0 0 0 $site-menu__header-width;
justify-content: center;
}
}
.no-content-bg {
$color-inner: $color__primary-500;
$color-outer: $color__primary-100;
$transparency-outer: .1;
$transparency-inner: .05;
background-color: rgba($color-inner, .1);
background: linear-gradient(
to bottom,
rgba($color-inner, $transparency-inner),
rgba($color-outer, $transparency-outer)
);
@media (min-width: $bp__layout) {
background:
linear-gradient(
to bottom,
rgba($color-outer, $transparency-outer),
rgba($color-inner, $transparency-inner),
rgba($color-outer, $transparency-outer)
),
linear-gradient(
to right,
rgba($color-outer, $transparency-outer),
rgba($color-inner, $transparency-inner),
rgba($color-outer, $transparency-outer)
);
}
}
.no-content-heading {
margin-bottom: .25em;
}
</style>