VBadge.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. .v-badge {
  2. display: inline-block;
  3. line-height: 1;
  4. }
  5. .v-badge__badge {
  6. align-items: center;
  7. display: inline-flex;
  8. border-radius: 10px;
  9. font-size: 0.75rem;
  10. font-weight: 500;
  11. height: 1.25rem;
  12. justify-content: center;
  13. min-width: 20px;
  14. padding: 4px 6px;
  15. pointer-events: auto;
  16. position: absolute;
  17. text-align: center;
  18. text-indent: 0;
  19. transition: 0.225s cubic-bezier(0.4, 0, 0.2, 1);
  20. white-space: nowrap;
  21. background: rgb(var(--v-theme-surface-variant));
  22. color: rgba(var(--v-theme-on-surface-variant), var(--v-high-emphasis-opacity));
  23. }
  24. .v-badge--bordered .v-badge__badge::after {
  25. border-radius: inherit;
  26. border-style: solid;
  27. border-width: 2px;
  28. bottom: 0;
  29. color: rgb(var(--v-theme-background));
  30. content: "";
  31. left: 0;
  32. position: absolute;
  33. right: 0;
  34. top: 0;
  35. transform: scale(1.2);
  36. }
  37. .v-badge--dot .v-badge__badge {
  38. border-radius: 4.5px;
  39. height: 9px;
  40. min-width: 0;
  41. padding: 0;
  42. width: 9px;
  43. }
  44. .v-badge--dot .v-badge__badge::after {
  45. border-width: 1.5px;
  46. }
  47. .v-badge--inline .v-badge__badge {
  48. position: relative;
  49. vertical-align: middle;
  50. }
  51. .v-badge__badge .v-icon {
  52. color: inherit;
  53. font-size: 0.75rem;
  54. margin: 0 -2px;
  55. }
  56. .v-badge__badge img,
  57. .v-badge__badge .v-img {
  58. height: 100%;
  59. width: 100%;
  60. }
  61. .v-badge__wrapper {
  62. display: flex;
  63. position: relative;
  64. }
  65. .v-badge--inline .v-badge__wrapper {
  66. align-items: center;
  67. display: inline-flex;
  68. justify-content: center;
  69. margin: 0 4px;
  70. }