Hover/scss/hover/_bubble-float-right.scss

31 lines
628 B
SCSS

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