Material chips

by Bouteille Dimitri

HTML

<div class="align grey">
<div class="align-bis">
<p class="tag">Front-end</p>
<p class="tag">Back-end</p>
<p class="tag">Css</p>
<p class="tag">Sass</p>
<p class="tag">Symfony</p>
</div>
</div>
<div class="align">
<div class="align-bis">
<p class="tag">
Front-end<span class="action delete" data-icon="&#xE5CD;"></span>      
</p>
<p class="tag">
Back-end<span class="action delete" data-icon="&#xE5CD;"></span> 
</p>
<p class="tag">
Css<span class="action" data-icon="&#xE87D;"></span><span class="action delete" data-icon="&#xE5CD;"></span>
</p>
<p class="tag">
Symfony<span class="action delete" data-icon="&#xE5CD;"></span>
</p>
</div>
</div>
<div class="align grey">
<div class="align-bis">
<p class="tag">
<span class="letter" style="background-color:#EC407A;">F</span>Francis Cabrel</p>
<p class="tag">
<span class="letter" style="background-color:#7E57C2;">P</span>Pierce The Veil</p>
<p class="tag">
<span class="letter" style="background-color:#FF7043;">C</span>Coldplay</p>
<p class="tag">
<span class="letter" style="background-color:#4CAF50
;">S</span>Simple Plan</p>
<p class="tag">
<span class="letter">M</span>Maximo Park</p>
</div>
</div>

<div class="align">
<div class="align-bis">
<p class="tag">
<span class="letter" style="background-color:#7E57C2;">P</span>Pierce The Veil<span class="action" data-icon="&#xE87D;"></span><span class="action delete" data-icon="&#xE5CD;"></span></p>
<p class="tag">
<span class="letter" style="background-color:#FF7043;">C</span>Coldplay<span class="action delete" data-icon="&#xE5CD;"></span></p>
<p class="tag">
<span class="letter" style="background-color:#4CAF50
;">S</span>Simple Plan<span class="action delete" data-icon="&#xE5CD;"></span></p>
</div>
</div>


<div class="align grey">
<div class="align-bis">
<p class="tag">
<img src="https://cdn.iconscout.com/public/images/icon/free/png-512/avatar-user-teacher-312a499a08079a12-512x512.png">Indochine</p>
<p class="tag">
<img...

SCSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

$primary : #03A9F4;
$grey : rgb(200,200,200);
$white : #fff;
$black: #333;

$borderColor : $black;
$borderWidth : 1px;
$borderTransition : 0.25s;
$borderBtnHeight: 42px;

//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $black;
  font-size: 15px;
}

.align{
  display: flex;
  //background-color: rgb(250,250,250);
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 60px 0;
  }
  &.grey{
    background-color: rgb(245,245,245);
  }
}


$this: '.tag';

#{$this}{
  background-color: rgb(235,235,235);
  height: 32px;
  padding: 0 12px;
  line-height: 32px;
  border-radius: 15px;
  font-size: 15px;
  display: flex;
  transition: all 0.25s ease;
  + #{$this} {
    margin-left: 14px;
  }
  
  &s{
    display: flex;
    flex-wrap: wrap;
    #{$this}{
      margin: 0 0 14px 14px;
    }
  }
  
  &:hover, &:focus{
    background-color: rgb(220,220,220);
  }
  .action{
    width: 20px;
    height: 20px;
    display: inline-block;
    background: rgb(160,160,160);
    border-radius: 50%;
    margin: auto 0 auto 8px;
    text-align: center;
    font-weight: 600;
    display: flex;
    line-height: normal;    
    color: $white;
    cursor: pointer;
    transition: all 0.2s ease;
    &:after{      
      font-family: 'Material Icons';
      content: attr(data-icon);
      font-size: 11px;
      margin: auto;
    }
    + .action {
      margin-left: 4px;
    }
    &:hover, &:focus{
      background-color: $white;
      color: $black;
    }
    &:last-of-type{
      margin-right: -6px;
    }
  }
  
  .letter, img, .icon{
    width: 32px;
    margin-right: 8px;
    margin-left: -12px;
    border-radius: 50%;
  }
  
  .letter, .icon{
    text-align: center;
    color: $white;
    background-color: $primary;
    line-height: 32px;
  }
  .icon{
   ...

JavaScript

$('.tag .delete').on('click', function(){
var $parent = $(this).closest('.tag');
	$parent.addClass('remove');
});