Wizzard with bootstrap

_steps.html.haml

.wizard
  = step(1, 'Inscripció')
  = step(2, 'Verificació')
  = step(3, 'Pagament')
  = step(4, 'Final')

application_helper.rb

# encoding: utf-8

module ApplicationHelper
  def step(number, name)
    options = current_step == number ? {class: 'current'} : {}
    content_tag(:a, options) do
      concat content_tag(:span, number, class: 'badge')
      concat name
    end
  end
end

steps.sass

.wizard
  a
    padding: 10px 12px 10px
    margin-right: 5px
    background: #efefef
    position: relative
    display: inline-block
    text-decoration: none

    &:before
      width: 0
      height: 0
      border-top: 20px inset transparent
      border-bottom: 20px inset transparent
      border-left: 20px solid #fff
      position: absolute
      content: ""
      top: 0
      left: 0

    &:after
      width: 0
      height: 0
      border-top: 20px inset transparent
      border-bottom: 20px inset transparent
      border-left: 20px solid #efefef
      position: absolute
      content: ""
      top: 0
      right: -20px
      z-index: 2

    &:first-child:before,
    &:last-child:after
      border: none
    &:first-child
      -webkit-border-radius: 4px 0 0 4px
      -moz-border-radius: 4px 0 0 4px
      border-radius: 4px 0 0 4px

    &:last-child
      -webkit-border-radius: 0 4px 4px 0
      -moz-border-radius: 0 4px 4px 0
      border-radius: 0 4px 4px 0

    &:first-child .badge
      margin-left: 0

  .badge
    background: #1b1a1a
    margin: 0 5px 0 18px
    position: relative
    top: -1px


  .current
    background: #f47d31
    color: #fff
    &:after
      border-left-color: #f47d31