diff options
Diffstat (limited to 'lib/grappelli/media/css/forms.css')
-rw-r--r-- | lib/grappelli/media/css/forms.css | 809 |
1 files changed, 809 insertions, 0 deletions
diff --git a/lib/grappelli/media/css/forms.css b/lib/grappelli/media/css/forms.css new file mode 100644 index 0000000..2a6c601 --- /dev/null +++ b/lib/grappelli/media/css/forms.css @@ -0,0 +1,809 @@ + + + +/* Basic Settings, Fieldsets, Form-Rows +------------------------------------------------------------------------------------------------------ */ + +form { + margin: 0; + padding: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +.row p.help { + margin: 3px 0 2px 0; + padding: 0; +} +.row.cells p.help { + max-width: 278px; + white-space: normal !important; +} + +.row ul.radio-list + p.help, +.row ul.checkbox-list + p.help { + margin-top: -3px; +} + + + +/* Errors +------------------------------------------------------------------------------------------------------ */ + +.errornote { + margin-bottom: 7px; + padding: 8px 10px; + font-size: 12px; + font-weight: bold; +} +/* little fix to accomodate the top aligned login form .. */ +.errornote.login-errors { + margin-bottom: 0 !important; + padding: 8px 12px; +} +ul.errorlist { + margin: 6px 0 -3px; + font-size: 11px; + line-height: 13px; + font-weight: bold; +} +ul.errorlist li { + padding: 0 5px 0 0; +} +p.errornote + ul.errorlist { + margin-bottom: 8px; +} +ul.errorlist:empty { + display: none; + margin: 0; +} +.group.tabular ul.errorlist { + margin-left: 11px; +} +.group.stacked ul.errorlist { + margin-left: 11px; + margin-bottom: 5px; +} +.group.stacked h3 + * + ul.errorlist { + margin: 0 !important; + padding: 5px 11px; +} +.cell ul.errorlist { + padding-left: 0; +} +.cell ul.errorlist li { + padding-left: 0; +} +.cell label + * + ul.errorlist, +.cell label + * + * + ul.errorlist { + padding-left: 160px !important; +} +table ul.errorlist { + margin: -9px 0 6px; +} +.group.stacked .row ul.errorlist, +.module.table ul.errorlist { + margin-top: 5px; + margin-left: 0; + margin-bottom: -3px; +} +ul.radiolist.inline + ul.errorlist, +ul.radiolist.inline + * + ul.errorlist { + position: relative; clear: both; +} +ul.radiolist + ul.errorlist, +ul.radiolist + * + ul.errorlist { + margin-top: 0 !important; +} + +.module.table .tbody>ul.errorlist { + margin-top: 2px; + margin-left: 11px; + margin-bottom: 2px; +} +.module.table .tr ul.errorlist { + margin-left: 0; +} +.module.table ul.radiolist + ul.errorlist, +.module.table ul.radiolist + * + ul.errorlist { + margin: -2px 0 0; +} +table ul.errorlist li, +.module.table ul.errorlist li { + padding-left: 0; +} +p.errornote + ul.errorlist li { + padding-left: 10px; +} + + + +/* Labels & Other Typographic Elements in Forms +------------------------------------------------------------------------------------------------------ */ + +label { + margin: 5px 0 -5px; + font-size: 11px; + line-height: 15px; + cursor: pointer; +} +.required label, label.required, +.row .required label, .row label.required { + font-weight: bold; +} + +.module label { + display: block; + padding: 0 0 6px; + white-space: normal; +} +.module .vCheckboxLabel { + display: inline; + float: none; + clear: both; + margin: 0 0 0 10px; + padding: 0; +} + + + +/* Form Elements +------------------------------------------------------------------------------------------------------ */ + +input, textarea, select, button { + margin: 0; + vertical-align: top; + font-family: Arial, sans-serif; + font-size: 12px; + font-weight: bold; + box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; +} + + +/* Text, Password ................................................... */ + +input[type=text], input[type=password] { + padding: 5px 5px 4px; + height: 25px; +} +/* Webkit browser hack: apply same horizontal padding as in moz browsers + Moz Browsers have a default horizontal padding of 3px in input[type=submit] */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + input[type=text], input[type=password] { + line-height: 13px !important; + } +} + + +/* Searchbar ................................................... */ + +form#changelist-search { + position: relative; + float: left; + clear: both; +} +input#searchbar { + position: relative; + float: left; + padding-left: 8px; + padding-right: 30px; + width: 218px; + height: 26px; + font-size: 11px; +} + + +/* FileBrowseField ................................................... */ + +input.vFileBrowseField { + padding-right: 25px; +} + + +/* File ................................................... */ + +input[type=file] { + position: relative; + top: 1px; + height: auto; + border: 0; +} +.th input[type=file], +.td input[type=file] { + top: 3px; + margin-bottom: -2px; +} + + +/* Date & Time ................................................... */ + +.vDateField, .vTimeField { + margin-left: 0; +} +p.datetime { + margin-bottom: 0 !important; + padding: 0; +} +p.datetime input.vTimeField { + margin-left: 13px; +} + + +/* Textarea ................................................... */ + +textarea { + vertical-align: top; + padding: 3px 5px; +} +fieldset.monospace textarea { + font-family: "Bitstream Vera Sans Mono",Monaco,"Courier New",Courier,monospace; +} + + +/* Select ................................................... */ + +select { + padding: 4px 3px 4px 3px; + height: 25px; +} +@media screen and (-webkit-min-device-pixel-ratio:0) { + select { + padding: 4px 28px 4px 8px; + -webkit-appearance: textfield; + background: #fff url('../img/icons/icon-form-select.png') 100% 50% no-repeat; + } +} +select[multiple=multiple] { + padding-right: 5px; + height: 160px; +} +@media screen and (-webkit-min-device-pixel-ratio:0) { + select[multiple=multiple] { + background-image: none; + } +} + + +/* Checkbox, Radio ................................................... */ + +input[type=checkbox], input[type=radio] { + position: relative; + margin: 0; +} +.row input[type=checkbox], .row input[type=radio] { + margin-left: 0; + margin-right: 5px; +} +.th>input[type=radio], +.th>input[type=checkbox], +.td>input[type=radio], +.td>input[type=checkbox] { + top: 5px; + margin-bottom: -3px; +} +@media screen and (-webkit-min-device-pixel-ratio:0) { + .th>input[type=radio], + .td>input[type=radio] { + top: 6px; + margin-bottom: -2px; + } + .th>input[type=checkbox], + .td>input[type=checkbox] { + top: 7px; + margin-bottom: -2px; + } +} +.row input[type=radio], +.th ul.radiolist input[type=radio], +.td ul.radiolist input[type=radio] { + top: 0; +} +.row input[type=checkbox], +.th ul.checkboxlist input[type=checkbox], +.td ul.checkboxlist input[type=checkbox] { + top: 2px; +} +@media screen and (-webkit-min-device-pixel-ratio:0) { + .row input[type=radio], + .th ul.radiolist input[type=radio], + .td ul.radiolist input[type=radio] { + top: 1px; + } + .row input[type=checkbox], + .th ul.checkboxlist input[type=checkbox], + .td ul.checkboxlist input[type=checkbox] { + top: 3px; + } +} +.th input[type=radio], +.th input[type=checkbox], +.td input[type=radio], +.td input[type=checkbox], +ul.radiolist input[type=radio], +ul.checkboxlist input[type=checkbox] { + margin-left: 0; + margin-right: 5px; +} + +.row input[type=checkbox] + label { + position: relative; + float: none; + top: 0; + display: inline-block; + margin-bottom: -2px; +} + +.row ul.checkboxlist input[type=checkbox] { + top: 0; + margin: 0 5px 0 0; +} +.row ul.checkboxlist label input[type=checkbox] { + top: -2px; + vertical-align: middle; +} +@media screen and (-webkit-min-device-pixel-ratio:0) { + .row ul.checkboxlist label input[type=checkbox] { + top: -1px; + vertical-align: middle; + } +} + +.row label + input + p.help input[type=checkbox] { + position: relative; + top: -2px; + margin: 0 3px 0 0; +} + +ul.tools .delete-handler-container input[type=checkbox], +ul.tools .remove-handler-container input[type=checkbox] { + display: none !important; +} + + +/* Radiolists & Checkboxlists ................................................... */ + +ul.radiolist, ul.checkboxlist { + position: relative; + float: none; + display: inline-block; + margin: 5px 0; + padding: 0; + font-size: 11px; + line-height: 15px; + font-weight: normal; +} + +.row>ul.radiolist, .row>ul.checkboxlist { + margin: 0; +} + +ul.radiolist li + li, ul.checkboxlist li + li { + margin-top: 2px; +} + +ul.radiolist.inline, ul.checkboxlist.inline { + float: left; + display: inline; + margin-top: 5px; + margin-bottom: 3px; + padding-right: 20px; +} +th ul.radiolist.inline, th ul.checkboxlist.inline, +td ul.radiolist.inline, td ul.checkboxlist.inline { + margin-top: 0; +} +ul.radiolist.inline li, ul.checkboxlist.inline li { + float: left; + display: inline; + margin-top: 0 !important; + margin-bottom: 2px; + padding-right: 20px; +} +.module.tbody ul.radiolist.inline, .module.tbody ul.checkboxlist.inline { + display: inline; + white-space: normal; +} +.module.tbody ul.radiolist.inline li, .module.tbody ul.checkboxlist.inline li { + position: relative; + float: left; + display: inline; +} +.row.cells ul.radiolist.inline li, .row.cells ul.checkboxlist.inline li { + float: none; +} + +ul.radiolist label, ul.checkboxlist label { + float: none; + display: inline-block; + margin: 0; + padding: 0; + width: auto !important; + white-space: nowrap; +} + + +/* Changelist Form Fields ................................................... */ + +#changelist table input[type=text], +#changelist table input[type=password], +#changelist table input[type=file], +#changelist table select, +#changelist table textarea { + position: relative; + top: -5px; + margin-bottom: -9px; + vertical-align: top; +} +#changelist table input[type=file] { + top: -3px; + margin-bottom: -7px; +} +#changelist table input[type=radio], +#changelist table input[type=checkbox] { + position: relative; + top: 0; +} +@media screen and (-webkit-min-device-pixel-ratio:0) { + #changelist table input[type=radio], + #changelist table input[type=checkbox] { + top: 1px; + } +} +#changelist table thead input[type=radio], +#changelist table thead input[type=checkbox] { + top: 0; +} + + + +/* Form Fields in Grid +------------------------------------------------------------------------------------------------------ */ + +input[class*="span"], select[class*="span"], textarea[class*="span"] { + margin-right: 0; +} + +.span-24 input[type=text], .span-24 input[type=password], +.span-24 select, .span-24 textarea, +input[type=text].span-24, input[type=password].span-24, +select.span-24, textarea.span-24, +.span-24 .ui-gFacelist-message, +.span-24 .ui-gFacelist-facelist { + width: 918px; +} +.span-23 input[type=text], .span-23 input[type=password], +.span-23 select, .span-23 textarea, +input[type=text].span-23, input[type=password].span-23, +select.span-23, textarea.span-23, +.span-23 .ui-gFacelist-message, +.span-23 .ui-gFacelist-facelist { + width: 878px; +} +.span-22 input[type=text], .span-22 input[type=password], +.span-22 select, .span-22 textarea, +input[type=text].span-22, input[type=password].span-22, +select.span-22, textarea.span-22, +.span-22 .ui-gFacelist-message, +.span-22 .ui-gFacelist-facelist { + width: 838px; +} +.span-21 input[type=text], .span-21 input[type=password], +.span-21 select, .span-21 textarea, +input[type=text].span-21, input[type=password].span-21, +select.span-21, textarea.span-21, +.span-21 .ui-gFacelist-message, +.span-21 .ui-gFacelist-facelist { + width: 798px; +} +.span-20 input[type=text], .span-20 input[type=password], +.span-20 select, .span-20 textarea, +input[type=text].span-20, input[type=password].span-20, +select.span-20, textarea.span-20, +.span-20 .ui-gFacelist-message, +.span-20 .ui-gFacelist-facelist, + +.span-24 label + input[type=text], .span-24 label + input[type=password], +.span-24 label + select, .span-24 label + textarea { + width: 758px; +} +.span-19 input[type=text], .span-19 input[type=password], +.span-19 select, .span-19 textarea, +input[type=text].span-19, input[type=password].span-19, +select.span-19, textarea.span-19, +.span-19 .ui-gFacelist-message, +.span-19 .ui-gFacelist-facelist, + +.span-23 label + input[type=text], .span-23 label + input[type=password], +.span-23 label + select, .span-23 label + textarea { + width: 718px; +} +.span-18 input[type=text], .span-18 input[type=password], +.span-18 select, .span-18 textarea, +input[type=text].span-18, input[type=password].span-18, +select.span-18, textarea.span-18, +.span-18 .ui-gFacelist-message, +.span-18 .ui-gFacelist-facelist, + +.span-22 label + input[type=text], .span-22 label + input[type=password], +.span-22 label + select, .span-22 label + textarea { + width: 678px; +} +.span-17 input[type=text], .span-17 input[type=password], +.span-17 select, .span-17 textarea, +input[type=text].span-17, input[type=password].span-17, +select.span-17, textarea.span-17, +.span-17 .ui-gFacelist-message, +.span-17 .ui-gFacelist-facelist, + +.span-21 label + input[type=text], .span-21 label + input[type=password], +.span-1 label + select, .span-21 label + textarea { + width: 638px; +} +.span-16 input[type=text], .span-16 input[type=password], +.span-16 select, .span-16 textarea, +input[type=text].span-16, input[type=password].span-16, +select.span-16, textarea.span-16, +.span-16 .ui-gFacelist-message, +.span-16 .ui-gFacelist-facelist, +.span-24 input.vForeignKeyRawIdAdminField, +.span-24 input.vManyToManyRawIdAdminField, + +.span-20 label + input[type=text], .span-20 label + input[type=password], +.span-20 label + select, .span-20 label + textarea { + width: 598px; +} +.span-15 input[type=text], .span-15 input[type=password], +.span-15 select, .span-15 textarea, +input[type=text].span-15, input[type=password].span-15, +select.span-15, textarea.span-15, +.span-15 .ui-gFacelist-message, +.span-15 .ui-gFacelist-facelist, +.span-23 input.vForeignKeyRawIdAdminField, +.span-23 input.vManyToManyRawIdAdminField, + +.span-19 label + input[type=text], .span-19 label + input[type=password], +.span-19 label + select, .span-19 label + textarea { + width: 558px; +} +.span-14 input[type=text], .span-14 input[type=password], +.span-14 select, .span-14 textarea, +input[type=text].span-14, input[type=password].span-14, +select.span-14, textarea.span-14, +.span-14 .ui-gFacelist-message, +.span-14 .ui-gFacelist-facelist, +.span-22 input.vForeignKeyRawIdAdminField, +.span-22 input.vManyToManyRawIdAdminField, + +.span-18 label + input[type=text], .span-18 label + input[type=password], +.span-18 label + select, .span-18 label + textarea { + width: 518px; +} +.span-13 input[type=text], .span-13 input[type=password], +.span-13 select, .span-13 textarea, +input[type=text].span-13, input[type=password].span-13, +select.span-13, textarea.span-13, +.span-13 .ui-gFacelist-message, +.span-13 .ui-gFacelist-facelist, +.span-21 input.vForeignKeyRawIdAdminField, +.span-21 input.vManyToManyRawIdAdminField, + +.span-17 label + input[type=text], .span-17 label + input[type=password], +.span-17 label + select, .span-17 label + textarea { + width: 478px; +} +.span-12 input[type=text], .span-12 input[type=password], +.span-12 select, .span-12 textarea, +input[type=text].span-12, input[type=password].span-12, +select.span-12, textarea.span-12, +.span-12 .ui-gFacelist-message, +.span-12 .ui-gFacelist-facelist, +.span-20 input.vForeignKeyRawIdAdminField, +.span-20 input.vManyToManyRawIdAdminField, + +.span-16 label + input[type=text], .span-16 label + input[type=password], +.span-16 label + select, .span-16 label + textarea { + width: 438px; +} +.span-11 input[type=text], .span-11 input[type=password], +.span-11 select, .span-11 textarea, +input[type=text].span-11, input[type=password].span-11, +select.span-11, textarea.span-11, +.span-11 .ui-gFacelist-message, +.span-11 .ui-gFacelist-facelist, +.span-19 input.vForeignKeyRawIdAdminField, +.span-19 input.vManyToManyRawIdAdminField, + +.span-15 label + input[type=text], .span-15 label + input[type=password], +.span-15 label + select, .span-15 label + textarea { + width: 398px; +} +.span-10 input[type=text], .span-10 input[type=password], +.span-10 select, .span-10 textarea, +input[type=text].span-10, input[type=password].span-10, +select.span-10, textarea.span-10, +.span-10 .ui-gFacelist-message, +.span-10 .ui-gFacelist-facelist, +.span-18 input.vForeignKeyRawIdAdminField, +.span-18 input.vManyToManyRawIdAdminField, + +.span-14 label + input[type=text], .span-4 label + input[type=password], +.span-14 label + select, .span-14 label + textarea { + width: 358px; +} +.span-9 input[type=text], .span-9 input[type=password], +.span-9 select, .span-9 textarea, +input[type=text].span-9, input[type=password].span-9, +select.span-9, textarea.span-9, +.span-9 .ui-gFacelist-message, +.span-9 .ui-gFacelist-facelist, +.span-17 input.vForeignKeyRawIdAdminField, +.span-17 input.vManyToManyRawIdAdminField, + +.span-13 label + input[type=text], .span-13 label + input[type=password], +.span-13 label + select, .span-13 label + textarea { + width: 318px; +} +.span-8 input[type=text], .span-8 input[type=password], +.span-8 select, .span-8 textarea, +input[type=text].span-8, input[type=password].span-8, +select.span-8, textarea.span-8, +.span-8 .ui-gFacelist-message, +.span-8 .ui-gFacelist-facelist, +.span-16 input.vForeignKeyRawIdAdminField, +.span-16 input.vManyToManyRawIdAdminField, + +.span-12 label + input[type=text], .span-12 label + input[type=password], +.span-12 label + select, .span-12 label + textarea { + width: 278px; +} +.span-7 input[type=text], .span-7 input[type=password], +.span-7 select, .span-7 textarea, +input[type=text].span-7, input[type=password].span-7, +select.span-7, textarea.span-7, +.span-15 input.vForeignKeyRawIdAdminField, +.span-15 input.vManyToManyRawIdAdminField, + +.span-11 label + input[type=text], .span-11 label + input[type=password], +.span-11 label + select, .span-11 label + textarea { + width: 238px; +} +.span-6 input[type=text], .span-6 input[type=password], +.span-6 select, .span-6 textarea, +input[type=text].span-6, input[type=password].span-6, +select.span-6, textarea.span-6, +.span-14 input.vForeignKeyRawIdAdminField, +.span-14 input.vManyToManyRawIdAdminField, + +.span-10 label + input[type=text], .span-10 label + input[type=password], +.span-10 label + select, .span-10 label + textarea { + width: 198px; +} +.span-5 input[type=text], .span-5 input[type=password], +.span-5 select, .span-5 textarea, +input[type=text].span-5, input[type=password].span-5, +select.span-5, textarea.span-5, +.span-13 input.vForeignKeyRawIdAdminField, +.span-13 input.vManyToManyRawIdAdminField, + +.span-9 label + input[type=text], .span-9 label + input[type=password], +.span-9 label + select, .span-9 label + textarea { + width: 158px; +} +.span-4 input[type=text], .span-4 input[type=password], +.span-4 select, .span-4 textarea, +input[type=text].span-4, input[type=password].span-4, +select.span-4, textarea.span-4, +.span-12 input.vForeignKeyRawIdAdminField, +.span-12 input.vManyToManyRawIdAdminField, + +.span-8 label + input[type=text], .span-8 label + input[type=password], +.span-8 label + select, .span-8 label + textarea { + width: 118px; +} +.span-3 input[type=text], .span-3 input[type=password], +.span-3 select, .span-3 textarea, +input[type=text].span-3, input[type=password].span-3, +select.span-3, textarea.span-3, +.span-11 input.vForeignKeyRawIdAdminField, +.span-11 input.vManyToManyRawIdAdminField, + +.span-7 label + input[type=text], .span-7 label + input[type=password], +.span-7 label + select, .span-7 label + textarea { + width: 78px; +} +.span-2 input[type=text], .span-2 input[type=password], +.span-2 select, .span-2 textarea, +input[type=text].span-2, input[type=password].span-2, +select.span-2, textarea.span-2, +.span-10 input.vForeignKeyRawIdAdminField, +.span-10 input.vManyToManyRawIdAdminField, + +.span-6 label + input[type=text], .span-6 label + input[type=password], +.span-6 label + select, .span-6 label + textarea { + width: 38px; +} + +.container-grid .span-flexible input[type=text], .container-grid .span-flexible input[type=password], +.container-grid .span-flexible textarea, .container-grid .span-flexible select { + width: 100% !important; +} + + + +/* Form Elements: Basic Widths & Heights +------------------------------------------------------------------------------------------------------ */ + +input[type=text], +input[type=password], +.vDateField, +.vTimeField, +.vIntegerField, +.vPositiveSmallIntegerField, +.vManyToManyRawIdAdminField, +.vForeignKeyRawIdAdminField, +.vAutocompleteSearchField, +.vAutocompleteRawIdAdminField { + width: 118px; +} + +input.vTextField, +input.vURLField, +input.vFileBrowseField, +textarea, +.vLargeTextField, +.vXMLLargeTextField, +input.vM2MAutocompleteSearchField { + width: 278px; +} + +.row select { + min-width: 118px; +} + +.vLargeTextField { + height: 118px; +} + + + +/* Large Form Elements in Change-Form: Widths & Heights +------------------------------------------------------------------------------------------------------ */ + +.row .vTextField, +.row .vURLField, +.row .vFileBrowseField, +.row textarea, +.row .vLargeTextField, +.row .vXMLLargeTextField, +.row .vAutocompleteSearchField, +.row .vM2MAutocompleteSearchField { + width: 758px; +} +.row select { + max-width: 758px; +} + + + +/* Form Elements in Changelist-Results Table & Tabular Modules: Widths & Heights +------------------------------------------------------------------------------------------------------ */ + +.changelist-results table select, +.module.table select { + max-width: 278px; +} + + + +/* Form Elements Cells +------------------------------------------------------------------------------------------------------ */ + +.cell input[type=text], +.cell input[type=password], +.cell select { + max-width: 280px; +} + |