bk-magic-vue/lib/ui/badge.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-badge-wrapper{
  position:relative;
  display:inline-block;
}

.bk-badge-wrapper .bk-badge{
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    min-width:18px;
    height:18px;
    line-height:16px;
    padding:0 2px;
    border:1px solid #c3cdd7;
    border-radius:18px;
    background-color:#fff;
    font-size:10px;
    text-align:center;
  }

.bk-badge-wrapper .bk-badge .bk-icon{
      position:absolute;
      left:50%;
      top:50%;
      margin-top:0;
      -webkit-transform:translate(-50%, -50%);
              transform:translate(-50%, -50%);
      display:block;
      line-height:18px;
    }

.bk-badge-wrapper .bk-badge.pinned{
      position:absolute
    }

.bk-badge-wrapper .bk-badge.pinned.top-right{
        top:0;
        right:0;
        -webkit-transform:translate(50%, -50%) scale(1, 1);
                transform:translate(50%, -50%) scale(1, 1)
      }

.bk-badge-wrapper .bk-badge.pinned.top-right.fade-center-enter,
        .bk-badge-wrapper .bk-badge.pinned.top-right.fade-center-leave-active{
          opacity:0;
          -webkit-transform:translate(50%, -50%) scale(0, 0);
                  transform:translate(50%, -50%) scale(0, 0);
        }

.bk-badge-wrapper .bk-badge.pinned.right{
        top:50%;
        right:0%;
        -webkit-transform:translate(100%, -50%) scale(1, 1);
                transform:translate(100%, -50%) scale(1, 1)
      }

.bk-badge-wrapper .bk-badge.pinned.right.fade-center-enter,
        .bk-badge-wrapper .bk-badge.pinned.right.fade-center-leave-active{
          opacity:0;
          -webkit-transform:translate(50%, -50%) scale(0, 0);
                  transform:translate(50%, -50%) scale(0, 0);
        }

.bk-badge-wrapper .bk-badge.pinned.bottom-right{
        bottom:0;
        right:0;
        -webkit-transform:translate(50%, 50%) scale(1, 1);
                transform:translate(50%, 50%) scale(1, 1)
      }

.bk-badge-wrapper .bk-badge.pinned.bottom-right.fade-center-enter,
        .bk-badge-wrapper .bk-badge.pinned.bottom-right.fade-center-leave-active{
          opacity:0;
          -webkit-transform:translate(50%, 50%) scale(0, 0);
                  transform:translate(50%, 50%) scale(0, 0);
        }

.bk-badge-wrapper .bk-badge.pinned.top-left{
        top:0;
        left:0;
        -webkit-transform:translate(-50%, -50%) scale(1, 1);
                transform:translate(-50%, -50%) scale(1, 1)
      }

.bk-badge-wrapper .bk-badge.pinned.top-left.fade-center-enter,
        .bk-badge-wrapper .bk-badge.pinned.top-left.fade-center-leave-active{
          opacity:0;
          -webkit-transform:translate(-50%, -50%) scale(0, 0);
                  transform:translate(-50%, -50%) scale(0, 0);
        }

.bk-badge-wrapper .bk-badge.pinned.bottom-left{
        bottom:0;
        left:0;
        -webkit-transform:translate(-50%, 50%) scale(1, 1);
                transform:translate(-50%, 50%) scale(1, 1)
      }

.bk-badge-wrapper .bk-badge.pinned.bottom-left.fade-center-enter,
        .bk-badge-wrapper .bk-badge.pinned.bottom-left.fade-center-leave-active{
          opacity:0;
          -webkit-transform:translate(-50%, 50%) scale(0, 0);
                  transform:translate(-50%, 50%) scale(0, 0);
        }

.bk-badge-wrapper .bk-badge.dot{
      width:8px;
      height:8px;
      min-width:8px;
    }

.bk-badge-wrapper .bk-badge.bk-danger{
      background-color:#ea3636;
      border:2px solid #fff;
      color:#fff
    }

.bk-badge-wrapper .bk-badge.bk-danger.is-icon{
        background-color:#fff;
        border-color:#fff;
        color:#ea3636;
      }

.bk-badge-wrapper .bk-badge.bk-warning{
      background-color:#ff9c01;
      border:2px solid #fff;
      color:#fff
    }

.bk-badge-wrapper .bk-badge.bk-warning.is-icon{
        background-color:#fff;
        border-color:#fff;
        color:#ff9c01;
      }

.bk-badge-wrapper .bk-badge.bk-success{
      background-color:#2dcb56;
      border:2px solid #fff;
      color:#fff
    }

.bk-badge-wrapper .bk-badge.bk-success.is-icon{
        background-color:#fff;
        border-color:#fff;
        color:#2dcb56;
      }

.bk-badge-wrapper .bk-badge.bk-primary{
      background-color:#3a84ff;
      border:2px solid #fff;
      color:#fff
    }

.bk-badge-wrapper .bk-badge.bk-primary.is-icon{
        background-color:#fff;
        border-color:#fff;
        color:#3a84ff;
      }

.bk-badge-wrapper .bk-badge.bk-info{
      background-color:#3a84ff;
      border:2px solid #fff;
      color:#fff
    }

.bk-badge-wrapper .bk-badge.bk-info.is-icon{
        background-color:#fff;
        border-color:#fff;
        color:#3a84ff;
      }