react-cqtoolbox
Version:
[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]
67 lines (59 loc) • 1.51 kB
CSS
.badge {
position: relative;
display: inline-block;
line-height: 1;
vertical-align: middle;
box-sizing: border-box;
font-family: Microsoft Yahei,Helvetica Neue,\\5B8B\4F53,Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.badge *,
.badge *::after,
.badge *::before {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-touch-callout: none;
}
.count, .text {
position: absolute;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: -10px;
height: 20px;
border-radius: 10px;
min-width: 20px;
background: rgb(244, 67, 54);
color: rgb(255, 255, 255);
line-height: 20px;
text-align: center;
padding: 0 6px;
font-size: 12px;
white-space: nowrap;
font-family: tahoma;
font-weight: 600;
z-index: 10;
}
.dot {
position: absolute;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: -4px;
height: 8px;
width: 8px;
border-radius: 100%;
background: rgb(244, 67, 54);
z-index: 10;
}
.text {
margin-left: 8px;
}