aboutsummaryrefslogtreecommitdiff
path: root/src/components/popover
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/popover')
-rw-r--r--src/components/popover/popover.js7
-rw-r--r--src/components/popover/popover.vue37
2 files changed, 38 insertions, 6 deletions
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5e417fa0..61cc728d 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -3,25 +3,32 @@ const Popover = {
props: {
// Action to trigger popover: either 'hover' or 'click'
trigger: String,
+
// Either 'top' or 'bottom'
placement: String,
+
// Takes object with properties 'x' and 'y', values of these can be
// 'container' for using offsetParent as boundaries for either axis
// or 'viewport'
boundTo: Object,
+
// Takes a selector to use as a replacement for the parent container
// for getting boundaries for x an y axis
boundToSelector: String,
+
// Takes a top/bottom/left/right object, how much space to leave
// between boundary and popover element
margin: Object,
+
// Takes a x/y object and tells how many pixels to offset from
// anchor point on either axis
offset: Object,
+
// 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,
+
// If true, subtract padding when calculating position for the popover,
// use it when popover offset looks to be different on top vs bottom.
removePadding: Boolean
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 876dd61d..2e78a09e 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -6,8 +6,8 @@
<button
ref="trigger"
class="button-unstyled -fullwidth popover-trigger-button"
- @click="onClick"
type="button"
+ @click="onClick"
>
<slot name="trigger" />
</button>
@@ -82,10 +82,9 @@
.dropdown-item {
line-height: 21px;
- margin-right: 5px;
overflow: auto;
display: block;
- padding: .25rem 1.0rem .25rem 1.5rem;
+ padding: .5em 0.75em;
clear: both;
font-weight: 400;
text-align: inherit;
@@ -101,10 +100,9 @@
--btnText: var(--popoverText, $fallback--text);
&-icon {
- padding-left: 0.5rem;
-
svg {
- margin-right: 0.25rem;
+ width: 22px;
+ margin-right: 0.75rem;
color: var(--menuPopoverIcon, $fallback--icon)
}
}
@@ -123,6 +121,33 @@
}
}
+ .menu-checkbox {
+ display: inline-block;
+ vertical-align: middle;
+ min-width: 22px;
+ max-width: 22px;
+ min-height: 22px;
+ max-height: 22px;
+ line-height: 22px;
+ text-align: center;
+ border-radius: 0px;
+ background-color: $fallback--fg;
+ background-color: var(--input, $fallback--fg);
+ box-shadow: 0px 0px 2px black inset;
+ box-shadow: var(--inputShadow);
+ margin-right: 0.75em;
+
+ &.menu-checkbox-checked::after {
+ font-size: 1.25em;
+ content: '✓';
+ }
+
+ &.menu-checkbox-radio::after {
+ font-size: 2em;
+ content: '•';
+ }
+ }
+
}
}
</style>