naive-ui/styles/Tooltip.scss
2019-06-28 18:14:06 +08:00

42 lines
1010 B
SCSS

@import "./mixins/mixins.scss";
@import "./theme/default.scss";
@include b(tooltip) {
& {
display: inline-block;
position: relative;
}
.n-tooltip__popup.is-hidden {
display: none;
}
.n-tooltip__popup.has-emerged {
opacity: 0.5;
transform: translateX(-50%) translateY(4px);
}
.n-tooltip__popup {
z-index: 1;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(0px);
padding-top: 4px;
opacity: 1;
transition: opacity 0.3s $default-cubic-bezier,
transform 0.3s $fast-in-cubic-bezier;
.n-tooltip-popup__content {
white-space: nowrap;
border-radius: 6px;
background-color: rgba(75, 81, 106, 1);
color: #ffffffe6;
padding: 8px 14px;
font-size: 12px;
}
}
.n-tooltip__popup.is-vanishing {
opacity: 0;
transition: opacity 0.3s $default-cubic-bezier,
transform 0.3s $slow-out-cubic-bezier !important;
transform: translateX(-50%) translateY(4px);
}
}