便签与标号

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

class=""	标签	标号	描述
`hui-label hui-label-default radius`	默认	1	默认
`hui-label hui-label-primary radius`	主要	2	主要
`hui-label hui-label-secondary radius`	次要	3	次要
`hui-label hui-label-success radius`	成功	4	成功
`hui-label hui-label-warning radius`	警告	5	警告
`hui-label hui-label-danger radius`	危险	6	危险

HTML SCSS CSS

<span class="hui-label hui-label-default radius">默认</span>

@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}
.hui-badge {
  padding: 2px 9px;
  @include borderRadius(9px);
}
.hui-label {
  padding: 2px 4px;
  /*圆角*/
  &.radius {
    @include borderRadius(3px);
  }
}
.hui-label,
.hui-badge {
  display: inline-block;
  font-size: 11.844px;
  font-weight: bold;
  line-height: 14px;
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #999;
  overflow: hidden;
  &:empty {
    display: none;
  }
  &:hover,
  &:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
  /*默认*/
  &.hui-label-default,
  &.hui-badge-default,
  &.hui-label-default[href],
  &.hui-badge-default[href] {
    background-color: #e6e6e6;
    color: #333;
  }

  /*主要*/
  &.hui-label-primary,
  &.hui-badge-primary,
  &.hui-label-primary[href],
  &.hui-badge-primary[href] {
    background-color: #5a98de;
  }

  /*次要*/
  &.hui-label-secondary,
  &.hui-badge-secondary,
  &.hui-label-secondary[href],
  &.hui-badge-secondary[href] {
    background-color: #3bb4f2;
  }

  /*成功*/
  &.hui-label-success,
  &.hui-badge-success,
  &.hui-label-success[href],
  &.hui-badge-success[href] {
    background-color: #5eb95e;
  }

  /*警告*/
  &.hui-label-warning,
  &.hui-badge-warning,
  &.hui-label-warning[href],
  &.hui-badge-warning[href] {
    background-color: #f37b1d;
  }

  /*危险*/
  &.hui-label-danger,
  &.hui-badge-danger,
  &.hui-label-danger[href],
  &.hui-badge-danger[href] {
    background-color: #dd514c;
  }
}

.hui-badge {
  padding: 2px 9px;
  border-radius: 9px;
}

.hui-label {
  padding: 2px 4px;
  /*圆角*/
}
.hui-label.radius {
  border-radius: 3px;
}

.hui-label,
.hui-badge {
  display: inline-block;
  font-size: 11.844px;
  font-weight: bold;
  line-height: 14px;
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #999;
  overflow: hidden;
  /*默认*/
  /*主要*/
  /*次要*/
  /*成功*/
  /*警告*/
  /*危险*/
}
.hui-label:empty,
.hui-badge:empty {
  display: none;
}
.hui-label:hover, .hui-label:focus,
.hui-badge:hover,
.hui-badge:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.hui-label.hui-label-default, .hui-label.hui-badge-default, .hui-label.hui-label-default[href], .hui-label.hui-badge-default[href],
.hui-badge.hui-label-default,
.hui-badge.hui-badge-default,
.hui-badge.hui-label-default[href],
.hui-badge.hui-badge-default[href] {
  background-color: #e6e6e6;
  color: #333;
}
.hui-label.hui-label-primary, .hui-label.hui-badge-primary, .hui-label.hui-label-primary[href], .hui-label.hui-badge-primary[href],
.hui-badge.hui-label-primary,
.hui-badge.hui-badge-primary,
.hui-badge.hui-label-primary[href],
.hui-badge.hui-badge-primary[href] {
  background-color: #5a98de;
}
.hui-label.hui-label-secondary, .hui-label.hui-badge-secondary, .hui-label.hui-label-secondary[href], .hui-label.hui-badge-secondary[href],
.hui-badge.hui-label-secondary,
.hui-badge.hui-badge-secondary,
.hui-badge.hui-label-secondary[href],
.hui-badge.hui-badge-secondary[href] {
  background-color: #3bb4f2;
}
.hui-label.hui-label-success, .hui-label.hui-badge-success, .hui-label.hui-label-success[href], .hui-label.hui-badge-success[href],
.hui-badge.hui-label-success,
.hui-badge.hui-badge-success,
.hui-badge.hui-label-success[href],
.hui-badge.hui-badge-success[href] {
  background-color: #5eb95e;
}
.hui-label.hui-label-warning, .hui-label.hui-badge-warning, .hui-label.hui-label-warning[href], .hui-label.hui-badge-warning[href],
.hui-badge.hui-label-warning,
.hui-badge.hui-badge-warning,
.hui-badge.hui-label-warning[href],
.hui-badge.hui-badge-warning[href] {
  background-color: #f37b1d;
}
.hui-label.hui-label-danger, .hui-label.hui-badge-danger, .hui-label.hui-label-danger[href], .hui-label.hui-badge-danger[href],
.hui-badge.hui-label-danger,
.hui-badge.hui-badge-danger,
.hui-badge.hui-label-danger[href],
.hui-badge.hui-badge-danger[href] {
  background-color: #dd514c;
}