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

@import "foundation/variables";
@import "foundation/mixins";

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

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

%badge {
  display: inline-block;
  border: 1px solid rgba($black, 0.4);
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  @include border-radius-all(4px);
}

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

.badge-category {
  padding: 5px 8px;
  color: $white;
  font-size: 12px;
  font-weight: bold;
  &[href] {
    color: $white;
  }
}

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

.badge-notification {
  @extend %badge;
  margin-left: 4px;
  padding: 2px 4px;
  color: $white;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba($black, 0.2);
  background-color: $badge-notification-background-color;
  @include box-shadow(inset 0 1px 0 rgba($white, 0.26));
  &[href] {
    color: $white;
  }

  // New posts

  &.new-posts {
    background-color: $blue;
  }

  // Click count

  &.clicks {
    border: 0;
    font-weight: normal;
    text-shadow: none;
    background-color: rgba($black, 0.15)
  }
}

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

.badge-posts {
  color: $badge-posts-color;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  &[href] {
    color: $badge-posts-color;
  }
}

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

.badge-group {
  @extend %badge;
  padding: 3px 5px;
  color: $black;
  text-shadow: 0 1px 0 rgba($white, 0.2);
  background-color: #ddd;
  border-color: #aaa;
  font-size: 12px;
  @include box-shadow(inset 0 1px 0 rgba($white, 0.52));
}