examples/ext/resources/css/form.css

   1 /*\r
   2  * Ext JS Library 1.1.1\r
   3  * Copyright(c) 2006-2007, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://www.extjs.com/license\r
   7  */\r
   8 \r
   9 /* all fields */
  10 .x-form-field{
  11     margin: 0 0 0 0;
  12     font:normal 12px tahoma, arial, helvetica, sans-serif;
  13 }
  14
  15 /* ---- text fields ---- */
  16 .x-form-text, textarea.x-form-field{
  17     padding: 1px 3px;
  18     background:#fff url(../images/default/form/text-bg.gif) repeat-x 0 0;
  19     border: 1px solid #B5B8C8;
  20 }
  21 .x-form-text {
  22     height:22px;
  23     line-height:18px;
  24     vertical-align:middle;
  25 }
  26 .ext-ie .x-form-text {
  27     margin-top:-1px; /* ie bogus margin bug */
  28     margin-bottom:-1px;
  29     height:22px; /* ie quirks */
  30     line-height:18px;
  31 }
  32 .ext-strict .x-form-text {
  33     height:18px;
  34 }
  35 .ext-safari .x-form-text {
  36     height:20px; /* safari always same size */
  37 }
  38 .ext-gecko .x-form-text {
  39     padding-top:2px; /* FF won't center the text vertically */
  40     padding-bottom:0;
  41 }
  42 /* select boxes */
  43
  44 .x-form-select-one {
  45     height:20px;
  46     line-height:18px;
  47     vertical-align:middle;
  48     background-color:#fff; /* opera */
  49     border: 1px solid #B5B8C8;
  50 }
  51
  52 /* multi select boxes */
  53
  54 /* --- TODO --- */
  55
  56 /* checkboxes */
  57
  58 /* --- TODO --- */
  59
  60 /* radios */
  61
  62 /* --- TODO --- */
  63
  64
  65 /* wrapped fields and triggers */
  66
  67 .x-form-field-wrap {
  68     position:relative;
  69     zoom:1;
  70     white-space: nowrap;
  71 }
  72
  73 .x-editor .x-form-check-wrap {
  74     background:#fff;
  75 }
  76 .x-form-field-wrap .x-form-trigger{
  77     width:17px;
  78     height:21px;
  79     border:0;
  80     background:transparent url(../images/default/form/trigger.gif) no-repeat 0 0;
  81     cursor:pointer;
  82     border-bottom: 1px solid #B5B8C8;
  83     position:absolute;
  84     top:0;
  85 }
  86 .ext-safari .x-form-field-wrap .x-form-trigger{
  87     height:19px; /* safari doesn't allow height adjustments to the fields, so adjust trigger */
  88 }
  89
  90 .x-form-field-wrap .x-form-date-trigger{
  91     background-image: url(../images/default/form/date-trigger.gif);
  92     cursor:pointer;
  93 }
  94 .x-form-field-wrap .x-form-clear-trigger{
  95     background-image: url(../images/default/form/clear-trigger.gif);
  96     cursor:pointer;
  97 }
  98 .x-form-field-wrap .x-form-search-trigger{
  99     background-image: url(../images/default/form/search-trigger.gif);
 100     cursor:pointer;
 101 }
 102 .ext-safari .x-form-field-wrap .x-form-trigger{
 103     right:0;
 104 }
 105 .x-form-field-wrap .x-form-twin-triggers{
 106
 107 }
 108 .x-form-field-wrap .x-form-twin-triggers .x-form-trigger{
 109     position:static;
 110     top:auto;
 111     vertical-align:top;
 112 }
 113
 114
 115 .x-form-field-wrap .x-form-trigger-over{
 116     background-position:-17px 0;
 117 }
 118 .x-form-field-wrap .x-form-trigger-click{
 119     background-position:-34px 0;
 120 }
 121
 122 .x-trigger-wrap-focus .x-form-trigger{
 123     background-position:-51px 0;
 124 }
 125 .x-trigger-wrap-focus .x-form-trigger-over{
 126     background-position:-68px 0;
 127 }
 128 .x-trigger-wrap-focus .x-form-trigger-click{
 129     background-position:-85px 0;
 130 }
 131 .x-trigger-wrap-focus .x-form-trigger{
 132     border-bottom: 1px solid #7eadd9;
 133 }
 134
 135 .x-item-disabled .x-form-trigger-over{
 136     background-position:0 0 !important;
 137     border-bottom: 1px solid #B5B8C8;
 138 }
 139 .x-item-disabled .x-form-trigger-click{
 140     background-position:0 0 !important;
 141     border-bottom: 1px solid #B5B8C8;
 142 }
 143
 144 /* field focus style */
 145 .x-form-focus, textarea.x-form-focus{
 146         border: 1px solid #7eadd9;
 147 }
 148
 149 /* invalid fields */
 150 .x-form-invalid, textarea.x-form-invalid{
 151         background:#fff url(../images/default/grid/invalid_line.gif) repeat-x bottom;
 152         border: 1px solid #dd7870;
 153 }
 154 .ext-safari .x-form-invalid{
 155         background-color:#ffeeee;
 156         border: 1px solid #ff7870;
 157 }
 158
 159 /* editors */
 160
 161 .x-editor {
 162     visibility:hidden;
 163     padding:0;
 164     margin:0;
 165 }
 166 .x-form-check-wrap {
 167     line-height:18px;
 168 }
 169 .ext-ie .x-form-check-wrap input {
 170     width:15px;
 171     height:15px;
 172 }
 173 .x-editor .x-form-check-wrap {
 174     padding:3px;
 175 }
 176 .x-editor .x-form-checkbox {
 177     height:13px;
 178     border: 0 none;
 179 }
 180 /* If you override the default field font above, you would need to change this font as well */
 181 .x-form-grow-sizer {
 182         font:normal 12px tahoma, arial, helvetica, sans-serif;
 183     left: -10000px;
 184         padding: 8px 3px;
 185     position: absolute;
 186     visibility:hidden;
 187     top: -10000px;
 188         white-space: pre-wrap;
 189     white-space: -moz-pre-wrap;
 190     white-space: -pre-wrap;
 191     white-space: -o-pre-wrap;
 192     word-wrap: break-word;
 193     zoom:1;
 194 }
 195 .x-form-grow-sizer p {
 196     margin:0 !important;
 197     border:0 none !important;
 198     padding:0 !important;
 199 }
 200 /* Form Items CSS */
 201
 202 .x-form-item {
 203     font:normal 12px tahoma, arial, helvetica, sans-serif;
 204     display:block;
 205     margin-bottom:4px;
 206 }
 207
 208 .x-form-item label {
 209     display:block;
 210     float:left;
 211     width:100px;
 212     padding:3px;
 213     padding-left:0;
 214     clear:left;
 215     z-index:2;
 216     position:relative;
 217 }
 218
 219 .x-form-element {
 220     padding-left:105px;
 221     position:relative;
 222 }
 223
 224 .x-form-invalid-msg {
 225     color:#ee0000;
 226     padding:2px;
 227     padding-left:18px;
 228     font:normal 11px tahoma, arial, helvetica, sans-serif;
 229     background: transparent url(../images/default/shared/warning.gif) no-repeat 0 2px;
 230     line-height:16px;
 231     width:200px;
 232 }
 233
 234 .x-form-label-right label {
 235    text-align:right;
 236 }
 237
 238 .x-form-label-top .x-form-item label {
 239     width:auto;
 240     float:none;
 241     clear:none;
 242     display:inline;
 243     margin-bottom:4px;
 244     position:static;
 245 }
 246 .x-form-label-top .x-form-element {
 247     padding-left:0;
 248     padding-top:4px;
 249 }
 250 .x-form-label-top .x-form-item {
 251     padding-bottom:4px;
 252 }
 253 .x-form fieldset {
 254     border:1px solid #B5B8C8;
 255     padding:10px 10px 5px 10px;
 256     margin-bottom:10px;
 257 }
 258 .x-form fieldset legend {
 259     font:bold 11px tahoma, arial, helvetica, sans-serif;
 260     color:#15428b;
 261 }
 262 .ext-ie .x-form fieldset legend {
 263     margin-bottom:10px;
 264 }
 265 .ext-ie .x-form fieldset {
 266     padding-top: 0;
 267 }
 268 .x-form-empty-field {
 269     color:gray;
 270 }
 271 /* Editor small font for grid, toolbar and tree */
 272 .x-small-editor .x-form-field {
 273     font:normal 11px arial, tahoma, helvetica, sans-serif;
 274 }
 275 .x-small-editor .x-form-text {
 276     height:20px;
 277     line-height:16px;
 278     vertical-align:middle;
 279 }
 280 .ext-ie .x-small-editor .x-form-text {
 281     margin-top:-1px !important; /* ie bogus margin bug */
 282     margin-bottom:-1px !important;
 283     height:20px !important; /* ie quirks */
 284     line-height:16px !important;
 285 }
 286 .ext-strict .x-small-editor .x-form-text {
 287     height:16px !important;
 288 }
 289 .ext-safari .x-small-editor .x-form-field {
 290     /* safari text field will not size so needs bigger font */
 291     font:normal 12px arial, tahoma, helvetica, sans-serif;
 292 }
 293 .ext-ie .x-small-editor .x-form-text {
 294     height:20px;
 295     line-height:16px;
 296 }
 297 .ext-border-box .x-small-editor .x-form-text {
 298     height:20px;
 299 }
 300
 301 .x-small-editor .x-form-select-one {
 302     height:20px;
 303     line-height:16px;
 304     vertical-align:middle;
 305 }
 306 .x-small-editor .x-form-num-field {
 307     text-align:right;
 308 }
 309 .x-small-editor .x-form-field-wrap .x-form-trigger{
 310     height:19px;
 311 }
 312
 313
 314 .x-form-clear {
 315     clear:both;
 316     height:0;
 317     overflow:hidden;
 318     line-height:0;
 319     font-size:0;
 320 }
 321 .x-form-clear-left {
 322     clear:left;
 323     height:0;
 324     overflow:hidden;
 325     line-height:0;
 326     font-size:0;
 327 }
 328
 329 .x-form-cb-label {
 330     width:'auto' !important;
 331     float:none !important;
 332     clear:none !important;
 333     display:inline !important;
 334     margin-left:4px;
 335 }
 336
 337 .x-form-column {
 338     float:left;
 339     padding:0;
 340     margin:0;
 341     width:48%;
 342     overflow:hidden;
 343     zoom:1;
 344 }
 345
 346 /* buttons */
 347 .x-form .x-form-btns-ct .x-btn{
 348         float:right;
 349         clear:none;
 350 }
 351 .x-form .x-form-btns-ct .x-form-btns td {
 352         border:0;
 353         padding:0;
 354 }
 355 .x-form .x-form-btns-ct .x-form-btns-right table{
 356         float:right;
 357         clear:none;
 358 }
 359 .x-form .x-form-btns-ct .x-form-btns-left table{
 360         float:left;
 361         clear:none;
 362 }
 363 .x-form .x-form-btns-ct .x-form-btns-center{
 364         text-align:center; /*ie*/
 365 }
 366 .x-form .x-form-btns-ct .x-form-btns-center table{
 367         margin:0 auto; /*everyone else*/
 368 }
 369 .x-form .x-form-btns-ct table td.x-form-btn-td{
 370         padding:3px;
 371 }
 372
 373 .x-form .x-form-btns-ct .x-btn-focus .x-btn-left{
 374         background-position:0 -147px;
 375 }
 376 .x-form .x-form-btns-ct .x-btn-focus .x-btn-right{
 377         background-position:0 -168px;
 378 }
 379 .x-form .x-form-btns-ct .x-btn-focus .x-btn-center{
 380         background-position:0 -189px;
 381 }
 382
 383 .x-form .x-form-btns-ct .x-btn-click .x-btn-center{
 384         background-position:0 -126px;
 385 }
 386 .x-form .x-form-btns-ct .x-btn-click  .x-btn-right{
 387         background-position:0 -84px;
 388 }
 389 .x-form .x-form-btns-ct .x-btn-click .x-btn-left{
 390         background-position:0 -63px;
 391 }
 392 .x-form-invalid-icon {
 393     width:16px;
 394     height:18px;
 395     visibility:hidden;
 396     position:absolute;
 397     left:0;
 398     top:0;
 399     display:block;
 400     background:transparent url(../images/default/form/exclamation.gif) no-repeat 0 2px;
 401 }
 402
 403
 404 .ext-ie td .x-form-text {
 405     position:relative;
 406     top:-1px;
 407 }