You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

78 lines
1.4 KiB

  1. // Base class
  2. //
  3. // Requires one of the contextual, color modifier classes for `color` and
  4. // `background-color`.
  5. .label {
  6. display: inline-block;
  7. padding: .25em .4em;
  8. font-size: 75%;
  9. font-weight: $label-font-weight;
  10. line-height: 1;
  11. color: $label-color;
  12. text-align: center;
  13. white-space: nowrap;
  14. vertical-align: baseline;
  15. @include border-radius();
  16. // Empty labels collapse automatically
  17. &:empty {
  18. display: none;
  19. }
  20. }
  21. // Quick fix for labels in buttons
  22. .btn .label {
  23. position: relative;
  24. top: -1px;
  25. }
  26. // Add hover effects, but only for links
  27. a.label {
  28. @include hover-focus {
  29. color: $label-link-hover-color;
  30. text-decoration: none;
  31. cursor: pointer;
  32. }
  33. }
  34. // Pill labels
  35. //
  36. // Make them extra rounded with a modifier to replace v3's badges.
  37. .label-pill {
  38. padding-right: .6em;
  39. padding-left: .6em;
  40. // Use a higher than normal value to ensure completely rounded edges when
  41. // customizing padding or font-size on labels.
  42. @include border-radius(10rem);
  43. }
  44. // Colors
  45. //
  46. // Contextual variations (linked labels get darker on :hover).
  47. .label-default {
  48. @include label-variant($label-default-bg);
  49. }
  50. .label-primary {
  51. @include label-variant($label-primary-bg);
  52. }
  53. .label-success {
  54. @include label-variant($label-success-bg);
  55. }
  56. .label-info {
  57. @include label-variant($label-info-bg);
  58. }
  59. .label-warning {
  60. @include label-variant($label-warning-bg);
  61. }
  62. .label-danger {
  63. @include label-variant($label-danger-bg);
  64. }