mirror of
https://github.com/stolksdorf/homebrewery.git
synced 2025-12-22 14:01:29 +00:00
129 lines
2.5 KiB
Plaintext
129 lines
2.5 KiB
Plaintext
@tooltipColor : #383838;
|
|
@arrowSize : 6px;
|
|
@arrowPosition : 18px;
|
|
|
|
[data-tooltip]{
|
|
.tooltip(attr(data-tooltip));
|
|
}
|
|
[data-tooltip-top]{
|
|
.tooltipTop(attr(data-tooltip-top));
|
|
}
|
|
[data-tooltip-bottom]{
|
|
.tooltipBottom(attr(data-tooltip-bottom));
|
|
}
|
|
[data-tooltip-left]{
|
|
.tooltipLeft(attr(data-tooltip-left));
|
|
}
|
|
[data-tooltip-right]{
|
|
.tooltipRight(attr(data-tooltip-right));
|
|
}
|
|
|
|
|
|
|
|
.tooltip(@content){
|
|
.tooltipBottom(@content);
|
|
}
|
|
|
|
.tooltipTop(@content){
|
|
.tooltipBase(@content);
|
|
&:before {
|
|
margin-bottom: -@arrowSize * 2;
|
|
border-top-color: @tooltipColor;
|
|
}
|
|
&:after{ margin-left: -18px; }
|
|
&:before, &:after {
|
|
bottom: 100%;
|
|
left: 50%; }
|
|
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
|
.transform(translateY(-(@arrowSize + 2)));
|
|
}
|
|
}
|
|
|
|
.tooltipBottom(@content){
|
|
.tooltipBase(@content);
|
|
&:before {
|
|
margin-top: -@arrowSize * 2;
|
|
border-bottom-color: @tooltipColor;
|
|
}
|
|
&:after{ margin-left: -18px; }
|
|
&:before, &:after {
|
|
top: 100%;
|
|
left: 50%; }
|
|
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
|
.transform(translateY(@arrowSize + 2));
|
|
}
|
|
}
|
|
|
|
|
|
.tooltipLeft(@content){
|
|
.tooltipBase(@content);
|
|
&:before {
|
|
margin-right: -@arrowSize * 2;
|
|
margin-bottom: -@arrowSize;
|
|
border-left-color: @tooltipColor;
|
|
|
|
}
|
|
&:after{ margin-bottom: -14px;}
|
|
&:before, &:after {
|
|
right: 100%;
|
|
bottom: 50%; }
|
|
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
|
.transform(translateX(-(@arrowSize + 2)));
|
|
}
|
|
}
|
|
|
|
.tooltipRight(@content){
|
|
.tooltipBase(@content);
|
|
&:before {
|
|
margin-left: -@arrowSize * 2;
|
|
margin-bottom: -@arrowSize;
|
|
border-right-color: @tooltipColor;
|
|
}
|
|
&:after{ margin-bottom: -14px;}
|
|
&:before, &:after {
|
|
left: 100%;
|
|
bottom: 50%; }
|
|
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
|
.transform(translateX(@arrowSize + 2));
|
|
}
|
|
}
|
|
|
|
|
|
.tooltipShow(){
|
|
|
|
}
|
|
|
|
.tooltipBase(@content){
|
|
position: relative;
|
|
&:before, &:after{
|
|
.animateAll();
|
|
position: absolute;
|
|
opacity: 0;
|
|
z-index: 1000000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
//Arrow
|
|
&:before{
|
|
content: '';
|
|
background: transparent;
|
|
border: @arrowSize solid transparent;
|
|
z-index: 1000001;
|
|
}
|
|
|
|
//Box
|
|
&:after{
|
|
content: @content;
|
|
color: white;
|
|
background: @tooltipColor;
|
|
padding: 8px 10px;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
white-space: nowrap;
|
|
visibility: hidden;
|
|
}
|
|
&:hover:before, &:hover:after {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
} |