Change .badge to .counter, make appearance more OSX-ish, and remove colors

less/bootstrap.less

@@ -49,7 +49,7 @@
 @import "alerts.less";
 @import "thumbnails.less";
 @import "media.less";
-@import "badges.less";
+@import "counters.less";
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";

less/counters.less

@@ -4,9 +4,9 @@
 
 
 // Base classes
-.badge {
+.counter {
   display: inline-block;
-  padding: 2px 4px;
+  padding: 2px 7px;
   font-size: @font-size-base * .846;
   font-weight: bold;
   line-height: 14px; // ensure proper line-height if floated
@@ -15,7 +15,9 @@
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   background-color: @grayLight;
-  border-radius: 3px;
+  border-radius: 10px;
+  min-width: 10px;
+  text-align: center;
 
   // Empty labels/badges collapse
   &:empty {
@@ -24,7 +26,7 @@
 }
 
 // Hover state, but only for links
-a.badge {
+a.counter {
   &:hover {
     color: #fff;
     text-decoration: none;
@@ -32,29 +34,15 @@ a.badge {
   }
 }
 
-// Colors
-// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
-.badge {
-  // Important (red)
-  &-danger            { background-color: @state-error-text; }
-  &-danger[href]      { background-color: darken(@state-error-text, 10%); }
-  // Warnings (orange)
-  &-warning           { background-color: #f89406; }
-  &-warning[href]     { background-color: darken(#f89406, 10%); }
-  // Success (green)
-  &-success           { background-color: @state-success-text; }
-  &-success[href]     { background-color: darken(@state-success-text, 10%); }
-}
-
 // Quick fix for labels/badges in buttons
 .btn {
-  .badge {
+  .counter {
     position: relative;
     top: -1px;
   }
 }
 .btn-mini {
-  .badge {
+  .counter {
     top: 0;
   }
 }