git.roojs.org Git - roojs1/blob - css/form.css

   1 /* Form CSS - based on details in form_design.svg  */
   2
   3 .x-form
   4 {
   5     margin: 5px;
   6 }
   7
   8 /* ---------------------- LABELS --------------------- */
   9 .x-form-item label
  10 {
  11     clear:left;
  12     display : block;
  13     float : left;
  14     padding-left: 0px;
  15     padding-right: 3px;
  16     padding-bottom: 3px;
  17     padding-top: 3px;
  18     position: relative;
  19     z-index: 2;
  20 }
  21
  22 .x-form-label-right label
  23 {
  24     text-align: right;
  25 }
  26
  27 .x-form-label-top .x-form-item label
  28 {
  29     clear: none;
  30     float: none;
  31     display: inline;
  32     position: static;
  33     margin-bottom: 2px;
  34     width: auto;
  35 }
  36
  37 /* ---------------------- FONTS --------------------- */
  38 /* --- move to a more generic place... ---*/
  39 .x-form-item,
  40 .x-form-text,
  41 .x-combo-list,
  42 .x-form fieldset legend
  43 {
  44     font: normal 11px tahoma, verdana, helvetica;
  45 }
  46
  47 /* ---------------------- FORM ITEM/ELEMENT/TEXT WRAPPING --------------------- */
  48 .x-form-item {
  49     display : block;
  50     margin-bottom: 4px;
  51 }
  52
  53 .x-form-element {
  54     padding-left : 100px;
  55     position: relative;
  56 }
  57 .x-form-field
  58 {
  59     margin: 0px;
  60
  61 }
  62 .x-form-text
  63 {
  64     height: 18px; /* needs 20px in one of the non-roo projects..? */
  65     line-height: 18px;
  66     vertical-align: middle;
  67     background: url(../images/default/form/bg.gif) repeat-x 0 0;
  68
  69     padding-left: 2px;
  70     padding-right: 2px;
  71     padding-top: 2px;
  72     padding-bottom: 2px;
  73 }
  74 /*
  75 on our demo's this is far to small
  76
  77 */
  78 .x-form-item .x-form-text
  79 {
  80      height: 14px; /* need to determine when this should be larger or smaller.. ? */
  81 }
  82
  83 /* -- border around text elements */
  84 .x-form-text,
  85 .x-form-textarea,
  86 .x-html-editor-wrap
  87 {
  88  border: solid 1px black;
  89 }
  90
  91 .x-form-field-wrap
  92 {
  93     position: relative;
  94     whitespace: nowrap;
  95 }
  96
  97
  98 /* gecko specific fix */
  99
 100 .roo-ie .roo-strict .x-form-text,
 101 .roo-ie .x-form-text
 102 {
 103     padding-top: 0px;
 104     padding-bottom: 0px;
 105     margin-top: -1px;
 106     height: 22px;
 107 }
 108
 109 .roo-ie .x-toolbar .x-form-text
 110 {
 111
 112     padding-top: 0px;
 113     padding-left: 2px;
 114     height: 18px !important;
 115 }
 116
 117
 118 .roo-ie .x-form-date-trigger,
 119 .roo-ie .x-form-arrow-trigger
 120 {
 121     margin: 0px;
 122     margin-top: 1px;
 123     height: 20px !important;
 124 }
 125
 126 /** some kind of kludge for the combo demo */
 127 .roo-gecko .roo-strict .x-form-text {
 128     height:18px;
 129 }
 130
 131 .roo-gecko .x-form-item .x-form-text {
 132     /* the dynamic demo needs 20px */
 133     height:16px;
 134 }
 135 .roo-gecko .x-form-text {
 136     height:18px;
 137     padding-top: 2px;
 138     padding-bottom: 0px;
 139 }
 140
 141 .x-form-empty-field {
 142     color : #666;
 143 }
 144
 145 /* ---------------------- FORM INVALID --------------------- */
 146
 147 .x-form-invalid-icon
 148 {
 149     display: block;
 150     position: absolute;
 151     top: 0px;
 152     left: 0px;
 153     height: 16px;
 154     width: 16px;
 155     visibility: hidden;
 156     /* need a nice icon for this */
 157     background: url(../images/default/tree/drop-no.gif) no-repeat 0 0;
 158
 159 }
 160 .x-form-invalid
 161 {
 162
 163     background: url(../images/default/grid/invalid_line.gif) repeat-x 0 16px;
 164     border: 1px solid red  !important;
 165 }
 166 textarea.x-form-invalid
 167 {
 168     background: none;
 169
 170 }
 171
 172
 173 /* ---------------------- FORM LINE CLEARER  --------------------- */
 174
 175 .x-form-clear-left ,
 176 .x-form-clear,
 177 {
 178     font-size: 0px;
 179     height: 0px;
 180     line-height: 0px;
 181     overflow: hidden;
 182 }
 183 .x-form-clear-left
 184 {
 185     clear: left;
 186 }
 187 .x-form-clear
 188 {
 189     clear: both;
 190 }
 191
 192 /* ---------------------- FORM COLUMNS --------------------- */
 193
 194 .x-form-column
 195 {
 196     float: left;
 197     margin: 0px;
 198     padding: 0px;
 199     overflow: hidden;
 200     width: 47%;
 201
 202 }
 203
 204 /* ---------------------- FORM FIELDSETS --------------------- */
 205
 206
 207 .x-form fieldset
 208 {
 209     border: 1px solid #ccc;
 210     padding-top: 7px;
 211     padding-left: 12px;
 212     padding-bottom: 7px;
 213     margin-bottom:9px;
 214
 215 }
 216
 217 .x-form fieldset legend {
 218     font-weight: bold;
 219
 220 }
 221 /* ---------------------- FORM CHECKBOXES --------------------- */
 222
 223 .x-form-cb-label
 224 {
 225     clear :none !important;
 226     float: none !important;;
 227     display: inline !important;;
 228     margin-left: 4px;
 229 }
 230
 231 /* ---------------------- FORM COMBOS --------------------- */
 232
 233 /** -- see also the combo.css */
 234
 235 .x-form-field-wrap .x-form-trigger {
 236
 237      cursor: pointer;
 238      border-left: 0px solid;
 239
 240      position: absolute;
 241
 242     /*  top: -1px; */
 243      background:url(../images/default/combo/arrow.gif); /* arrow image, 15x15px */
 244      background-repeat:no-repeat;
 245      background-position:center; /* centers image in div, creating 1px white border effect */
 246 }
 247
 248
 249
 250 /* ---------------------- FORM BUTTON BAR --------------------- */
 251
 252 .x-form .x-form-btns-ct .x-form-btns-center {
 253     text-align: center;
 254 }
 255 .x-form .x-form-btns-ct .x-form-btns-center table {
 256     margin: 0px auto;
 257 }
 258
 259 .x-form .x-form-btns-ct   .x-form-btns td.x-form-btn-td {
 260     padding: 3px;
 261 }
 262
 263 .x-form .x-form-btns-ct .x-form-btns td  {
 264     border: 0px;
 265     padding: 0px;
 266 }
 267
 268 .x-form .x-form-btns-ct .x-btn {
 269     clear: none;
 270     float: right;
 271 }
 272
 273 /* ---------------------- FORM RESIZE CALC TRICK --------------------- */
 274 .x-form-grow-sizer
 275 {
 276     position: absolute;
 277     top: -10000px;
 278     left: -10000px;
 279     visibility: hidden;
 280 }
 281
 282
 283
 284
 285
 286