Material tab

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
    <ul class="tab material">
      <li class="tab-item">
        <a href="#">Users</a>
      </li>
      <li class="tab-item active">
        <a href="#">Products</a>
      </li>
      <li class="tab-item">
        <a href="#">Events</a>
      </li>
      <li class="tab-item">
        <a href="#">Orders</a>
      </li>
    </ul>
  </div>
</div>

<div class="align grey">
  <div class="align-bis">
    <ul class="tab material auto-adjust">
      <li class="tab-item">
        <a href="#">Users</a>
      </li>
      <li class="tab-item active">
        <a href="#">Products</a>
      </li>
      <li class="tab-item">
        <a href="#">Events</a>
      </li>
      <li class="tab-item">
        <a href="#">Orders</a>
      </li>
    </ul>
  </div>
</div>

<div class="align">
  <div class="align-bis">
    <ul class="tab material">
      <li class="tab-item">
        <a href="#">Users</a>
      </li>
      <li class="tab-item active">
        <a href="#">Products
        <span class="tab-item-badge">+99</span></a>
      </li>
      <li class="tab-item">
        <a href="#">Events</a>
      </li>
      <li class="tab-item">
        <a href="#">Orders</a>
      </li>
    </ul>
  </div>
</div>


<div class="align grey">
  <div class="align-bis">
    <ul class="tab material auto-adjust">
      <li class="tab-item">
        <a href="#">Users
            <span class="tab-item-badge">5</span></a>
      </li>
      <li class="tab-item active">
        <a href="#">Products
            <span class="tab-item-badge">8</span></a>
      </li>
      <li class="tab-item">
        <a href="#">Events</a>
      </li>
      <li class="tab-item">
        <a href="#">Orders
            <span class="tab-item-badge">195</span></a>
      </li>
    </ul>
  </div>
</div>

<div class="align">
  <div class="align-bis">
    <ul class="tab material vertical">
      <li class="tab-item">
        <a href="#">Users
            <span...

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: #E91E63;
$grey: rgb(230,
230,
230);
$white: #fff;
$black: #333;
$borderColor: $black;
$borderWidth: 1px;
$borderTransition: 0.25s;
$borderBtnHeight: 42px;
//
// Default style
* {
  padding: 0;
  margin: 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: 40px 0;
    max-width: 55%;
    margin: auto;
  }
  &.grey {
    background-color: rgb(245, 245, 245);
  }
}

$this: '.tab';
#{$this} {
  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 2px $grey;
  &.auto-adjust {
    #{$this}-item {
      margin: 0;
      flex: 1;
      &-badge {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  &.vertical {
    flex-direction: column;
    border-bottom: none;
    border-left: solid 2px $grey;
    //width: 200px;
    #{$this}-item {
      margin: 0;
      &.active {
        &:after {
          top: 0;
          bottom: 0;
          right: 100%;
          right: auto;
          height: auto;
          width: 2px;
          margin-left: -2px;
        }
      }
      a {
        padding: 8px 0 8px 15px;
        justify-content: flex-start;
      }
      &-badge {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: 0;
        transform: translateY(-50%);
      }
    }
    &.align-right {
      border-left: none;
      border-right: solid 2px $grey;
      #{$this}-item {
        a {
          justify-content: flex-end;
          padding: 8px 15px 8px 0;
        }
        &.active {
          &:after {
            left: 100%;
            right: auto;
            margin: 0;
          }
        }
        &-badge {
         ...