remove separate badges and labels, add single file instead, remove hover from non-link badges/labels

This commit is contained in:
Mark Otto 2012-03-22 16:02:00 -07:00
parent 0f57bdab75
commit d7af2714c6
7 changed files with 81 additions and 126 deletions

Binary file not shown.

View File

@ -169,9 +169,9 @@
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;

View File

@ -3562,8 +3562,8 @@ a.thumbnail:hover {
.thumbnail .caption {
padding: 9px;
}
.label {
padding: 1px 4px 2px;
.label,
.badge {
font-size: 10.998px;
font-weight: bold;
line-height: 13px;
@ -3572,88 +3572,63 @@ a.thumbnail:hover {
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 {

View File

@ -1,36 +0,0 @@
// 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%); }

3
less/bootstrap.less vendored
View File

@ -52,8 +52,7 @@
// 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";

55
less/labels-badges.less Normal file
View File

@ -0,0 +1,55 @@
// 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%); }
}

View File

@ -1,38 +0,0 @@
// 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%); }