quasar-framework/src/css-components/label/label.ios.styl

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

$label-padding-vertical   ?= .3rem
$label-padding-horizontal ?= .7rem
$label-border-radius      ?= $generic-border-radius
$label-before-transform   ?= translateY(-50%) translateX(50%) rotate(-45deg)

.label
  display inline-flex
  flex-direction row
  align-items center
  min-width 10px
  border-radius $label-border-radius
  padding $label-padding-vertical $label-padding-horizontal
  line-height 1
  white-space nowrap
  text-align center
  vertical-align middle

  > .left-detail, > .right-detail
    display inline-block
    vertical-align middle
    height 100%
    padding $label-padding-vertical ($label-padding-horizontal / 2)
    margin (- $label-padding-vertical) ($label-padding-horizontal / 2)
    background rgba(0, 0, 0, .1)
    opacity .8

  > .left-detail
    margin-left - $label-padding-horizontal
    padding-left $label-padding-horizontal
    border-radius $label-border-radius 0 0 $label-border-radius

  > .right-detail
    margin-right - $label-padding-horizontal
    padding-right $label-padding-horizontal
    border-radius 0 $label-border-radius $label-border-radius 0

  &.circular
    border-radius 50%

  &.floating
    position absolute
    z-index 2
    top -.7rem
    left 100%
    margin 0 0 0 -1.5rem !important
    font-size .7rem

  &.pointing-up, &.pointing-right, &.pointing-down, &.pointing-left
    position relative
    &:before
      content ''
      background inherit
      width .6rem
      height .6rem
      position absolute
      transform translateX(-50%) translateY(-50%) rotate(45deg)

  &.pointing-up
    margin-top .8rem
    &:before
      top 0
      left 50%
  &.pointing-down
    margin-bottom .8rem
    &:before
      right auto
      top 100%
      left 50%
  &.pointing-right
    margin-right .8rem
    &:before
      top 50%
      right 0
      bottom auto
      left auto
      transform translateX(50%) translateY(-50%) rotate(45deg)
  &.pointing-left
    margin-left .8rem
    &:before
      top 50%
      left 0
      bottom auto
      right auto

  &.tag
    position relative
    margin-left 1rem
    padding-left 1.5rem
    padding-right 1rem

    &:before, &:after
      content ''
      position absolute
      top 50%
    &:before
      right 100%
      transform $label-before-transform
      background inherit
      width 1.14rem
      height 1.14rem
      transition none
    &:after
      left 0
      margin-top -.25rem
      background white
      width .5rem
      height .5rem
      box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
      border-radius 50%

  &.chip
    border-radius 16px
    padding 0 12px
    height 32px
    > i.on-right
      border-radius 50%
      cursor pointer
      background rgba(0, 0, 0, .2)
      padding 3px
    img, div
      float left
      margin 0 8px 0 -12px
      height 32px
      width 32px
      border-radius 50%
    div
      line-height 32px
      background rgba(0, 0, 0, .2)