index.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. .nut-theme-dark {
  2. .nut-badge {
  3. &.show {
  4. background: $dark-background;
  5. color: $dark-color;
  6. }
  7. }
  8. }
  9. .nut-badge {
  10. position: relative;
  11. display: inline-block;
  12. .nut-badge__icon {
  13. display: flex;
  14. align-items: center;
  15. line-height: normal;
  16. transform: $badge-content-transform;
  17. position: absolute;
  18. background: $badge-background-color;
  19. padding: $badge-icon-padding;
  20. text-align: center;
  21. border-radius: $badge-border-radius;
  22. z-index: $badge-z-index;
  23. }
  24. .nut-badge__content {
  25. display: flex;
  26. align-items: center;
  27. transform: $badge-content-transform;
  28. &--sup {
  29. position: absolute;
  30. background: $badge-background-color;
  31. padding: $badge-padding;
  32. text-align: center;
  33. border-radius: $badge-border-radius;
  34. font-size: $badge-font-size;
  35. font-weight: normal;
  36. color: $badge-color;
  37. }
  38. &--dot {
  39. width: $badge-dot-width;
  40. height: $badge-dot-height;
  41. border-radius: $badge-dot-border-radius;
  42. padding: $badge-dot-padding;
  43. }
  44. &--bubble {
  45. border-bottom-left-radius: 0;
  46. }
  47. }
  48. }