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