vuesax/dist/style/components/vsChip.styl

Framework Components for Vue js

.con-vs-chip
  background: rgb(240,240,240)
  border-radius: 20px
  float left
  display: flex
  align-items: center
  font-size .7rem
  justify-content: center
  margin-right: 2px
  margin-bottom: 3px
  min-height 28px
  padding-right 10px
  color: rgba(0,0,0,.7)
  position: relative
  &.closable
    padding-right: 0px
  &.con-color
    .con-vs-avatar
      background: rgba(255,255,255,.2)
  .con-vs-avatar
    width: 24px
    height 24px
    position relative
    display: block
    margin: 2px 0px
    transform: translate(-8px)
    display: flex
    align-items: center
    justify-content: center
    background: rgba(0,0,0,.15)
    .material-icons
      margin-top: 0px
      font-size: .8rem

.vs-chip--close
  width: 20px
  height 20px
  display: flex
  align-items: center
  justify-content: center
  border-radius: 50%
  border: 0px
  margin: 0px 4px
  cursor pointer
  background: rgba(0,0,0,.15)
  color: rgb(255,255,255)
  transition: all .3s ease
  &:hover
    background: $vs-colors[danger]
  i
    font-size: .9rem

.vs-chip--text
  display: flex
  align-items: center
  justify-content: center
  margin-left: 10px

for colorx, i in $vs-colors
  .vs-chip-{colorx}
    background: getColor(colorx, 1)


// con - chips

.con-chips
  width: 100%;
  /* background: rgb(136, 231, 39); */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
  padding: 5px;

.con-chips .con-vs-chip
  margin-top: 0px;
  margin-bottom: 0px;

.con-chips--input
  display: inline-block;
  flex:1;
  /* height: 30px; */
  padding: 9px;
  box-sizing: border-box;
  min-width: 80px;
  border: 0px;
  padding-left: 2px;

.con-chips--remove-all
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0,-50%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  cursor: pointer;
  transition: all .3s ease;

.con-chips--remove-all:hover
  color: getColor('danger', 1)

.no-items
  .con-chips--input
    padding-left: 10px !important;