_badge.scss 1.3 KB

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