resources/css/form.css

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /* all fields */\r
  10 .x-form-field{\r
  11     margin: 0 0 0 0;\r
  12     font:normal 12px tahoma, arial, helvetica, sans-serif;\r
  13 }\r
  14 \r
  15 /* ---- text fields ---- */\r
  16 .x-form-text, textarea.x-form-field{\r
  17     padding:1px 3px;\r
  18     background:#fff url(../images/default/form/text-bg.gif) repeat-x 0 0;\r
  19     border:1px solid #B5B8C8;\r
  20 }\r
  21 textarea.x-form-field {\r
  22     padding:2px 3px;\r
  23 }\r
  24 .x-form-text {\r
  25     height:22px;\r
  26     line-height:18px;\r
  27     vertical-align:middle;\r
  28 }\r
  29 .ext-ie .x-form-text {\r
  30     margin:-1px 0; /* ie bogus margin bug */\r
  31     height:22px; /* ie quirks */\r
  32     line-height:18px;\r
  33 }\r
  34 .ext-ie textarea.x-form-field {\r
  35     margin:-1px 0; /* ie bogus margin bug */\r
  36 }\r
  37 .ext-strict .x-form-text {\r
  38     height:18px;\r
  39 }\r
  40 .ext-safari .x-form-text {\r
  41     height:20px; /* safari always same size */\r
  42     padding:0 3px; /* remove extra top/bottom padding */\r
  43 }\r
  44 .ext-safari.ext-mac textarea.x-form-field {\r
  45     margin-bottom:-2px; /* another bogus margin bug, safari/mac only */\r
  46 }\r
  47 .ext-gecko .x-form-text {\r
  48     padding-top:2px; /* FF won't center the text vertically */\r
  49     padding-bottom:0;\r
  50 }\r
  51 textarea {\r
  52     resize: none;  /* Disable browser resizable textarea */\r
  53 }\r
  54 \r
  55 /* select boxes */\r
  56 \r
  57 .x-form-select-one {\r
  58     height:20px;\r
  59     line-height:18px;\r
  60     vertical-align:middle;\r
  61     background-color:#fff; /* opera */\r
  62     border: 1px solid #B5B8C8;\r
  63 }\r
  64 \r
  65 /* multi select boxes */\r
  66 \r
  67 /* --- TODO --- */\r
  68 \r
  69 /* checkboxes / radios */\r
  70 .x-form-check-group, .x-form-radio-group {\r
  71     margin-bottom: 0;\r
  72 }\r
  73 .x-form-check-group .x-form-invalid .x-panel-body,\r
  74 .x-form-radio-group .x-form-invalid .x-panel-body {\r
  75     background-color: transparent;\r
  76 }\r
  77 .x-form-check-wrap, .x-form-radio-wrap {\r
  78     padding: 3px 0 0 0;\r
  79     line-height:18px;\r
  80 }\r
  81 .x-form-check-group .x-form-check-wrap, \r
  82 .x-form-radio-group .x-form-radio-wrap {\r
  83     height: 18px;\r
  84 }\r
  85 .ext-ie .x-form-check-group .x-form-check-wrap, \r
  86 .ext-ie .x-form-radio-group .x-form-radio-wrap {\r
  87     height: 21px;\r
  88 }\r
  89 .ext-ie .x-form-check-wrap input,\r
  90 .ext-ie .x-form-radio-wrap input {\r
  91     width:15px;\r
  92     height:15px;\r
  93 }\r
  94 .x-form-check, .x-form-radio {\r
  95         height: 13px;\r
  96         width: 13px;\r
  97     vertical-align: bottom;\r
  98 } \r
  99 .x-form-radio {\r
 100     margin-bottom: 3px;\r
 101 }\r
 102 .x-form-check, .ext-ie .x-form-radio {\r
 103     margin-bottom: 2px;\r
 104 }\r
 105 .x-form-check-wrap-inner, .x-form-radio-wrap-inner {\r
 106     display: inline;\r
 107     padding: 3px 0 0 0;\r
 108 }\r
 109 .x-form-check {\r
 110         background: url('../images/default/form/checkbox.gif') no-repeat 0 0;\r
 111 }\r
 112 .x-form-radio {\r
 113         background: url('../images/default/form/radio.gif') no-repeat 0 0;\r
 114 }\r
 115 .x-form-check-focus .x-form-check, .x-form-check-over .x-form-check,\r
 116 .x-form-check-focus .x-form-radio, .x-form-check-over .x-form-radio {\r
 117         background-position: -13px 0;\r
 118 }\r
 119 .x-form-check-down .x-form-check, \r
 120 .x-form-check-down .x-form-radio {\r
 121         background-position:-26px 0;\r
 122 }\r
 123 .x-form-check-checked .x-form-check-focus .x-form-check, \r
 124 .x-form-check-checked .x-form-check-over .x-form-check {\r
 125         background-position:-13px -13px;\r
 126 }\r
 127 .x-form-check-checked .x-form-check-down .x-form-check {\r
 128         background-position:-26px -13px;\r
 129 }\r
 130 .x-form-check-checked .x-form-check, \r
 131 .x-form-check-checked .x-form-radio {\r
 132         background-position:0 -13px;\r
 133 }\r
 134 .x-form-check-group-label {\r
 135     border-bottom: 1px solid #99BBE8;\r
 136     color: #15428B;\r
 137     margin-bottom: 5px;\r
 138     padding-left: 3px !important;\r
 139     float: none !important;\r
 140 }\r
 141 \r
 142 /* wrapped fields and triggers */\r
 143 \r
 144 .x-form-field-wrap {\r
 145     position:relative;\r
 146     zoom:1;\r
 147     white-space: nowrap;\r
 148 }\r
 149 .x-form-field-wrap .x-form-trigger{\r
 150     width:17px;\r
 151     height:21px;\r
 152     border:0;\r
 153     background:transparent url(../images/default/form/trigger.gif) no-repeat 0 0;\r
 154     cursor:pointer;\r
 155     border-bottom: 1px solid #B5B8C8;\r
 156     position:absolute;\r
 157     top:0;\r
 158 }\r
 159 .ext-safari .x-form-field-wrap .x-form-trigger{\r
 160     height:21px; /* safari doesn't allow height adjustments to the fields, so adjust trigger */\r
 161 }\r
 162 \r
 163 .x-form-field-wrap .x-form-date-trigger{\r
 164     background-image: url(../images/default/form/date-trigger.gif);\r
 165     cursor:pointer;\r
 166 }\r
 167 .x-form-field-wrap .x-form-clear-trigger{\r
 168     background-image: url(../images/default/form/clear-trigger.gif);\r
 169     cursor:pointer;\r
 170 }\r
 171 .x-form-field-wrap .x-form-search-trigger{\r
 172     background-image: url(../images/default/form/search-trigger.gif);\r
 173     cursor:pointer;\r
 174 }\r
 175 .ext-safari .x-form-field-wrap .x-form-trigger{\r
 176     right:0;\r
 177 }\r
 178 .x-form-field-wrap .x-form-twin-triggers{\r
 179 \r
 180 }\r
 181 .x-form-field-wrap .x-form-twin-triggers .x-form-trigger{\r
 182     position:static;\r
 183     top:auto;\r
 184     vertical-align:top;\r
 185 }\r
 186 \r
 187 \r
 188 .x-form-field-wrap .x-form-trigger-over{\r
 189     background-position:-17px 0;\r
 190 }\r
 191 .x-form-field-wrap .x-form-trigger-click{\r
 192     background-position:-34px 0;\r
 193 }\r
 194 \r
 195 .x-trigger-wrap-focus .x-form-trigger{\r
 196     background-position:-51px 0;\r
 197 }\r
 198 .x-trigger-wrap-focus .x-form-trigger-over{\r
 199     background-position:-68px 0;\r
 200 }\r
 201 .x-trigger-wrap-focus .x-form-trigger-click{\r
 202     background-position:-85px 0;\r
 203 }\r
 204 .x-trigger-wrap-focus .x-form-trigger{\r
 205     border-bottom: 1px solid #7eadd9;\r
 206 }\r
 207 \r
 208 .x-item-disabled .x-form-trigger-over{\r
 209     background-position:0 0 !important;\r
 210     border-bottom: 1px solid #B5B8C8;\r
 211 }\r
 212 .x-item-disabled .x-form-trigger-click{\r
 213     background-position:0 0 !important;\r
 214     border-bottom: 1px solid #B5B8C8;\r
 215 }\r
 216 \r
 217 /* field focus style */\r
 218 .x-form-focus, textarea.x-form-focus{\r
 219         border: 1px solid #7eadd9;\r
 220 }\r
 221 \r
 222 /* invalid fields */\r
 223 .x-form-invalid, textarea.x-form-invalid{\r
 224         background:#fff url(../images/default/grid/invalid_line.gif) repeat-x bottom;\r
 225         border: 1px solid #dd7870;\r
 226 }\r
 227 .ext-safari .x-form-invalid{\r
 228         background-color:#ffeeee;\r
 229         border: 1px solid #ff7870;\r
 230 }\r
 231 \r
 232 /* editors */\r
 233 .x-editor {\r
 234     visibility:hidden;\r
 235     padding:0;\r
 236     margin:0;\r
 237 }\r
 238 .x-editor .x-form-check-wrap,\r
 239 .x-editor .x-form-radio-wrap {\r
 240     background:#fff;\r
 241     padding:3px;\r
 242 }\r
 243 .x-editor .x-form-checkbox {\r
 244     height:13px;\r
 245 }\r
 246 /* If you override the default field font above, you would need to change this font as well */\r
 247 .x-form-grow-sizer {\r
 248         font:normal 12px tahoma, arial, helvetica, sans-serif;\r
 249     left: -10000px;\r
 250         padding: 8px 3px;\r
 251     position: absolute;\r
 252     visibility:hidden;\r
 253     top: -10000px;\r
 254         white-space: pre-wrap;\r
 255     white-space: -moz-pre-wrap;\r
 256     white-space: -pre-wrap;\r
 257     white-space: -o-pre-wrap;\r
 258     word-wrap: break-word;\r
 259     zoom:1;\r
 260 }\r
 261 .x-form-grow-sizer p {\r
 262     margin:0 !important;\r
 263     border:0 none !important;\r
 264     padding:0 !important;\r
 265 }\r
 266 /* Form Items CSS */\r
 267 \r
 268 .x-form-item {\r
 269     font:normal 12px tahoma, arial, helvetica, sans-serif;\r
 270     display:block;\r
 271     margin-bottom:4px;\r
 272     zoom:1;\r
 273 }\r
 274 \r
 275 .x-form-item label {\r
 276     display:block;\r
 277     float:left;\r
 278     width:100px;\r
 279     padding:3px;\r
 280     padding-left:0;\r
 281     clear:left;\r
 282     z-index:2;\r
 283     position:relative;\r
 284 }\r
 285 \r
 286 .x-form-element {\r
 287     padding-left:105px;\r
 288     position:relative;\r
 289 }\r
 290 \r
 291 .x-form-invalid-msg {\r
 292     color:#ee0000;\r
 293     padding:2px;\r
 294     padding-left:18px;\r
 295     font:normal 11px tahoma, arial, helvetica, sans-serif;\r
 296     background: transparent url(../images/default/shared/warning.gif) no-repeat 0 2px;\r
 297     line-height:16px;\r
 298     width:200px;\r
 299 }\r
 300 \r
 301 .x-form-label-left label {\r
 302    text-align:left;\r
 303 }\r
 304 .x-form-label-right label {\r
 305    text-align:right;\r
 306 }\r
 307 \r
 308 .x-form-label-top .x-form-item label {\r
 309     width:auto;\r
 310     float:none;\r
 311     clear:none;\r
 312     display:inline;\r
 313     margin-bottom:4px;\r
 314     position:static;\r
 315 }\r
 316 \r
 317 .x-form-label-top .x-form-element {\r
 318     padding-left:0;\r
 319     padding-top:4px;\r
 320 }\r
 321 \r
 322 .x-form-label-top .x-form-item {\r
 323     padding-bottom:4px;\r
 324 }\r
 325 \r
 326 .x-form-empty-field {\r
 327     color:gray;\r
 328 }\r
 329 /* Editor small font for grid, toolbar and tree */\r
 330 .x-small-editor .x-form-field {\r
 331     font:normal 11px arial, tahoma, helvetica, sans-serif;\r
 332 }\r
 333 .x-small-editor .x-form-text {\r
 334     height:20px;\r
 335     line-height:16px;\r
 336     vertical-align:middle;\r
 337 }\r
 338 .ext-ie .x-small-editor .x-form-text {\r
 339     margin-top:-1px !important; /* ie bogus margin bug */\r
 340     margin-bottom:-1px !important;\r
 341     height:20px !important; /* ie quirks */\r
 342     line-height:16px !important;\r
 343 }\r
 344 .ext-strict .x-small-editor .x-form-text {\r
 345     height:16px !important;\r
 346 }\r
 347 \r
 348 .ext-safari .x-small-editor .x-form-field {\r
 349     /* safari text field will not size so needs bigger font */\r
 350     font:normal 12px arial, tahoma, helvetica, sans-serif;\r
 351 }\r
 352 .ext-ie .x-small-editor .x-form-text {\r
 353     height:20px;\r
 354     line-height:16px;\r
 355 }\r
 356 .ext-border-box .x-small-editor .x-form-text {\r
 357     height:20px;\r
 358 }\r
 359 \r
 360 .x-small-editor .x-form-select-one {\r
 361     height:20px;\r
 362     line-height:16px;\r
 363     vertical-align:middle;\r
 364 }\r
 365 .x-small-editor .x-form-num-field {\r
 366     text-align:right;\r
 367 }\r
 368 .x-small-editor .x-form-field-wrap .x-form-trigger{\r
 369     height:19px;\r
 370 }\r
 371 \r
 372 \r
 373 .x-form-clear {\r
 374     clear:both;\r
 375     height:0;\r
 376     overflow:hidden;\r
 377     line-height:0;\r
 378     font-size:0;\r
 379 }\r
 380 .x-form-clear-left {\r
 381     clear:left;\r
 382     height:0;\r
 383     overflow:hidden;\r
 384     line-height:0;\r
 385     font-size:0;\r
 386 }\r
 387 \r
 388 .x-form-cb-label {\r
 389     width:auto !important;\r
 390     float:none !important;\r
 391     clear:none !important;\r
 392     display:inline !important;\r
 393     margin-left:4px;\r
 394 }\r
 395 \r
 396 .x-form-column {\r
 397     float:left;\r
 398     padding:0;\r
 399     margin:0;\r
 400     width:48%;\r
 401     overflow:hidden;\r
 402     zoom:1;\r
 403 }\r
 404 \r
 405 /* buttons */\r
 406 .x-form .x-form-btns-ct .x-btn{\r
 407         float:right;\r
 408         clear:none;\r
 409 }\r
 410 .x-form .x-form-btns-ct .x-form-btns td {\r
 411         border:0;\r
 412         padding:0;\r
 413 }\r
 414 .x-form .x-form-btns-ct .x-form-btns-right table{\r
 415         float:right;\r
 416         clear:none;\r
 417 }\r
 418 .x-form .x-form-btns-ct .x-form-btns-left table{\r
 419         float:left;\r
 420         clear:none;\r
 421 }\r
 422 .x-form .x-form-btns-ct .x-form-btns-center{\r
 423         text-align:center; /*ie*/\r
 424 }\r
 425 .x-form .x-form-btns-ct .x-form-btns-center table{\r
 426         margin:0 auto; /*everyone else*/\r
 427 }\r
 428 .x-form .x-form-btns-ct table td.x-form-btn-td{\r
 429         padding:3px;\r
 430 }\r
 431 \r
 432 .x-form .x-form-btns-ct .x-btn-focus .x-btn-left{\r
 433         background-position:0 -147px;\r
 434 }\r
 435 .x-form .x-form-btns-ct .x-btn-focus .x-btn-right{\r
 436         background-position:0 -168px;\r
 437 }\r
 438 .x-form .x-form-btns-ct .x-btn-focus .x-btn-center{\r
 439         background-position:0 -189px;\r
 440 }\r
 441 \r
 442 .x-form .x-form-btns-ct .x-btn-click .x-btn-center{\r
 443         background-position:0 -126px;\r
 444 }\r
 445 .x-form .x-form-btns-ct .x-btn-click  .x-btn-right{\r
 446         background-position:0 -84px;\r
 447 }\r
 448 .x-form .x-form-btns-ct .x-btn-click .x-btn-left{\r
 449         background-position:0 -63px;\r
 450 }\r
 451 .x-form-invalid-icon {\r
 452     width:16px;\r
 453     height:18px;\r
 454     visibility:hidden;\r
 455     position:absolute;\r
 456     left:0;\r
 457     top:0;\r
 458     display:block;\r
 459     background:transparent url(../images/default/form/exclamation.gif) no-repeat 0 2px;\r
 460 }\r
 461 \r
 462 /* fieldsets */\r
 463 .x-fieldset {\r
 464     border:1px solid #B5B8C8;\r
 465     padding:10px;\r
 466     margin-bottom:10px;\r
 467     display:block; /* preserve margins in IE */\r
 468 }\r
 469 .x-fieldset legend {\r
 470     font:bold 11px tahoma, arial, helvetica, sans-serif;\r
 471     color:#15428b;\r
 472 }\r
 473 .ext-ie .x-fieldset legend {\r
 474     margin-bottom:10px;\r
 475 }\r
 476 .ext-ie .x-fieldset {\r
 477     padding-top: 0;\r
 478     padding-bottom:10px;\r
 479 }\r
 480 .x-fieldset legend .x-tool-toggle {\r
 481     margin-right:3px;\r
 482     margin-left:0;\r
 483     float:left !important;\r
 484 }\r
 485 .x-fieldset legend input {\r
 486     margin-right:3px;\r
 487     float:left !important;\r
 488     height:13px;\r
 489     width:13px;\r
 490 }\r
 491 fieldset.x-panel-collapsed {\r
 492     padding-bottom:0 !important;\r
 493     border-width: 1px 1px 0 1px !important;\r
 494     border-left-color: transparent;\r
 495     border-right-color: transparent;\r
 496 }        \r
 497 .ext-ie6 fieldset.x-panel-collapsed{\r
 498     padding-bottom:0 !important;\r
 499     border-width: 1px 0 0 0 !important;\r
 500     margin-left: 1px;\r
 501     margin-right: 1px;\r
 502 }\r
 503 fieldset.x-panel-collapsed .x-fieldset-bwrap {\r
 504     visibility:hidden;\r
 505     position:absolute;\r
 506     left:-1000px;\r
 507     top:-1000px;\r
 508 }\r
 509 .ext-ie .x-fieldset-bwrap {\r
 510     zoom:1;\r
 511 }\r
 512 .ext-ie td .x-form-text {\r
 513     position:relative;\r
 514     top:-1px;\r
 515 }\r
 516 .x-fieldset-noborder {\r
 517     border:0px none transparent;\r
 518 }\r
 519 .x-fieldset-noborder legend {\r
 520     margin-left:-3px;\r
 521 }\r
 522 /* IE legend positioing bug */\r
 523 .ext-ie .x-fieldset-noborder legend {\r
 524     position: relative;\r
 525     margin-bottom:23px;\r
 526 }\r
 527 .ext-ie .x-fieldset-noborder legend span {\r
 528     position: absolute;\r
 529     left:16px;\r
 530 }\r
 531         \r
 532 .ext-gecko .x-window-body .x-form-item {\r
 533     -moz-outline: none;\r
 534     overflow: auto;\r
 535 }\r
 536 \r
 537 .ext-gecko .x-form-item {\r
 538     -moz-outline: none;\r
 539 }\r
 540 \r
 541 .x-hide-label label.x-form-item-label {\r
 542      display:none;\r
 543 }\r
 544 .x-hide-label .x-form-element {\r
 545      padding-left: 0 !important;\r
 546 }\r
 547 \r
 548 .x-fieldset {\r
 549     overflow:hidden;\r
 550 }\r
 551 \r
 552 .x-fieldset-bwrap {\r
 553     overflow:hidden;\r
 554     zoom:1;\r
 555 }\r
 556 \r
 557 .x-fieldset-body {\r
 558     overflow:hidden;\r
 559 }