yu.css.ui/css/component/badge.css

纯CSS通用UI模块和组件

.yu-badge {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  position: relative;
  display: inline-block;
  margin-right: 14px;
  font-size: 0; }
  .yu-badge .transition {
    transform: scale(0);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease; }
    .yu-badge .transition.transition-enter {
      transform: scale(1);
      opacity: 1; }
    .yu-badge .transition.transition-leave {
      transform: scale(0);
      opacity: 0; }
  .yu-badge > .badge {
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 1000;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    min-width: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    text-align: center;
    background-color: #F56C6C;
    display: inline-block;
    color: #fff;
    font-size: 12px; }
    .yu-badge > .badge.hide {
      display: none; }
    .yu-badge > .badge.primary {
      background-color: #409EFF; }
    .yu-badge > .badge.success {
      background-color: #67C23A; }
    .yu-badge > .badge.warning {
      background-color: #fecf20; }
    .yu-badge > .badge.info {
      background-color: #909399; }
    .yu-badge > .badge.danger {
      background-color: #F56C6C; }
  .yu-badge > .dot {
    position: absolute;
    right: -4px;
    top: -4px;
    z-index: 1000;
    background-color: #F56C6C;
    width: 8px;
    height: 8px;
    border-radius: 4px; }
    .yu-badge > .dot.hide {
      display: none; }
    .yu-badge > .dot.primary {
      background-color: #409EFF; }
    .yu-badge > .dot.success {
      background-color: #67C23A; }
    .yu-badge > .dot.warning {
      background-color: #fecf20; }
    .yu-badge > .dot.info {
      background-color: #909399; }
    .yu-badge > .dot.danger {
      background-color: #F56C6C; }