shiori/view/less/yla-tooltip.less
Radhi Fadlillah 5232e0e2c9 Update UI
2018-05-18 14:07:15 +07:00

52 lines
No EOL
1.2 KiB
Text

@import "variable";
.yla-tooltip {
font-size: 14px;
color: @colorLight;
background-color: @tooltipBg;
padding: 8px;
border-radius: 4px;
position: relative;
z-index: 1000;
&::after {
content: '';
display: block;
position: absolute;
border: @arrowWidth solid transparent;
}
&.left {
margin-left: -(@arrowWidth*2-2);
&::after {
top: 50%;
right: -2*@arrowWidth;
margin-top: -@arrowWidth;
border-left-color: @tooltipBg
}
}
&.top {
margin-top: -(@arrowWidth*2-2);
&::after {
left: 50%;
bottom: -2*@arrowWidth;
margin-left: -@arrowWidth;
border-top-color: @tooltipBg
}
}
&.right {
margin-left: @arrowWidth*2-2;
&::after {
top: 50%;
left: -2*@arrowWidth;
margin-top: -@arrowWidth;
border-right-color: @tooltipBg
}
}
&.bottom {
margin-top: @arrowWidth*2-2;
&::after {
left: 50%;
top: -2*@arrowWidth;
margin-left: -@arrowWidth;
border-bottom-color: @tooltipBg
}
}
}