Layout von Websiten mit Bootstrap und Foundation
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.

_badge.scss 1.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. // Base class
  2. //
  3. // Requires one of the contextual, color modifier classes for `color` and
  4. // `background-color`.
  5. .badge {
  6. display: inline-block;
  7. padding: $badge-padding-y $badge-padding-x;
  8. @include font-size($badge-font-size);
  9. font-weight: $badge-font-weight;
  10. line-height: 1;
  11. text-align: center;
  12. white-space: nowrap;
  13. vertical-align: baseline;
  14. @include border-radius($badge-border-radius);
  15. @include transition($badge-transition);
  16. @at-root a#{&} {
  17. @include hover-focus() {
  18. text-decoration: none;
  19. }
  20. }
  21. // Empty badges collapse automatically
  22. &:empty {
  23. display: none;
  24. }
  25. }
  26. // Quick fix for badges in buttons
  27. .btn .badge {
  28. position: relative;
  29. top: -1px;
  30. }
  31. // Pill badges
  32. //
  33. // Make them extra rounded with a modifier to replace v3's badges.
  34. .badge-pill {
  35. padding-right: $badge-pill-padding-x;
  36. padding-left: $badge-pill-padding-x;
  37. @include border-radius($badge-pill-border-radius);
  38. }
  39. // Colors
  40. //
  41. // Contextual variations (linked badges get darker on :hover).
  42. @each $color, $value in $theme-colors {
  43. .badge-#{$color} {
  44. @include badge-variant($value);
  45. }
  46. }