src/components/shared/Popover.module.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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;
  }
}