diff options
author | Mark Otto <markotto@twitter.com> | 2012-03-23 03:02:00 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-03-23 03:02:00 +0400 |
commit | d7af2714c66ce19ba63e0871837f35dac73ecf66 (patch) | |
tree | 707beda626861ceafd4d76081ab5bae3ce71a4ad /less/labels-badges.less | |
parent | 0f57bdab754d72697f412eb32723a83b2de9921e (diff) |
remove separate badges and labels, add single file instead, remove hover from non-link badges/labels
Diffstat (limited to 'less/labels-badges.less')
-rw-r--r-- | less/labels-badges.less | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/less/labels-badges.less b/less/labels-badges.less new file mode 100644 index 0000000000..32291f14ef --- /dev/null +++ b/less/labels-badges.less @@ -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%); } +} |