discourse/app/assets/stylesheets/common/components/badges.css.scss

// --------------------------------------------------
// Badges
// --------------------------------------------------

// Base
// --------------------------------------------------

%badge {
  display: inline-block;
  font-weight: normal;
  white-space: nowrap;
  @include border-radius-all(10px);
}

// Category badge
// --------------------------------------------------

.badge-category, .badge-category-parent {
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
}
.badge-wrapper {
  white-space: nowrap;
}

.badge-category {
  padding: 6px;
  color: $secondary;
  &[href] {
  color: $secondary;
  }
}

.badge-category-parent {
  padding: 6px 2px;
  width: 2px;
  .category-name {
    display: none;
  }
  &:before {
    content: "\a0";
  }
}

.d-dropdown .badge-category {
&.restricted {
    div {
      display: inline-block;
      margin: 0;
    }
}}

h1 a.badge-category div {vertical-align: top;}


// Notification badge
// --------------------------------------------------

.badge-notification {
  @extend %badge;
  padding: 3px;
  color: $secondary;
  font-size: 11px;
  line-height: 1;
  min-width: 11px;
  text-align: center;
  background-color: scale-color($primary, $lightness: 70%);
  &[href] {
  color: $secondary;
  }


  &.new-posts {
    background-color: transparent;
    color: scale-color($tertiary, $lightness: 50%);
    font-weight: normal;
  }

  &.unread-posts {
    background-color: scale-color($tertiary, $lightness: 50%);
    color: $secondary;
    font-weight: normal;
  }



  // Click count

  &.clicks {
    font-weight: normal;
    background-color: #ddd;
    top: -1px;
    color: #888;
    position: relative;
    margin-left: 2px;
    border: none;
  }
}

// Posts badge
// --------------------------------------------------

.badge-posts {
  font-weight: normal;
  font-size: 14px;
  line-height: 1;
  &[href] {
    color: scale-color($primary, $lightness: 40%);
  }
}

// Group badge
// --------------------------------------------------

.badge-group {
  @extend %badge;
  padding: 3px 5px;
  color: $primary;
  text-shadow: 0 1px 0 rgba($primary, 0.1);
  background-color: dark-light-diff($primary, $secondary, 90%, -65%);
  border-color: dark-light-diff($primary, $secondary, 90%, -65%);
  font-size: 12px;
  @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.22));
}