resources/css/structure/form.css

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