chaloBEST/smsBEST/static/rapidsms/stylesheets/forms.css

/* vim:set et ts=4 sw=4 */

form {
    border: 1px solid #ddd;
    padding: 0 1em;
}

    /* recursive models can be displayed as a tree within a <select>, by
     * ordering them cleverly and adding their "depth" to the class, to
     * bump them to the right, indicating their ancestry */
    form option.depth-1 { padding-left: 1em; }
    form option.depth-2 { padding-left: 2em; }
    form option.depth-3 { padding-left: 3em; }
    form option.depth-4 { padding-left: 4em; }
    form option.depth-5 { padding-left: 5em; }
    form option.depth-6 { padding-left: 6em; }
    form option.depth-7 { padding-left: 7em; }
    form option.depth-8 { padding-left: 8em; }

    /* some options are less interesting than others; like None, or
     * Disabled, or Default; so mark them dull */
    form option.na {
        font-style: italic;
        color: #aaa;
    }

    /* TODO: wtf is this? */
    form .no-data {
        display: inline-block;
        background: #f8f8ff;
        text-align: center;
        padding: 2em;
        color: #aaa;
    }

        form .no-data a.add {
            display: block;
            padding-top: 0.625em;
            font-size: 80%;
        }


    /* each field is wrapped in a div.field, which bundles together
     * everything related to it. in order:
     *
     *   1. text label
     *   2. list of errors
     *   3. the field itself
     *   4. help text
     */
    form div.field {
        margin-top: 1em; }

        form div.field label {
            margin-bottom: 0.5em;
            display: block;
            color: #000;
        }

        /* for fields that need a longer description, help text can be
         * added below. similar to django's models.Model.help_text */
        form div.field p.help {
            max-width: 30em;
            font-size: 80%;
            color: #aaa;

            margin-top: 0;
            padding-top: 2px;
            margin-left: 0.625em;
            padding-left: 0.3125em;
            border-left: 0.625em solid #f8f8f8;
        }

            /* highlight examples (usually examples of text that should
             * be sent over SMS, but could be anything) in help text */
            form div.field p.help span.example {
                font-family: monospace;
                background: #f8f8f8;
                color: #888;
            }

    form div.field.error { }

        form div.field.error label {
            font-weight: bold;
            color: #f00;
        }

        form div.field.error ul.errors {
            margin: 0 0 0.5em 0;
            padding: 0;
        }

        form div.field.error ul.errors li {
            background: #fff8f8 url("../icons/silk/exclamation.png") no-repeat 5px 50%;
            padding: 0.25em 5px 0.25em 25px;
            border: 1px solid #fdd;
            margin-top: 0.25em;
            min-height: 16px;
            line-height: 1.4;
            display: block;
            color: #f44;
        }

    /* wrap submission and/or action buttons separately */
    form div.submit {
        background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0;
        border-top: 1px solid #eee;
        margin: 1em -1em 0 -1em;
        padding: 1em;
    }

/* if the browser supports after (+) and :first-child...
 *
 * 1. do a bit of extra work to replace the usual `1em margin-top` of
 *    the first div.field with padding-top on the form itself, to remove
 *    the 1px border between the module h2 and the form
 *
 * 2. add some fancy rounded corners to the bottom of the form, and do
 *    some margin jiggery-pokery to ensure that the div.submit doesn't
 *    overlap and cause jagged edges. */
body:last-child h2 + form {
    border-top: 0;
    padding: 0;

    background-color: #f8f8f8;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

    h2 + form div.field:first-child {
        margin-top: 0; }

    body:last-child form > div:first-child {
        background-color: #fff;
        padding: 1em;
    }

    body:last-child form div.submit {
        background-color: transparent;
        margin: 0;
    }