@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制,使用 TypeScript</b></p>
57 lines (50 loc) • 1.46 kB
CSS
.o-popover {
--popup-bg-color: var(--o-color-fill2);
--popup-shadow: var(--o-shadow-1);
--popup-radius: var(--o-radius_control-s);
--popup-bd: none;
--popup-padding: 8px;
--popover-text-color: var(--o-color-info1);
--popover-text-size: var(--o-font_size-tip1);
--popover-text-height: var(--o-line_height-tip1);
}
.o-popover {
font-size: var(--popover-text-size);
line-height: var(--popover-text-height);
color: var(--popover-text-color);
}
.o-popover-anchor {
border: var(--popup-bd);
border-bottom: none;
border-right: none;
border-top-left-radius: 2px;
width: 8px;
height: 8px;
background-color: var(--popup-bg-color);
}
.o-popup-pos-left .o-popover-anchor,
.o-popup-pos-lb .o-popover-anchor,
.o-popup-pos-lt .o-popover-anchor {
transform: translate(50%, -50%) rotate(135deg);
}
.o-popup-pos-top .o-popover-anchor,
.o-popup-pos-tl .o-popover-anchor,
.o-popup-pos-tr .o-popover-anchor {
transform: translate(-50%, 50%) rotate(225deg);
}
.o-popup-pos-right .o-popover-anchor,
.o-popup-pos-rt .o-popover-anchor,
.o-popup-pos-rb .o-popover-anchor {
transform: translate(-50%, -50%) rotate(-45deg);
}
.o-popup-pos-bottom .o-popover-anchor,
.o-popup-pos-bl .o-popover-anchor,
.o-popup-pos-br .o-popover-anchor {
transform: translate(-50%, -50%) rotate(45deg);
}
@media (max-width: 1440px) {
.o-popover {
--popover-text-size: var(--o-font_size-tip2);
--popover-text-height: var(--o-line_height-tip2);
}
}