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// Empty labels/badges collapse 31.label, 32.badge { 33 &:empty { 34 display: none; 35 } 36} 37 38// Hover/focus state, but only for links 39a { 40 &.label:hover, 41 &.label:focus, 42 &.badge:hover, 43 &.badge:focus { 44 color: @white; 45 text-decoration: none; 46 cursor: pointer; 47 } 48} 49 50// Colors 51// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) 52.label, 53.badge { 54 // Important (red) 55 &-important { background-color: @errorText; } 56 &-important[href] { background-color: darken(@errorText, 10%); } 57 // Warnings (orange) 58 &-warning { background-color: @orange; } 59 &-warning[href] { background-color: darken(@orange, 10%); } 60 // Success (green) 61 &-success { background-color: @successText; } 62 &-success[href] { background-color: darken(@successText, 10%); } 63 // Info (turquoise) 64 &-info { background-color: @infoText; } 65 &-info[href] { background-color: darken(@infoText, 10%); } 66 // Inverse (black) 67 &-inverse { background-color: @grayDark; } 68 &-inverse[href] { background-color: darken(@grayDark, 10%); } 69} 70 71// Quick fix for labels/badges in buttons 72.btn { 73 .label, 74 .badge { 75 position: relative; 76 top: -1px; 77 } 78} 79.btn-mini { 80 .label, 81 .badge { 82 top: 0; 83 } 84} 85