Simple Breadcrumb

by Bouteille Dimitri

HTML

<div class="align grey">
  <div class="align-bis">
      <ol class="breadcrumb">
        <li><a href="">Home</a></li>
        <li><a href="">Product</a></li>
        <li><a href="">Mobile</a></li>
        <li><a href="">Iphone 10 X</a></li>
      </ol>
  </div>
</div>
<div class="align">
  <div class="align-bis">
      <ol class="breadcrumb">
        <li><a href="">Home</a></li>
        <li><a href="">Product</a></li>
        <li><a href="">Mobile</a></li>
        <li><a href="" class="active is-disable">Iphone 10 X</a></li>
      </ol>
  </div>
</div>
<div class="align grey">
  <div class="align-bis">
      <ol class="breadcrumb arrow-seperator">
        <li><a href="">Home</a></li>
        <li><a href="">Product</a></li>
        <li><a href="">Mobile</a></li>
        <li><a href="" class="active is-disable">Iphone 10 X</a></li>
      </ol>
  </div>
</div>

<div class="align">
  <div class="align-bis">
      <ol class="breadcrumb arrow-seperator">
        <li><a href=""><i class="material-icons breadcrumb-icon">home</i>Home</a></li>
        <li><a href=""><i class="material-icons breadcrumb-icon">android</i>Android</a></li>
        <li><a href="" class="active">Honor 7</a></li>
      </ol>
  </div>
</div>

SCSS

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

$primary : #03A9F4;
$grey : rgb(30,30,30);
$grey-active : rgba(0,0,0,0.42);
$white : rgba(255,255,255,0.7);

$error : #ef5350;
$succes : #8BC34A;
$transition : all 0.2s ease-out;



* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $grey;
}

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


$this:  '.breadcrumb';
#{$this}{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  
    &.arrow-seperator{
    li{
      &:after{
        font-family: 'Material Icons';
        content: "\E409";
      }
    }
  }
  
  li{
    display:inline-flex;
    &:after{
      content:"/";      
      padding: 0 7px;
      margin: auto;
      display: inline-block;
    }
    &:last-of-type:after{
      content:none;
    }
  }
  &-icon{
    margin: auto 8px auto 0;
    font-size: inherit;
    color: inherit;
  }
  a{
    text-decoration:none;
    display: flex;
    font-size: 15px;
    transition: $transition;
    &:hover, &:focus{
      color: $primary;
    }
  }
  .active{
    font-weight: 600;
    color: #000;
  }
  .is-disable{
    pointer-events: none;
  }
}