juplo.de Git - website/blob - src/main/webapp/less/base/formulare.less

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