Files
mayan-edms/3rd_party_apps/grappelli/media/css/forms.css

810 lines
21 KiB
CSS

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