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;
    span.badge-category {
      color: $primary !important;
      padding: 3px;
      vertical-align: text-top;
      margin-top: -3px; //vertical alignment fix
      display: inline-block;

      .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
    line-height: 1.25;

    span.badge-category {
      color: $primary !important;
      vertical-align: text-top;
      line-height: 1;
      margin-left: 4px;
      display: inline-block;

      #search-dropdown & {
        margin-top: 0;
      }

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

   .badge-category-parent-bg, .badge-category-bg {
     display: inline-block;
     width: 10px;
     height: 10px;
     &:before {
       content: "\a0";
     }
   }

   span {
     &.badge-category-parent-bg { //subcategory style
       width: 5px;
       & + .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;

    span {
      display: block;

      &.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;
      }
    }
  }

  span.badge-category {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;

    .d-dropdown & {
      max-width: 100px;
    }
  }

}

// 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, 95%, -65%) !important;
      color: $primary !important;
    }

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

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


  }

  .category-dropdown-menu {
    .badge-category {
      &.home {
        margin-left: 4px;
        padding-left: 0;
      }
    }
    .cat {
        line-height: 0;
      }
    .badge-wrapper {
      &.bar {
        margin: 5px 0;
        .badge-category {
          max-width: 100px;
        }
      }
      &.bullet {
        margin: 5px;
        .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: scale-color($primary, $lightness: 70%);
  &[href] {
  color: $secondary;
  }

  // New posts

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

  &.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: #ddd;
    top: -1px;
    color: #888;
    position: relative;
    margin-left: 2px;
    border: none;
  }
}

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

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

// 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);
}