juplo.de Git - website/blob - dist/less/base/formulare.less

   1 /** Formulare *****************************************************************/
   2
   3 .form {
   4   position: relative;
   5   width: 100%;
   6   overflow: hidden;
   7 }
   8
   9 /** Trennlinie */
  10 .form hr.f {
  11   border-style: none;
  12   border-top-style: dashed;
  13   border-color: @normal;
  14   border-width: .0625em;
  15   margin: .625em 0; /** 10px 0 */
  16   background-color: transparent;
  17 }
  18
  19 /** Text im Formular */
  20 .form p.f {
  21   color: @schrifthell;
  22 }
  23 .form p.f,
  24 .form .radiobutton > legend.f,
  25 .form .checkbox > legend.f,
  26 .form .textarea > label.f {
  27   display: block;
  28   font-size: 87.5%; /** 14px */
  29   line-height: 1.5em; /** 21px */
  30   color: @schrifthell;
  31   margin: .428571429em 0; /** 6px 0 */
  32 }
  33
  34 /** Aufzählungen im Formular */
  35 .form ul.f,
  36 .form ol.f {
  37   color: @schrifthell;
  38   margin: 1em 0;
  39 }
  40
  41 /** Info-Text */
  42 .form p.f.info,
  43 .form .textarea > label.f.info,
  44 .form .radiobutton > legend.f.info,
  45 .form .checkbox > legend.f.info,
  46 .form .textarea > label.f.info {
  47   display: block;
  48   font-size: 81.25%; /** 13px */
  49   line-height: 1.230769231em; /** 16px */
  50   font-style: italic;
  51   color: @schrifthell;
  52   padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
  53   background-image: url(../img/em.png);
  54   background-repeat: no-repeat;
  55   background-position: 0 1px;
  56   margin-top: .461538462em; /** 6px */
  57   margin-bottom: .461538462em; /** 6px */
  58 }
  59 .form .info > a {
  60   display: inline-block;
  61 }
  62
  63 /** Überschriften */
  64 .form h1.f {
  65   font-size: 137.5%; /** 22px */
  66   letter-spacing: .0454545em; /** 1px */
  67   line-height: 1em;
  68   padding: 0 0 .454545455em; /** 0 0 10px */
  69   border-bottom: .090909091em solid @normal; /** 2px */
  70   margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
  71 }
  72 .form h2.f {
  73   font-size: 100%; /** 16px */
  74   letter-spacing: .0625em; /** 1px */
  75   text-transform: uppercase;
  76   line-height: 1.625em; /** 26px */
  77   padding: 0 0 0 .125em; /** 0 0 0 2px */
  78   border-bottom: .0625em solid @normal; /** 1px */
  79   margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
  80 }
  81 .form h3.f {
  82 /**  border-bottom: 1px dashed @normal; */
  83 }
  84 .form p.required {
  85   text-indent: -999em;
  86   margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */
  87 }
  88 .form p.required > strong.r {
  89   display: block;
  90   float: right;
  91   position: relative;
  92   right: -994em;
  93   margin-right: 1em; /** 14px */
  94   font-weight: normal;
  95 }
  96 .form p.required > strong.symbol {
  97   font-size: 128.5714286%; /** 18px zu 14px */
  98   margin-right: .555555em; /** 10px */
  99   padding-top: .1666666em; /** 3px */
 100   right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
 101   font-weight: 700;
 102   color: @dunkel;
 103 }
 104
 105 /** Fehler-Hinweise */
 106 .f.error {
 107   color: @fehler;
 108 }
 109 span.f.error {
 110   display: block;
 111   position: relative;
 112   font-size: 87.5%; /** 14px */
 113   line-height: 1.214285714em; /** 17px */
 114   padding: .571428571em; /** 8px */
 115   color: @hintergrund;
 116   background-color: @fehler;
 117   margin: .857142857em 0 0 0; /** 12px 0 0 0 */
 118 }
 119 span.f.error > span.e {
 120   display: block;
 121   width: .857142857em; /** 12px */
 122   height: .428571429em; /** 6px */
 123   background-image: url(../img/arrow-red.gif);
 124   text-indent: -9999em;
 125   position: absolute;
 126   top: -.428571429em; /** -6px */
 127   left: 2.142857143em; /** 30px */
 128 }
 129 span.f.error > strong.e {
 130   text-transform: uppercase;
 131 }
 132
 133 /** Input, Select und Dateiupload mit Label */
 134 .form .text,
 135 .form .select,
 136 .form .file {
 137   position: relative;
 138   margin-bottom: .75em; /** 12px */
 139 }
 140 .form .text,
 141 .form .file {
 142   margin-right: 10em; /** 160px */
 143 }
 144 .form .select {
 145   margin-right: 9em; /** 144px */
 146 }
 147 h2.f + div.text,
 148 h2.f + div.select,
 149 h2.f + div.file,
 150 h2.f + div.captcha,
 151 p.f + div.text,
 152 p.f + div.select,
 153 p.f + div.file {
 154   margin-top: 20px;
 155 }
 156 .form .text > label.f,
 157 .form .textarea > label.f,
 158 .form .select > label.f,
 159 .form .file > label.f,
 160 .form .captcha > span.f {
 161   display: block;
 162   position: relative;
 163   font-size: 87.5%; /** 14px */
 164   line-height: 1.214285714em; /** 17px */
 165   padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
 166   color: @schrift;
 167 }
 168 .form .file > label.f {
 169   padding-top: .285714286em; /** 4px */
 170   padding-bottom: .285714286em; /** 4px */
 171 }
 172 .form .captcha > span.f {
 173   position: absolute;
 174 }
 175 .form .required > label.f {
 176   padding-left: 1em; /** 14px */
 177 }
 178 .form .required > label.f > .required {
 179   display: block;
 180   position: absolute;
 181   font-size: 128.5714286%; /** 18px zu 14px */
 182   font-weight: 700;
 183   color: @dunkel;
 184   top: .611111111em; /** 11px */
 185   left: 0;
 186 }
 187 .form .file > label.f > .required {
 188   top: .5em; /** 7px */
 189 }
 190 .form .text > input.f,
 191 .form .select > select.f,
 192 .form .file > input.f {
 193   display: block;
 194   width: 100%;
 195   position: absolute;
 196   top: 0;
 197   font-size: 81.25%; /** 13px */
 198   border: .076923077em solid @normal; /** 1px */
 199   color: @schrift;
 200   background-color: @sehrhell;
 201 }
 202 .form .text > input.f {
 203   line-height: 1.307692308em; /** 17px */
 204   padding: .538461538em; /** 7px */
 205   right: -12.307692308em; /** -160px */
 206 }
 207 .form .select > select.f {
 208   line-height: 1.230769231em; /** 16px */
 209   padding: .461538462em .538461538em; /** 6px 7px */
 210   right: -11.076923077em; /** -144px */
 211 }
 212 .form .file > input.f {
 213   margin-left: 11.076923077em; /** 144px */
 214 }
 215 .form .captcha > img.f {
 216     float: right;
 217     margin-top: -.9375em; /** 15px */
 218     width: 7.5em; /** 120px */
 219     height: 3.75em; /** 60px */
 220 }
 221 .form .text > input.f:focus,
 222 .form .select > select.f:focus,
 223 .form .text > input.f:active,
 224 .form .select > select.f:active {
 225   background-color: transparent;
 226 }
 227 .form .text > p.f.info,
 228 .form .select > p.f.info,
 229 .form .file > p.f.info {
 230   position: relative;
 231   left: 11.076923077em; /** 144px */
 232 }
 233 .form .text > span.f.error,
 234 .form .select > span.f.error,
 235 .form .file > span.f.error {
 236   width: 100%;
 237   margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/
 238 }
 239
 240 /** Textfelder */
 241 .form .textarea {
 242   position: relative;
 243   margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */
 244 }
 245 .form .textarea > label.f {
 246   margin: .615384615em -.846153846em; /** 8px -11px */
 247 }
 248 .form .textarea > textarea.f,
 249 .form .textarea > div.textarea {
 250   width: 100%;
 251   border: .076923077em solid @normal; /** 1px */
 252   color: @schrift;
 253   background-color: @sehrhell;
 254   padding: .769230769em; /** 10px */
 255   position: relative;
 256   left: -.846153846em; /** -11px */
 257 }
 258 .form .textarea > div.textarea {
 259   margin: 0;
 260   font-size: 87.5%; /** 14px */
 261 }
 262 .form .textarea > textarea.f:focus,
 263 .form .textarea > textarea.f:active {
 264   background-color: transparent;
 265 }
 266 .form .textarea > span.f.error {
 267   margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */
 268 }
 269
 270 /** Radiobuttons und Checkboxen */
 271 .form .radiobutton > legend.f.info,
 272 .form .checkbox > legend.f.info {
 273   padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/
 274   background-position: 0 .230769231em; /** 0 3px */
 275 }
 276 .form .col2,
 277 .form .radiobutton > .col2,
 278 .form .checkbox > .col2 {
 279   width: 48%;
 280   float: left;
 281 }
 282 .form .col2.left,
 283 .form .radiobutton > .col2.left,
 284 .form .checkbox > .col2.left {
 285   margin-right: 2%;
 286 }
 287 .form .col2.right,
 288 .form .radiobutton > .col2.right,
 289 .form .checkbox > .col2.right {
 290   float: right;
 291   margin-left: 2%;
 292 }
 293 .form div.checkbox,
 294 .form .radiobutton > .f,
 295 .form .checkbox > .f,
 296 .form .radiobutton > .col2 > .f,
 297 .form .checkbox > .col2 > .f {
 298   position: relative;
 299 }
 300 .form div.checkbox > label.f,
 301 .form .radiobutton > .f > label.f,
 302 .form .checkbox > .f > label.f,
 303 .form .radiobutton > .col2 > .f > label.f,
 304 .form .checkbox > .col2 > .f > label.f {
 305   display: block;
 306   font-size: 87.5%; /** 14px */
 307   line-height: 1.285714286em; /** 18px */
 308   color: @schrift;
 309   margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
 310 }
 311 .form div.checkbox > input.f,
 312 .form .radiobutton > .f > input.f,
 313 .form .checkbox > .f > input.f,
 314 .form .radiobutton > .col2 > .f > input.f,
 315 .form .checkbox > .col2 > .f > input.f {
 316   position: absolute;
 317   margin: .285714286em 0; /** 4px 0 */
 318 }
 319 .form div.checkbox > input.error,
 320 .form .radiobutton > .f > input.error,
 321 .form .checkbox > .f > input.error {
 322   /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */
 323 }
 324 .form div.checkbox:hover > label.f,
 325 .form .radiobutton > .f:hover > label.f,
 326 .form .checkbox > .f:hover > label.f,
 327 .form div.checkbox:focus > label.f,
 328 .form .radiobutton > .f:focus > label.f,
 329 .form .checkbox > .f:focus > label.f,
 330 .form div.checkbox:active > label.f,
 331 .form .radiobutton > .f:active > label.f,
 332 .form .checkbox > .f:active > label.f,
 333 .form .radiobutton > .col2 > .f:hover > label.f,
 334 .form .checkbox > .col2 > .f:hover > label.f,
 335 .form .radiobutton > .col2 > .f:focus > label.f,
 336 .form .checkbox > .col2 > .f:focus > label.f,
 337 .form .radiobutton > .col2 > .f:active > label.f,
 338 .form .checkbox > .col2 > .f:active > label.f {
 339   color: @schrift;
 340 }
 341
 342 /** Sondereinstellungen für Fehler-Hervorhebungen */
 343 .form .text > input.error,
 344 .form .textarea > textarea.error,
 345 .form .select > select.error,
 346 .form .file > input.error {
 347   color: @schrift;
 348   font-weight: 700;
 349   border-color: @fehler;
 350   background-color: @fehlerhell;
 351 }
 352
 353
 354 /** Absende-Buttons */
 355 ul.buttons,
 356 ol.buttons {
 357   margin: 0;
 358   padding: 0;
 359   list-style-type: none;
 360   text-align: right;
 361 }
 362 ul.buttons > li.b,
 363 ol.buttons > li.b {
 364   display: inline-block;
 365   margin: 0;
 366   padding: 0;
 367 }
 368 .form .submit {
 369   text-align: right;
 370   margin-bottom: .75em; /** 12px */
 371 }
 372 .form .submit > input.f,
 373 .form .submit > a.f,
 374 a.ln.button {
 375   display: inline-block;
 376   font-family: 'PT Sans', Helvetica, Arial, sans-serif;
 377   font-size: 81.25%; /** 13px */
 378   letter-spacing: .076923077em; /** 1px */
 379   line-height: 25px;
 380   padding:0 6px;
 381   height: 1.923076923em; /** 25px */
 382   color: @hintergrund;
 383   font-weight: 700;
 384   background-color: @normal;
 385   border-style: none;
 386 }
 387 .form .submit > input.f,
 388 .form .submit > a.f,
 389 ul.buttons > li.b,
 390 ol.buttons > li.b {
 391   margin: 0 0 0 .615384615em; /** 0 0 0 8px */
 392 }
 393 a.ln.button:before {
 394   content: none;
 395 }
 396 .form .submit > input.left,
 397 .form .submit > a.left,
 398 a.ln.button.left {
 399   float: left;
 400   margin: 0 .923076923em 0 0; /** 0 12px 0 0 */
 401 }
 402 .form .submit > input.right,
 403 .form .submit > a.right,
 404 a.ln.button.right {
 405   float: right;
 406   margin: 0 0 0 .923076923em; /** 0 0 0 12px */
 407 }
 408 .form .submit > input.f:hover,
 409 .form .submit > a.f:hover,
 410 a.ln.button:hover,
 411 .form .submit > input.f:focus,
 412 .form .submit > a.f:focus,
 413 a.ln.button:focus,
 414 .form .submit > a.f:active,
 415 .form .submit > input.f:active,
 416 a.ln.button:active {
 417   background-color: @dunkel;
 418   text-decoration: none;
 419 }