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 {