akkoma-fe/src/components/popover/popover.vue

129 lines
3 KiB
Vue
Raw Normal View History

2020-02-28 16:39:47 +00:00
<template>
<div
@mouseenter="onMouseenter"
@mouseleave="onMouseleave"
>
2020-11-24 12:52:01 +00:00
<button
2020-02-28 16:39:47 +00:00
ref="trigger"
class="button-unstyled -fullwidth popover-trigger-button"
2020-02-28 16:39:47 +00:00
@click="onClick"
type="button"
2020-02-28 16:39:47 +00:00
>
<slot name="trigger" />
2020-11-24 12:52:01 +00:00
</button>
2020-02-28 16:39:47 +00:00
<div
v-if="!hidden"
ref="content"
:style="styles"
class="popover"
:class="popoverClass || 'popover-default'"
2020-02-28 16:39:47 +00:00
>
<slot
name="content"
class="popover-inner"
:close="hidePopover"
/>
</div>
</div>
</template>
<script src="./popover.js" />
<style lang="scss">
2020-02-28 16:39:47 +00:00
@import '../../_variables.scss';
.popover-trigger-button {
display: block;
}
2020-02-28 16:39:47 +00:00
.popover {
z-index: 8;
position: absolute;
min-width: 0;
}
.popover-default {
2020-02-28 16:39:47 +00:00
transition: opacity 0.3s;
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panelShadow);
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--text;
color: var(--popoverText, $fallback--text);
--faint: var(--popoverFaintText, $fallback--faint);
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--postLink: var(--popoverPostLink, $fallback--link);
--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
--icon: var(--popoverIcon, $fallback--icon);
}
.dropdown-menu {
display: block;
padding: .5rem 0;
font-size: 1rem;
text-align: left;
list-style: none;
max-width: 100vw;
z-index: 10;
white-space: nowrap;
.dropdown-divider {
height: 0;
margin: .5rem 0;
overflow: hidden;
border-top: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border);
}
.dropdown-item {
line-height: 21px;
margin-right: 5px;
overflow: auto;
display: block;
padding: .25rem 1.0rem .25rem 1.5rem;
clear: both;
font-weight: 400;
text-align: inherit;
white-space: nowrap;
border: none;
border-radius: 0px;
background-color: transparent;
box-shadow: none;
width: 100%;
height: 100%;
box-sizing: border-box;
2020-02-28 16:39:47 +00:00
--btnText: var(--popoverText, $fallback--text);
&-icon {
padding-left: 0.5rem;
svg {
2020-02-28 16:39:47 +00:00
margin-right: 0.25rem;
color: var(--menuPopoverIcon, $fallback--icon)
}
}
&:active, &:hover {
background-color: $fallback--lightBg;
background-color: var(--selectedMenuPopover, $fallback--lightBg);
color: $fallback--link;
color: var(--selectedMenuPopoverText, $fallback--link);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
svg {
2020-02-28 16:39:47 +00:00
color: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
}
}
</style>