55 lines
No EOL
1.3 KiB
HTML
55 lines
No EOL
1.3 KiB
HTML
<div id="usermenu-vue">
|
|
<template v-for="menuitem in menuitems" v-if="menuitem.visible">
|
|
<button class="um-option" :style="menuitem.style" @click="close();menuitem.onclick();">
|
|
<div class="row">
|
|
<div class="col">
|
|
{{ menuitem.label }}
|
|
</div>
|
|
<div class="col-auto" v-if="menuitem['svg']" v-html="menuitem.svg">
|
|
|
|
</div>
|
|
<div class="col-auto" v-else-if="menuitem['icon']">
|
|
<div class="context-menu__option-icon"></div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<style>
|
|
.um-option {
|
|
width: 100%;
|
|
display: block;
|
|
text-align: left;
|
|
padding: 10px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.um-option:not(:last-child) {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: .5px;
|
|
border-bottom-color: var(--contextMenuBorderColor);
|
|
}
|
|
|
|
.um-option:hover {
|
|
background: var(--systemQuinary);
|
|
}
|
|
|
|
.um-option:active {
|
|
animation: um-blink .1s var(--appleEase)
|
|
}
|
|
|
|
|
|
@keyframes um-blink {
|
|
0% {
|
|
background: var(--systemQuinary);
|
|
}
|
|
50% {
|
|
background: transparent;
|
|
}
|
|
100% {
|
|
background: var(--systemQuinary);
|
|
}
|
|
}
|
|
|
|
</style> |