Nuked local .a() mixins and simplified the nesting

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3a6866785af0b0add736b876dfd1c2c419e59c53..c7e2b4eb1924c19d1fb02bafa2dfdac6fcd0f398 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4795,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;
@@ -4810,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;
 }
@@ -4826,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 dbaff88642a0f20bb3a7e388a3bd4a5139765642..d6ffc810569b842f327d73e85c090d39cf691336 100644 (file)
--- a/less/labels.less
+++ b/less/labels.less
@@ -2,9 +2,7 @@
 // Labels
 // --------------------------------------------------
 
-// LESS base
-
-.label() {
+.label {
   display: inline;
   padding: .25em .6em;
   font-size: 75%;
@@ -17,8 +15,8 @@
   background-color: @gray-light;
   border-radius: .25em;
 
-  // Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a;
-  .a() {
+  // Nuke the hover effects for a.label and for label[href] - for anchors
+  &[href], a& {
     &:hover,
     &:focus {
       color: #fff;
@@ -26,73 +24,34 @@
       cursor: pointer;
     }
   }
-
-  // Colors
-  // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
-  // If there is a need for [href] then use local mixin a() via ex: .label-danger > .a; to attach additional CSS for [href] attr
-  
-  .label-danger() {
-    background-color: @label-danger-bg;
-    .a() {
-      &[href] {
-       background-color: darken(@label-danger-bg, 10%);
-      }
-    }
-  }
-
-  .label-warning() {
-    background-color: @label-warning-bg;
-    .a() {
-      &[href] {
-        background-color: darken(@label-warning-bg, 10%);
-      }
-    }
-  }
-
-  .label-success() {
-    background-color: @label-success-bg;
-    .a() {
-      &[href] {
-        background-color: darken(@label-success-bg, 10%);
-      }
-    }
-  }
-
-  .label-info() {
-    background-color: @label-info-bg;
-    .a() {
-      &[href] {
-        background-color: darken(@label-info-bg, 10%);
-      }
-    }
-  }
-}
-
-// populate mixins for CSS
-.label {
-  .label();
-}
-
-a.label {
-  .label > .a;
 }
 
+// Colors
+// Varying the background-color - if the a has href, then deploy darker color
 .label-danger {
-  .label > .label-danger;
-  .label > .label-danger > .a; // will produce .label-danger[href] class for folks who like to use class in HTML
+  background-color: @label-danger-bg;
+  &[href] {
+    background-color: darken(@label-danger-bg, 10%);
+  }
 }
 
-.label-warning {
-  .label > .label-warning;
-  .label > .label-warning > .a;
+.label-success {
+  background-color: @label-success-bg;
+  &[href] {
+    background-color: darken(@label-success-bg, 10%);
+  }
 }
 
-.label-success {
-  .label > .label-success;
-  .label > .label-success > .a;
+.label-warning {
+  background-color: @label-warning-bg;
+  &[href] {
+    background-color: darken(@label-warning-bg, 10%);
+  }
 }
 
 .label-info {
-  .label > .label-info;
-  .label > .label-info > .a;
-} 
+  background-color: @label-info-bg;
+  &[href] {
+    background-color: darken(@label-info-bg, 10%);
+  }
+}
\ No newline at end of file