psychic-ui/src/list/list.styl

the working mans css framework

.list
    list-style: none
    margin: 0
    padding: 0

    > .list-item
        clear: both
        min-height: 30px
        height: auto
        line-height: 30px
        overflow: auto
        padding: 10px
        border-top: $list['border']
        border-right: $list['border']
        border-left: $list['border']

        for $brand in $brands
            &.list-item-{$brand}
                border-top: 1px solid lighten($brands[$brand], 20%)
                border-right: 1px solid lighten($brands[$brand], 20%)
                border-left: 1px solid lighten($brands[$brand], 20%)
                background-color: $brands[$brand]
                color: lightness($brands[$brand]) < $bright-text-lightness ? #ffffff : #000000

                &:last-child
                    border-bottom: 1px solid lighten($brands[$brand], 20%)

        &:first-child
            border-top-left-radius: $list['border-radius']
            border-top-right-radius: $list['border-radius']

        &:last-child
            border-bottom: $list['border']
            border-bottom-left-radius: $list['border-radius']
            border-bottom-right-radius: $list['border-radius']

        > .list-item-right
            float: right

        > .list-item-left
            float: left