Merge pull request #7641 from Fowowski/3.0.0-wip

more nested less rules - labels component

2 files changed, 62 insertions, 35 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 624daf46c..c7e2b4eb1 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4782,6 +4782,7 @@ a.thumbnail:focus {
 }
 
 .label {
+  display: inline;
   padding: .25em .6em;
   font-size: 75%;
   font-weight: 500;
@@ -4794,7 +4795,9 @@ a.thumbnail:focus {
   border-radius: .25em;
 }
 
+.label[href]:hover,
 a.label:hover,
+.label[href]:focus,
 a.label:focus {
   color: #fff;
   text-decoration: none;
@@ -4809,14 +4812,6 @@ a.label:focus {
   background-color: #c9302c;
 }
 
-.label-warning {
-  background-color: #f0ad4e;
-}
-
-.label-warning[href] {
-  background-color: #ec971f;
-}
-
 .label-success {
   background-color: #5cb85c;
 }
@@ -4825,6 +4820,14 @@ a.label:focus {
   background-color: #449d44;
 }
 
+.label-warning {
+  background-color: #f0ad4e;
+}
+
+.label-warning[href] {
+  background-color: #ec971f;
+}
+
 .label-info {
   background-color: #5bc0de;
 }
diff --git a/less/labels.less b/less/labels.less
index e01054fdf..92fe8f89e 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -2,45 +2,69 @@
 // Labels
 // --------------------------------------------------
 
-
-// Base classes
 .label {
+  display: inline;
   padding: .25em .6em;
   font-size: 75%;
   font-weight: 500;
-  color: #fff;
   line-height: 1;
-  vertical-align: middle;
-  white-space: nowrap;
+  color: #fff;
   text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
   background-color: @gray-light;
   border-radius: .25em;
-}
 
-// Hover state, but only for links
-a.label {
-  &:hover,
-  &:focus {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer;
+  // Add hover effects, but only for links 
+  &[href] {
+    &:hover,
+    &:focus {
+      color: #fff;
+      text-decoration: none;
+      cursor: pointer;
+      background-color: darken(@gray-light, 10%);
+    }
   }
 }
 
 // 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-bg; }
-  &-danger[href]      { background-color: darken(@label-danger-bg, 10%); }
-  // Warnings (orange)
-  &-warning           { background-color: @label-warning-bg; }
-  &-warning[href]     { background-color: darken(@label-warning-bg, 10%); }
-  // Success (green)
-  &-success           { background-color: @label-success-bg; }
-  &-success[href]     { background-color: darken(@label-success-bg, 10%); }
-  // Info (turquoise)
-  &-info              { background-color: @label-info-bg; }
-  &-info[href]        { background-color: darken(@label-info-bg, 10%); }
+// Contextual variations (linked labels get darker on :hover)
+.label-danger {
+  background-color: @label-danger-bg;
+  &[href] {
+    &:hover, 
+    &:focus {
+      background-color: darken(@label-danger-bg, 10%);
+    }
+  }
+}
+
+.label-success {
+  background-color: @label-success-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-success-bg, 10%);
+    }
+  }
 }
 
+.label-warning {
+  background-color: @label-warning-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-warning-bg, 10%);
+    }
+  }
+}
+
+.label-info {
+  background-color: @label-info-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-info-bg, 10%);
+    }
+  }
+}
\ No newline at end of file