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 badges
// --------------------------------------------------

.badge-wrapper {
  font-size: 0.857em;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  position: relative;

  &.bar { //bar category style
    line-height: 1.25;
    margin-right: 5px;

    span.badge-category {
      color: $primary !important;
      padding: 3px;
      vertical-align: text-top;
      margin-top: -2px; //vertical alignment fix
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;

      .extra-info-wrapper & {
        color: $header-primary !important;
      }
    }

    .badge-category-parent-bg, .badge-category-bg {
      display: inline-block;
      padding: 1px;

      &:before {
        content: "\a0";
      }
    }
  }

  &.bullet { //bullet category style
    display: inline-flex;
    align-items: baseline;
    margin-right: 10px;

    span.badge-category {
      color: $primary !important;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;

      #search-dropdown & {
        margin-top: -2px;
      }

      .extra-info-wrapper & {
        color: $header-primary !important;
      }
    }

   .badge-category-parent-bg, .badge-category-bg {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    display: inline-block;
    line-height: 1;

    &:before {
      content: "\a0";
    }
  }

  span {
      &.badge-category-parent-bg { //subcategory style
        width: 5px;
        margin-right: 0;
        & + .badge-category-bg {
          width: 5px;
        }
      }
    }
  }


  &.box {  //box category style (apply custom widths to the wrapper, not the children)
    line-height: 1.5;
    margin-top: 5px;
    margin-right: 5px;

    span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;

      &.badge-category-bg, &.badge-category-parent-bg {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      &.badge-category-parent-bg { //subcategory style
        width: calc(100% - 5px);
        & + .badge-category-bg {
          left: 5px;
          width: calc(100% - 5px);
          & + .badge-category {
            margin-left: 5px;
          }
        }
      }

      &.badge-category {
        position: relative;
        padding: 0 5px;
        margin-top: 2px;
      }
    }
  }
}

@mixin cooked-badge-bullet($length, $offset:0px) {
  .badge-wrapper.bullet {
    span {
      position: relative;

      &.badge-category-bg {
        width: $length;
        height: $length;
        top: $offset;
      }

      &.badge-category-parent-bg {
        width: $length / 2;
        height: $length;
        top: $offset;

        & + .badge-category-bg {
          width: $length / 2;
        }
      }
    }
  }
}

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


.list-controls {
.category-breadcrumb {
  a.badge-category {
      display: inline-block;
      padding: 5px 8px;
      line-height: 20px;
    &.category-dropdown-button {
      margin-left: -4px;
      padding: 5px;
      width: 13px;

      .fa-caret-right {
        margin-left: 2px;
        }
      }
    }

    li.bar>.badge-category:not(.home):first-child {
      border-left: 5px solid;
    }

    li.bar>.badge-category {
      background: dark-light-diff($primary, $secondary, 90%, -65%) !important;
      color: $primary !important;
    }

    li.bullet>.badge-category {
      background: dark-light-diff($primary, $secondary, 90%, -65%) !important;
      color: $primary !important;

      .badge-category-bg {
        width: 10px;
        height: 10px;
        display: inline-block;
        margin: 0 2px;
      }
    }


  }

  .category-dropdown-menu {
    .badge-category {
      &.home {
        margin-left: 4px;
        padding-left: 0;
      }
    }
    .cat {
        line-height: 1;
      }
    .badge-wrapper {
      box-sizing: border-box;

      &.bar {
        padding: 5px 0;
        width: 100%;
        .badge-category {
          max-width: 100px;
        }
      }
      &.bullet {
        padding: 5px;
        width: 100%;
        .badge-category {
          max-width: 100px;
        }
      }
      &.box {
        margin-top: 0;
        width: 100%;
        line-height: 1;
        span.badge-category {
          padding: 5px;
        }
      }

    }

  }

}




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

.badge-notification {
  @extend %badge;
  padding: 4px 5px 2px 5px;
  vertical-align: middle;
  color: $secondary;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  background-color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 70%));
  &[href] {
    color: $secondary;
  }

  // New posts

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

  &.new-topic {
    background-color: transparent;
    color: scale-color($tertiary, $lightness: 20%);
    font-weight: normal;
    font-size: 0.929em;
  }

  &.new-topic::before {
    content: "●";
    margin-right: 2px;
  }

  // Click count

  &.clicks {
    font-weight: normal;
    background-color: dark-light-diff($primary, $secondary, 85%, -60%);
    top: -1px;
    color: dark-light-diff($primary, $secondary, 50%, -20%);
    position: relative;
    margin-left: 2px;
    border: none;
  }
}

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

.badge-posts {
  font-weight: normal;
  font-size: 1em;
  line-height: 1;
  &[href] {
    color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 60%));
  }
}

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

.badge-group {
  @extend %badge;
  padding: 4px 5px 2px 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: 0.857em;
  box-shadow: inset 0 1px 0 rgba(0,0,0, 0.22);
}