fixed-vuesax/dist/style/components/vsChip.styl

Framework Components for Vue js

.con-vs-chip
  background: rgb(240, 240, 240)
  border-radius: 20px
  dirValue(float, left);
  display: flex
  align-items: center
  font-size .7rem
  justify-content: center
  propWithDir(margin, right, 2px)
  margin-bottom: 3px
  min-height 28px
  propWithDir(padding, right, 10px)
  color: rgba(0, 0, 0, .7)
  position: relative

  &.closable
    propWithDir(padding, right, 0)

  &.con-color
    .con-vs-avatar
      background: rgba(255, 255, 255, .2)

  .con-vs-avatar
    width: 24px
    height 24px
    position relative
    margin: 2px 0
    propWithDir(transform, null, (-8px))
    display: flex
    align-items: center
    justify-content: center
    background: rgba(0, 0, 0, .15)

    .material-icons
      margin-top: 0
      font-size: .8rem

  &.bg-chip-transparent
    font-weight: 500

.vs-chip--close
  padding: .3em
  display: flex
  align-items: center
  justify-content: center
  border-radius: 50%
  border: 0
  margin: 0 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: .9em

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

for colorx, i in $vs-colors
  .vs-chip-{colorx}:not(.bg-chip-transparent)
    background: getColor(colorx, 1)
  .vs-chip-{colorx}.bg-chip-transparent
    background: getColor(colorx, .15)
    color: getColor(colorx, 1)


// con - chips

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

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

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

.con-chips--remove-all
  position: absolute;
  propWithDir(right, null, 0)
  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
    propWithDir(padding, left, 10px, !important)