_badge.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. // Badge
  2. .badge {
  3. color: $white;
  4. &[class*='badge-'] {
  5. [class*='icon-'] {
  6. line-height: 1;
  7. }
  8. a {
  9. color: $white;
  10. }
  11. // badge dropdown alignment
  12. .dropdown-toggle,
  13. &.dropdown-toggle {
  14. span,
  15. i,
  16. svg {
  17. vertical-align: text-top;
  18. }
  19. i,
  20. svg {
  21. padding-left: 0.2rem;
  22. }
  23. &::after {
  24. position: relative;
  25. top: 0;
  26. left: 0;
  27. font-size: 1rem;
  28. }
  29. }
  30. .dropdown-menu {
  31. a {
  32. color: $dropdown-color;
  33. }
  34. }
  35. }
  36. i,
  37. svg {
  38. height: 12px;
  39. width: 11px;
  40. font-size: 12px;
  41. stroke-width: 3;
  42. vertical-align: top;
  43. }
  44. // square badge
  45. &.badge-square {
  46. border-radius: 0;
  47. }
  48. // badge-up
  49. // to align badge over any element
  50. &.badge-up {
  51. position: absolute;
  52. top: -11px;
  53. right: -9px;
  54. min-width: 1.429rem;
  55. min-height: 1.429rem;
  56. display: flex;
  57. align-items: center;
  58. justify-content: center;
  59. font-size: 0.786rem;
  60. line-height: 0.786;
  61. padding-left: 0.25rem;
  62. padding-right: 0.25rem;
  63. &.badge-sm {
  64. top: -0.5rem;
  65. right: -0.5rem;
  66. }
  67. }
  68. }
  69. // For fullscreen search
  70. .badge-icon {
  71. i,
  72. svg {
  73. font-size: 100%;
  74. margin-right: 5px;
  75. }
  76. }
  77. // badge dropup pointer
  78. .dropup {
  79. .badge {
  80. cursor: pointer;
  81. }
  82. }