change styles for the dropdown, make things work nicely on mobile

This commit is contained in:
Shpuld Shpuldson 2020-07-03 12:56:31 +03:00
parent 961099d34a
commit 21d1f557f6
13 changed files with 204 additions and 66 deletions

View file

@ -18,7 +18,9 @@ const Popover = {
// Takes a x/y object and tells how many pixels to offset from
// anchor point on either axis
offset: Object,
// Additional styles you may want for the popover container
// Replaces the classes you may want for the popover container.
// Use 'popover-default' in addition to get the default popover
// styles with your custom class.
popoverClass: String
},
data () {
@ -106,7 +108,7 @@ const Popover = {
// single translate or translate3d resulted in blurry text.
this.styles = {
opacity: 1,
transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)`
transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
}
},
showPopover () {

View file

@ -14,7 +14,7 @@
ref="content"
:style="styles"
class="popover"
:class="popoverClass"
:class="popoverClass || 'popover-default'"
>
<slot
name="content"
@ -34,6 +34,9 @@
z-index: 8;
position: absolute;
min-width: 0;
}
.popover-default {
transition: opacity 0.3s;
box-shadow: 1px 1px 4px rgba(0,0,0,.6);