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