vertical-align: middle;
white-space: nowrap;
text-align: center;
- background-color: @grayLight;
+ background-color: @gray-light;
border-radius: .25em;
-}
-// Hover state, but only for links
-a.label {
- &:hover,
- &:focus {
- color: #fff;
- text-decoration: none;
- cursor: pointer;
+ // Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a;
+ .a() {
+ &: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)
+ // 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%);
+ }
+ }
}
}
-// Colors
-// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+// populate mixins for CSS
.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%); }
+ .label();
+}
+
+a.label {
+ .label > .a;
+}
+
+.label-danger {
+ .label > .label-danger;
+ .label > .label-danger > .a; // will produce .label-danger[href] class for folks who like to use class in HTML
+}
+
+.label-warning {
+ .label > .label-warning;
+ .label > .label-warning > .a;
+}
+
+.label-success {
+ .label > .label-success;
+ .label > .label-success > .a;
}
- }
+.label-info {
+ .label > .label-info;
+ .label > .label-info > .a;
++}