beyond-components
Version:
react prototype components
70 lines (66 loc) • 1.79 kB
text/less
@import "../mixins";
.beyond_tooltip(@prefix){
.@{prefix}tooltip{
@width : 14px;
display: inline-block;
position: relative;
border-radius : 6px;
border : 1px solid #dddddd;
background : white;
z-index: 999;
&>&-content{
text-align: center;
padding : 6px 12px;
font-size: 12px;
}
&>&-triangle{
position: absolute;
.triangle-reset(@width/2);
&:before{
content: "";
position: absolute;
.triangle-reset(@width/2);
}
}
&&-top > &-triangle{
.center();
bottom : -@width;
border-top-color: #dddddd;
&:before{
border-top-color: white;
left: -@width/2;
bottom: -@width/2 + 1px;
}
}
&&-bottom > &-triangle{
.center();
top : -@width;
border-bottom-color: #dddddd;
&:before{
border-bottom-color: white;
left: -@width/2;
top: -@width/2 + 1px;
}
}
&&-left > &-triangle{
.middle();
right : -@width;
border-left-color: #dddddd;
&:before{
border-left-color: white;
right: -@width/2 + 1px;
bottom: -@width/2 ;
}
}
&&-right > &-triangle{
.middle();
left : -@width;
border-right-color: #dddddd;
&:before{
border-right-color: white;
right: -@width/2 - 1px;
bottom: -@width/2;
}
}
}
}