@c8y/style/styles/_badges.less

Styles for Cumulocity IoT applications

.badge {
  display: inline-block;
  padding: @badge-padding;
  min-width: 10px;
  border-radius: @badge-border-radius;
  background-color: @badge-background-default;
  color: @badge-color-default;
  text-align: center;
  white-space: nowrap;
  font-weight: @badge-font-weight;
  font-size: @badge-font-size;
  line-height: @badge-line-height;
  box-shadow: inset 0 0 0 1px @gray-50;
  vertical-align: middle;

  &.badge-success {
    background-color: @badge-background-success;
    color: @badge-color-success;
    box-shadow: inset 0 0 0 1px @badge-color-success;
  }
  &.badge-danger {
    background-color: @badge-background-danger;
    color: @badge-color-danger;
    box-shadow: inset 0 0 0 1px @badge-color-danger;
  }
  &.badge-warning {
    background-color: @badge-background-warning;
    color: @badge-color-warning;
    box-shadow: inset 0 0 0 1px @badge-color-warning;
  }
  &.badge-system {
    background-color: @badge-background-system;
    color: @badge-color-system;
  }
  &.badge-info {
    background-color: @badge-background-info;
    box-shadow: inset 0 0 0 1px @badge-color-info;
    color: @badge-color-info;
  }
  // Empty badges collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }
  .btn & {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
  }
  a & {
    &:hover,
    &:focus {
      text-decoration: none;
      cursor: pointer;
    }
  }
  .list-group-item.active > &,
  .nav-pills > .active > a > & {
    box-shadow: 0 0 0 2px @badge-color-focus;
  }
  .list-group-item > & {
    float: right;
  }
  .list-group-item > & + & {
    margin-right: 5px;
  }
  .nav-pills > li > a > & {
    margin-left: 3px;
  }
}