Check out the code for this implementation on jsfiddle: https://jsfiddle.net/xuhang1128/cmkbu07s/2/ I utilized React and React-bootstrap to create it.
.design2-statusMonitor {
margin-top: 20px;
.list-group-item {
display: inline-block;
background-color: transparent;
// border: none;
border-right: 1px solid #CAD5E0;
border-top: 1px solid #CAD5E0;
border-bottom: 1px solid #CAD5E0;
width: auto;
&.selected {
background-color: #2f749a;
}
}
.list-group-item:after {
content: "";
width: 9px;
height: 9px;
position: absolute;
right: -6px;
top: 43%;
z-index: 2;
background-color: white;
border-top: 2px solid #CAD5E0;
border-right: 2px solid #CAD5E0;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.list-group-item.selected:after {
content: "";
width: 9px;
height: 9px;
position: absolute;
right: -6px;
top: 43%;
z-index: 2;
background-color: #2f749a;
border-top: 2px solid #CAD5E0;
border-right: 2px solid #CAD5E0;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.list-group-item:hover {
background-color: #c0d5e0;
color: white;
}
.list-group-item:hover:after {
background-color: #c0d5e0;
}
}
When clicking on a bubble button, you may notice that the triangle appears abnormal. Here's an image showcasing the issue: https://i.sstatic.net/8bdIC.jpg However, when I move the mouse away from the button and click elsewhere, the button returns to normal state?
If anyone could assist me in resolving this issue, I would greatly appreciate it. I have researched extensively but haven't found a solution yet.