remove separate badges and labels, add single file instead, remove hover from non-link badges/labels

less/badges.less

@@ -1,36 +0,0 @@
-// BADGES
-// ------
-
-// Base
-.badge {
-  padding: 1px 9px 2px;
-  font-size: @baseFontSize * .925;
-  font-weight: bold;
-  white-space: nowrap;
-  color: @white;
-  background-color: @grayLight;
-  .border-radius(9px);
-}
-
-// Hover state
-.badge:hover {
-  color: @white;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-// Colors
-.badge-error            { background-color: @errorText; }
-.badge-error:hover      { background-color: darken(@errorText, 10%); }
-
-.badge-warning          { background-color: @orange; }
-.badge-warning:hover    { background-color: darken(@orange, 10%); }
-
-.badge-success          { background-color: @successText; }
-.badge-success:hover    { background-color: darken(@successText, 10%); }
-
-.badge-info             { background-color: @infoText; }
-.badge-info:hover       { background-color: darken(@infoText, 10%); }
-
-.badge-inverse          { background-color: @grayDark; }
-.badge-inverse:hover    { background-color: darken(@grayDark, 10%); }

less/bootstrap.less

@@ -52,8 +52,7 @@
 
 // Components: Misc
 @import "thumbnails.less";
-@import "labels.less";
-@import "badges.less";
+@import "labels-badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
 @import "carousel.less";

less/labels-badges.less

@@ -0,0 +1,55 @@
+// LABELS & BADGES
+// ---------------
+
+// Base classes
+.label,
+.badge {
+  font-size: @baseFontSize * .846;
+  font-weight: bold;
+  line-height: 13px; // ensure proper line-height if floated
+  color: @white;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  background-color: @grayLight;
+}
+// Set unique padding and border-radii
+.label {
+  padding: 1px 4px 2px;
+  .border-radius(3px);
+}
+.badge {
+  padding: 1px 9px 2px;
+  .border-radius(9px);
+}
+
+// Hover state, but only for links
+a {
+  &.label:hover,
+  &.badge:hover {
+    color: @white;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+.label,
+.badge {
+  // Important (red)
+  &-important         { background-color: @errorText; }
+  &-important[href]   { background-color: darken(@errorText, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: @orange; }
+  &-warning[href]     { background-color: darken(@orange, 10%); }
+  // Success (green)
+  &-success           { background-color: @successText; }
+  &-success[href]     { background-color: darken(@successText, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: @infoText; }
+  &-info[href]        { background-color: darken(@infoText, 10%); }
+  // Inverse (black)
+  &-inverse           { background-color: @grayDark; }
+  &-inverse[href]     { background-color: darken(@grayDark, 10%); }
+}

less/labels.less

@@ -1,38 +0,0 @@
-// LABELS
-// ------
-
-// Base
-.label {
-  padding: 1px 4px 2px;
-  font-size: @baseFontSize * .846;
-  font-weight: bold;
-  line-height: 13px; // ensure proper line-height if floated
-  color: @white;
-  vertical-align: middle;
-  white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: @grayLight;
-  .border-radius(3px);
-}
-
-// Hover state
-.label:hover {
-  color: @white;
-  text-decoration: none;
-}
-
-// Colors
-.label-important        { background-color: @errorText; }
-.label-important:hover  { background-color: darken(@errorText, 10%); }
-
-.label-warning          { background-color: @orange; }
-.label-warning:hover    { background-color: darken(@orange, 10%); }
-
-.label-success          { background-color: @successText; }
-.label-success:hover    { background-color: darken(@successText, 10%); }
-
-.label-info             { background-color: @infoText; }
-.label-info:hover       { background-color: darken(@infoText, 10%); }
-
-.label-inverse             { background-color: @grayDark; }
-.label-inverse:hover       { background-color: darken(@grayDark, 10%); }