resources/css/structure/form.css

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