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

docs/assets/css/bootstrap.css

@@ -3562,8 +3562,8 @@ a.thumbnail:hover {
 .thumbnail .caption {
   padding: 9px;
 }
-.label {
+.label,
-  padding: 1px 4px 2px;
+.badge {
   font-size: 10.998px;
   font-weight: bold;
   line-height: 13px;
@@ -3572,88 +3572,63 @@ a.thumbnail:hover {
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #999999;
+}
+.label {
+  padding: 1px 4px 2px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
-.label:hover {
-  color: #ffffff;
-  text-decoration: none;
-}
-.label-important {
-  background-color: #b94a48;
-}
-.label-important:hover {
-  background-color: #953b39;
-}
-.label-warning {
-  background-color: #f89406;
-}
-.label-warning:hover {
-  background-color: #c67605;
-}
-.label-success {
-  background-color: #468847;
-}
-.label-success:hover {
-  background-color: #356635;
-}
-.label-info {
-  background-color: #3a87ad;
-}
-.label-info:hover {
-  background-color: #2d6987;
-}
-.label-inverse {
-  background-color: #333333;
-}
-.label-inverse:hover {
-  background-color: #1a1a1a;
-}
 .badge {
   padding: 1px 9px 2px;
-  font-size: 12.025px;
-  font-weight: bold;
-  white-space: nowrap;
-  color: #ffffff;
-  background-color: #999999;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
 }
-.badge:hover {
+a.label:hover,
+a.badge:hover {
   color: #ffffff;
   text-decoration: none;
   cursor: pointer;
 }
-.badge-error {
+.label-important,
+.badge-important {
   background-color: #b94a48;
 }
-.badge-error:hover {
+.label-important[href],
+.badge-important[href] {
   background-color: #953b39;
 }
+.label-warning,
 .badge-warning {
   background-color: #f89406;
 }
-.badge-warning:hover {
+.label-warning[href],
+.badge-warning[href] {
   background-color: #c67605;
 }
+.label-success,
 .badge-success {
   background-color: #468847;
 }
-.badge-success:hover {
+.label-success[href],
+.badge-success[href] {
   background-color: #356635;
 }
+.label-info,
 .badge-info {
   background-color: #3a87ad;
 }
-.badge-info:hover {
+.label-info[href],
+.badge-info[href] {
   background-color: #2d6987;
 }
+.label-inverse,
 .badge-inverse {
   background-color: #333333;
 }
-.badge-inverse:hover {
+.label-inverse[href],
+.badge-inverse[href] {
   background-color: #1a1a1a;
 }
 @-webkit-keyframes progress-bar-stripes {

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 "labels-badges.less";
-@import "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%); }