[Summary view] [Print] [Text view]

   1  /**
   2   * @file
   3   * Styles required for the basic functionality of the Form Builder interface.
   4   */
   5  
   6  #form-builder-wrapper {
   7    overflow: hidden;
   8    padding: 10px 0;
   9  }
  10  
  11  #form-builder-wrapper h3.form-builder-title {
  12    margin: 0;
  13  }
  14  
  15  #form-builder-wrapper.with-palette #form-builder-fields {
  16    float: right;
  17    padding-left: 10px;
  18    width: 260px;
  19  }
  20  
  21  #form-builder-wrapper.with-palette #form-builder {
  22    float: none;
  23    margin-right: 270px;
  24    padding-right: 9px;
  25    border-right: 1px solid #CCC;
  26    position: relative;
  27  }
  28  
  29  #center #form-builder form,
  30  #form-builder form {
  31    margin: 0;
  32  }
  33  
  34  #form-builder form.confirmation {
  35    padding: 10px;
  36  }
  37  
  38  div.form-builder-wrapper {
  39    padding: 1px;
  40    margin-top: 4px; /* Match this to the Sortable drag threshold option. */
  41    position: relative;
  42  }
  43  
  44  div.form-builder-element {
  45    margin: 4px 10px 4px 10px;
  46  }
  47  
  48  div.form-builder-hover {
  49    border: 1px dashed #999;
  50    padding: 0;
  51  }
  52  
  53  div.form-builder-active {
  54    padding: 0;
  55    border: 1px solid #999;
  56  }
  57  
  58  div.form-builder-wrapper form {
  59    border-top: 1px dashed #999;
  60  }
  61  
  62  div.form-builder-element {
  63    position: relative;
  64  }
  65  
  66  div.form-builder-draggable,
  67  div.form-builder-draggable input,
  68  div.form-builder-draggable textarea,
  69  div.form-builder-draggable label,
  70  div.form-builder-draggable .grippie {
  71    cursor: move;
  72  }
  73  
  74  div.form-builder-clickable,
  75  div.form-builder-clickable input,
  76  div.form-builder-clickable textarea,
  77  div.form-builder-clickable label,
  78  div.form-builder-clickable .grippie {
  79    cursor: pointer;
  80  }
  81  
  82  div.form-builder-element .form-builder-disable {
  83    z-index: 100;
  84    position: absolute;
  85    top: 0;
  86    left: 0;
  87  }
  88  
  89  /* Empty fieldsets */
  90  #form-builder fieldset {
  91    padding-bottom: 20px;
  92  }
  93  
  94  fieldset.form-builder-empty-fieldset,
  95  div.form-builder-empty-fieldset {
  96    overflow: hidden;
  97  }
  98  
  99  div.form-builder-empty-placeholder {
 100    border: none;
 101    text-align: center;
 102    color: #CCC;
 103    overflow: hidden;
 104  }
 105  
 106  div.form-builder-empty-placeholder span {
 107    display: block;
 108    margin: 40px;
 109  }
 110  
 111  /* Placeholders for drop position */
 112  div.form-builder-placeholder {
 113    height: 60px;
 114    margin-top: -30px;
 115    position: absolute;
 116    width: 100%;
 117  }
 118  
 119  div.form-builder-placeholder-hover {
 120    margin: 0;
 121    position: relative;
 122    border: 1px dashed #999;
 123  }
 124  
 125  /* This affects the fieldset placeholder text on hover */
 126  div.form-builder-placeholder-hover span {
 127    visibility: hidden;
 128  }
 129  
 130  /* The item being dragged */
 131  #form-builder .ui-draggable-dragging {
 132    width: 100%;
 133  }
 134  
 135  /* Title bar for form builder items */
 136  div.form-builder-title-bar {
 137    position: relative;
 138    z-index: 10;
 139    padding-top: 4px;
 140    height: 14px;
 141    margin-bottom: -18px;
 142    border-bottom: none;
 143  }
 144  
 145  div.ui-draggable div.form-builder-title-bar {
 146    display: none;
 147  }
 148  
 149  div.ui-draggable div.form-builder-title-bar {
 150    cursor: move;
 151  }
 152  
 153  span.form-builder-links {
 154    position: absolute;
 155    right: 0;
 156    z-index: 40;
 157  }
 158  
 159  div.form-builder-hover div.form-builder-title-bar,
 160  div.form-builder-active div.form-builder-title-bar {
 161    display: block;
 162  }
 163  
 164  div.form-builder-hover div.form-builder-wrapper div.form-builder-title-bar,
 165  div.form-builder-active div.form-builder-wrapper div.form-builder-title-bar {
 166    display: none;
 167  }
 168  
 169  span.form-builder-links a.remove,
 170  span.form-builder-links a.configure {
 171    float: right;
 172    display: block;
 173    height: 1.7em;
 174    text-decoration: none;
 175    height: 13px;
 176    width: 13px;
 177    padding: 2px 3px;
 178    cursor: pointer;
 179  }
 180  
 181  span.form-builder-links a.remove span,
 182  span.form-builder-links a.configure span {
 183    display: none;
 184  }
 185  
 186  span.form-builder-links a.remove {
 187    background: url(images/delete.png) no-repeat 0 1px;
 188  }
 189  
 190  span.form-builder-links a.configure {
 191    background: url(images/configure.png) no-repeat 0 1px;
 192  }
 193  
 194  span.form-builder-links a.remove:hover,
 195  span.form-builder-links a.configure:hover {
 196    background-position: 0 -19px;
 197  }
 198  
 199  span.form-builder-links a.progress,
 200  span.form-builder-links a.progress:hover {
 201    background: url(images/status-active.gif) no-repeat 0 1px;
 202  }
 203  
 204  /* Field form tabs */
 205  #form-builder ul.form-builder-tabs {
 206    margin: 0;
 207    padding: 0;
 208    float: left; /* RTL */
 209    position: relative;
 210  }
 211  
 212  #form-builder ul.form-builder-tabs li {
 213    float: left; /* RTL */
 214    display: block;
 215    border-width: 0 1px 0 0;
 216    border-color: #999;
 217    border-style: solid;
 218    padding: 6px 10px;
 219    margin: -1px -1px -1px 0px;
 220    list-style-type: none;
 221    list-style-image: none;
 222    background: none;
 223    cursor: pointer;
 224    z-index: 20;
 225    position: relative;
 226  }
 227  
 228  #form-builder ul.form-builder-tabs li.active {
 229    margin-left: -1px;
 230    border-left: 1px solid #999;
 231    border-top: 1px dashed #999;
 232    border-bottom: 1px solid #ffffff;
 233    background: #ffffff;
 234  }
 235  
 236  #form-builder fieldset.form-builder-group {
 237    float: left; /* RTL */
 238    width: 100%;
 239    padding: 0;
 240    margin: 0;
 241    border: none;
 242    border-top: 1px solid #CCC;
 243  }
 244  
 245  #form-builder fieldset.form-builder-group .fieldset-wrapper {
 246    padding: 10px 10px 0;
 247  }
 248  
 249  #form-builder fieldset.form-builder-group .form-item {
 250    padding: 0;
 251    margin: 0 0 10px;
 252  }
 253  
 254  #form-builder-field-configure .form-submit {
 255    display: none;
 256  }
 257  
 258  #form-builder-field-configure a.close {
 259    border: none;
 260    margin: 0;
 261    font-size: 80%;
 262    float: right;
 263    padding: 6px 10px;
 264  }
 265  
 266  /* Weight and parents form */
 267  form#form-builder-positions {
 268    display: none;
 269  }
 270  
 271  /* New fields block */
 272  div.form-builder-new-field {
 273    padding: 10px 20px;
 274  }
 275  
 276  div.form-builder-new-field span.progress {
 277    padding-left: 16px;
 278    background: url(images/status-active.gif) no-repeat center left;
 279  }
 280  
 281  #form-builder-field-palette .item-list {
 282    margin: 0 0 10px 0;
 283  }
 284  
 285  #form-builder-field-palette h3 {
 286    margin: 0;
 287  }
 288  
 289  #form-builder-field-palette ul.form-builder-fields {
 290    width: 260px;
 291    padding: 0;
 292  }
 293  
 294  #form-builder-field-palette ul li {
 295    list-style-type: none;
 296    background: white none no-repeat 6px center;
 297    padding: 2px 2px 2px 28px;
 298    border: 1px solid #999;
 299    margin: 2px;
 300    float: left;
 301    width: 80px;
 302    font-size: 11px;
 303    cursor: move;
 304    display: block;
 305  }
 306  
 307  #form-builder-field-palette ul li a,
 308  #form-builder-field-palette ul li a:hover,
 309  #form-builder-field-palette ul li a:active,
 310  #form-builder-field-palette ul li a:visited {
 311    text-decoration: none;
 312    cursor: move;
 313    color: black;
 314  }
 315  
 316  #form-builder-field-palette ul li.field-checkboxes {
 317    background-image: url(images/fields/checkboxes.png);
 318  }
 319  #form-builder-field-palette ul li.field-date {
 320    background-image: url(images/fields/date.png);
 321  }
 322  #form-builder-field-palette ul li.field-email {
 323    background-image: url(images/fields/email.png);
 324  }
 325  #form-builder-field-palette ul li.field-fieldset {
 326    background-image: url(images/fields/fieldset.png);
 327  }
 328  #form-builder-field-palette ul li.field-file {
 329    background-image: url(images/fields/file.png);
 330  }
 331  #form-builder-field-palette ul li.field-grid {
 332    background-image: url(images/fields/grid.png);
 333  }
 334  #form-builder-field-palette ul li.field-hidden {
 335    background-image: url(images/fields/hidden.png);
 336  }
 337  #form-builder-field-palette ul li.field-image {
 338    background-image: url(images/fields/image.png);
 339  }
 340  #form-builder-field-palette ul li.field-markup {
 341    background-image: url(images/fields/markup.png);
 342  }
 343  #form-builder-field-palette ul li.field-number {
 344    background-image: url(images/fields/number.png);
 345  }
 346  #form-builder-field-palette ul li.field-pagebreak {
 347    background-image: url(images/fields/pagebreak.png);
 348  }
 349  #form-builder-field-palette ul li.field-radios {
 350    background-image: url(images/fields/radios.png);
 351  }
 352  #form-builder-field-palette ul li.field-select {
 353    background-image: url(images/fields/select.png);
 354  }
 355  #form-builder-field-palette ul li.field-time {
 356    background-image: url(images/fields/time.png);
 357  }
 358  #form-builder-field-palette ul li.field-textarea {
 359    background-image: url(images/fields/textarea.png);
 360  }
 361  #form-builder-field-palette ul li.field-textfield {
 362    background-image: url(images/fields/textfield.png);
 363  }