resources/css/structure/form.css

   1 /*!
   2  * Ext JS Library 3.2.1
   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 .x-form-inner-invalid, textarea.x-form-inner-invalid{
 194     background:repeat-x bottom;
 195 }
 196
 197 /* editors */
 198 .x-editor {
 199     visibility:hidden;
 200     padding:0;
 201     margin:0;
 202 }
 203
 204 .x-form-grow-sizer {
 205     left: -10000px;
 206     padding: 8px 3px;
 207     position: absolute;
 208     visibility:hidden;
 209     top: -10000px;
 210     white-space: pre-wrap;
 211     white-space: -moz-pre-wrap;
 212     white-space: -pre-wrap;
 213     white-space: -o-pre-wrap;
 214     word-wrap: break-word;
 215     zoom:1;
 216 }
 217
 218 .x-form-grow-sizer p {
 219     margin:0 !important;
 220     border:0 none !important;
 221     padding:0 !important;
 222 }
 223
 224 /* Form Items CSS */
 225
 226 .x-form-item {
 227     display:block;
 228     margin-bottom:4px;
 229     zoom:1;
 230 }
 231
 232 .x-form-item label.x-form-item-label {
 233     display:block;
 234     float:left;
 235     width:100px;
 236     padding:3px;
 237     padding-left:0;
 238     clear:left;
 239     z-index:2;
 240     position:relative;
 241 }
 242
 243 .x-form-element {
 244     padding-left:105px;
 245     position:relative;
 246 }
 247
 248 .x-form-invalid-msg {
 249     padding:2px;
 250     padding-left:18px;
 251     background: transparent no-repeat 0 2px;
 252     line-height:16px;
 253     width:200px;
 254 }
 255
 256 .x-form-label-left label.x-form-item-label {
 257    text-align:left;
 258 }
 259
 260 .x-form-label-right label.x-form-item-label {
 261    text-align:right;
 262 }
 263
 264 .x-form-label-top .x-form-item label.x-form-item-label {
 265     width:auto;
 266     float:none;
 267     clear:none;
 268     display:inline;
 269     margin-bottom:4px;
 270     position:static;
 271 }
 272
 273 .x-form-label-top .x-form-element {
 274     padding-left:0;
 275     padding-top:4px;
 276 }
 277
 278 .x-form-label-top .x-form-item {
 279     padding-bottom:4px;
 280 }
 281
 282 /* Editor small font for grid, toolbar and tree */
 283 .x-small-editor .x-form-text {
 284     height:20px;
 285     line-height:16px;
 286     vertical-align:middle;
 287 }
 288
 289 .ext-ie6 .x-small-editor .x-form-text, .ext-ie7 .x-small-editor .x-form-text {
 290     margin-top:-1px !important; /* ie bogus margin bug */
 291     margin-bottom:-1px !important;
 292     height:20px !important; /* ie quirks */
 293     line-height:16px !important;
 294 }
 295
 296 .ext-strict .x-small-editor .x-form-text {
 297     height:16px !important;
 298 }
 299
 300 .ext-ie6 .x-small-editor .x-form-text, .ext-ie7 .x-small-editor .x-form-text {
 301     height:20px;
 302     line-height:16px;
 303 }
 304
 305 .ext-border-box .x-small-editor .x-form-text {
 306     height:20px;
 307 }
 308
 309 .x-small-editor .x-form-select-one {
 310     height:20px;
 311     line-height:16px;
 312     vertical-align:middle;
 313 }
 314
 315 .x-small-editor .x-form-num-field {
 316     text-align:right;
 317 }
 318
 319 .x-small-editor .x-form-field-wrap .x-form-trigger{
 320     height:19px;
 321 }
 322
 323 .ext-webkit .x-small-editor .x-form-text{padding-top:3px;font-size:100%;}
 324
 325 .x-form-clear {
 326     clear:both;
 327     height:0;
 328     overflow:hidden;
 329     line-height:0;
 330     font-size:0;
 331 }
 332 .x-form-clear-left {
 333     clear:left;
 334     height:0;
 335     overflow:hidden;
 336     line-height:0;
 337     font-size:0;
 338 }
 339
 340 .ext-ie6 .x-form-check-wrap input, .ext-border-box .x-form-check-wrap input{
 341    margin-top: 3px;
 342 }
 343
 344 .x-form-cb-label {
 345     position: relative;
 346     margin-left:4px;
 347     top: 2px;
 348 }
 349
 350 .ext-ie .x-form-cb-label{
 351     top: 1px;
 352 }
 353
 354 .ext-ie6 .x-form-cb-label, .ext-border-box .x-form-cb-label{
 355     top: 3px;
 356 }
 357
 358 .x-form-display-field{
 359     padding-top: 2px;
 360 }
 361
 362 .ext-gecko .x-form-display-field, .ext-strict .ext-ie7 .x-form-display-field{
 363     padding-top: 1px;
 364 }
 365
 366 .ext-ie .x-form-display-field{
 367     padding-top: 3px;
 368 }
 369
 370 .ext-strict .ext-ie8 .x-form-display-field{
 371     padding-top: 0;
 372 }
 373
 374 .x-form-column {
 375     float:left;
 376     padding:0;
 377     margin:0;
 378     width:48%;
 379     overflow:hidden;
 380     zoom:1;
 381 }
 382
 383 /* buttons */
 384 .x-form .x-form-btns-ct .x-btn{
 385     float:right;
 386     clear:none;
 387 }
 388
 389 .x-form .x-form-btns-ct .x-form-btns td {
 390     border:0;
 391     padding:0;
 392 }
 393
 394 .x-form .x-form-btns-ct .x-form-btns-right table{
 395     float:right;
 396     clear:none;
 397 }
 398
 399 .x-form .x-form-btns-ct .x-form-btns-left table{
 400     float:left;
 401     clear:none;
 402 }
 403
 404 .x-form .x-form-btns-ct .x-form-btns-center{
 405     text-align:center; /*ie*/
 406 }
 407
 408 .x-form .x-form-btns-ct .x-form-btns-center table{
 409     margin:0 auto; /*everyone else*/
 410 }
 411
 412 .x-form .x-form-btns-ct table td.x-form-btn-td{
 413     padding:3px;
 414 }
 415
 416 .x-form .x-form-btns-ct .x-btn-focus .x-btn-left{
 417     background-position:0 -147px;
 418 }
 419
 420 .x-form .x-form-btns-ct .x-btn-focus .x-btn-right{
 421     background-position:0 -168px;
 422 }
 423
 424 .x-form .x-form-btns-ct .x-btn-focus .x-btn-center{
 425     background-position:0 -189px;
 426 }
 427
 428 .x-form .x-form-btns-ct .x-btn-click .x-btn-center{
 429     background-position:0 -126px;
 430 }
 431
 432 .x-form .x-form-btns-ct .x-btn-click  .x-btn-right{
 433     background-position:0 -84px;
 434 }
 435
 436 .x-form .x-form-btns-ct .x-btn-click .x-btn-left{
 437     background-position:0 -63px;
 438 }
 439
 440 .x-form-invalid-icon {
 441     width:16px;
 442     height:18px;
 443     visibility:hidden;
 444     position:absolute;
 445     left:0;
 446     top:0;
 447     display:block;
 448     background:transparent no-repeat 0 2px;
 449 }
 450
 451 /* fieldsets */
 452 .x-fieldset {
 453     border:1px solid;
 454     padding:10px;
 455     margin-bottom:10px;
 456     display:block; /* preserve margins in IE */
 457 }
 458
 459 /* make top of checkbox/tools visible in webkit */
 460 .ext-webkit .x-fieldset-header {
 461     padding-top: 1px;
 462 }
 463
 464 .ext-ie .x-fieldset legend {
 465     margin-bottom:10px;
 466 }
 467
 468 .ext-ie .x-fieldset {
 469     padding-top: 0;
 470     padding-bottom:10px;
 471 }
 472
 473 .x-fieldset legend .x-tool-toggle {
 474     margin-right:3px;
 475     margin-left:0;
 476     float:left !important;
 477 }
 478
 479 .x-fieldset legend input {
 480     margin-right:3px;
 481     float:left !important;
 482     height:13px;
 483     width:13px;
 484 }
 485
 486 fieldset.x-panel-collapsed {
 487     padding-bottom:0 !important;
 488     border-width: 1px 1px 0 1px !important;
 489     border-left-color: transparent;
 490     border-right-color: transparent;
 491 }
 492
 493 .ext-ie6 fieldset.x-panel-collapsed{
 494     padding-bottom:0 !important;
 495     border-width: 1px 0 0 0 !important;
 496     margin-left: 1px;
 497     margin-right: 1px;
 498 }
 499
 500 fieldset.x-panel-collapsed .x-fieldset-bwrap {
 501     visibility:hidden;
 502     position:absolute;
 503     left:-1000px;
 504     top:-1000px;
 505 }
 506
 507 .ext-ie .x-fieldset-bwrap {
 508     zoom:1;
 509 }
 510
 511 .x-fieldset-noborder {
 512     border:0px none transparent;
 513 }
 514
 515 .x-fieldset-noborder legend {
 516     margin-left:-3px;
 517 }
 518
 519 /* IE legend positioning bug */
 520 .ext-ie .x-fieldset-noborder legend {
 521     position: relative;
 522     margin-bottom:23px;
 523 }
 524 .ext-ie .x-fieldset-noborder legend span {
 525     position: absolute;
 526     left:16px;
 527 }
 528
 529 .ext-gecko .x-window-body .x-form-item {
 530     -moz-outline: none;
 531     outline: none;
 532     overflow: auto;
 533 }
 534
 535 .ext-gecko .x-form-item {
 536     -moz-outline: none;
 537     outline: none;
 538 }
 539
 540 .x-hide-label label.x-form-item-label {
 541      display:none;
 542 }
 543
 544 .x-hide-label .x-form-element {
 545      padding-left: 0 !important;
 546 }
 547
 548 .x-form-label-top .x-hide-label label.x-form-item-label{
 549     display: none;
 550 }
 551
 552 .x-fieldset {
 553     overflow:hidden;
 554 }
 555
 556 .x-fieldset-bwrap {
 557     overflow:hidden;
 558     zoom:1;
 559 }
 560
 561 .x-fieldset-body {
 562     overflow:hidden;
 563 }