antd-mobile
Version:
<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
65 lines (64 loc) • 1.4 kB
CSS
.adm-popover {
--z-index: var(--adm-popover-z-index, 1030);
--background: #ffffff;
--arrow-size: 8px;
--content-padding: 8px 12px;
position: absolute;
top: 0;
left: 0;
z-index: var(--z-index);
white-space: normal;
text-align: left;
cursor: auto;
user-select: text;
animation: none;
}
.adm-popover.adm-popover-dark {
--background: rgba(0, 0, 0, 0.75);
--adm-color-text: #ffffff;
color: white;
}
.adm-popover.adm-popover-dark .adm-popover-inner {
box-shadow: none;
}
.adm-popover::after {
position: absolute;
background: rgba(255, 255, 255, 0.01);
content: '';
}
.adm-popover-hidden {
display: none;
}
.adm-popover-inner {
background-color: var(--background);
background-clip: padding-box;
border-radius: 8px;
box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
font-size: 15px;
min-width: 32px;
max-width: calc(100vw - 24px);
overflow-y: hidden;
}
.adm-popover-inner-content {
padding: var(--content-padding);
}
.adm-popover-arrow {
position: absolute;
display: block;
height: var(--arrow-size);
width: var(--arrow-size);
overflow: visible;
background: transparent;
}
.adm-popover-arrow-icon {
display: block;
height: var(--arrow-size);
width: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(var(--arrow-icon-rotate));
}
.adm-popover .adm-popover-arrow {
color: var(--background);
}