a36b341865
* ref(popover): allow for popover content from the right Popovers contents can display to the left of the trigger and above the trigger. Add the ability to display to the right of the trigger my adding mouseover padding. This may be needed for tile view, depending on where the triggers are located. * squash: abstract common css proprties into placeholder class
44 lines
1001 B
SCSS
44 lines
1001 B
SCSS
/**
|
|
* Mousemove padding styles are used to add invisible elements to the popover
|
|
* to allow mouse movement from the popover trigger to the popover itself
|
|
* without triggering a mouseleave event.
|
|
*/
|
|
.popover-mousemove-padding-bottom {
|
|
bottom: -15px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
%vertical-popover-padding {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 40px;
|
|
}
|
|
|
|
.popover-mousemove-padding-left {
|
|
@extend %vertical-popover-padding;
|
|
left: -20px;
|
|
}
|
|
|
|
.popover-mousemove-padding-right {
|
|
@extend %vertical-popover-padding;
|
|
right: -20px;
|
|
}
|
|
|
|
/**
|
|
* An invisible element is added to the top of the popover to ensure the mouse
|
|
* stays over the popover when the popover's height is shrunk, which would then
|
|
* normally leave the mouse outside of the popover itself and cause a mouseleave
|
|
* event.
|
|
*/
|
|
.popover-mouse-padding-top {
|
|
height: 30px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -25px;
|
|
width: 100%;
|
|
}
|