css/design40/less/forms.less

   1 /* ------------------------------------------------------------- */
   2 /* FORM ELEMENTS (forms.less)                                    */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // FORMS & FORM-ELEMENTS
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION:
  11 // The properties of every form and form element should be specified here
  12 //
  13 //
  14 // CONTENTS:
  15 // - FORM
  16 // -- .box
  17 // - FORM ELEMENTS
  18 // -- input, textarea, select
  19 // -- focused elements
  20 // - BUTTONS
  21 // - LABELS
  22 // - FIELDSET
  23 // - DIMENSIONS:
  24 //   - Single line input fields
  25 //   - Select elements
  26 // - DATA FORMAT
  27 // - SPECIALS:
  28 //   - Date picker (JQuery-UI)
  29 // - MIXED FORM-TABLES
  30 // - PLACEHOLDER-TEXT
  31 // - JQUERY-CONTAINERS FOR FIELDS (Picker etc.)
  32 // ----------------------------------------------------------------------------
  33
  34
  35 /* forms.less */
  36
  37 // --------------------------------------
  38 // FORM
  39 // --------------------------------------
  40 // At first we tried to nest all form elements within the form tag
  41 // but it is not possible because some forms (print dialog etc.) do not have
  42 // a surrounding form element
  43 form {
  44   display:     table;
  45   width:       100%;
  46   text-align: left;
  47   margin:     0 auto 0 auto;
  48
  49
  50   // If Form must be a block container
  51   // PENDENT: anschauen
  52   &.box {
  53     display:   block;
  54     overflow: hidden ;
  55     padding:   0 0 1.6em 0 ;
  56   }
  57
  58 }
  59 // /form
  60
  61
  62   // --------------------------------------
  63   // FORM-ELEMENTS
  64   // --------------------------------------
  65   //
  66   input,
  67   textarea,
  68   select {
  69     font-family:       @font-family-sans-serif ;
  70     //font-size:         @font-size-smaller ;
  71     padding:           0.2em 0.2em 0.2em @padding-databoxes-left ;
  72     border:           1px;
  73     border-color:     darkgray lightgray lightgray;
  74     border-style:     solid;
  75     outline:           none;
  76     background-color: #fff ;
  77
  78     &[type="text"],
  79     &[type="password"] {
  80
  81     }
  82     // PENDENT: data type
  83     &[type="text"] {
  84       &.accent{
  85         font-weight:   bold ;
  86         font-size:     130% !important ;
  87         padding:       0.6em auto !important ;
  88       }
  89     }
  90   }
  91   // /input, textarea, select
  92
  93
  94   textarea {
  95     resize: vertical;
  96   }
  97
  98   // set default height for internal notes in record views
  99   textarea#intnotes,
 100   textarea#order_intnotes,
 101   textarea#reclamation_intnotes {
 102     height: 150px;
 103   }
 104
 105
 106
 107
 108   // --------------
 109   // Focused Elements
 110   input[type="text"],
 111   input[type="password"],
 112   textarea,
 113   select {
 114     &:focus,
 115     &:active {
 116       background-color: @formelement-focus-bg ;
 117       border:           @formelement-focus-border ;
 118       color:             @formelement-focus-text ;
 119     }
 120   }
 121
 122
 123
 124   // --------------
 125   // Forced Padding for Pop-Down-Symbol
 126   // PENDENT: Pop-Down-Symbol wo definiert?
 127
 128   select {
 129     // background: white url('../../image/select-down.png') no-repeat scroll right center;
 130     //padding-right:         1.0em;
 131     //padding-left:          0.6em ;
 132     &.helper {
 133        background-color:   @gray-superlight;
 134     }
 135     & > option {
 136       padding-left:          0.6em ;
 137     }
 138   }
 139
 140
 141
 142
 143
 144
 145
 146   // --------------------------------------
 147   // SPECIAL INPUT TYPES
 148   // --------------------------------------
 149
 150   input {
 151     &[type="file"]{
 152       padding:             0.8em;
 153       background-color:   @gray-lighter;
 154       color:               @gray-dark ;
 155       border:             1px @gray-dark solid ;
 156       // PENDENT: geht wahrscheinlich nicht, oder muss anders geloest werden
 157       // Hier handelt es sich um den "Select File"-Button
 158       button,
 159       input[type="button"] {
 160         background-color: #A3FFA8;
 161       }
 162     }
 163   }
 164
 165
 166
 167
 168   // --------------------------------------
 169   // LABELS
 170   // --------------------------------------
 171
 172   label {
 173     cursor:             pointer;
 174     vertical-align:     top;
 175     display:             inline-block;
 176     width:               88% ;
 177     color:               @base-data-label-color ;
 178
 179     &:link,
 180     &:visited {
 181       text-decoration: none ;
 182     }
 183     &:hover {
 184       //color:             #000 ;
 185       text-decoration:   underline ;
 186     }
 187   }
 188
 189
 190
 191
 192   // --------------------------------------
 193   // FIELDSET
 194   // --------------------------------------
 195
 196   fieldset {
 197     margin-top:       15px;
 198     color:             black;
 199     font-weight:       normal;
 200     font-size:         @font-size-large;
 201     text-transform:   uppercase;
 202     border-color:     grey;
 203     border-width:     1px ;
 204     margin:           0.4em 0.6em 1.4em 0.6em;
 205
 206     // Heading within FIELDSET */
 207     h4 {
 208       font-weight: normal ;
 209       font-size:   @h4-size ;
 210       margin:      0;
 211       padding:     0 0 0.2em 0;
 212     }
 213   }
 214
 215
 216
 217
 218   // --------------------------------------
 219   // DIMENSIONS
 220   // --------------------------------------
 221   input{
 222
 223     // 1 Lined input field
 224     // PENDENT: bei Verwendung von weiteren HTML5-Typen Typ-Deklaration erweitern
 225     &[type="text"],
 226     &[type="password"]{
 227       &.wi-smallest     { width:     @input-wi-smallest    ; } //   2.0em
 228       &.wi-verysmall    { width:     @input-wi-verysmall   ; } //   4.0em
 229       &.wi-small        { width:     @input-wi-small       ; } //   8.8em
 230       &.wi-mediumsmall  { width:     @input-wi-mediumsmall ; } //   8.8em
 231       &.wi-normal       { width:     @input-wi-normal      ; } //  12.0em
 232       &.wi-lightwide    { width:     @input-wi-lightwide   ; } //  12.0em
 233       &.wi-wide         { width:     @input-wi-wide        ; } //  18.0em
 234       &.wi-wider        { min-width: @input-wi-wider       ; } //  24.0em
 235       &.wi-verywide     { min-width: @input-wi-verywide    ; } //  36.0em
 236
 237       // data types
 238       &.wi-date         { width: @input-wi-small       ; } //
 239       &.wi-number       { width: @input-wi-small       ; } //
 240       &.wi-tinynumber   { width: @input-wi-verysmall   ; } //
 241       &.wi-largenumber  { width: @input-wi-mediumsmall ; } //
 242
 243       // combined minus dimensions (take care of the double hyphen -- )
 244       &.wi-lightwide--verysmall { width: @input-wi-lightwide--verysmall; }
 245       &.wi-wide--verysmall      { width: @input-wi-wide--verysmall !important; }
 246       //&.wi-wide--verysmall      { width: 203px; }
 247
 248     }
 249     // Password (Standard size) // PENDENT: Standardgroesse ??
 250      &[type="password"]{
 251       //min-width: @input-wi-normal ;
 252     }
 253
 254     // OBSOLETE // PENDENT: ggf. entfernen
 255     .fixed_width {
 256       width: 250px;
 257     }
 258   } // /DIMENSION input
 259
 260
 261   // -------------------
 262   // Select-Element
 263   //
 264
 265   select {
 266     &.wi-smallest     { width:     @select-wi-smallest    ; } //   2.0em
 267     &.wi-verysmall    { width:     @select-wi-verysmall   ; }
 268     &.wi-small        { width:     @select-wi-small       ; } // Datum (PENDENT: ca. 8.6em)
 269     &.wi-mediumsmall  { width:     @select-wi-mediumsmall ; }
 270     &.wi-normal       { width:     @select-wi-normal      ; }
 271     &.wi-lightwide    { width:     @select-wi-lightwide   ; }
 272     &.wi-wide         { width:     @select-wi-wide        ; }
 273     &.wi-wider        { min-width: @select-wi-wider       ; }
 274     &.wi-verywide     { min-width: @select-wi-verywide    ; }
 275     &.wi-full         { width:     100%                   ; }
 276
 277     &.wi-small-normal             { width: @select-wi-small-normal } ;
 278     &.wi-small-lightwide          { width: @select-wi-small-lightwide } ;
 279     &.wi-small-wide               { width: @select-wi-small-wide } ;
 280     &.wi-small-wider              { width: @select-wi-small-wider } ;
 281     &.wi-small-verywide           { width: @select-wi-small-verywide } ;
 282     &.wi-mediumsmall-normal       { width: @select-wi-mediumsmall-normal } ;
 283     &.wi-mediumsmall-lightwide    { width: @select-wi-mediumsmall-lightwide } ;
 284     &.wi-mediumsmall-wide         { width: @select-wi-mediumsmall-wide } ;
 285     &.wi-mediumsmall-wider        { width: @select-wi-mediumsmall-wider } ;
 286     &.wi-mediumsmall-verywide     { width: @select-wi-mediumsmall-verywide } ;
 287     &.wi-normal-normal            { width: @select-wi-normal-normal } ;
 288     &.wi-normal-lightwide         { width: @select-wi-normal-lightwide } ;
 289     &.wi-normal-wide              { width: @select-wi-normal-wide } ;
 290     &.wi-normal-wider             { width: @select-wi-normal-wider } ;
 291     &.wi-normal-verywide          { width: @select-wi-normal-verywide } ;
 292     &.wi-lightwide-normal         { width: @select-wi-lightwide-normal } ;
 293     &.wi-lightwide-lightwide      { width: @select-wi-lightwide-lightwide } ;
 294     &.wi-lightwide-wide           { width: @select-wi-lightwide-wide } ;
 295     &.wi-lightwide-wider          { width: @select-wi-lightwide-wider } ;
 296     &.wi-lightwide-verywide       { width: @select-wi-lightwide-verywide } ;
 297     &.wi-wide-normal              { width: @select-wi-wide-normal } ;
 298     &.wi-wide-lightwide           { width: @select-wi-wide-lightwide } ;
 299     &.wi-wide-wide                { width: @select-wi-wide-wide } ;
 300     &.wi-wide-wider               { width: @select-wi-wide-wider } ;
 301     &.wi-wide-verywide            { width: @select-wi-wide-verywide } ;
 302
 303
 304
 305
 306
 307   } // /DIMENSION select
 308
 309
 310   // -------------------
 311   // Textarea-Element
 312   //
 313
 314   textarea {
 315
 316     // Standard-Dimensions
 317     &.wi-smallest     { width:     @textarea-wi-normal      ; } // no smallest, just normal
 318     &.wi-verysmall    { width:     @textarea-wi-normal      ; } // no verysmall, just normal
 319     &.wi-small        { width:     @textarea-wi-normal      ; } // no small, just normal
 320     &.wi-mediumsmall  { width:     @textarea-wi-normal      ; } // no mediumsmall, just normal
 321     &.wi-normal       { width:     @textarea-wi-normal      ; }
 322     &.wi-lightwide    { min-width: @textarea-wi-lightwide   ; }
 323     &.wi-wide         { min-width: @textarea-wi-wide        ; }
 324     &.wi-wide.strict  { max-width: @textarea-wi-wide !important  ; }
 325     &.wi-wider        { min-width: @textarea-wi-wider       ; }
 326     &.wi-verywide     { min-width: @textarea-wi-verywide    ; }
 327     &.wi-full         { width:     100%                  ; }
 328
 329
 330     &.wi-small-small       { width: @textarea-wi-small-small ; }
 331     &.wi-small-mediumsmall { width: @textarea-wi-small-mediumsmall ; margin: 0 30px 0 0 ; }
 332     &.wi-small-normal      { width: @textarea-wi-small-normal ; }
 333     &.wi-small-lightwide   { width: @textarea-wi-small-lightwide ; }
 334     &.wi-small-wide        { width: @textarea-wi-small-wide ; }
 335     &.wi-small-wider       { width: @textarea-wi-small-wider ; }
 336     &.wi-small-verywide    { width: @textarea-wi-small-verywide ; }
 337
 338     &.wi-mediumsmall-small       { width: @textarea-wi-mediumsmall-small ; }
 339     &.wi-mediumsmall-mediumsmall { width: @textarea-wi-mediumsmall-mediumsmall ; }
 340     &.wi-mediumsmall-normal      { width: @textarea-wi-mediumsmall-normal ; }
 341     &.wi-mediumsmall-lightwide   { width: @textarea-wi-mediumsmall-lightwide ; }
 342     &.wi-mediumsmall-wide        { width: @textarea-wi-mediumsmall-wide ; }
 343     &.wi-mediumsmall-wider       { width: @textarea-wi-mediumsmall-wider ; }
 344     &.wi-mediumsmall-verywide    { width: @textarea-wi-mediumsmall-verywide ; }
 345
 346     &.wi-normal-small       { width: @textarea-wi-normal-small ; }
 347     &.wi-normal-mediumsmall { width: @textarea-wi-normal-mediumsmall ; }
 348     &.wi-normal-normal      { width: @textarea-wi-normal-normal ; }
 349     &.wi-normal-lightwide   { width: @textarea-wi-normal-lightwide ; }
 350     &.wi-normal-wide        { width: @textarea-wi-normal-wide ; }
 351     &.wi-normal-wider       { width: @textarea-wi-normal-wider ; }
 352     &.wi-normal-verywide    { width: @textarea-wi-normal-verywide ; }
 353
 354     &.wi-lightwide-small       { width: @textarea-wi-lightwide-small ; }
 355     &.wi-lightwide-mediumsmall { width: @textarea-wi-lightwide-mediumsmall ; }
 356     &.wi-lightwide-normal      { width: @textarea-wi-lightwide-normal ; }
 357     &.wi-lightwide-lightwide   { width: @textarea-wi-lightwide-lightwide ; }
 358     &.wi-lightwide-wide        { width: @textarea-wi-lightwide-wide ; }
 359     &.wi-lightwide-wider       { width: @textarea-wi-lightwide-wider ; }
 360     &.wi-lightwide-verywide    { width: @textarea-wi-lightwide-verywide ; }
 361
 362     &.wi-wide-small       { width: @textarea-wi-wide-small ; }
 363     &.wi-wide-mediumsmall { width: @textarea-wi-wide-mediumsmall ; }
 364     &.wi-wide-normal      { width: @textarea-wi-wide-normal ; }
 365     &.wi-wide-lightwide   { width: @textarea-wi-wide-wide ; }
 366     &.wi-wide-wide        { width: @textarea-wi-wide-wide ; }
 367     &.wi-wide-wider       { width: @textarea-wi-wide-wider ; }
 368     &.wi-wide-verywide    { width: @textarea-wi-wide-verywide ; }
 369
 370   } // /DIMENSION textarea
 371
 372   // textarea sizes for JS generated elements
 373   // make sure not to use it as a standard
 374   td, th { &.wi-date            > input[type="text"] { width: @input-wi-small             ; } }
 375   td, th { &.wi-lightwide       > textarea { width: @textarea-wi-wide           ; } }
 376   td, th { &.wi-wide            > textarea { width: @textarea-wi-wide           ; } }
 377   td, th { &.wi-small-verywide  > textarea { width: @textarea-wi-small-verywide ; } }
 378
 379   th,
 380   td {
 381     &.wi-lightwide { textarea, input[type="text"], div.ck-editor, input#order_vendor_id_name { width: @textarea-wi-lightwide; } }
 382     &.wi-wide      { textarea, input[type="text"], div.ck-editor, input#order_vendor_id_name { width: @textarea-wi-wide;      } }
 383
 384   }
 385
 386
 387   span {
 388
 389     // Standard-Dimensions
 390     &.wi-smallest                { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal      ; } } // no smallest, just normal
 391     &.wi-verysmall               { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal      ; } } // no verysmall, just normal
 392     &.wi-small                   { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal      ; } } // no small, just normal
 393     &.wi-mediumsmall             { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal      ; } } // no mediumsmall, just normal
 394     &.wi-normal                  { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal      ; } }
 395     &.wi-lightwide               { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide   ; } }
 396     &.wi-wide                    { padding: 0 ; textarea, & > div.ck-editor { width:     @textarea-wi-wide  !important        ; } }
 397     &.wi-wide.strict             {                              max-width: @textarea-wi-wide !important  ; }
 398     &.wi-wider                   { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wider       ; } }
 399     &.wi-verywide                { padding: 0 ; textarea, div.ck-editor { min-width: @textarea-wi-verywide    ; } }
 400     &.wi-full                    { padding: 0 ; textarea, div.ck-editor { width:     100%                     ; } }
 401
 402
 403     &.wi-small-small             { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-small-small       ; } }
 404     &.wi-small-mediumsmall       { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-small-mediumsmall ; margin: 0 30px 0 0 ; } }
 405     &.wi-small-normal            { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-small-normal      ; } }
 406     &.wi-small-lightwide         { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-small-lightwide   ; } }
 407     &.wi-small-wide              { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-small-wide        ; } }
 408     &.wi-small-wider             { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-small-wider       ; } }
 409     &.wi-small-verywide          { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-small-verywide    ; } }
 410
 411     &.wi-mediumsmall-small       { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-mediumsmall-small       ; } }
 412     &.wi-mediumsmall-mediumsmall { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-mediumsmall-mediumsmall ; } }
 413     &.wi-mediumsmall-normal      { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-mediumsmall-normal      ; } }
 414     &.wi-mediumsmall-lightwide   { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-mediumsmall-lightwide   ; } }
 415     &.wi-mediumsmall-wide        { padding: 0 ; textarea, &.wi-mediumsmall-wide > div.ck-editor { width: @textarea-wi-mediumsmall-wide !important ; } }
 416     &.wi-mediumsmall-wider       { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-mediumsmall-wider       ; } }
 417     &.wi-mediumsmall-verywide    { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-mediumsmall-verywide    ; } }
 418
 419     &.wi-normal-small            { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal-small       ; } }
 420     &.wi-normal-mediumsmall      { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal-mediumsmall ; } }
 421     &.wi-normal-normal           { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal-normal      ; } }
 422     &.wi-normal-lightwide        { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal-lightwide   ; } }
 423     &.wi-normal-wide             { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal-wide        ; } }
 424     &.wi-normal-wider            { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal-wider       ; } }
 425     &.wi-normal-verywide         { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-normal-verywide    ; } }
 426
 427     &.wi-lightwide-small         { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide-small       ; } }
 428     &.wi-lightwide-mediumsmall   { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide-mediumsmall ; } }
 429     &.wi-lightwide-normal        { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide-normal      ; } }
 430     &.wi-lightwide-lightwide     { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide-lightwide   ; } }
 431     &.wi-lightwide-wide          { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide-wide        ; } }
 432     &.wi-lightwide-wider         { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide-wider       ; } }
 433     &.wi-lightwide-verywide      { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-lightwide-verywide    ; } }
 434
 435     &.wi-wide-small              { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wide-small       ; } }
 436     &.wi-wide-mediumsmall        { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wide-mediumsmall ; } }
 437     &.wi-wide-normal             { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wide-normal      ; } }
 438     &.wi-wide-lightwide          { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wide-wide        ; } }
 439     &.wi-wide-wide               { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wide-wide        ; } }
 440     &.wi-wide-wider              { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wide-wider       ; } }
 441     &.wi-wide-verywide           { padding: 0 ; textarea, div.ck-editor { width:     @textarea-wi-wide-verywide    ; } }
 442
 443   } // /DIMENSION textarea
 444
 445
 446 // -------------------
 447 // Input, Select & Textarea-Elements within TD & TH elements
 448 //
 449 // PENDENT: Dieses Konstrukt sollte nicht noetig sein und behoben werden, vor allem die Funktion L.button_tag()
 450 th,
 451 td {
 452   &.wi-smallest      { input[type="text"], select           { width:     @input-wi-smallest         ; } }
 453   &.wi-verysmall     { input[type="text"], select           { width:     @input-wi-verysmall        ; } }
 454   &.wi-small         { input[type="text"], select           { width:     @input-wi-small            ; } }
 455   &.wi-mediumsmall   { input[type="text"], select           { width:     @input-wi-mediumsmall      ; } }
 456   &.wi-normal        { input[type="text"], select, textarea, div.ck-editor { width:     @input-wi-normal           ; } }
 457   &.wi-lightwide     { input[type="text"], select, textarea, div.ck-editor { width:     @input-wi-lightwide        ; } }
 458   &.wi-wide          { input[type="text"], select, textarea, div.ck-editor { width:     @input-wi-wide !important  ; } }
 459   &.wi-wide.strict   { input[type="text"], select, textarea, div.ck-editor { max-width: @input-wi-wide !important  ; } }
 460   &.wi-wider         { input[type="text"], select, textarea, div.ck-editor { width:     @input-wi-wider !important ; } }
 461   &.wi-verywide      { input[type="text"], select, textarea, div.ck-editor { min-width: @input-wi-verywide         ; } }
 462   &.wi-full          { input[type="text"], select, textarea, div.ck-editor { width:     100% ; } }
 463   // Combinations
 464   &.wi-mediumsmall-wide       { input[type="text"], select, textarea, div.ck-editor { width: @textarea-wi-mediumsmall-wide  ; } }
 465   &.wi-small-mediumsmall      { input[type="text"], select, textarea, div.ck-editor { width: @textarea-wi-small-mediumsmall ; } }
 466   &.wi-mediumsmall-lightwide  { input[type="text"], select, textarea, div.ck-editor { width: @textarea-wi-mediumsmall-lightwide ; } }
 467
 468   &.below       { input[type="text"], select, textarea, div.ck-editor { clear: both; margin-top: 0.4em  ; } }
 469
 470 }
 471 // TEMPORAER: PENDENT: sollte behoben sein, weshalb dieses Konstrukt nicht mehr noetig sein sollte
 472 td.wi-lightwide > span.customer_vendor_picker > input { width:     @input-wi-lightwide        ; }
 473 td.wi-wide      > span.customer_vendor_picker > input { width:     @input-wi-wide             ; }
 474 td.wi-wider     > span.customer_vendor_picker > input { width:     @input-wi-wider            ; }
 475
 476
 477
 478   // --------------------------------------
 479   // DATA-FORMAT
 480   // --------------------------------------
 481
 482   input,
 483   select {
 484     &.number  { text-align: right ; }
 485     &.numeric { text-align: right ; }
 486     &.right   { text-align: right ; }
 487   }
 488
 489
 490   input[type=text].emphasized {
 491     word-wrap:     break-word;
 492     word-break:   break-all;
 493     height:       auto;
 494     overflow:     hidden ;
 495   }
 496
 497
 498
 499
 500   // --------------------------------------
 501   // SPECIALS
 502   // --------------------------------------
 503
 504   // -------------------
 505   // Date picker Symbol (Jquery-UI)
 506   // normally placed after a input field within a table cell
 507
 508   td img.ui-datepicker-trigger{
 509     vertical-align: middle ;
 510     padding: 0 0.2em ;
 511   }
 512
 513
 514   td {
 515     div.rowspan-table{
 516       display:           table-row ;
 517       float:             left;
 518       margin:             0.8em 2.8em 0.8em 0 ;
 519       div.label-n-value{
 520         display:         table-cell ;
 521         vertical-align: middle;
 522         height:         1.6em !important ; // the cell have not the same height if they are made with DIVs
 523
 524         float: left;
 525         padding:         0 2.0em 0 0 ;
 526         //overflow: hidden ;
 527         b{
 528           font-weight:   normal;
 529           padding:       0 0 0 0 ;
 530         }
 531       }
 532     }
 533   }
 534
 535
 536   // --------------------------------------
 537   // MIXED FORM-TABLES
 538   // --------------------------------------
 539   // Tables with either Form Elements or Text in Cells
 540   // PENDENT: .data mit anderen Formular-Elementen zusammenfassen
 541   table td > span.data {
 542     display:      block;
 543     overflow:     hidden ;
 544     min-height:   (@font-size-smaller * 1.7); // 1.6em
 545     font-size:     @font-size-smaller ;
 546     color:         @t-cell-databox-text-color ;
 547     border:       1px @t-cell-databox-border-color solid;
 548     margin:       0 ;
 549     line-height:  120%;
 550     padding:      0.2em 0.28em 0.2em @padding-databoxes-left !important;
 551
 552     &::before{
 553       //content: "" ;
 554     }
 555     &.below{
 556       margin-top: 0.2em;
 557     }
 558     &.numeric,
 559     &.right{
 560       text-align: right;
 561     }
 562
 563     // Dimensions
 564     &.wi-smallest    { width: @input-wi-smallest    ; }
 565     &.wi-verysmall   { width: @input-wi-verysmall   ; }
 566     &.wi-small       { width: @input-wi-small       ; }
 567     &.wi-mediumsmall { width: @input-wi-mediumsmall ; }
 568     &.wi-normal      { width: @input-wi-normal      ; }
 569     &.wi-lightwide   { width: @input-wi-lightwide   ; }
 570     &.wi-wide        { width: @input-wi-wide        ; }
 571
 572     // Data Types
 573     &.numeric { text-align: right ; }
 574     &.right   { text-align: right ; }
 575
 576   }
 577
 578
 579
 580   // -------------------
 581   // Boxes
 582   //
 583
 584   div.boxes{
 585     margin: 0 0 0.9em 0 ;
 586     overflow: hidden ;
 587     max-width: 800px ;
 588
 589     // Additional
 590     // There are also some Checkboxes for "Select All"
 591     h3 {
 592       padding: 0.2em 0 0.2em 0.0em;
 593
 594       label{
 595         //float: right;
 596         float: left;
 597         width: 88% ;
 598         font-size: @h3-size ;
 599         padding: 0 0 0.6em 0.2em ;
 600         line-height: 1.2em ;
 601       }
 602     }
 603
 604
 605     &>div{
 606       clear:       both;
 607       margin:     0 0 0.6em 0 ;
 608       padding:     0;
 609       display:     block ;
 610       overflow:   hidden ;
 611       label{
 612         float:     left;
 613         width:     88% ;
 614       }
 615       input[type="checkbox"],
 616       input[type="radio"]{
 617         float:           left;
 618         margin-right:   0.6em ;
 619       }
 620     }
 621   }
 622
 623   // -------------------
 624   // Boxes horizontal
 625   //
 626
 627   td.horizontal {
 628     input[type="radio"],
 629     input[type="checkbox"]{
 630       float:     left !important;
 631       clear:     none !important;
 632       width:     auto;
 633     }
 634     label{
 635       width:           auto !important;
 636       margin-right:   2.0em ;
 637       float:           left !important;
 638       clear:           none !important;
 639     }
 640   }
 641
 642
 643
 644
 645
 646
 647
 648 // --------------------------------------
 649 // CHECKBOXES & LABELS WITHIN DIVS
 650 // --------------------------------------
 651
 652 table.tbl-horizontal,
 653 table.tbl-list,
 654 table.tbl-plain {
 655   th {
 656     label{
 657       display: inline-block;
 658
 659 //      &:link,
 660 //      &:visited {
 661 //        color: @gray-standard ;
 662 //        text-decoration: none ;
 663 //      }
 664 //      &:hover{
 665 //        color: #777 ;
 666 //        text-decoration: underline;
 667 //      }
 668     }
 669   }
 670   td{
 671     input[type="radio"],
 672     input[type="checkbox"]{
 673       float: left;
 674       clear: left;
 675       &~label{
 676         float: left;
 677         width: auto;
 678         margin-left: 0.2em ;
 679         line-height: 1.4em ;
 680         //clear: left;
 681       }
 682     }
 683     // Date-Field generated by the function L.Date_Tag
 684     span.wi-date {
 685       padding: 0 ;
 686       input[type="text"],
 687       input[type="date"]{
 688         width: @input-wi-small ;
 689       }
 690     }
 691   }
 692   td.clear{
 693     input[type="radio"],
 694     input[type="checkbox"]{
 695       float: none;
 696       &~label{
 697         float: none;
 698       }
 699     }
 700   }
 701 }
 702
 703
 704 // --------------------------------------
 705 // FAKE-ELEMENTS
 706 // --------------------------------------
 707 // Yes, there exists some foolery
 708 // Substitution for Elements as readonly containers
 709 div.fake-textarea {
 710   width: @textarea-wi-lightwide;
 711   height: 150px;
 712   background-color: white;
 713   overflow: auto;
 714   border: 1px #999999 solid;
 715
 716   &.fake-wi-wide { width: @textarea-wi-wide ; }
 717 }
 718
 719
 720
 721
 722 // especially in the admin section
 723
 724 div.admin{
 725   form{
 726     font-size: @font-size-small ;
 727     input[type="checkbox"] {
 728       margin: 0.2em 0.6em 0.3em 0 ;
 729       float: left;
 730     }
 731     h3{
 732       margin: 1.2em 0 0.6em 0 ;
 733       display: block;
 734     }
 735   }
 736 }
 737
 738 // --------------------------------------
 739 // jQuery-Plugins for forms
 740 // --------------------------------------
 741
 742 // MultiSelect2Side
 743 .ms2side {
 744   display: block;
 745   overflow: hidden;
 746
 747   p {
 748     margin: 0 0 0.4em 0 ;
 749   }
 750
 751   .ms2side__div {
 752
 753     .ms2side__header {
 754       width: 12.0em ;
 755       height: 2.2em ;
 756       display: table-cell;
 757       vertical-align: bottom;
 758     }
 759
 760     .ms2side__options > p.ms2side__hide,
 761     .ms2side__updown  > p.ms2side__hide {
 762       cursor: default;
 763       color: #9e9e9e;
 764       border: 1px solid grey;
 765       background-color: #D4D4D4 !important;
 766     }
 767
 768   }
 769
 770 }
 771
 772 // --------------------------------------
 773 // PLACEHOLDER-TEXT
 774 // --------------------------------------
 775
 776 .frame-header-quicksearch input::placeholder {
 777   color: @gray-darker ; // improved contrast
 778 }
 779
 780 #content input::placeholder {
 781   color: @gray-darker ;  // improved contrast
 782 }
 783
 784
 785
 786 // --------------------------------------
 787 // JQUERY-CONTAINERS FOR FIELDS
 788 // --------------------------------------
 789 // PENDENT: gehoert in Tables
 790 span.customer_vendor_picker {
 791   padding: 0 ;
 792 }
 793 input#vendor_id_name.ui-autocomplete-input,
 794 input#customer_id_name.ui-autocomplete-input {
 795   margin: 0 ;
 796   &.wi-wide{
 797     width: @input-wi-wide  ;
 798   }
 799 }
 800
 801 // --------------------------------------
 802 // DIVERS JQUERY-/AJAX-STUFF
 803 // --------------------------------------
 804
 805 table td span.project_picker {
 806   padding: 0 !important;
 807 }