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

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-chip
  min-height $chip-height
  max-width 100%
  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
  flex 1 1 auto

.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 -.3em
  right -.3em
  pointer-events none
  z-index 1

.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
  z-index 0
  &: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 1px
    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

.q-chip-dense
  min-height 1px
  padding 0 3px
  font-size 12px

  &.q-chip-tag
    padding-left 1.3rem
  &.q-chip-pointing:before
    width 9px
    height 9px

  .q-chip-main
    padding 1px
  .q-chip-side
    height 18px
    width 18px
    min-width 16px
    font-size 14px
  .q-chip-left
    margin-left -3px
    margin-right 2px
  .q-chip-right
    margin-left 2px
    margin-right -2px
  .q-icon
    font-size 16px