/libraries/bootstrap/less/labels-badges.less
LESS | 74 lines | 55 code | 5 blank | 14 comment | 0 complexity | 41d8e55d42d85bd00d7e820a71bc348e MD5 | raw file
1// 2// Labels and badges 3// -------------------------------------------------- 4 5 6// Base classes 7.label, 8.badge { 9 display: inline-block; 10 padding: 2px 4px; 11 font-size: @baseFontSize * .846; 12 font-weight: bold; 13 line-height: 14px; // ensure proper line-height if floated 14 color: @white; 15 vertical-align: baseline; 16 white-space: nowrap; 17 text-shadow: 0 -1px 0 rgba(0,0,0,.25); 18 background-color: @grayLight; 19} 20// Set unique padding and border-radii 21.label { 22 .border-radius(3px); 23} 24.badge { 25 padding-left: 9px; 26 padding-right: 9px; 27 .border-radius(9px); 28} 29 30// Hover state, but only for links 31a { 32 &.label:hover, 33 &.badge:hover { 34 color: @white; 35 text-decoration: none; 36 cursor: pointer; 37 } 38} 39 40// Colors 41// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) 42.label, 43.badge { 44 // Important (red) 45 &-important { background-color: @errorText; } 46 &-important[href] { background-color: darken(@errorText, 10%); } 47 // Warnings (orange) 48 &-warning { background-color: @orange; } 49 &-warning[href] { background-color: darken(@orange, 10%); } 50 // Success (green) 51 &-success { background-color: @successText; } 52 &-success[href] { background-color: darken(@successText, 10%); } 53 // Info (turquoise) 54 &-info { background-color: @infoText; } 55 &-info[href] { background-color: darken(@infoText, 10%); } 56 // Inverse (black) 57 &-inverse { background-color: @grayDark; } 58 &-inverse[href] { background-color: darken(@grayDark, 10%); } 59} 60 61// Quick fix for labels/badges in buttons 62.btn { 63 .label, 64 .badge { 65 position: relative; 66 top: -1px; 67 } 68} 69.btn-mini { 70 .label, 71 .badge { 72 top: 0; 73 } 74}