/source/Plug-in/ext/resources/css/form.css

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