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