Bring back the label, make it scale somewhat with the font-size of the parent using percentages and ems

3 files changed, 55 insertions, 0 deletions

diff --git a/less/bootstrap.less b/less/bootstrap.less
index d40984230..60d166368 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -49,6 +49,7 @@
 @import "alerts.less";
 @import "thumbnails.less";
 @import "media.less";
+@import "labels.less";
 @import "badges.less";
 @import "progress-bars.less";
 @import "accordion.less";
diff --git a/less/labels.less b/less/labels.less
new file mode 100644
index 000000000..2592d0444
--- /dev/null
+++ b/less/labels.less
@@ -0,0 +1,46 @@
+//
+// Labels
+// --------------------------------------------------
+
+
+// Base classes
+.label {
+  padding: .25em .6em;
+  font-size: 75%;
+  font-weight: 500;
+  color: #fff;
+  line-height: 1;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  background-color: @grayLight;
+  border-radius: .25em;
+}
+
+// Hover state, but only for links
+a.label {
+  &:hover,
+  &:focus {
+    color: #fff;
+    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 {
+  // Danger (red)
+  &-danger            { background-color: @label-danger-background; }
+  &-danger[href]      { background-color: darken(@label-danger-background, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: @label-warning-background; }
+  &-warning[href]     { background-color: darken(@label-warning-background, 10%); }
+  // Success (green)
+  &-success           { background-color: @label-success-background; }
+  &-success[href]     { background-color: darken(@label-success-background, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: @label-info-background; }
+  &-info[href]        { background-color: darken(@label-info-background, 10%); }
+}
+
diff --git a/less/variables.less b/less/variables.less
index 9eb84ddaa..2b6fa6e1b 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -271,6 +271,14 @@
 @popover-arrow-outer-color:   rgba(0,0,0,.25);
 
 
+// Labels
+// -------------------------
+@label-success-background:    @brand-success;
+@label-info-background:       @brand-info;
+@label-warning-background:    @brand-warning;
+@label-danger-background:     @brand-danger;
+
+
 // Modals
 // -------------------------