@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
107 lines (96 loc) • 2.27 kB
CSS
.spectrum-Popover {
visibility: hidden;
opacity: 0;
transition: transform 130ms ease-in-out,
opacity 130ms ease-in-out,
visibility 0ms linear 130ms;
pointer-events: none;
}
.spectrum-Popover.is-open {
visibility: visible;
opacity: 1;
transition-delay: 0ms;
pointer-events: auto;
}
.spectrum-Popover--bottom.is-open {
transform: translateY(8px);
}
.spectrum-Popover--top.is-open {
transform: translateY(-8px);
}
.spectrum-Popover--right.is-open {
transform: translateX(8px);
}
.spectrum-Popover--left.is-open {
transform: translateX(-8px);
}
.spectrum-Popover {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-direction: column;
flex-direction: column;
box-sizing: border-box;
min-width: 40px;
min-height: 40px;
position: absolute;
border-style: solid;
border-width: 1px;
border-radius: 5px;
outline: none;
}
.spectrum-Popover-tip {
position: absolute;
overflow: hidden;
width: 26px;
height: 13.5px;
}
.spectrum-Popover-tip::after {
content: '';
width: 25px;
height: 25px;
border-width: 1px;
border-style: solid;
position: absolute;
transform: rotate(45deg);
top: -18px;
left: -1px;
}
.spectrum-Popover--dialog {
min-width: 270px;
padding: 30px 29px;
}
.spectrum-Popover--left.spectrum-Popover--withTip {
margin-right: 13px;
}
.spectrum-Popover--left .spectrum-Popover-tip {
right: -16px;
transform: rotate(-90deg);
}
.spectrum-Popover--right.spectrum-Popover--withTip {
margin-left: 13px;
}
.spectrum-Popover--right .spectrum-Popover-tip {
left: -16px;
transform: rotate(90deg);
}
.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--right .spectrum-Popover-tip {
top: 50%;
margin-top: -6px;
}
.spectrum-Popover--bottom.spectrum-Popover--withTip {
margin-top: 13px;
}
.spectrum-Popover--bottom .spectrum-Popover-tip {
top: -11px;
transform: rotate(180deg);
}
.spectrum-Popover--top.spectrum-Popover--withTip {
margin-bottom: 13px;
}
.spectrum-Popover--top .spectrum-Popover-tip {
bottom: -11px;
}
.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--top .spectrum-Popover-tip {
left: 50%;
margin-left: -12px;
}