[小ネタ] material design lite のtabsのデザインを再現する

tabsってコレのこと
https://getmdl.io/components/index.html#layout-section/tabs

タブ切替えによって、ページ内のコンテンツを動的に表示させるコンポーネント。
これと同じデザインでnavbarみたく、グローバルメニューとして使いたい。つまりhrefをアンカーリンクじゃなくて、ページリンクにしたかった。
ちなみに href="/hoge" みたいに単純に置き換えると、tabs.jsのエラーで動かなくなる。タブ用のコンポーネントだから当然か…😔

そこで、MDLから生成されるHTMLとcssを見ながら、自力で以下のように再現してみた。
ただし残念ながらripple effect（クリックすると一瞬キランと光るやつ）までは再現できなかった。（mdl-buttonでripple-effectを追加すればイケルとかと思いきや、history backした時に思ったように動作してくれなかったので諦めた）

sample.html

  <div class="tabs">
    <div class="tab-bar">
      <a href="/hoge1" class="tab active">HOGE1</a>
      <a href="/hoge2" class="tab">HOGE2</a>
      <a href="/hoge3" class="tab">HOGE3</a>
    </div>
  </div>

sample.sass

  $activeColor: #3f51b5 // アクティブになった時の下線とか文字色を指定

  @mixin flexbox
    display: -webkit-box
    display: -moz-box
    display: -ms-flexbox
    display: -webkit-flex
    display: flex

  @mixin flex-direction($direction)
    -webkit-flex-direction: $direction
    -ms-flex-direction: $direction
    flex-direction: $direction

  @mixin justify-content($param)
    -webkit-justify-content: $param
    -ms-flex-pack: $param
    justify-content: $param

  .tabs
    display: block
    width: 100%

  .tab-bar
    @include flexbox
    @include flex-direction(row)
    @include justify-content(center)
    -webkit-align-content: space-between
    -ms-flex-line-pack: justify
    align-content: space-between
    -webkit-align-items: flex-start
    -ms-flex-align: start
    align-items: flex-start
    height: 48px
    padding: 0
    margin: 0
    border-bottom: 1px solid #e0e0e0

  .tab
    margin: 0
    border: none
    padding: 0 24px
    float: left
    position: relative
    display: block
    text-decoration: none
    height: 48px
    line-height: 48px
    text-align: center
    font-weight: 500
    font-size: 14px
    text-transform: uppercase
    color: rgba(0,0,0,.54)
    overflow: hidden 

  .active
    color: $activeColor
    &:after
      height: 2px
      width: 100%
      display: block
      content: " "
      bottom: 0
      left: 0
      position: absolute
      background: $activeColor
      -webkit-animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards
      animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards
      transition: all 1s cubic-bezier(.4,0,1,1)