<template> <div class="image-viewer" :class="{ 'is-visible': isVisible }" :style="imageViewerStyle"> <div class="close-viewer" @click="$emit('close')"> X </div> </div> </template> <script> export default { props: { isVisible: { type: Boolean, required: true }, imageUrl: { type: String, required: false, default () { return '' } } }, data () { return { } }, computed: { imageViewerStyle () { return { backgroundImage: 'url(' + this.imageUrl + ')' } } }, methods: { } } </script> <style lang="scss" scoped> .image-viewer { background: linear-gradient( to bottom left, magenta, cyan ); // TEMP background-size: cover; background-position: center center; } @media (max-width: $bp__layout) { .close-viewer { font-size: 10em; cursor: pointer; } .image-viewer { z-index: 50; transition: opacity 1s; //TEMP opacity: 0; pointer-events: none; &.is-visible { opacity: 1; pointer-events: auto; } } } @media (min-width: $bp__layout) { .close-viewer { display: none; } } </style>