VBadge.sass 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. .v-badge
  5. display: inline-block
  6. line-height: $badge-line-height
  7. .v-badge__badge
  8. align-items: center
  9. display: inline-flex
  10. border-radius: $badge-border-radius
  11. font-family: $badge-font-family
  12. font-size: $badge-font-size
  13. font-weight: $badge-font-weight
  14. height: $badge-height
  15. justify-content: center
  16. min-width: $badge-min-width
  17. padding: $badge-padding
  18. pointer-events: auto
  19. position: absolute
  20. text-align: center
  21. text-indent: 0
  22. transition: $badge-transition
  23. white-space: nowrap
  24. @include tools.theme($badge-theme...)
  25. &:has(.v-icon)
  26. padding: $badge-icon-padding
  27. .v-badge--bordered &
  28. &::after
  29. border-radius: inherit
  30. border-style: $badge-border-style
  31. border-width: $badge-border-width
  32. bottom: 0
  33. color: $badge-border-color
  34. content: ''
  35. left: 0
  36. position: absolute
  37. right: 0
  38. top: 0
  39. transform: $badge-border-transform
  40. .v-badge--dot &
  41. border-radius: $badge-dot-border-radius
  42. height: $badge-dot-height
  43. min-width: 0
  44. padding: 0
  45. width: $badge-dot-width
  46. &::after
  47. border-width: $badge-dot-border-width
  48. .v-badge--inline &
  49. position: relative
  50. vertical-align: $badge-inline-vertical-align
  51. .v-icon
  52. color: inherit
  53. font-size: $badge-font-size
  54. margin: $badge-icon-margin
  55. img,
  56. .v-img
  57. height: 100%
  58. width: 100%
  59. .v-badge__wrapper
  60. display: flex
  61. position: relative
  62. .v-badge--inline &
  63. align-items: center
  64. display: inline-flex
  65. justify-content: center
  66. margin: $badge-wrapper-margin