pocketbase/ui/src/scss/_tooltip.scss

58 lines
1.2 KiB
SCSS

@keyframes tooltipHide {
100% {
opacity: 0;
visibility: hidden;
transform: scale(0.9);
}
}
@keyframes tooltipShow {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.9);
}
100% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
}
.app-tooltip {
position: fixed;
z-index: 999999;
top: 0;
left: 0;
display: inline-block;
vertical-align: top;
max-width: 275px;
padding: 3px 5px;
color: #fff;
text-align: center;
font-family: var(--baseFontFamily);
font-size: var(--smFontSize);
line-height: var(--smLineHeight);
border-radius: var(--baseRadius);
background: var(--tooltipColor);
pointer-events: none;
user-select: none;
transition: opacity var(--baseAnimationSpeed),
visibility var(--baseAnimationSpeed),
transform var(--baseAnimationSpeed);
transform: scale(0.9);
white-space: pre-line;
@include hide();
&.active {
transform: scale(1);
@include show();
}
&.code {
font-family: monospace;
white-space: pre-wrap;
text-align: left;
min-width: 150px;
max-width: 340px;
}
}