quasar-framework/src/components/chip/chip.ios.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.q-chip
  min-height $chip-height
  padding $chip-padding-horizontal $chip-padding-vertical
  font-size $chip-font-size
  border $chip-border
  border-radius $chip-border-radius
  vertical-align middle
  color $chip-color
  background $chip-background

  &:focus .q-chip-close
    opacity .8

  .q-icon
    font-size $chip-icon-size
    line-height 1

.q-chip-main
  line-height initial

.q-chip-side
  border-radius 50%
  height $chip-height
  width $chip-height
  min-width $chip-height
  overflow hidden

  img
    width 100%
    height 100%

.q-chip-left
  margin-left -12px
  margin-right 8px
.q-chip-right
  margin-left 2px
  margin-right -12px

.q-chip-square
  border-radius 2px

.q-chip-floating
  position absolute
  top -.7rem
  left 100%
  margin 0 0 0 -1.5rem !important
  pointer-events none

.q-chip-tag
  position relative
  padding-left 1.7rem
  &:after
    content ''
    position absolute
    top 50%
    left .5rem
    margin-top -.25rem
    background white
    width .5rem
    height .5rem
    box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
    border-radius 50%

.q-chip-pointing
  position relative
  &:before
    content ''
    z-index -1
    background inherit
    width 16px
    height 16px
    position absolute
.q-chip-pointing-up
  margin-top .8rem
  &:before
    top 0
    left 50%
    transform translateX(-50%) translateY(-22%) rotate(45deg)
.q-chip-pointing-down
  margin-bottom .8rem
  &:before
    right auto
    top 100%
    left 50%
    transform translateX(-50%) translateY(-78%) rotate(45deg)
.q-chip-pointing-right
  margin-right .8rem
  &:before
    top 50%
    right 2px
    bottom auto
    left auto
    transform translateX(33%) translateY(-50%) rotate(45deg)
.q-chip-pointing-left
  margin-left .8rem
  &:before
    top 50%
    left 2px
    bottom auto
    right auto
    transform translateX(-33%) translateY(-50%) rotate(45deg)

.q-chip-detail
  background rgba(0, 0, 0, .1)
  opacity .8
  padding 0 5px
  border-radius inherit
  border-top-right-radius 0
  border-bottom-right-radius 0

.q-chip-small
  min-height $chip-small-height

  .q-chip-main
    padding 4px 0
    line-height initial

  .q-chip-side
    height $chip-small-height
    width $chip-small-height
    min-width $chip-small-height

  .q-chip-icon
    font-size $chip-small-icon-size