zarm-web
Version:
基于 React 的桌面端UI库
80 lines • 1.6 kB
CSS
.ui-popover {
display: inline-block;
}
.ui-popover-content {
display: none;
padding: 10px 18px;
z-index: 999;
background-color: #fff;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
}
.ui-popover-content[x-placement^=left] {
margin-right: 10px;
}
.ui-popover-content[x-placement^=left] .ui-popover-arrow {
right: -4px;
border-right-width: 1px;
border-top-width: 1px;
}
.ui-popover-content[x-placement^=right] {
margin-left: 10px;
}
.ui-popover-content[x-placement^=right] .ui-popover-arrow {
left: -4px;
border-left-width: 1px;
border-bottom-width: 1px;
}
.ui-popover-content[x-placement^=top] {
margin-bottom: 10px;
}
.ui-popover-content[x-placement^=top] .ui-popover-arrow {
bottom: -4px;
border-right-width: 1px;
border-bottom-width: 1px;
}
.ui-popover-content[x-placement^=bottom] {
margin-top: 10px;
}
.ui-popover-content[x-placement^=bottom] .ui-popover-arrow {
top: -4px;
border-left-width: 1px;
border-top-width: 1px;
}
.ui-popover-content-show {
display: block;
}
.ui-popover-content-radius {
border-radius: 2px;
}
.ui-popover-arrow {
position: absolute;
width: 5px;
height: 5px;
border-width: 0;
border-style: solid;
border-color: #ccc;
background: #fff;
transform: rotate(45deg);
}
.ui-popover-mask {
position: fixed;
display: none;
z-index: 998;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
opacity: 0.2;
}
.ui-popover-mask-show {
display: block;
}
.ui-popover-actions {
padding-top: 10px;
text-align: right;
}
.ui-popover-actions button {
margin-left: 10px;
}