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