w-ui/packages/badge/src/badge.less

A Vue.js 2.0 UI Toolkit for mobile

@badge-default-bg: #D0D0D0;
@badge-default-color: #FFF;
@badge-primary-bg: #04BE02;
@badge-danger-bg: #EF4F4F;
@badge-warning-bg: #FFB400;
@badge-hollow-bg: #FBFBFB;
@badge-hollow-color: #B2B2B2;

.wui {
  &-badge {
    color: @badge-default-color;
    font-size: 12px;
    position: relative;
    display: inline-block;
    border-radius: 1000px;
    line-height: 1;
    padding: 3px 6px;
    white-space: nowrap;
    background-color: @badge-default-bg;
  }

  &-badge-radius {
    border-radius: 2px;
    &:after {
      border-radius: 2px;
    }
  }

  &-badge-primary {
    background-color: @badge-primary-bg;
    color: #FFF;
  }

  &-badge-danger {
    background-color: @badge-danger-bg;
    color: #FFF;
  }

  &-badge-warning {
    background-color: @badge-warning-bg;
    color: #FFF;
  }

  &-badge-hollow {
    background-color: @badge-hollow-bg;
    color: @badge-hollow-color;
    &:after {
      content: '';
      width: 200%;
      height: 200%;
      border: 1px solid @badge-hollow-color;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 1rem;
      transform-origin: 0 0;
      transform: scale(.5);
    }
  }

  &-badge-radius:after {
    border-radius: 2px;
  }
}