psychic-ui/src/badge/badge.styl

the working mans css framework

.badge
    display: table-cell
    padding: $badge['padding']
    border-radius: $badge['border-radius']
    text-align: center
    vertical-align: middle

    for key, value in $brands
        &.badge-{key}
            background-color: value
            color: white

            &:hover
                background-color:lighten(value, 50%)
                opacity: .85
                border-color:darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000

            &:active
                background-color: darken(value, 15%)
                opacity: .85
                border-color: darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000

        &.border-{key}
            border: 1px solid value
            color: value

            &:hover
                background-color:lighten(value, 50%)
                opacity: .85
                border-color:darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000

            &:active
                background-color: darken(value, 15%)
                opacity: .85
                border-color: darken(value, 15%)
                color: lightness(value) < $bright-text-lightness ? #ffffff : #000000

.list-item > .badge
    float: right
    line-height: 20px;