resources/css/structure/form.css

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