From c6cc1b1a1d401e30e2cb7df853461dfc78134f7f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:18:32 -0800 Subject: Drop .label component. Instead, just use .badge because fuck dupe code and stuff. --- docs/assets/css/bootstrap.css | 24 ------------- less/badges.less | 66 ++++++++++++++++++++++++++++++++++ less/bootstrap.less | 2 +- less/labels-badges.less | 82 ------------------------------------------- 4 files changed, 67 insertions(+), 107 deletions(-) create mode 100644 less/badges.less delete mode 100644 less/labels-badges.less diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 829c27039..299049115 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4521,7 +4521,6 @@ a.thumbnail:hover { list-style: none; } -.label, .badge { display: inline-block; padding: 2px 4px; @@ -4533,87 +4532,64 @@ a.thumbnail:hover { white-space: nowrap; vertical-align: baseline; background-color: #999999; -} - -.label { border-radius: 3px; } -.badge { - padding-right: 9px; - padding-left: 9px; - border-radius: 9px; -} - -.label:empty, .badge:empty { display: none; } -a.label:hover, a.badge:hover { color: #fff; text-decoration: none; cursor: pointer; } -.label-danger, .badge-danger { background-color: #b94a48; } -.label-danger[href], .badge-danger[href] { background-color: #953b39; } -.label-warning, .badge-warning { background-color: #f89406; } -.label-warning[href], .badge-warning[href] { background-color: #c67605; } -.label-success, .badge-success { background-color: #468847; } -.label-success[href], .badge-success[href] { background-color: #356635; } -.label-info, .badge-info { background-color: #3a87ad; } -.label-info[href], .badge-info[href] { background-color: #2d6987; } -.label-inverse, .badge-inverse { background-color: #333333; } -.label-inverse[href], .badge-inverse[href] { background-color: #1a1a1a; } -.btn .label, .btn .badge { position: relative; top: -1px; } -.btn-mini .label, .btn-mini .badge { top: 0; } diff --git a/less/badges.less b/less/badges.less new file mode 100644 index 000000000..b8de24df1 --- /dev/null +++ b/less/badges.less @@ -0,0 +1,66 @@ +// +// Labels and badges +// -------------------------------------------------- + + +// Base classes +.badge { + display: inline-block; + padding: 2px 4px; + font-size: @font-size-base * .846; + font-weight: bold; + line-height: 14px; // ensure proper line-height if floated + color: #fff; + vertical-align: baseline; + white-space: nowrap; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + background-color: @grayLight; + border-radius: 3px; + + // Empty labels/badges collapse + &:empty { + display: none; + } +} + +// Hover state, but only for links +a.badge { + &:hover { + 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) +.badge { + // Important (red) + &-danger { background-color: @state-error-text; } + &-danger[href] { background-color: darken(@state-error-text, 10%); } + // Warnings (orange) + &-warning { background-color: #f89406; } + &-warning[href] { background-color: darken(#f89406, 10%); } + // Success (green) + &-success { background-color: @state-success-text; } + &-success[href] { background-color: darken(@state-success-text, 10%); } + // Info (turquoise) + &-info { background-color: @state-info-text; } + &-info[href] { background-color: darken(@state-info-text, 10%); } + // Inverse (black) + &-inverse { background-color: @grayDark; } + &-inverse[href] { background-color: darken(@grayDark, 10%); } +} + +// Quick fix for labels/badges in buttons +.btn { + .badge { + position: relative; + top: -1px; + } +} +.btn-mini { + .badge { + top: 0; + } +} diff --git a/less/bootstrap.less b/less/bootstrap.less index 93773ee4e..1ed13496b 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -52,7 +52,7 @@ // Components: Misc @import "thumbnails.less"; @import "media.less"; -@import "labels-badges.less"; +@import "badges.less"; @import "progress-bars.less"; @import "accordion.less"; @import "carousel.less"; diff --git a/less/labels-badges.less b/less/labels-badges.less deleted file mode 100644 index 8440cc469..000000000 --- a/less/labels-badges.less +++ /dev/null @@ -1,82 +0,0 @@ -// -// Labels and badges -// -------------------------------------------------- - - -// Base classes -.label, -.badge { - display: inline-block; - padding: 2px 4px; - font-size: @font-size-base * .846; - font-weight: bold; - line-height: 14px; // ensure proper line-height if floated - color: #fff; - vertical-align: baseline; - white-space: nowrap; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: @grayLight; -} -// Set unique padding and border-radii -.label { - border-radius: 3px; -} -.badge { - padding-left: 9px; - padding-right: 9px; - border-radius: 9px; -} - -// Empty labels/badges collapse -.label, -.badge { - &:empty { - display: none; - } -} - -// Hover state, but only for links -a { - &.label:hover, - &.badge:hover { - 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) -.label, -.badge { - // Important (red) - &-danger { background-color: @state-error-text; } - &-danger[href] { background-color: darken(@state-error-text, 10%); } - // Warnings (orange) - &-warning { background-color: #f89406; } - &-warning[href] { background-color: darken(#f89406, 10%); } - // Success (green) - &-success { background-color: @state-success-text; } - &-success[href] { background-color: darken(@state-success-text, 10%); } - // Info (turquoise) - &-info { background-color: @state-info-text; } - &-info[href] { background-color: darken(@state-info-text, 10%); } - // Inverse (black) - &-inverse { background-color: @grayDark; } - &-inverse[href] { background-color: darken(@grayDark, 10%); } -} - -// Quick fix for labels/badges in buttons -.btn { - .label, - .badge { - position: relative; - top: -1px; - } -} -.btn-mini { - .label, - .badge { - top: 0; - } -} -- cgit v1.2.3