emels/static/admin/css/forms.css

   1 @import url('widgets.css');
   2
   3 /* FORM ROWS */
   4
   5 .form-row {
   6     overflow: hidden;
   7     padding: 10px;
   8     font-size: 13px;
   9     border-bottom: 1px solid #eee;
  10 }
  11
  12 .form-row img, .form-row input {
  13     vertical-align: middle;
  14 }
  15
  16 .form-row label input[type="checkbox"] {
  17     margin-top: 0;
  18     vertical-align: 0;
  19 }
  20
  21 form .form-row p {
  22     padding-left: 0;
  23 }
  24
  25 .hidden {
  26     display: none;
  27 }
  28
  29 /* FORM LABELS */
  30
  31 label {
  32     font-weight: normal;
  33     color: #666;
  34     font-size: 13px;
  35 }
  36
  37 .required label, label.required {
  38     font-weight: bold;
  39     color: #333;
  40 }
  41
  42 /* RADIO BUTTONS */
  43
  44 form ul.radiolist li {
  45     list-style-type: none;
  46 }
  47
  48 form ul.radiolist label {
  49     float: none;
  50     display: inline;
  51 }
  52
  53 form ul.radiolist input[type="radio"] {
  54     margin: -2px 4px 0 0;
  55     padding: 0;
  56 }
  57
  58 form ul.inline {
  59     margin-left: 0;
  60     padding: 0;
  61 }
  62
  63 form ul.inline li {
  64     float: left;
  65     padding-right: 7px;
  66 }
  67
  68 /* ALIGNED FIELDSETS */
  69
  70 .aligned label {
  71     display: block;
  72     padding: 4px 10px 0 0;
  73     float: left;
  74     width: 160px;
  75     word-wrap: break-word;
  76     line-height: 1;
  77 }
  78
  79 .aligned label:not(.vCheckboxLabel):after {
  80     content: '';
  81     display: inline-block;
  82     vertical-align: middle;
  83     height: 26px;
  84 }
  85
  86 .aligned label + p {
  87     padding: 6px 0;
  88     margin-top: 0;
  89     margin-bottom: 0;
  90     margin-left: 170px;
  91 }
  92
  93 .aligned ul label {
  94     display: inline;
  95     float: none;
  96     width: auto;
  97 }
  98
  99 .aligned .form-row input {
 100     margin-bottom: 0;
 101 }
 102
 103 .colMS .aligned .vLargeTextField, .colMS .aligned .vXMLLargeTextField {
 104     width: 350px;
 105 }
 106
 107 form .aligned ul {
 108     margin-left: 160px;
 109     padding-left: 10px;
 110 }
 111
 112 form .aligned ul.radiolist {
 113     display: inline-block;
 114     margin: 0;
 115     padding: 0;
 116 }
 117
 118 form .aligned p.help {
 119     clear: left;
 120     margin-top: 0;
 121     margin-left: 160px;
 122     padding-left: 10px;
 123 }
 124
 125 form .aligned label + p.help {
 126     margin-left: 0;
 127     padding-left: 0;
 128 }
 129
 130 form .aligned p.help:last-child {
 131     margin-bottom: 0;
 132     padding-bottom: 0;
 133 }
 134
 135 form .aligned input + p.help,
 136 form .aligned textarea + p.help,
 137 form .aligned select + p.help {
 138     margin-left: 160px;
 139     padding-left: 10px;
 140 }
 141
 142 form .aligned ul li {
 143     list-style: none;
 144 }
 145
 146 form .aligned table p {
 147     margin-left: 0;
 148     padding-left: 0;
 149 }
 150
 151 .aligned .vCheckboxLabel {
 152     float: none;
 153     width: auto;
 154     display: inline-block;
 155     vertical-align: -3px;
 156     padding: 0 0 5px 5px;
 157 }
 158
 159 .aligned .vCheckboxLabel + p.help {
 160     margin-top: -4px;
 161 }
 162
 163 .colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField {
 164     width: 610px;
 165 }
 166
 167 .checkbox-row p.help {
 168     margin-left: 0;
 169     padding-left: 0;
 170 }
 171
 172 fieldset .field-box {
 173     float: left;
 174     margin-right: 20px;
 175 }
 176
 177 /* WIDE FIELDSETS */
 178
 179 .wide label {
 180     width: 200px;
 181 }
 182
 183 form .wide p, form .wide input + p.help {
 184     margin-left: 200px;
 185 }
 186
 187 form .wide p.help {
 188     padding-left: 38px;
 189 }
 190
 191 .colM fieldset.wide .vLargeTextField, .colM fieldset.wide .vXMLLargeTextField {
 192     width: 450px;
 193 }
 194
 195 /* COLLAPSED FIELDSETS */
 196
 197 fieldset.collapsed * {
 198     display: none;
 199 }
 200
 201 fieldset.collapsed h2, fieldset.collapsed {
 202     display: block;
 203 }
 204
 205 fieldset.collapsed {
 206     border: 1px solid #eee;
 207     border-radius: 4px;
 208     overflow: hidden;
 209 }
 210
 211 fieldset.collapsed h2 {
 212     background: #f8f8f8;
 213     color: #666;
 214 }
 215
 216 fieldset .collapse-toggle {
 217     color: #fff;
 218 }
 219
 220 fieldset.collapsed .collapse-toggle {
 221     background: transparent;
 222     display: inline;
 223     color: #447e9b;
 224 }
 225
 226 /* MONOSPACE TEXTAREAS */
 227
 228 fieldset.monospace textarea {
 229     font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
 230 }
 231
 232 /* SUBMIT ROW */
 233
 234 .submit-row {
 235     padding: 12px 14px;
 236     margin: 0 0 20px;
 237     background: #f8f8f8;
 238     border: 1px solid #eee;
 239     border-radius: 4px;
 240     text-align: right;
 241     overflow: hidden;
 242 }
 243
 244 body.popup .submit-row {
 245     overflow: auto;
 246 }
 247
 248 .submit-row input {
 249     height: 35px;
 250     line-height: 15px;
 251     margin: 0 0 0 5px;
 252 }
 253
 254 .submit-row input.default {
 255     margin: 0 0 0 8px;
 256     text-transform: uppercase;
 257 }
 258
 259 .submit-row p {
 260     margin: 0.3em;
 261 }
 262
 263 .submit-row p.deletelink-box {
 264     float: left;
 265     margin: 0;
 266 }
 267
 268 .submit-row a.deletelink {
 269     display: block;
 270     background: #ba2121;
 271     border-radius: 4px;
 272     padding: 10px 15px;
 273     height: 15px;
 274     line-height: 15px;
 275     color: #fff;
 276 }
 277
 278 .submit-row a.deletelink:focus,
 279 .submit-row a.deletelink:hover,
 280 .submit-row a.deletelink:active {
 281     background: #a41515;
 282 }
 283
 284 /* CUSTOM FORM FIELDS */
 285
 286 .vSelectMultipleField {
 287     vertical-align: top;
 288 }
 289
 290 .vCheckboxField {
 291     border: none;
 292 }
 293
 294 .vDateField, .vTimeField {
 295     margin-right: 2px;
 296     margin-bottom: 4px;
 297 }
 298
 299 .vDateField {
 300     min-width: 6.85em;
 301 }
 302
 303 .vTimeField {
 304     min-width: 4.7em;
 305 }
 306
 307 .vURLField {
 308     width: 30em;
 309 }
 310
 311 .vLargeTextField, .vXMLLargeTextField {
 312     width: 48em;
 313 }
 314
 315 .module table .vPositiveSmallIntegerField {
 316     width: 2.2em;
 317 }
 318
 319 .vTextField {
 320     width: 20em;
 321 }
 322
 323 .vIntegerField {
 324     width: 5em;
 325 }
 326
 327 .vBigIntegerField {
 328     width: 10em;
 329 }
 330
 331 .vForeignKeyRawIdAdminField {
 332     width: 5em;
 333 }
 334
 335 /* INLINES */
 336
 337 .inline-group {
 338     padding: 0;
 339     margin: 0 0 30px;
 340 }
 341
 342 .inline-group thead th {
 343     padding: 8px 10px;
 344 }
 345
 346 .inline-group .aligned label {
 347     width: 160px;
 348 }
 349
 350 .inline-related {
 351     position: relative;
 352 }
 353
 354 .inline-related h3 {
 355     margin: 0;
 356     color: #666;
 357     padding: 5px;
 358     font-size: 13px;
 359     background: #f8f8f8;
 360     border-top: 1px solid #eee;
 361     border-bottom: 1px solid #eee;
 362 }
 363
 364 .inline-related h3 span.delete {
 365     float: right;
 366 }
 367
 368 .inline-related h3 span.delete label {
 369     margin-left: 2px;
 370     font-size: 11px;
 371 }
 372
 373 .inline-related fieldset {
 374     margin: 0;
 375     background: #fff;
 376     border: none;
 377     width: 100%;
 378 }
 379
 380 .inline-related fieldset.module h3 {
 381     margin: 0;
 382     padding: 2px 5px 3px 5px;
 383     font-size: 11px;
 384     text-align: left;
 385     font-weight: bold;
 386     background: #bcd;
 387     color: #fff;
 388 }
 389
 390 .inline-group .tabular fieldset.module {
 391     border: none;
 392 }
 393
 394 .inline-related.tabular fieldset.module table {
 395     width: 100%;
 396 }
 397
 398 .last-related fieldset {
 399     border: none;
 400 }
 401
 402 .inline-group .tabular tr.has_original td {
 403     padding-top: 2em;
 404 }
 405
 406 .inline-group .tabular tr td.original {
 407     padding: 2px 0 0 0;
 408     width: 0;
 409     _position: relative;
 410 }
 411
 412 .inline-group .tabular th.original {
 413     width: 0px;
 414     padding: 0;
 415 }
 416
 417 .inline-group .tabular td.original p {
 418     position: absolute;
 419     left: 0;
 420     height: 1.1em;
 421     padding: 2px 9px;
 422     overflow: hidden;
 423     font-size: 9px;
 424     font-weight: bold;
 425     color: #666;
 426     _width: 700px;
 427 }
 428
 429 .inline-group ul.tools {
 430     padding: 0;
 431     margin: 0;
 432     list-style: none;
 433 }
 434
 435 .inline-group ul.tools li {
 436     display: inline;
 437     padding: 0 5px;
 438 }
 439
 440 .inline-group div.add-row,
 441 .inline-group .tabular tr.add-row td {
 442     color: #666;
 443     background: #f8f8f8;
 444     padding: 8px 10px;
 445     border-bottom: 1px solid #eee;
 446 }
 447
 448 .inline-group .tabular tr.add-row td {
 449     padding: 8px 10px;
 450     border-bottom: 1px solid #eee;
 451 }
 452
 453 .inline-group ul.tools a.add,
 454 .inline-group div.add-row a,
 455 .inline-group .tabular tr.add-row td a {
 456     background: url(../img/icon-addlink.svg) 0 1px no-repeat;
 457     padding-left: 16px;
 458     font-size: 12px;
 459 }
 460
 461 .empty-form {
 462     display: none;
 463 }
 464
 465 /* RELATED FIELD ADD ONE / LOOKUP */
 466
 467 .add-another, .related-lookup {
 468     margin-left: 5px;
 469     display: inline-block;
 470     vertical-align: middle;
 471     background-repeat: no-repeat;
 472     background-size: 14px;
 473 }
 474
 475 .add-another {
 476     width: 16px;
 477     height: 16px;
 478     background-image: url(../img/icon-addlink.svg);
 479 }
 480
 481 .related-lookup {
 482     width: 16px;
 483     height: 16px;
 484     background-image: url(../img/search.svg);
 485 }
 486
 487 form .related-widget-wrapper ul {
 488     display: inline-block;
 489     margin-left: 0;
 490     padding-left: 0;
 491 }
 492
 493 .clearable-file-input input {
 494     margin-top: 0;
 495 }