56 lines
1.3 KiB
SCSS
56 lines
1.3 KiB
SCSS
@import "../colors";
|
|
@import "../globals";
|
|
@import "../mixins";
|
|
@import "./config";
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
z-index: $z-index-higher;
|
|
display: block;
|
|
max-width: $tooltip-max-width;
|
|
padding: $tooltip-margin;
|
|
font-family: Roboto, sans-serif;
|
|
font-size: $tooltip-font-size;
|
|
font-weight: $font-weight-bold;
|
|
line-height: $font-size-small;
|
|
text-align: center;
|
|
text-transform: none;
|
|
pointer-events: none;
|
|
transition: $animation-curve-default $tooltip-animation-duration transform;
|
|
transform: scale(0) translateX(-50%);
|
|
transform-origin: top left;
|
|
|
|
&.tooltipActive {
|
|
transform: scale(1) translateX(-50%);
|
|
}
|
|
|
|
&.tooltipTop {
|
|
transform: scale(0) translateX(-50%) translateY(-100%);
|
|
&.tooltipActive {
|
|
transform: scale(1) translateX(-50%) translateY(-100%);
|
|
}
|
|
}
|
|
|
|
&.tooltipLeft {
|
|
transform: scale(0) translateX(-100%) translateY(-50%);
|
|
&.tooltipActive {
|
|
transform: scale(1) translateX(-100%) translateY(-50%);
|
|
}
|
|
}
|
|
|
|
&.tooltipRight {
|
|
transform: scale(0) translateX(0) translateY(-50%);
|
|
&.tooltipActive {
|
|
transform: scale(1) translateX(0) translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltipInner {
|
|
display: block;
|
|
padding: $tooltip-padding;
|
|
color: $tooltip-color;
|
|
background: $tooltip-background;
|
|
border-radius: $tooltip-border-radius;
|
|
}
|