chaloBEST/smsBEST/static/rapidsms/stylesheets/forms.css
2012-05-15 18:33:43 +05:30

147 lines
4.2 KiB
CSS
Executable File

/* 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;
}