css/design40/less/tables.less

   1 /* ------------------------------------------------------------- */
   2 /* tables (tables.less)                                          */
   3 /* ------------------------------------------------------------- */
   4
   5 //----------------------------------------------------------------------------
   6 //
   7 //  tables
   8 //
   9 //----------------------------------------------------------------------------
  10 //  description: for all kind of tables in #content
  11 //
  12 //  contents:
  13 //  - TABLE
  14 //  - CELLS (TD & TH)
  15 //    - Data format
  16 //    - Headings (within TD & TH)
  17 //    - Links (within TD & TH)
  18 //    - Images within cells
  19 //    - Description & labels within cells
  20 //    - TD
  21 //    - TH
  22 //    - TR (Table row)
  23 //  - thead
  24 //  - tbody
  25 //  - tfoot
  26 //  - caption
  27 //  - headings (print style)
  28 //  - colgroup & cols
  29 //    - dimensions for table colums (col)
  30 //  - table list
  31 //  - table plain
  32 //  - table horizontal
  33 //  - table dialog
  34 //  - table class test
  35 //  - dimensions (classes) for tables
  36 //  - links
  37 //  - headings
  38 //  - subtotals
  39 //
  40 //  - tables in requirement specs
  41 //  - tables with divs
  42 //  - list with paragraphs
  43 //----------------------------------------------------------------------------
  44
  45
  46
  47 // ----------------------------------------------------------------------------
  48 //
  49 // TABLE
  50 //
  51 // ----------------------------------------------------------------------------
  52 //
  53 table {
  54   //font-size: @font-size-base ;
  55   table-layout: auto ;
  56   border-spacing: 1px ;
  57
  58
  59   //--------------------------------------
  60   //  CELLS (TD & TH)
  61   //--------------------------------------
  62   td,
  63   th {
  64     text-align: left ;
  65     vertical-align: top ;
  66     //font-size: @font-size-smaller ;
  67     font-weight: normal ;
  68
  69
  70     // -----------------------
  71     //  Data Format
  72     // -----------------------
  73     &.right             { text-align:      right  !important ; }
  74     &.center            { text-align:      center !important ;
  75       input             { float:           none   !important ; }
  76     }
  77     &.numeric           { text-align:      right  !important ; }
  78     &.numeric-centered  { text-align:      center !important ; }
  79     &.date              { text-align:      right  !important ; }
  80     // PENDENT: wo eingesetzt
  81     &.button            { text-align:      center !important ; }
  82     &.img               { text-align:      center !important ; }
  83     &.top               { vertical-align:  top    !important ; }
  84     // see also div.longdesc in main.css
  85     // PENDENT: mixin und variablen erstellen
  86     &.long-desc,
  87     &.long-description,
  88     &.longdesc,
  89     &.longdescription,
  90     div.description {
  91       font-size: 80% ;
  92       color: @t-cell-label-text ;
  93     }
  94     &.highlight { background-color: @t-row-zebra-bg-highlight ; }
  95     div.numeric           { text-align:      right  !important ; }
  96
  97     // -----------------------
  98     //  Headings (within TD & TH)
  99     // -----------------------
 100     // PENDENT: ueberpruefen
 101     h3,
 102     h4 {
 103       margin: 0 !important ;
 104       padding: 0.8em 0 0.2em 0 !important ;
 105     }
 106
 107     // -----------------------
 108     //  Links (within TD & TH)
 109     // -----------------------
 110     &> a { display: block ; }
 111
 112     // -----------------------
 113     //  Images Within Cells
 114     // -----------------------
 115     img {
 116       display:        inline ;
 117       vertical-align: top    ;
 118     }
 119     &+a img,
 120     &+img { float:    left   ; }
 121     &~a img,
 122     &~img { float:    right  ; }
 123
 124     img.row-icon {
 125       cursor: pointer;
 126       display: block;
 127       max-width: 16px;
 128       max-height: 16px;
 129     }
 130
 131     // -----------------------
 132     //  Description & Labels Within Cells
 133     // -----------------------
 134     div.description {
 135       float:     none ;
 136       clear:     both ;
 137     }
 138     & > input,
 139     & > select {
 140       & + div.description { margin-top: 0.4em ; }
 141     }
 142
 143     span {
 144       // simulates th in horizontal tables
 145       &.label {
 146         display:              block ;
 147         padding:              0 0 0.5em 0 ;
 148         color:                @t-cell-th-text-color ;
 149       }
 150       &.below {
 151         //clear: both ;
 152         overflow:             hidden ;
 153         display:              block ;
 154         input {
 155           margin:             0.6em 0 0 0 !important ;
 156           &[type="checkbox"]{ padding: 0.6em 0.6em 0 0 ;}
 157         }
 158       }
 159       &.above {
 160         //clear: both ;
 161         overflow: hidden ;
 162         display: block ;
 163         margin-bottom: 0.4em ;
 164         padding: 0.3em 0.3em 0 0 !important ;
 165       }
 166     }
 167
 168     // -----------------------
 169     //  Form Element Within Cells
 170     // -----------------------
 171
 172     // if a .below class follows directly after a td/th
 173     & + input.below {
 174       margin: 0 !important;
 175     }
 176
 177     input,
 178     select {
 179       //float: left ;
 180       &.below {
 181         display: block ;
 182         clear: left ;
 183         float: none ;
 184         overflow: hidden ;
 185         // PENDENT: anschauen! vor allem button customer information -> Lieferadresse
 186         margin: 0.3em 0 0 0 ;
 187       }
 188     }
 189
 190     textarea {
 191       margin: -0.14em -0.0em ;
 192     }
 193
 194   }
 195   //  /th, td
 196
 197
 198   //--------------------------------------
 199   //  TH (TABLE HEADER CELLS)
 200   //--------------------------------------
 201   th {
 202     white-space: normal !important ;
 203     // Header text vertically centered
 204     &.vmiddle {
 205       vertical-align: middle;
 206     }
 207   }
 208
 209   //--------------------------------------
 210   //  TD (TABLE DATA)
 211   //--------------------------------------
 212   td {
 213     color: @t-cell-text-color;
 214   }
 215
 216
 217   //--------------------------------------
 218   //  TR (TABLE ROW)
 219   //--------------------------------------
 220   tr {
 221     //  if header-cell is in the same row as a caption-header-cell (th.caption)
 222     &.header-caption th {
 223       vertical-align: bottom ;
 224     }
 225     &.separator {
 226       // standard separator is below
 227       th, td {
 228         padding-bottom: 3.0em ;
 229       }
 230       &.below {
 231         th, td {
 232           padding-bottom: 3.0em ;
 233         }
 234       }
 235       &.above {
 236         th, td {
 237           padding-top   : 3.0em ;
 238           padding-bottom: 0   ; // override .separator
 239         }
 240       }
 241     }
 242
 243     // -----------------------
 244     //  SUB-TOTALS
 245     // -----------------------
 246     //  PENDENT: ggf. obsolete
 247     &.total-sub {
 248       height: 2.0em ;
 249
 250       td {
 251         border-top: 1px solid @table-border-color ;
 252         border-bottom: 2px solid @table-border-color ;
 253         font-weight: bold ;
 254         color: @t-cell-text-color ;
 255       }
 256     }
 257     td.listsubtotal {
 258       height: 2.0em ;
 259       border-top: 1px solid @table-border-color ;
 260       border-bottom: 2px solid @table-border-color ;
 261       font-weight: bold ;
 262       color: @t-cell-text-color ;
 263     }
 264     td.listtotal {
 265       height: 2.0em ;
 266       border-top: 1px solid @table-border-color ;
 267       border-bottom: 2px solid @table-border-color ;
 268       font-weight: bold ;
 269       color: @t-cell-text-color ;
 270     }
 271
 272     // -----------------------
 273     //  HEADINGS (alternativ version [print style])
 274     // -----------------------
 275     // PENDENT: ueberpruefen
 276     &.heading th {
 277       font-size: 120% ;
 278       border-top: 1px @table-border-color solid ;
 279     }
 280
 281
 282   } // /tr
 283
 284
 285
 286   //--------------------------------------
 287   //  CAPTION
 288   //--------------------------------------
 289
 290   //  this must be placed here
 291   //  otherwise th.caption will be overridden if placed above
 292   caption,
 293   th.caption {
 294     .mx-h3-caption ; //   mixin
 295     white-space:       nowrap ;
 296     //  addition with smaller font-size
 297     small { font-size : @font-size-small ; }
 298   }
 299
 300
 301
 302   //--------------------------------------
 303   //  THEAD
 304   //--------------------------------------
 305   thead {
 306     th {
 307       .mx-thead-th ; //  mixin
 308
 309       a {
 310         img {
 311           vertical-align: middle ;
 312           padding: 0 ;
 313           margin: 0 ;
 314         }
 315       }
 316     }
 317   }
 318
 319
 320   //--------------------------------------
 321   //  TBODY
 322   //--------------------------------------
 323
 324   tbody {
 325     tr {
 326       //  common cells within tbody
 327       td {  }
 328       th {  }
 329     }
 330   }
 331
 332
 333   //--------------------------------------
 334   //  TFOOT
 335   //--------------------------------------
 336   tfoot {
 337     tr {
 338       th,
 339       td {
 340         vertical-align: middle ;
 341         border-bottom: @table-border-color 2px solid ;
 342         height: 1.8em ;
 343         padding-top: 0.6em !important;
 344         padding-bottom: 0.6em !important;
 345       }
 346       td {
 347         font-weight: bold ;
 348         color: @t-cell-foot-text ;
 349       }
 350       th {
 351         font-weight: normal ;
 352         color: @t-cell-foot-text ;
 353        }
 354       //  if more than one row in tfoot first row has other properties
 355       &:first {
 356         td,
 357         th { border-top: @table-border-color 2px solid ; }
 358       }
 359       // sometimes last row of a table with some links or buttons under a designated row
 360       &.blank {
 361           border: none !important ;
 362         th,
 363         td {
 364           border: none !important ;
 365         }
 366       }
 367     } //  /tr
 368     // this is just for expecption (eg. form in price-rules)
 369     // tfoot.blank
 370     &.blank {
 371       tr {
 372           border: none !important ;
 373           &:first-child {
 374             th, td { border-top: 1px solid @table-border-color !important ; }
 375           }
 376         th,
 377         td {
 378           border: none !important ;
 379         }
 380       }
 381     } // /tfoot.blank
 382   } //  /tfoot
 383
 384
 385
 386   //--------------------------------------
 387   //  COLGROUP & COLS
 388   //--------------------------------------
 389
 390   colgroup {
 391
 392     //  table columns
 393     //  only for background-color and width
 394     //  PENDENT: funktioniert text-ausrichtung?
 395     col {
 396       &.right     { text-align: right  ; }
 397       &.center    { text-align: center ; }
 398       &.long-desc { font-size:  70%    ; }
 399
 400       // -----------------------
 401       //  width of columns (dimensions)
 402       // -----------------------
 403       &.wi-smallest    { width: (@tcol-wi-smallest    ) ; }
 404       &.wi-verysmall   { width: (@tcol-wi-verysmall   ) ; }
 405       &.wi-small       { width: (@tcol-wi-small       ) ; }
 406       &.wi-mediumsmall { width: (@tcol-wi-mediumsmall ) ; }
 407       &.wi-normal      { width: (@tcol-wi-normal      ) ; }
 408       &.wi-lightwide   { width: (@tcol-wi-lightwide   ) ; }
 409       &.wi-wide        { width: (@tcol-wi-wide        ) ; }
 410       &.wi-wider       { width: (@tcol-wi-wider       ) ; }
 411       &.wi-verywide    { width: (@tcol-wi-verywide    ) ; }
 412     }
 413
 414
 415   }
 416
 417
 418
 419
 420   //--------------------------------------
 421   //  STANDARD KIVITENDO TABLES
 422   //--------------------------------------
 423
 424   &.tbl-horizontal,
 425   &.tbl-plain,
 426   &.tbl-list,
 427   &.tbl-list-plain {
 428     margin-bottom: 0.6em ;
 429     border-collapse: collapse ;
 430     border: none ;
 431
 432     tr td {
 433       &>span {
 434         //padding: 0.3em 0.3em 0.6em 0.3em ;
 435         padding: 0.3em 0.3em 0.6em 0 ;
 436       }
 437     }
 438   }
 439
 440
 441
 442
 443
 444   //--------------------------------------
 445   //  TABLE HORIZONTAL
 446   //--------------------------------------
 447
 448   &.tbl-horizontal {
 449
 450     th,
 451     td {
 452       background: none ;
 453       padding-top: 0.3em ;
 454       padding-right: 0.2em ;
 455       padding-bottom: 0.2em ;
 456       padding-left: 0.3em ;
 457
 458       // adjust form elements in this table type
 459       &>input[type="checkbox"],
 460       &>input[type="radio"] {
 461         margin: 0 0.3em 0.2em 0 !important ;
 462       }
 463       &>input,
 464       &>select {
 465         margin: -0.3em 1px 0 0 ;
 466         // if there are further form elements within a table cell separated with a linebreak br
 467         &.addition { margin-top: 0.3em !important ; }
 468       }
 469
 470       // in some cases labels can be placed within the same cell as the form element
 471       // best is to have it above the element
 472       // PENDENT: plazierung in less-dateien, ggf. ueberfluessig
 473       .label-above {
 474         display: block ;
 475         clear: both ;
 476         overflow: hidden ;
 477         margin-top: -0.5em ; // pendent: ansehen
 478         //height: 1.8em ; // pendent: besser loesen, gefaellt mir nicht
 479       }
 480       &.single-col {
 481         padding-top: 0 ;
 482         padding-bottom: 0 ;
 483       }
 484
 485       // form labels within table cells
 486       //label {
 487         //color: @t-cell-th-text-color ;
 488         //cursor: pointer ;
 489         //padding-top: 0.3em;
 490       //}
 491
 492     } // /td /th
 493
 494     th {
 495       color: @t-cell-th-text-color ;
 496       //vertical-align: top ;
 497       h4{
 498         margin: 0 ;
 499         padding: 0 ;
 500       }
 501     } // /th
 502
 503     td {
 504       // 2nd to x column with plain data
 505       // no form elements inside the cell
 506       //color: @t-cell-data-text;
 507       &.data {
 508         //padding: 0.4363em 0.3em 0.4363em @padding-databoxes-left ;
 509       }
 510
 511       & > span {
 512         padding: 0 ;
 513         margin:  0 ;
 514         &.wi-smallest    { width: (@input-wi-smallest    ) ; }
 515         &.wi-verysmall   { width: (@input-wi-verysmall   ) ; }
 516         &.wi-small       { width: (@input-wi-small       ) ; }
 517         &.wi-mediumsmall { width: (@input-wi-mediumsmall ) ; }
 518         &.wi-normal      { width: (@input-wi-normal      ) ; }
 519         &.wi-lightwide   { width: (@input-wi-lightwide   ) ; }
 520         &.wi-wide        { width: (@input-wi-wide        ) ; }
 521         &.wi-wider       { width: (@input-wi-wider       ) !important ; }
 522         &.wi-verywide    { width: (@input-wi-verywide    ) ; }
 523
 524         &.data,
 525         &.plain-data {
 526           //padding:        0.1em 0.3em 0.1em @padding-databoxes-left ;
 527           margin-top:    -0.2em ;
 528           display:        block ;
 529         }
 530         &.label {
 531           color:          @t-cell-th-text-color ;
 532           padding:        0 0.3em 0.5em 0 !important ;
 533           //display:        block ;
 534         }
 535         &.button-inline {
 536           margin:         0 !important ;
 537           padding:        0.3em 0 0 0 ;
 538           clear:          both ;
 539           display:        inline-block ;
 540           vertical-align: middle ;
 541
 542           input.button,
 543           input[type="button"],
 544           button,
 545           a.button {
 546             float:        left ;
 547             margin:       0 0.3em 0 0 !important ;
 548           }
 549         }
 550
 551         // special select-element
 552         &.customer_vendor_picker {
 553           padding:         0 !important ;
 554           margin:          0 !important ;
 555           display:        inline-block ;
 556         }
 557         &.project_picker {
 558           margin:        -0.3em 0 0 0 ;
 559         }
 560         // area input element
 561         &.area-input {
 562           padding:        0 !important ;
 563           margin:        -0.3em 1px 0 0 !important ;
 564         }
 565       } // / > span
 566
 567       &>div.data { padding: 0.1363em 0 ; }
 568       // pendent: braucht es das?
 569       // pendent: span nicht td
 570       .plus1 {
 571         display: inline-block ;
 572         padding: 0 ;
 573       }
 574       & > .condensed {
 575         padding: 0 !important ;
 576         margin: 0 ;
 577         input, select {
 578           margin-top: 0.2em ;
 579         }
 580       }
 581
 582       &>span.wi-small-wide { margin: 0 24px 0 0 ; display: block ; }
 583     }
 584
 585     // exception: thead in horizontal table
 586     // Caption!
 587     thead th {
 588 //      padding: 0.5em 0.4em 0.5em 0.3em ;
 589 //      font-weight: normal ;
 590 //      font-size: @h3-size ;
 591 //      color: @base-heading-color ;
 592       .mx-h3-caption ;
 593       border: none ;
 594     }
 595
 596
 597     // zebra effect
 598     // pendent: klasse .zebra hier wahrscheinlich kaum eingsetzt
 599     &.zebra {
 600       tbody {
 601         tr:nth-child(odd){
 602           background-color: @t-row-zebra-bg-odd ;
 603           th { background-color: @t-row-zebra-bg-odd  ; }
 604         }
 605         tr:nth-child(even){
 606           background-color: @t-row-zebra-bg-even ;
 607           th { background-color: @t-row-zebra-bg-even ; }
 608         }
 609       }
 610     } // /.zebra
 611
 612     // checkered (bordered) table
 613     &.checkered {
 614       border-collapse: collapse ;
 615       tbody {
 616         tr {
 617           background-color: @table-bg-accent ;
 618           //th { background-color: #fff ; }
 619           td, th {
 620             border-color:   @table-border-color ;
 621             border-width:   1px ;
 622             border-style:   solid ;
 623             padding:         0.3em 0.6em ;
 624           }
 625         }
 626       } // /tbody
 627     } // /.checkered
 628
 629     //PENDENT: ueberpruefen
 630     &.expanded {
 631       th.caption { padding-top: 1.2em ; padding-bottom: 0.6em ; }
 632     }
 633
 634   } // /.tbl-horizontal
 635
 636
 637
 638
 639
 640   //--------------------------------------
 641   //  LIST TABLES
 642   //--------------------------------------
 643
 644   &.tbl-plain,
 645   &.tbl-list,
 646   &.tbl-list-plain {
 647     tbody td a {
 648       display: inline-block !important ;
 649     }
 650   }
 651
 652
 653
 654
 655
 656   //--------------------------------------
 657   //  TABLE LIST (VERTICAL)
 658   //--------------------------------------
 659   //  table with zebra effect
 660   //  this table has at least a thead and a tbody
 661   //  optional a tfoot for totals
 662   &.tbl-list {
 663     border-spacing:       1px ;
 664     border-collapse:      collapse ;
 665     margin:               0 0 1.0em 0 ;
 666
 667     & > caption { margin: 0.1em 0 0.0em 0 ; }
 668     td,
 669     th {
 670       padding:            0.2em 0.4em ;
 671       white-space:        normal ;
 672       vertical-align:     middle ;
 673     }
 674     th {  }
 675     td {  }
 676
 677     // space left from window border
 678     & > thead > tr th:first-child,
 679     & > tbody > tr th:first-child,
 680     & > tfoot > tr td:first-child {
 681         padding-left:     0.8em !important ;
 682     }
 683
 684     thead {
 685       display: table-header-group;
 686
 687       tr {
 688         height:  2.2em ;
 689         th {
 690           .mx-thead-th ; // mixin
 691           &.nowrap { white-space: nowrap !important ; }
 692
 693           & > a {
 694             display: block ;
 695             &:link,
 696             &:visited {
 697               color:              @t-cell-head-text-accent ;
 698               text-decoration:    underline ;
 699             }
 700             &:hover {
 701               color:              @t-cell-head-text-accent ;
 702               text-decoration:    underline ;
 703             }
 704             &:active,
 705             &:focus {
 706               color:              @t-cell-head-text-accent ;
 707               text-decoration:    underline ;
 708             }
 709           } // /a
 710           label {
 711               color:              @t-cell-head-text-accent ;
 712               //text-decoration:  none ;
 713               &:hover {
 714                 //color:          @t-cell-head-text-accent ;
 715                 text-decoration:  underline ;
 716               }
 717           }
 718         } // /th
 719       } // tr
 720       &.links-condensed {
 721         tr th a { display: inline ; }
 722       }
 723     } // /thead
 724
 725     tbody {
 726       border-bottom:        @table-border-color 1px solid ;
 727       display:              table-row-group;
 728
 729       // zebra effect
 730       tr:nth-child(odd)                  { background-color:   @t-row-zebra-bg-odd      ; }
 731       tr:nth-child(even)                 { background-color:   @t-row-zebra-bg-even     ; }
 732
 733       tr:nth-child(odd).listrow_ok       { background-color:   @base-ok-bg              ; }
 734       tr:nth-child(even).listrow_ok      { background-color:   @base-ok-bg-lighter      ; }
 735
 736       tr:nth-child(odd).listrow_error    { background-color:   @base-error-bg           ; }
 737       tr:nth-child(even).listrow_error   { background-color:   @base-error-bg-lighter   ; }
 738
 739       // using a darker color variant here because the light one is almost invisible
 740       tr:nth-child(odd).listrow_info     { background-color:   @base-info-bg-darker     ; }
 741       tr:nth-child(even).listrow_info    { background-color:   @base-info-bg-dark       ; }
 742
 743       tr:nth-child(odd).listrow_warning  { background-color:   @base-warning-bg         ; }
 744       tr:nth-child(even).listrow_warning { background-color:   @base-warning-bg-lighter ; }
 745
 746       // pendent: funktioniert nicht
 747       & > tr:last-child > td {
 748         border-bottom:      1px @table-border-color solid !important ;
 749         //padding-left:     0.8em !important;
 750       }
 751       tr:hover {            background-color:   @t-row-zebra-bg-hover ; }
 752
 753       // zebra effect using manually set classes (overrides automatic from above)
 754       tr.listrow0         { background-color:   @t-row-zebra-bg-odd      !important ; }
 755       tr.listrow1         { background-color:   @t-row-zebra-bg-even     !important ; }
 756       tr.listrow_ok0      { background-color:   @base-ok-bg              !important ; }
 757       tr.listrow_ok1      { background-color:   @base-ok-bg-lighter      !important ; }
 758       tr.listrow_error0   { background-color:   @base-error-bg           !important ; }
 759       tr.listrow_error1   { background-color:   @base-error-bg-lighter   !important ; }
 760       // using a darker color variant here because the light one is almost invisible
 761       tr.listrow_info0    { background-color:   @base-info-bg-darker     !important ; }
 762       tr.listrow_info1    { background-color:   @base-info-bg-dark       !important ; }
 763       tr.listrow_warning0 { background-color:   @base-warning-bg         !important ; }
 764       tr.listrow_warning1 { background-color:   @base-warning-bg-lighter !important ; }
 765
 766       td, th {
 767         color:              @table-list-zebra-text-color ;
 768       }
 769     } // /tbody
 770
 771     tfoot {
 772       display: table-footer-group;
 773
 774       tr {
 775         th,
 776         td { }
 777       }
 778     } // /tfoot
 779
 780   } // /.tbl-list
 781
 782
 783
 784
 785
 786   //--------------------------------------
 787   //  TABLE PLAIN
 788   //--------------------------------------
 789   //  simple table without zebra effect
 790
 791   &.tbl-list-plain,
 792   &.tbl-plain {
 793     caption,
 794     th.caption {
 795       font-size:  120% !important ;
 796       margin:     0;
 797       padding:    0.6em 0 0.2em 0;
 798     }
 799
 800     thead,
 801     tbody {
 802       th,
 803       td { padding: 3px 0.3em 4px 0.3em !important ; }
 804     }
 805     thead {
 806       th {
 807         .mx-thead-th ; // mixin
 808       }
 809     }
 810
 811     tr {
 812       th,
 813       td { padding: 0.3em inherit 0.3em 0.3em ; }
 814       td { }
 815       th { }
 816     }
 817     // kompakt
 818     &.condensed {
 819       caption { padding-left: 0 ; }
 820       td, th {
 821         padding: 0.1em 7px 0.1em 1px ;
 822       }
 823     }
 824     // liniert
 825     &.lined {
 826       tr {
 827         border-bottom: 1px @table-border-color solid ;
 828         & > th,
 829         & > th {
 830           vertical-align: middle !important ;
 831         }
 832       }
 833     }
 834
 835   } // /.tbl-plain
 836
 837
 838   &.tbl-list-plain {
 839     thead th {
 840       border-top:    1px @table-border-color solid !important ;
 841       border-bottom: 1px @table-border-color solid ;
 842       font-weight:   bold ;
 843     }
 844     tbody {
 845       td,
 846       th { border-bottom: 1px @table-border-color solid ; }
 847     }
 848   }// /.tbl-list-plain
 849
 850
 851
 852
 853
 854   //--------------------------------------
 855   //  TABLE DIALOG
 856   //--------------------------------------
 857
 858   //  table within div-dialogs
 859   &.tbl-dialog {
 860     th,
 861     td {
 862       background-color: @gray-verylight ;
 863     }
 864     th {
 865       color: @t-cell-head-text ;
 866       font-size: @font-size-base ;
 867       vertical-align: top ;
 868     }
 869   }
 870
 871
 872   //--------------------------------------
 873   //  CLEAR-TABLE WITH NO FLOATING
 874   //--------------------------------------
 875   &.clear {
 876     float: none ;
 877     clear: both ;
 878   }
 879
 880
 881
 882   //--------------------------------------
 883   //  TABLE CLASS TEST
 884   //--------------------------------------
 885   //  use this class for reviewing your table html
 886
 887   &.test,
 888   &.test-plain {
 889
 890     th {
 891       background-color: #b3b3b3 ;
 892       color: @t-cell-text-color ;
 893       font-weight: normal ;
 894
 895       &.caption {
 896         background-color: #b3b3b3 ;
 897       }
 898     }
 899     td {
 900       background-color: #cfcdd2 ;
 901
 902       &.longdesc,
 903       &.longdescription,
 904       &.long-desc,
 905       &.long-description {
 906         border: 1px solid green !important ;
 907       }
 908     }
 909
 910     table {
 911       border: 1px #0000ff solid ;
 912       border-collapse: collapse ;
 913
 914       td, th {
 915         border: 1px #c20d18 dotted !important ;
 916       }
 917     }
 918
 919   } // /.test
 920
 921   &.test {
 922     //border: 1px @table-border-color solid ;
 923     //background-color: #bfd2ad ;
 924
 925     th {
 926       border: 1px @gray-dark solid !important ;
 927       background-color: #b3b3b3 ;
 928       color: #000 ;
 929       font-weight: normal ;
 930
 931       &.caption {
 932         background-color: @table-caption-bg ;
 933         //border: 1px solid red !important ;
 934       }
 935     }
 936     td {
 937       border: 1px #000 solid ;
 938       background-color: #cfcdd2 ;
 939
 940       &.longdesc,
 941       &.longdescription,
 942       &.long-desc,
 943       &.long-description {
 944         border: 1px solid green !important ;
 945       }
 946     }
 947
 948     table {
 949       border: 2px #0000ff solid ;
 950       border-collapse: collapse ;
 951
 952       td, th {
 953         border: 1px #c20d18 dotted !important ;
 954       }
 955     }
 956
 957   } // /.test
 958
 959
 960 }
 961 //  /table
 962
 963
 964
 965 //--------------------------------------
 966 // TABLE & COLS DIMENSIONS
 967 //--------------------------------------
 968
 969 table,
 970 table colgroup col {
 971
 972   &.wi-smallest    { width: @tcol-wi-smallest     ; }
 973   &.wi-verysmall   { width: @tcol-wi-verysmall    ; }
 974   &.wi-small       { width: @tcol-wi-small        ; }
 975   &.wi-mediumsmall { width: @tcol-wi-mediumsmall  ; }
 976   &.wi-normal      { width: @tcol-wi-normal       ; }
 977   &.wi-lightwide   { width: @tcol-wi-lightwide    ; }
 978   &.wi-wide        { width: @tcol-wi-wide         ; }
 979   &.wi-wider       { width: @tcol-wi-wider        ; }
 980   &.wi-verywide    { width: @tcol-wi-verywide     ; }
 981
 982   &.wi-small-small           { width: @tcol-wi-small + @tcol-wi-small ; }
 983   &.wi-small-mediumsmall     { width: @tcol-wi-small + @tcol-wi-mediumsmall ; }
 984   &.wi-small-normal          { width: @tcol-wi-small + @tcol-wi-normal ; }
 985   &.wi-small-lightwide       { width: @tcol-wi-small + @tcol-wi-lightwide ; }
 986   // pendent: noch genauer anschauen, sollte eigentlich nur für horizontale tabellen vorgesehen sein
 987   &.wi-small-wide            { width: @tcol-wi-small + @tcol-wi-wide + ( @diff-input-select )  ; }
 988   //&.wi-small-wide            { width: 460px ; }
 989   &.wi-small-wider           { width: @tcol-wi-small + @tcol-wi-wider ; }
 990   &.wi-small-verywide        { width: @tcol-wi-small + @tcol-wi-verywide ; }
 991
 992   &.wi-mediumsmall-small       { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
 993   &.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall + @tcol-wi-mediumsmall ; }
 994   &.wi-mediumsmall-normal      { width: @tcol-wi-mediumsmall + @tcol-wi-normal ; }
 995   &.wi-mediumsmall-lightwide   { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
 996   &.wi-mediumsmall-wide        { width: @tcol-wi-mediumsmall + @tcol-wi-wide ; }
 997   &.wi-mediumsmall-wider       { width: @tcol-wi-mediumsmall + @tcol-wi-wider ; }
 998   &.wi-mediumsmall-verywide    { width: @tcol-wi-mediumsmall + @tcol-wi-verywide ; }
 999
1000   &.wi-normal-small       { width: @tcol-wi-normal + @tcol-wi-small ; }
1001   &.wi-normal-mediumsmall { width: @tcol-wi-normal + @tcol-wi-mediumsmall ; }
1002   &.wi-normal-normal      { width: @tcol-wi-normal + @tcol-wi-normal ; }
1003   &.wi-normal-lightwide   { width: @tcol-wi-normal + @tcol-wi-lightwide ; }
1004   &.wi-normal-wide        { width: @tcol-wi-normal + @tcol-wi-wide ; }
1005   &.wi-normal-wider       { width: @tcol-wi-normal + @tcol-wi-wider ; }
1006   &.wi-normal-verywide    { width: @tcol-wi-normal + @tcol-wi-verywide ; }
1007
1008   &.wi-lightwide-small       { width: @tcol-wi-lightwide + @tcol-wi-small ; }
1009   &.wi-lightwide-mediumsmall { width: @tcol-wi-lightwide + @tcol-wi-mediumsmall ; }
1010   &.wi-lightwide-normal      { width: @tcol-wi-lightwide + @tcol-wi-normal ; }
1011   &.wi-lightwide-lightwide   { width: @tcol-wi-lightwide + @tcol-wi-lightwide ; }
1012   &.wi-lightwide-wide        { width: @tcol-wi-lightwide + @tcol-wi-wide ; }
1013   &.wi-lightwide-wider       { width: @tcol-wi-lightwide + @tcol-wi-wider ; }
1014   &.wi-lightwide-verywide    { width: @tcol-wi-lightwide + @tcol-wi-verywide ; }
1015
1016 }
1017
1018 table {
1019   &.width-full,
1020   &.full-width,
1021   &.wi-full { width: 100% ; }
1022
1023   //  moderate width with padding on the right side
1024   &.width-moderate,
1025   &.moderate-width,
1026   &.wi-moderate {
1027     width: auto ;
1028     td,
1029     th {
1030       // PENDENT: vielleicht in pixeln angeben, statt in ems (siehe tbl-plain)
1031       padding-left: 0.6em ;
1032       padding-right: 1.2em ;
1033     }
1034   }
1035 }
1036
1037
1038
1039 //--------------------------------------
1040 //  LIST-TABLES IN WRAPPERS
1041 //--------------------------------------
1042 // creates a border on the left & right side of the table
1043 div.wrapper,
1044 div.cols {
1045   table.tbl-list tr {
1046     border-left: 1px solid @table-border-color ;
1047     border-right: 1px solid @table-border-color ;
1048   }
1049 }
1050
1051 //--------------------------------------
1052 //  LIST-TABLES NOT IN WRAPPERS
1053 //--------------------------------------
1054 #content .ui-tabs-panel > table.tbl-list caption {
1055   //margin-left: @margin-from-panel-left - 0.2em ;
1056   margin-left: 0.3em ;
1057 }
1058 #content {
1059   .ui-tabs-panel > table.tbl-list caption {
1060     //margin-left: @margin-from-panel-left - 0.2em ;
1061     margin-left: 0.3em ;
1062   }
1063
1064   & > table.tbl-plain,
1065   & > table.tbl-list-plain {
1066     margin-top: 1.0em ;
1067   }
1068 }
1069
1070
1071 // --------------------------------------
1072 // SORT SYMBOLS
1073 // --------------------------------------
1074
1075 span.sort {
1076   display: inline-block ;
1077   height: 100% ;
1078   vertical-align: top;
1079   padding-top: 6px;
1080 }
1081 span.sort_symbol {
1082   display: inline-block ;
1083   width: 10px ;
1084   padding: 0 ;
1085   margin: 0 10px 0 0 ;
1086   a {
1087     display: block ;
1088     width: 8px ;
1089     height: 8px ;
1090     font-size: 7pt ;
1091     padding: 0 0 3px 0 ;
1092     margin: 0 ;
1093     text-align: center ;
1094     clear: both ;
1095     float: none ;
1096     vertical-align: top ;
1097     &.ascending {
1098       border-top:    1px @table-border-color solid ;
1099       border-right:  1px @table-border-color solid ;
1100       border-left:   1px @table-border-color solid ;
1101     }
1102     &.descending {
1103       border-right:  1px @table-border-color solid ;
1104       border-bottom: 1px @table-border-color solid ;
1105       border-left:   1px @table-border-color solid ;
1106     }
1107     &.active {
1108        //background-color: #000000 ;
1109        color: #ffffff ;
1110     }
1111     &:link,
1112     &:visited{
1113       color: @base-light ;
1114     }
1115   }
1116 }
1117
1118
1119
1120
1121
1122 //--------------------------------------
1123 // SPECIFIX TABLES (#REPORT_TABLE)
1124 //--------------------------------------
1125 // Ueberpruefen
1126 table#report_table_id.tbl-list {
1127   & > tbody > tr > td { vertical-align: top ; }
1128 }
1129
1130
1131
1132 //  Benutzerdefinierte Tabellen-Angaben
1133 //  Diese uebersteuern alle Anweisungen aus tables.less
1134 //  Es dürfen nur Tabellen mit Zusatzklassen oder mit IDs uebersteuert werden.
1135 //  Uebersteuern Sie nur wenige, bestehende Elemente, um ein einheitliches
1136 //  Design zu gewaehrleisten
1137 //  Diese Datei wird am Schluss von tables.less includiert.
1138
1139 table{
1140
1141     //  Zusatzklasse zur Tabelle (Beispiel)
1142     //  Betreff: xyz
1143     //  Autor: hanspeter.schlaepfer@revamp-it.ch
1144     &.meine-tabellen-klasse {
1145
1146     }
1147
1148     //  Tabelle mit spezieller ID (Beispiel)
1149     //  Betreff: xyz
1150     //  Autor: hanspeter.schlaepfer@revamp-it.ch
1151     &#meine-spezielle-tabelle {
1152
1153     }
1154
1155
1156     //  Tabelle mit Konten-Uebersicht (Kontoplan)
1157     //  Betreff: Kontoplan
1158     //  Autor: hanspeter.schlaepfer@revamp-it.ch
1159     &#konten-plan {
1160         tbody tr{
1161             td:first-child {
1162                 text-align: right !important;
1163             }
1164             &.heading td {
1165                 font-size: @font-size-large;
1166                 border-top: 1px #999 solid;
1167             }
1168         }
1169         tr:first-child {
1170              &.heading td {
1171                 border: none;
1172             }
1173         }
1174     }
1175
1176
1177 // PENDENT: genauer anschauen
1178
1179   &#eurtable {
1180     border-collapse: collapse;
1181     width: 100%;
1182   }
1183
1184   tr.category {
1185     //  background set via jquery
1186   }
1187
1188   tr.chart {
1189     border: 0;
1190   }
1191
1192   td.chartname {
1193     padding-left: 50px;
1194   }
1195
1196   tr.chartrow {
1197     font-size: 75%;
1198   }
1199
1200   .guv_row_background {
1201     background:#f0f0f0;
1202   }
1203
1204   .tr_error {
1205     background-color: #ffc9c9;
1206   }
1207
1208
1209 }