Stud.IP: Smiley assets in SASS / CoffeeScript

smiley.coffee

jQuery ($) ->
    $('.smiley-select select').change () ->
        $(this).closest('form').submit();
    
    $('.smiley-toggle').on 'click', (event) ->
        element = $(this)
        element.attr 'disabled': true
        element.addClass 'ajax'
        $.getJSON(
            element.attr 'href'
            (json) ->
                $('#layout_container .messagebox').remove()
                $('#layout_container').prepend(json.message)
                
                element.removeClass 'ajax'
                element.toggleClass 'favorite', json.state
                element.attr 'disabled': false
        )
        event.preventDefault()

    $('a[href*="admin/smileys/edit"], a[href*="admin/smileys/upload"]').on 'click', (event) ->
        href = $(this).attr 'href'
        $('<div class="smiley-modal"/>').load href, () ->
            $(this).hide().appendTo 'body'

            options = 
                modal  : true
                width  : $(this).outerWidth() + 50
                height : $(this).outerHeight() + 50
                title  : $('thead', this).remove().text()
                close  : () ->
                    $(this).remove()
            
            $(this).dialog options
        
        event.preventDefault()
        
    $('.smiley-modal .button.cancel').on 'click', (event) ->
        $(this).closest('.smiley-modal').dialog 'close'
        event.preventDefault()

smiley.sass

.smiley-popup
    #header
        background: inherit
        height: 3em
        width: 98%

    #barTopFont
        font-size: 1.5em
        left: 15px
        position: relative
        top: 15px

    #barTopStudip
        right: 15px
        top: 15px

    #tabs li a
        padding-left: 0.6em
        padding-right: 0.6em
        
    a:active, a:focus
        outline: none

    .smiley-column
        width: 33%

.smiley-toggle
    background: url(../images/icons/16/blue/checkbox-unchecked.png) center no-repeat
    display: inline-block
    height: 16px
    text-indent: -9999px
    width: 16px

    &.favorite
        background-image: url(../images/icons/16/blue/checkbox-checked.png)
    &.ajax
        background-image: url(../images/ajax_indicator_small.gif)

.smiley-admin
    .separator
        border-left: 1px solid #aaa
    tbody tr
        a, [type=checkbox]
            visibility: hidden
        input:checked
            visibility: visible
        &:hover
            a, [type=checkbox]
                visibility: visible
    a:active, a:focus
        outline: none

.smiley-select option.single
    font-family: monospace

.smiley-statistics
    margin: 0
    padding: 0

    dt
        clear: left
        float: left
        padding-right: 0.5em
    dd
        font-weight: 700
        margin: 0
        text-align: right