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