vuetify/src/stylus/components/_badges.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

v-badge-rtl()
  &__badge
    right: initial
    left: -($badge-width)

  &--overlap
    .v-badge__badge
      right: initial
      left: -8px

    &.v-badge--left
      .v-badge__badge
        right: -8px
        left: initial

  &--left
    .v-badge__badge
      right: -($badge-width)
      left: initial

rtl(v-badge-rtl, "v-badge")

.v-badge
  display: inline-block
  position: relative

  &__badge
    color: $badge-color
    display: flex
    position: absolute
    font-size: $badge-font-size
    top: -($badge-height / 2)
    right: -($badge-width)
    border-radius: $badge-border-radius
    height: $badge-height
    width: $badge-width
    justify-content: center
    align-items: center
    flex-direction: row
    flex-wrap: wrap
    transition: $primary-transition

    .v-icon
      font-size: $badge-font-size

  &--overlap
    .v-badge__badge
      top: -8px
      right: -8px

    &.v-badge--left
      .v-badge__badge
        left: -8px
        right: initial

    &.v-badge--bottom
      .v-badge__badge
        bottom: -8px
        top: initial

  &--left
    .v-badge__badge
      left: -($badge-width)

  &--bottom
    .v-badge__badge
      bottom: -($badge-height / 2)
      top: initial;