@uiw/react-popover
Version:
Popover component
95 lines (94 loc) • 2.03 kB
CSS
.w-popover {
position: relative;
display: inline-block;
outline: 0;
}
.w-popover-arrow {
position: absolute;
width: 30px;
height: 30px;
border-color: transparent;
z-index: 21;
}
.w-popover-inner {
font-size: 12px;
display: block;
text-align: left;
text-decoration: none;
background-color: #fff;
border-radius: 4px;
min-height: 23px;
box-shadow: rgba(16, 22, 26, 0.1) 0px 0px 0px 1px, rgba(16, 22, 26, 0.2) 0px 2px 4px, rgba(16, 22, 26, 0.2) 0px 8px 24px;
}
.w-popover.right .w-popover-arrow,
.w-popover.rightTop .w-popover-arrow,
.w-popover.rightBottom .w-popover-arrow {
left: 2px;
margin-top: -15px;
top: 50%;
}
.w-popover.left .w-popover-arrow,
.w-popover.leftTop .w-popover-arrow,
.w-popover.leftBottom .w-popover-arrow {
transform: rotate(180deg);
margin-top: -15px;
right: 2px;
top: 50%;
}
.w-popover.leftTop .w-popover-arrow,
.w-popover.rightTop .w-popover-arrow {
top: 15px;
}
.w-popover.leftBottom .w-popover-arrow,
.w-popover.rightBottom .w-popover-arrow {
bottom: 0;
top: auto;
}
.w-popover.top .w-popover-arrow,
.w-popover.topLeft .w-popover-arrow,
.w-popover.topRight .w-popover-arrow {
transform: rotate(-90deg);
bottom: 2px;
left: 50%;
margin-left: -15px;
}
.w-popover.bottom .w-popover-arrow,
.w-popover.bottomLeft .w-popover-arrow,
.w-popover.bottomRight .w-popover-arrow {
transform: rotate(90deg);
left: 50%;
margin-left: -15px;
top: 2px;
}
.w-popover.bottomLeft .w-popover-arrow,
.w-popover.topLeft .w-popover-arrow {
left: 15px;
}
.w-popover.bottomRight .w-popover-arrow,
.w-popover.topRight .w-popover-arrow {
right: 0;
left: auto;
}
.w-popover.top,
.w-popover.topLeft,
.w-popover.topRight {
padding-bottom: 13px;
}
.w-popover.bottom,
.w-popover.bottomLeft,
.w-popover.bottomRight {
padding-top: 13px;
}
.w-popover.right,
.w-popover.rightTop,
.w-popover.rightBottom {
padding-left: 13px;
}
.w-popover.left,
.w-popover.leftTop,
.w-popover.leftBottom {
padding-right: 13px;
}
.w-popover.no-arrow {
padding: 0 ;
}