73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<template>
|
|
<div class="widget-footer">
|
|
<a @click="toggleMenu"
|
|
class="widget-footer__more-link">
|
|
<ellipses></ellipses>
|
|
</a>
|
|
<widget-popover v-if="showMenu"
|
|
@hide-me="showMenu = false">
|
|
<slot :hide="toggleMenu"></slot>
|
|
</widget-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Ellipses from '@/components/icons/Ellipses.vue';
|
|
import WidgetPopover from '@/components/rooms/WidgetPopover';
|
|
|
|
export default {
|
|
|
|
components: {
|
|
Ellipses,
|
|
WidgetPopover
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showMenu: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
toggleMenu: function () {
|
|
this.showMenu = !this.showMenu
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.widget-footer {
|
|
background-color: $color-grey--lighter;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
position: relative;
|
|
border-bottom-left-radius: $default-border-radius;
|
|
border-bottom-right-radius: $default-border-radius;
|
|
visibility: hidden;
|
|
|
|
@include desktop {
|
|
visibility: visible;
|
|
}
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
-ms-grid-row: 2;
|
|
|
|
&__more-link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
svg {
|
|
width: 30px;
|
|
fill: $color-darkgrey-1;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
</style>
|