Sha256: 0edc36b4c940e719b653523ec11e93cea70ce34e0b181055860c971633978bf5
Contents?: true
Size: 1.9 KB
Versions: 125
Compression:
Stored size: 1.9 KB
Contents
@import "../tokens/positioning";
@import "../tokens/colors";
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
[class^="pb_tooltip_kit"] {
.tooltip_tooltip {
display: none;
opacity: 0;
left: 0;
animation-name: fadeIn;
animation-duration: 150ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
&.flipped {
margin-top: 15px;
.arrow {
top: -35%;
border-color: transparent transparent $white transparent;
}
}
&.react {
.arrow {
top: 78%;
}
&.flipped {
.arrow {
top: -8%;
}
}
}
.arrow {
content: " ";
position: absolute;
top: 100%;
left: 50%;
border-color: $white transparent transparent transparent;
border-style: solid;
border-width: 10px;
margin-bottom: 50px;
margin-left: -10px;
}
&.show {
opacity: 1;
display: block;
z-index: $z_9;
margin-bottom: $space_sm;
background-color: $white;
padding: $space_xs $space_sm $space_xs $space_sm;
box-shadow: $shadow_deeper;
border-radius: $border_rad_light;
&.fade_out {
animation-name: fadeOut;
animation-duration: 150ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
}
}
&[class*=_dark]{
.tooltip_tooltip{
color: $white;
background-color: rgba($black, $opacity_9);
&.show {
}
.arrow {
border-color: $black transparent transparent transparent;
opacity: $opacity_9;
}
&.flipped {
.arrow {
border-color: transparent transparent $black transparent;
opacity: $opacity_9;
}
}
}
}
}
.tooltip_tooltip.top {
padding: ($space_xs - 3px) 0;
}
Version data entries
125 entries across 125 versions & 1 rubygems