quasar/src/components/chip/chip.styl

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

$chip-height = 32px

.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 7px 12px
  transition .3s

  &--colored
    .q-chip__icon
      color inherit

  &--outline
    background transparent
    border 1px solid currentColor

  &--selected
    .q-avatar
      visibility hidden !important
      width 10px

  .q-avatar
    font-size $chip-height
    margin-left -12px
    margin-right 6px

  &__icon
    color rgba(0,0,0,.54)
    font-size 20px
    margin -4px

    &--left
      margin-right 6px
    &--right
      margin-left 6px
    &--remove
      margin-left 6px
      margin-right -6px
      opacity .6
      transition .3s
      outline none

      &:hover,
      &:focus
        opacity 1

  &__content
    white-space nowrap

  &--dense
    border-radius 12px
    height 24px
    font-size 12px
    padding 0 6px

    .q-avatar
      font-size 24px
      margin-left -6px
      margin-right 4px

    .q-chip__icon
      font-size 14px
      margin 0
      &--left
        margin-right 5px
      &--right
        margin-left 5px
      &--remove
        margin-left 5px
        margin-right -2px

    &.q-chip--selected
      .q-avatar
        width 5px

  &--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