1 files changed, 43 insertions, 0 deletions
diff --git a/src/components/shared/Popover.module.scss b/src/components/shared/Popover.module.scss
new file mode 100644
index 0000000..78d02ed
--- /dev/null
+++ b/src/components/shared/Popover.module.scss
@@ -0,0 +1,43 @@
+.anchor {
+  position: relative;
+  display: inline-flex;
+}
+
+.panel {
+  position: fixed;
+  z-index: 30;
+  background: var(--color-card);
+  border: 1px solid var(--color-card-border);
+  border-radius: 14px;
+  box-shadow: var(--shadow-popover);
+  padding: 14px 16px;
+  overflow-y: auto;
+  // 预留滚动条宽度，否则纵向滚动条出现时会挤掉内容宽度、逼出一条横向滚动条
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+  animation: popoverIn 0.14s ease-out;
+}
+
+/* 首帧先渲染出来量宽高，定位算完之前不要让用户看到 */
+.measuring {
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+
+@keyframes popoverIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    animation: none;
+  }
+}