react-jam-ui
Version:
React JAM UI components
99 lines (92 loc) • 2.36 kB
text/stylus
tooltip-default($params) {
.tooltip-text {
padding: 5px 12px;
border-radius: 10px;
border: 1px solid #21BAFA;
background: #FFFFFF;
&:before {
width: 0;
height: 0;
position: absolute;
content:'';
display: block;
z-index: 111;
}
&:after {
content:'';
width: 0;
height: 0;
display: block;
position:absolute;
z-index: 112;
}
}
&&-x-left {
.tooltip-text {
right: 100%;
margin-right: 15px;
}
}
&&-x-center {
.tooltip-text {
left: 50%;
transform: translateX(-50%);
&:before {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #21BAFA;
bottom: -8px;
left: 50%;
margin-left: -8px;
}
&:after {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #FFFFFF;
bottom: -7px;
left: 50%;
margin-left: -7px;
}
}
}
&&-x-right {
.tooltip-text {
left: 100%;
margin-left: 15px;
&:before {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #21BAFA;
left: -8px;
top: 50%;
margin-top: -8px;
}
&:after {
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #FFFFFF;
left: -7px;
top: 50%;
margin-top: -7px;
}
}
}
&&-y-top {
.tooltip-text {
bottom: 100%;
margin-bottom: 15px;
}
}
&&-y-center {
.tooltip-text {
top: 50%;
transform: translateY(-50%);
}
}
&&-y-bottom {
.tooltip-text {
top: 100%;
margin-top: 15px;
}
}
}