liftie/public/stylesheets/tags.styl

Clean, simple, easy to read, fast ski resort lift status

$tagColor=$link-color
$tagPadding=5px

.tags
  list-style none
  display block
  margin 0 ($column-gutter / 2)

  li
    display block
    float left
    position relative
    font-size .9em
    margin-right 1.2em
    margin-bottom .6em

    &:last-child
      margin-right 0

  a,
  .count
    display block
    box-sizing border-box

  a
    color $link-color
    text-shadow 0 1px white
    padding $tagPadding ($tagPadding + 1) $tagPadding ($tagPadding + 2)
    gradient-background()

    .count
      position absolute
      top 0
      left 100%
      z-index 2
      overflow hidden
      max-width 0
      padding $tagPadding 0 $tagPadding 2px
      color white
      text-shadow 0 -1px rgba(black, .3)
      gradient-background($tagColor)
      opacity: .95
      transition-duration .3s
      transition-timing-function ease-out
      transition-property padding, max-width

    &:hover .count
      padding $tagPadding ($tagPadding + 2) $tagPadding ($tagPadding + 1)
      max-width 40px
      box-shadow 1px 1px 2px rgba(black, .2)