Hover/scss/hover/_bubble-bottom.scss

25 lines
503 B
SCSS

/* Bubble Bottom */
@mixin bubble-bottom {
display: inline-block;
position: relative;
@extend %hacks;
&:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
transition-duration: $defaultDuration;
transition-property: bottom;
left: calc(50% - #{$tipWidth});
bottom: 0;
border-width: $tipHeight $tipWidth 0 $tipWidth;
border-color: $tipColour transparent transparent transparent;
}
&:hover:before {
bottom: -($tipHeight);
}
}