labels-badges.less 1.7 KB

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