+
+
+
{ style }: { props.styleProps[style] }
@@ -44,5 +50,18 @@
box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%);
cursor: default;
}
+ .popover-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0.25em 0.5em;
+ padding: 0.5em;
+ line-height: 0;
+ border-radius: 0.375rem;
+ cursor: pointer;
+ }
+ .popover-close:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
diff --git a/src/components/render-item.riot b/src/components/render-item.riot
index 72158d7..0fc29a9 100644
--- a/src/components/render-item.riot
+++ b/src/components/render-item.riot
@@ -1,5 +1,5 @@
-
+
@@ -15,6 +15,10 @@
onClick(e) {
this.update({ popover: !this.state.popover });
},
+ onClose(e) {
+ this.update({ popover: false });
+ e.stopPropagation();
+ },
applyStyles(container, style) {
if (!container || !container.style || !style) {
return;