width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
-
+
/* Makes inputs behave like true block-level elements */
-
+
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
.thumbnail .caption {
padding: 9px;
}
-.label {
- padding: 1px 4px 2px;
+.label,
+.badge {
font-size: 10.998px;
font-weight: bold;
line-height: 13px;
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 {
+++ /dev/null
-// 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%); }
\ No newline at end of file
// Components: Misc
@import "thumbnails.less";
-@import "labels.less";
-@import "badges.less";
+@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
--- /dev/null
+// 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%); }
+}
+++ /dev/null
-// 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%); }
\ No newline at end of file