mirror of
https://github.com/frappe/books.git
synced 2024-09-20 03:29:00 +00:00
fix(ui): remove popover space and arrow
This commit is contained in:
parent
6f0a5ab23d
commit
4fbcd9da5f
@ -13,7 +13,6 @@
|
|||||||
class="bg-white rounded border shadow-md popover-container relative z-10"
|
class="bg-white rounded border shadow-md popover-container relative z-10"
|
||||||
v-show="isOpen"
|
v-show="isOpen"
|
||||||
>
|
>
|
||||||
<div v-if="!hideArrow" class="popover-arrow" ref="popover-arrow"></div>
|
|
||||||
<slot name="content" :togglePopover="togglePopover"></slot>
|
<slot name="content" :togglePopover="togglePopover"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -27,10 +26,6 @@ export default {
|
|||||||
name: 'Popover',
|
name: 'Popover',
|
||||||
emits: ['open', 'close'],
|
emits: ['open', 'close'],
|
||||||
props: {
|
props: {
|
||||||
hideArrow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
showPopup: {
|
showPopup: {
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
@ -84,22 +79,6 @@ export default {
|
|||||||
if (!this.popper) {
|
if (!this.popper) {
|
||||||
this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
|
this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
|
||||||
placement: this.placement,
|
placement: this.placement,
|
||||||
modifiers: !this.hideArrow
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
name: 'arrow',
|
|
||||||
options: {
|
|
||||||
element: this.$refs['popover-arrow'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'offset',
|
|
||||||
options: {
|
|
||||||
offset: [0, 10],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: [],
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.popper.update();
|
this.popper.update();
|
||||||
@ -139,46 +118,3 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
|
||||||
.popover-arrow,
|
|
||||||
.popover-arrow::after {
|
|
||||||
position: absolute;
|
|
||||||
width: theme('spacing.4');
|
|
||||||
height: theme('spacing.4');
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-arrow::after {
|
|
||||||
content: '';
|
|
||||||
background: white;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-container[data-popper-placement^='top'] > .popover-arrow {
|
|
||||||
bottom: calc(theme('spacing.2') * -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-container[data-popper-placement^='top'] > .popover-arrow::after {
|
|
||||||
border-bottom: 1px solid theme('borderColor.gray.400');
|
|
||||||
border-right: 1px solid theme('borderColor.gray.400');
|
|
||||||
border-bottom-right-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-container[data-popper-placement^='bottom'] > .popover-arrow {
|
|
||||||
top: calc(theme('spacing.2') * -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-container[data-popper-placement^='bottom'] > .popover-arrow::after {
|
|
||||||
border-top: 1px solid theme('borderColor.gray.400');
|
|
||||||
border-left: 1px solid theme('borderColor.gray.400');
|
|
||||||
border-top-left-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-container[data-popper-placement^='left'] > .popover-arrow {
|
|
||||||
right: calc(theme('spacing.2') * -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-container[data-popper-placement^='right'] > .popover-arrow {
|
|
||||||
left: calc(theme('spacing.2') * -1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
Loading…
Reference in New Issue
Block a user