Tag cloud remix

<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<section class="container">

  <ul class="tags">

    <li><a href="#" data-tag-count="4">Interface</a></li>

    <li><a href="#" data-tag-count="8">Icon</a></li>

    <li><a href="#" data-tag-count="15">Typography</a></li>

    <li><a href="#" data-tag-count="16">Color</a></li>

  </ul>

  <ul class="tags green">

    <li><a href="#" data-tag-count="23">Design</a></li>

    <li><a href="#" data-tag-count="42">Illustration</a></li>

    <li><a href="#" data-tag-count="108">Component</a></li>

    <li><a href="#" data-tag-count="12">Misc</a></li>

  </ul>

  <ul class="tags blue">

    <li><a href="#" data-tag-count="31">Infrastructure</a></li>

    <li><a href="#" data-tag-count="33">Application</a></li>

    <li><a href="#" data-tag-count="65">Mobile</a></li>

    <li><a href="#" data-tag-count="160">Desktop</a></li>

  </ul>

</section>

@import compass/reset

+global-reset

/*

 * Copyright (c) 2012-2013 Thibaut Courouble

 * http://www.webinterfacelab.com

 *

 * Pseudo elements remix by Andrii Korzh 2013

 *

 * Licensed under the MIT License:

 * http://www.opensource.org/licenses/mit-license.php

 */

$tagsHeight: 26px

$tagsDefaultColor: #eb6b22

$tagsColors: green #65bb34, blue #56a3d5

$tagsCountAttr: data-tag-count

body 

  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif

  color: #404040

  background: #eee

.container 

  margin: 50px auto

  width: 400px

.tags 

  +clearfix

  li 

    position: relative

    float: left

    margin: 0 0 8px 12px

    &:active 

      margin-top: 1px

      margin-bottom: 7px

    &:after 

      content: ''

      z-index: 2

      position: absolute

      top: round($tagsHeight / 2 - 3px)

      right: -2px

      width: 5px

      height: 6px

      opacity: .95

      background: $tagsDefaultColor

      border-radius: 3px 0 0 3px

      +box-shadow(inset 1px 0 darken($tagsDefaultColor, 20%))

  a, a:before 

    display: block

    +box-sizing(border-box)

  a 

    height: $tagsHeight

    line-height: $tagsHeight - 3px

    padding: 0 9px 0 8px

    font-size: 12px

    color: #555

    text-decoration: none

    text-shadow: 0 1px white

    border-width: 1px 0 1px 1px

    border-style: solid

    border-color: #dadada #d2d2d2 #c5c5c5

    border-radius: 3px 0 0 3px

    +background(linear-gradient(top, #fcfcfc, #f0f0f0), #fafafa)

    +box-shadow(inset 0 0 0 1px rgba(white, .7), 0 1px 2px rgba(black, .05))

    &:hover:before 

      padding: 0 7px 0 6px

      max-width: 40px

      +box-shadow(inset 0 0 0 1px rgba(white, .15), 1px 1px 2px rgba(black, .2))

  a:before 

    content: attr($tagsCountAttr)

    position: absolute

    top: 1px

    left: 100%

    z-index: 2

    overflow: hidden

    max-width: 0

    height: $tagsHeight - 2px

    line-height: $tagsHeight - 5px

    padding: 0 0 0 2px

    color: white

    text-shadow: 0 -1px rgba(black, .3)

    border: 1px solid

    border-color: darken($tagsDefaultColor, 8%) darken($tagsDefaultColor, 10%) darken($tagsDefaultColor, 12%)

    border-radius: 0 2px 2px 0

    opacity: .95

    +background(linear-gradient(top, lighten($tagsDefaultColor, 5%), darken($tagsDefaultColor, 5%)), $tagsDefaultColor)

    +transition(.3s ease-out)

    +transition-property(padding, max-width)

@each $pair in $tagsColors 

  .#{nth($pair, 1)} 

    $color: nth($pair, 2)

    li:after 

      background: $color

      +box-shadow(inset 1px 0 darken($color, 20%))

    a:before 

      border-color: darken($color, 8%) darken($color, 10%) darken($color, 12%)

      +background(linear-gradient(top, lighten($color, 5%), darken($color, 5%)), $color)