resources/css/structure/form.css

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.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-text{padding-top:3px;font-size:100%;}
 330
 331 .x-form-clear {
 332     clear:both;
 333     height:0;
 334     overflow:hidden;
 335     line-height:0;
 336     font-size:0;
 337 }
 338 .x-form-clear-left {
 339     clear:left;
 340     height:0;
 341     overflow:hidden;
 342     line-height:0;
 343     font-size:0;
 344 }
 345
 346 .ext-ie6 .x-form-check-wrap input, .ext-border-box .x-form-check-wrap input{
 347    margin-top: 3px;
 348 }
 349
 350 .x-form-cb-label {
 351     position: relative;
 352     margin-left:4px;
 353     top: 2px;
 354 }
 355
 356 .ext-ie .x-form-cb-label{
 357     top: 1px;
 358 }
 359
 360 .ext-ie6 .x-form-cb-label, .ext-border-box .x-form-cb-label{
 361     top: 3px;
 362 }
 363
 364 .x-form-display-field{
 365     padding-top: 2px;
 366 }
 367
 368 .ext-gecko .x-form-display-field, .ext-strict .ext-ie7 .x-form-display-field{
 369     padding-top: 1px;
 370 }
 371
 372 .ext-ie .x-form-display-field{
 373     padding-top: 3px;
 374 }
 375
 376 .ext-strict .ext-ie8 .x-form-display-field{
 377     padding-top: 0;
 378 }
 379
 380 .x-form-column {
 381     float:left;
 382     padding:0;
 383     margin:0;
 384     width:48%;
 385     overflow:hidden;
 386     zoom:1;
 387 }
 388
 389 /* buttons */
 390 .x-form .x-form-btns-ct .x-btn{
 391     float:right;
 392     clear:none;
 393 }
 394
 395 .x-form .x-form-btns-ct .x-form-btns td {
 396     border:0;
 397     padding:0;
 398 }
 399
 400 .x-form .x-form-btns-ct .x-form-btns-right table{
 401     float:right;
 402     clear:none;
 403 }
 404
 405 .x-form .x-form-btns-ct .x-form-btns-left table{
 406     float:left;
 407     clear:none;
 408 }
 409
 410 .x-form .x-form-btns-ct .x-form-btns-center{
 411     text-align:center; /*ie*/
 412 }
 413
 414 .x-form .x-form-btns-ct .x-form-btns-center table{
 415     margin:0 auto; /*everyone else*/
 416 }
 417
 418 .x-form .x-form-btns-ct table td.x-form-btn-td{
 419     padding:3px;
 420 }
 421
 422 .x-form .x-form-btns-ct .x-btn-focus .x-btn-left{
 423     background-position:0 -147px;
 424 }
 425
 426 .x-form .x-form-btns-ct .x-btn-focus .x-btn-right{
 427     background-position:0 -168px;
 428 }
 429
 430 .x-form .x-form-btns-ct .x-btn-focus .x-btn-center{
 431     background-position:0 -189px;
 432 }
 433
 434 .x-form .x-form-btns-ct .x-btn-click .x-btn-center{
 435     background-position:0 -126px;
 436 }
 437
 438 .x-form .x-form-btns-ct .x-btn-click  .x-btn-right{
 439     background-position:0 -84px;
 440 }
 441
 442 .x-form .x-form-btns-ct .x-btn-click .x-btn-left{
 443     background-position:0 -63px;
 444 }
 445
 446 .x-form-invalid-icon {
 447     width:16px;
 448     height:18px;
 449     visibility:hidden;
 450     position:absolute;
 451     left:0;
 452     top:0;
 453     display:block;
 454     background:transparent no-repeat 0 2px;
 455 }
 456
 457 /* fieldsets */
 458 .x-fieldset {
 459     border:1px solid;
 460     padding:10px;
 461     margin-bottom:10px;
 462     display:block; /* preserve margins in IE */
 463 }
 464
 465 /* make top of checkbox/tools visible in webkit */
 466 .ext-webkit .x-fieldset-header {
 467     padding-top: 1px;
 468 }
 469
 470 .ext-ie .x-fieldset legend {
 471     margin-bottom:10px;
 472 }
 473
 474 .ext-ie .x-fieldset {
 475     padding-top: 0;
 476     padding-bottom:10px;
 477 }
 478
 479 .x-fieldset legend .x-tool-toggle {
 480     margin-right:3px;
 481     margin-left:0;
 482     float:left !important;
 483 }
 484
 485 .x-fieldset legend input {
 486     margin-right:3px;
 487     float:left !important;
 488     height:13px;
 489     width:13px;
 490 }
 491
 492 fieldset.x-panel-collapsed {
 493     padding-bottom:0 !important;
 494     border-width: 1px 1px 0 1px !important;
 495     border-left-color: transparent;
 496     border-right-color: transparent;
 497 }
 498
 499 .ext-ie6 fieldset.x-panel-collapsed{
 500     padding-bottom:0 !important;
 501     border-width: 1px 0 0 0 !important;
 502     margin-left: 1px;
 503     margin-right: 1px;
 504 }
 505
 506 fieldset.x-panel-collapsed .x-fieldset-bwrap {
 507     visibility:hidden;
 508     position:absolute;
 509     left:-1000px;
 510     top:-1000px;
 511 }
 512
 513 .ext-ie .x-fieldset-bwrap {
 514     zoom:1;
 515 }
 516
 517 .x-fieldset-noborder {
 518     border:0px none transparent;
 519 }
 520
 521 .x-fieldset-noborder legend {
 522     margin-left:-3px;
 523 }
 524
 525 /* IE legend positioning bug */
 526 .ext-ie .x-fieldset-noborder legend {
 527     position: relative;
 528     margin-bottom:23px;
 529 }
 530 .ext-ie .x-fieldset-noborder legend span {
 531     position: absolute;
 532     left:16px;
 533 }
 534
 535 .ext-gecko .x-window-body .x-form-item {
 536     -moz-outline: none;
 537     outline: none;
 538     overflow: auto;
 539 }
 540
 541 .ext-mac.ext-gecko .x-window-body .x-form-item {
 542     overflow:hidden;
 543 }
 544
 545 .ext-gecko .x-form-item {
 546     -moz-outline: none;
 547     outline: none;
 548 }
 549
 550 .x-hide-label label.x-form-item-label {
 551      display:none;
 552 }
 553
 554 .x-hide-label .x-form-element {
 555      padding-left: 0 !important;
 556 }
 557
 558 .x-form-label-top .x-hide-label label.x-form-item-label{
 559     display: none;
 560 }
 561
 562 .x-fieldset {
 563     overflow:hidden;
 564 }
 565
 566 .x-fieldset-bwrap {
 567     overflow:hidden;
 568     zoom:1;
 569 }
 570
 571 .x-fieldset-body {
 572     overflow:hidden;
 573 }