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

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