resources/css/structure/form.css

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