quasar/src/components/chip/QChip.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

$chip-height = 2em

.q-chip
  vertical-align middle
  border-radius 16px
  outline 0
  position relative

  height $chip-height
  margin 4px

  background #e0e0e0
  color rgba(0,0,0,.87)

  font-size 14px
  padding 0.5em 0.9em

  &--colored
    .q-chip__icon
      color inherit

  &--outline
    background transparent
    border 1px solid currentColor

  .q-avatar
    font-size $chip-height
    margin-left -0.45em
    margin-right 0.2em
    border-radius 16px

  &--selected
    .q-avatar
      display none

  &__icon
    color rgba(0,0,0,.54)
    font-size 1.5em
    margin -0.2em

    &--left
      margin-right 0.2em
    &--right
      margin-left 0.2em
    &--remove
      margin-left 0.1em
      margin-right -0.5em
      opacity .6
      outline none

      &:hover,
      &:focus
        opacity 1

  &__content
    white-space nowrap

  &--dense
    border-radius 12px
    padding 0 0.4em
    height 1.5em

    .q-avatar
      font-size 1.5em
      margin-left -0.27em
      margin-right 0.1em
      border-radius 12px

    .q-chip__icon
      font-size 1.25em
      &--left
        margin-right 0.195em
      &--remove
        margin-right -0.25em

  &--square
    border-radius $generic-border-radius
    .q-avatar
      border-radius ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)

body.desktop .q-chip--clickable:focus
  box-shadow $shadow-1