vuetify/src/stylus/components/_chips.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../theme'

v-chip($material)
  background: $material.chips.background
  color: $material.chips.color

  &--disabled
    color: $material.text.disabled

v-chip-rtl()
  &__close
    margin: $chip-close-margin-rtl

  &--removable
    .v-chip__content
      padding: $chip-removable-padding-rtl

  &--select-multi
    margin: $chip-margin 0 $chip-margin $chip-margin

  .v-avatar
    margin-right: -12px
    margin-left: 8px

  .v-icon
    &--right
      margin-right: $chip-icon-offset
      margin-left: $chip-icon-negative-offset

    &--left
      margin-right: $chip-icon-negative-offset
      margin-left: $chip-icon-offset

theme(v-chip, "v-chip")
rtl(v-chip-rtl, "v-chip")

.v-chip
  align-items: center
  border-radius: $chip-border-radius
  border: 1px solid transparent
  display: inline-flex
  font-size: $chip-font-size
  margin: $chip-margin
  outline: none
  position: relative
  transition: $primary-transition
  vertical-align: middle

  .v-chip__content
    align-items: center
    border-radius: $chip-border-radius
    cursor: default
    display: inline-flex
    height: $chip-height
    justify-content: space-between
    padding: $chip-padding
    vertical-align: middle
    white-space: nowrap
    z-index: 1

  &--removable
    .v-chip__content
      padding: $chip-removable-padding

  .v-avatar
    // Important is needed to account for new avatar structure
    height: $chip-height !important
    margin-left: -12px
    margin-right: 8px
    min-width: $chip-height
    width: $chip-height !important

    img
      height: 100%
      width: 100%

  &:focus:not(.v-chip--disabled),
  &--active,
  &--selected
    border-color: rgba(#000, .13)
    // overflow: hidden TEMP
    elevation(2)

    &:after
      background: currentColor
      border-radius: inherit
      content: ''
      height: 100%
      position: absolute
      top: 0
      left: 0
      transition: inherit
      width: 100%
      pointer-events: none
      opacity: .13

  &--label
    border-radius: $chip-label-border-radius

    .v-chip__content
      border-radius: $chip-label-border-radius

  // Increase specificity to override theme background
  &\&.v-chip--outline
    background: $chip-outline-background
    border-color: currentColor
    color: $chip-outline-color

  &--small
    height: $chip-small-height

    .v-avatar
      height: $chip-small-height !important
      min-width: $chip-small-height
      width: $chip-small-height !important

    .v-icon
      font-size: $chip-small-font-size

  &__close
    align-items: center
    color: inherit
    display: flex
    font-size: $chip-icon-font-size
    margin: $chip-close-margin
    text-decoration: none
    user-select: none

    > .v-icon
      color: inherit !important
      font-size: 20px
      cursor: pointer
      opacity: .5

      &:hover
        opacity: 1

  &--disabled
    .v-chip__close
      pointer-events: none

  &--select-multi
    margin: $chip-margin $chip-margin $chip-margin 0

  .v-icon
    color: inherit

    &--right
      margin-left: $chip-icon-offset
      margin-right: $chip-icon-negative-offset

    &--left
      margin-left: $chip-icon-negative-offset
      margin-right: $chip-icon-offset