Button stylus and jade test

button.styl

red = #DC2E2D
white = #FFFFFF
green = #3C8F48
blue = #2A6BEB
orange = #F3A527
black = #000000
grey = #848484
dark = #111111
darkblue = #303886
cyan = #3893B4
pink = #CA2F79
grey = #DCDCDC

colorizeButton(bg-color, color)
    background-color bg-color
    color color
    border 1px solid lighten(bg-color, 20%)

.btn, .b, .btn-normal, .btn-link
    cursor pointer
    font-family Arial, sans-serif
    font-weight bold
    line-height normal
    margin 0 1px 1.25em
    position relative
    text-decoration none
    vertical-align middle
    text-align center
    display inline-block
    padding 0.4em 0.8em
    background-image none
    border 1px solid transparent
    white-space nowrap

.btn-normal:hover, .btn-link:hover
    text-decoration underline

.btn-tiny
    padding 0.2em 0.4em
    font-size 1em

.btn-large
    padding 0.8em 1.6em
    font-size 1.2em

.btn-rounded
    -webkit-border-radius 5px
    -moz-border-radius 5px
    border-radius 5px

.btn-alert, .btn-red
    colorizeButton(red, white)

.btn-alert:hover, .btn-red:hover
    background-color lighten(red, 20%)

.btn-success, .btn-green
    colorizeButton(green, white)

.btn-success:hover, .btn-green:hover
    background-color lighten(green, 20%)

.btn-default, .btn-white
    colorizeButton(white, black)
    border 1px solid grey

.btn-default:hover, .btn-white:hover
    background-color dark
    border-color dark
    color white

.btn-primary, .btn-blue
    colorizeButton(blue, white)

.btn-primary:hover, .btn-blue:hover
    background-color lighten(blue, 20%)

.btn-warning, .btn-orange
    colorizeButton(orange, white)

.btn-warning:hover, .btn-orange:hover
    background-color lighten(orange, 20%)

.btn-info, .btn-cyan
    colorizeButton(cyan, white)

.btn-info:hover, .btn-cyan:hover
    background-color lighten(cyan, 20%)

.btn-inverse, .btn-black
    colorizeButton(dark, white)

.btn-inverse:hover, .btn-black:hover
    background-color lighten(dark, 20%)


.btn-pink
    colorizeButton(pink, white)

.btn-pink:hover
    background-color lighten(pink, 20%)

.btn-darkblue
    colorizeButton(darkblue, white)

.btn-darkblue:hover
    background-color lighten(darkblue, 20%)

.btn-transparent
    border 1px solid dark
    color dark

.btn-transparent:hover
    background-color white
    border 1px solid white

index.jade

extends layout

block content
    h1= title
    a.btn.btn-alert(href="#") Connection
    a.btn.btn-success(href="#") Connection
    a.btn.btn-default(href="#") Connection
    a.btn.btn-primary(href="#") Connection
    a.btn.btn-warning(href="#") Connection
    a.btn.btn-info(href="#") Connection
    a.btn.btn-inverse(href="#") Connection
    a.btn.btn-pink(href="#") Connection
    a.btn.btn-darkblue(href="#") Connection
    a.btn.btn-transparent(href="#") Connection
    a.btn(href="#") Connection
    br
    a.btn.btn-large.btn-alert(href="#") Connection
    a.btn.btn-large.btn-success(href="#") Connection
    a.btn.btn-large.btn-default(href="#") Connection
    a.btn.btn-large.btn-primary(href="#") Connection
    a.btn.btn-large.btn-warning(href="#") Connection
    a.btn.btn-large.btn-info(href="#") Connection
    a.btn.btn-large.btn-inverse(href="#") Connection
    a.btn.btn-large.btn-pink(href="#") Connection
    a.btn.btn-large.btn-darkblue(href="#") Connection
    a.btn.btn-large.btn-transparent(href="#") Connection
    a.btn.btn-large(href="#") Connection
    br
    a.btn.btn-tiny.btn-alert(href="#") Connection
    a.btn.btn-tiny.btn-success(href="#") Connection
    a.btn.btn-tiny.btn-default(href="#") Connection
    a.btn.btn-tiny.btn-primary(href="#") Connection
    a.btn.btn-tiny.btn-warning(href="#") Connection
    a.btn.btn-tiny.btn-info(href="#") Connection
    a.btn.btn-tiny.btn-inverse(href="#") Connection
    a.btn.btn-tiny.btn-pink(href="#") Connection
    a.btn.btn-tiny.btn-darkblue(href="#") Connection
    a.btn.btn-tiny.btn-transparent(href="#") Connection
    a.btn.btn-tiny(href="#") Connection
    br
    a.btn.btn-rounded.btn-alert(href="#") Connection
    a.btn.btn-rounded.btn-success(href="#") Connection
    a.btn.btn-rounded.btn-default(href="#") Connection
    a.btn.btn-rounded.btn-primary(href="#") Connection
    a.btn.btn-rounded.btn-warning(href="#") Connection
    a.btn.btn-rounded.btn-info(href="#") Connection
    a.btn.btn-rounded.btn-inverse(href="#") Connection
    a.btn.btn-rounded.btn-pink(href="#") Connection
    a.btn.btn-rounded.btn-darkblue(href="#") Connection
    a.btn.btn-rounded.btn-transparent(href="#") Connection
    a.btn.btn-rounded(href="#") Connection
    br
    a.btn.btn-rounded.btn-large.btn-alert(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-success(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-default(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-primary(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-warning(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-info(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-inverse(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-pink(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-darkblue(href="#") Connection
    a.btn.btn-rounded.btn-large.btn-transparent(href="#") Connection
    a.btn.btn-rounded.btn-large(href="#") Connection
    br
    a.btn.btn-rounded.btn-tiny.btn-alert(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-success(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-default(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-primary(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-warning(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-info(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-inverse(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-pink(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-darkblue(href="#") Connection
    a.btn.btn-rounded.btn-tiny.btn-transparent(href="#") Connection
    a.btn.btn-rounded.btn-tiny(href="#") Connection