labels-badges.less.svn-base 1.5 KB

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