vui-design/src/style/components/badge.less

A high quality UI Toolkit based on Vue.js

@vui-badge: ~"@{vui}-badge";

.@{vui-badge} {
  position:relative;
  display:inline-block;
  box-sizing:border-box;
  margin:0;
  padding:0;
  vertical-align:middle;
  line-height:1;

  &-dot {
    position:absolute;
    top:0;
    right:0;
    z-index:10;
    display:block;
    box-sizing:border-box;
    width:@badge-dot-size;
    height:@badge-dot-size;
    border-radius:@badge-dot-size;
    box-shadow:@badge-dot-shadow;
    transform:translate(50%,-50%);
  }
  &-count {
    position:absolute;
    top:0;
    right:0;
    z-index:10;
    display:block;
    box-sizing:border-box;
    min-width:@badge-count-size;
    height:@badge-count-size;
    border-radius:@badge-count-size;
    box-shadow:@badge-count-shadow;
    padding:@badge-count-padding;
    font-size:@badge-count-font-size;
    white-space:nowrap;
    text-align:center;
    line-height:@badge-count-size;
    transform:translate(50%,-50%);
  }

  &-alone &-dot {
    position:unset;
    top:unset;
    right:unset;
    transform:translate(0,0);
  }
  &-alone &-count {
    position:unset;
    top:unset;
    right:unset;
    transform:translate(0,0);
  }

  &-default &-dot {
    background-color:@badge-default-color;
  }
  &-default &-count {
    background-color:@badge-default-color;
    color:@badge-default-font-color;
  }
  &-primary &-dot {
    background-color:@badge-primary-color;
  }
  &-primary &-count {
    background-color:@badge-primary-color;
    color:@badge-primary-font-color;
  }
  &-info &-dot {
    background-color:@badge-info-color;
  }
  &-info &-count {
    background-color:@badge-info-color;
    color:@badge-info-font-color;
  }
  &-warning &-dot {
    background-color:@badge-warning-color;
  }
  &-warning &-count {
    background-color:@badge-warning-color;
    color:@badge-warning-font-color;
  }
  &-success &-dot {
    background-color:@badge-success-color;
  }
  &-success &-count {
    background-color:@badge-success-color;
    color:@badge-success-font-color;
  }
  &-error &-dot {
    background-color:@badge-error-color;
  }
  &-error &-count {
    background-color:@badge-error-color;
    color:@badge-error-font-color;
  }

  &-status {
    font-size:0;
  }
  &-status &-status-dot {
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    width:@badge-status-dot-size;
    height:@badge-status-dot-size;
    border-radius:@badge-status-dot-size;
    box-shadow:@badge-status-dot-shadow;
    vertical-align:middle;
  }
  &-status &-status-text {
    display:inline-block;
    box-sizing:border-box;
    margin-left:@badge-status-text-margin-left;
    vertical-align:middle;
    color:@badge-status-text-font-color;
    font-size:@badge-status-text-font-size;
    text-align:left;
    line-height:1;
    white-space:nowrap;
  }

  &-status-default &-status-dot {
    border-color:@badge-status-default-color;
    background-color:@badge-status-default-color;
  }
  &-status-processing &-status-dot {
    border-color:@badge-status-processing-color;
    background-color:@badge-status-processing-color;

    &:after {
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      display:block;
      box-sizing:border-box;
      width:100%;
      height:100%;
      border-width:1px;
      border-style:solid;
      border-color:inherit;
      border-radius:50%;
      animation:vuiBadgeStatusProcessing 1.2s infinite ease-in-out;
    }
  }
  &-status-warning &-status-dot {
    border-color:@badge-status-warning-color;
    background-color:@badge-status-warning-color;
  }
  &-status-success &-status-dot {
    border-color:@badge-status-success-color;
    background-color:@badge-status-success-color;
  }
  &-status-error &-status-dot {
    border-color:@badge-status-error-color;
    background-color:@badge-status-error-color;
  }
  &-status-blue &-status-dot {
    border-color:@badge-status-blue-color;
    background-color:@badge-status-blue-color;
  }
  &-status-cyan &-status-dot {
    border-color:@badge-status-cyan-color;
    background-color:@badge-status-cyan-color;
  }
  &-status-geekblue &-status-dot {
    border-color:@badge-status-geekblue-color;
    background-color:@badge-status-geekblue-color;
  }
  &-status-gold &-status-dot {
    border-color:@badge-status-gold-color;
    background-color:@badge-status-gold-color;
  }
  &-status-green &-status-dot {
    border-color:@badge-status-green-color;
    background-color:@badge-status-green-color;
  }
  &-status-lime &-status-dot {
    border-color:@badge-status-lime-color;
    background-color:@badge-status-lime-color;
  }
  &-status-magenta &-status-dot {
    border-color:@badge-status-magenta-color;
    background-color:@badge-status-magenta-color;
  }
  &-status-orange &-status-dot {
    border-color:@badge-status-orange-color;
    background-color:@badge-status-orange-color;
  }
  &-status-pink &-status-dot {
    border-color:@badge-status-pink-color;
    background-color:@badge-status-pink-color;
  }
  &-status-purple &-status-dot {
    border-color:@badge-status-purple-color;
    background-color:@badge-status-purple-color;
  }
  &-status-red &-status-dot {
    border-color:@badge-status-red-color;
    background-color:@badge-status-red-color;
  }
  &-status-volcano &-status-dot {
    border-color:@badge-status-volcano-color;
    background-color:@badge-status-volcano-color;
  }
  &-status-yellow &-status-dot {
    border-color:@badge-status-yellow-color;
    background-color:@badge-status-yellow-color;
  }
}

@keyframes vuiBadgeStatusProcessing {
  0% { opacity:0.6; transform:scale(0.8); }
  100% { opacity:0; transform:scale(2.4); }
}