Tiny CSS3 Round Breadcrumb

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1>Tiny CSS3 breadcrumb</h1>
  
<ul class="breadcrumb">
  <li>
    <a href="#">
      <span class="icon icon-file"></span>
      <span class="text">file</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-folder-open"></span>
      <span class="text">folder</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-code"></span>
      <span class="text">CSS 3</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-beaker"></span>
      <span class="text">Lab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-home"></span>
    </a>
  </li>
</ul>

script.js

// NO JS

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

//ul.breadcrumb>li*5>a[href=#]>span.icon+span.text
$green:#65BA99;
$green-dark:#59A386;
$size:50px;
$f-size:14px;


*{
  @include box-sizing(border-box);
  margin: 0;
  padding: 0;
}

body{
  padding: 0 100px;
  background-color: $green-dark;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: $f-size;
}

h1{
  color:lighten($green,5%);
  font-weight:400;
  padding:50px 0;
}

ul.breadcrumb{
  margin-left: $size;
  display:inline-block;
  list-style:none;
  
  li{
    float: right;
    padding:$size/10;
    background-color: $green-dark;
    @include border-radius($size);
    position:relative;
    margin-left: -$size;
    @include transition(all .2s);
    margin-top: 3px;
    
    a{
      overflow: hidden;
      @include border-radius($size);
      @include transition(all .2s);
      text-decoration: none;
      height: $size;
      color: darken($green-dark,5%);
      background-color: $green;
      text-align: center;
      min-width: $size;
      display: block;
      line-height: $size;
      padding-left: $size + 2;
      padding-right: $size/2 +$size/6;
      width: $size;
      
      .icon{
        display: inline-block;
      } 
      
      .text{
        display: none;
        opacity: 0;
      }
      &:hover{
         width:150px;
         background-color: lighten($green,5%);
        .text{
          display:inline-block;
          opacity: 1;
        }
      }
    }

    &:last-child{
        a{
         padding:0;
        }
      &:hover{
        padding: (($size/10) - 2px);
        margin-top: 0;
        a{
          width: $size + 10;
          height: $size + 10;
          line-height: $size + 10;
        }
      }
    }
  }
}

tiny-css3-round-breadcrumb.markdown

Tiny CSS3 Round Breadcrumb

A Pen by Renaud Tertrais on CodePen.

License.