diff --git a/public/js/components/Bootstrap/Modal.js b/public/js/components/Bootstrap/Modal.js index e320d4429..0f2504da6 100644 --- a/public/js/components/Bootstrap/Modal.js +++ b/public/js/components/Bootstrap/Modal.js @@ -4,7 +4,9 @@ export default { name: 'BootstrapModal', data: () => ({ modal: null, - fullscreen: false + fullscreen: false, + expandBtnHovered: false, + expandBtnFocused: false, }), props: { backdrop: { @@ -70,6 +72,29 @@ export default { this.$emit('toggleFullscreen') } }, + computed: { + getExpandButtonStyles() { + const hovered = this.expandBtnHovered; + const focused = this.expandBtnFocused; + return `display: flex; + align-items: center; + justify-content: center; + width: 1em; + height: 1em; + padding: 0; + border: 0; + background: transparent; + font-size: 1em; + opacity: 0.5; + color: inherit; + cursor: pointer; + line-height: 1; + transition: opacity 0.15s ease; + opacity: ${focused ? '1' : hovered ? '0.75' : '0.5'}; + outline: ${focused ? '1px solid currentColor' : 'none'}; + outline-offset: 2px;` + } + }, mounted() { if (this.$refs.modal) this.modal = new bootstrap.Modal(this.$refs.modal, { @@ -140,9 +165,13 @@ export default {