quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
83 lines (65 loc) • 1.38 kB
text/stylus
$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