0x1998 - MANAGER
Edit File: labels-badges.less
// // Labels and badges // -------------------------------------------------- // Base classes .label, .badge { display: inline-block; padding: 2px 4px; font-size: @baseFontSize * .846; font-weight: bold; line-height: 14px; // ensure proper line-height if floated color: @white; 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/focus state, but only for links a { &.label:hover, &.label:focus, &.badge:hover, &.badge:focus { 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%); } } // Quick fix for labels/badges in buttons .btn { .label, .badge { position: relative; top: -1px; } } .btn-mini { .label, .badge { top: 0; } }