Revision e7c11f83
Von Hans Peter Schlaepfer vor mehr als 6 Jahren hinzugefügt
| css/less/tables.less | ||
|---|---|---|
| 129 | 129 |
// -------------- |
| 130 | 130 |
// Images within Cells |
| 131 | 131 |
// |
| 132 |
|
|
| 133 | 132 |
img{
|
| 134 | 133 |
//display: inline-block ; |
| 135 | 134 |
display: inline ; |
| ... | ... | |
| 189 | 188 |
// -------------- |
| 190 | 189 |
// TD (Table Data) |
| 191 | 190 |
// |
| 192 |
td {
|
|
| 193 |
|
|
| 194 |
} |
|
| 191 |
td {}
|
|
| 195 | 192 |
|
| 196 | 193 |
|
| 197 | 194 |
// -------------- |
| ... | ... | |
| 202 | 199 |
&.header-caption th{
|
| 203 | 200 |
vertical-align: bottom ; |
| 204 | 201 |
} |
| 205 |
|
|
| 206 | 202 |
} |
| 207 | 203 |
|
| 208 | 204 |
|
| ... | ... | |
| 267 | 263 |
border-top: #000 2px solid ; |
| 268 | 264 |
} |
| 269 | 265 |
} |
| 270 |
|
|
| 271 |
// normaly last row of a table with some links or buttons under a designated row
|
|
| 266 |
|
|
| 267 |
// normaly last row of a table with some links or buttons under a designated row |
|
| 272 | 268 |
&.blank {
|
| 273 |
th,
|
|
| 269 |
th, |
|
| 274 | 270 |
td {
|
| 275 |
border: none !important ;
|
|
| 271 |
border: none !important ; |
|
| 276 | 272 |
} |
| 277 | 273 |
} |
| 278 | 274 |
} // /tr |
| ... | ... | |
| 349 | 345 |
// Table with Zebra Effect |
| 350 | 346 |
// This table has at least a THEAD and a TBODY |
| 351 | 347 |
// Optional a TFOOT for Totals |
| 352 |
|
|
| 353 | 348 |
&.tbl-list {
|
| 354 | 349 |
border-spacing: 1px; |
| 355 | 350 |
border-collapse: collapse ; |
| ... | ... | |
| 403 | 398 |
&.tbl-plain{
|
| 404 | 399 |
caption, |
| 405 | 400 |
th.caption { font-size: 80% !important; }
|
| 406 |
|
|
| 401 |
|
|
| 407 | 402 |
th, |
| 408 | 403 |
td{ padding-right: 0.8em; }
|
| 409 | 404 |
|
| ... | ... | |
| 425 | 420 |
|
| 426 | 421 |
&.tbl-list-plain {
|
| 427 | 422 |
thead th {
|
| 428 |
border-top: 1px #000 solid !important;
|
|
| 429 |
border-bottom: 1px #000 solid;
|
|
| 423 |
border-top: 1px #000 solid !important; |
|
| 424 |
border-bottom: 1px #000 solid; |
|
| 430 | 425 |
font-weight: bold; |
| 431 | 426 |
} |
| 432 | 427 |
tbody {
|
| ... | ... | |
| 448 | 443 |
td{
|
| 449 | 444 |
background: none; |
| 450 | 445 |
padding: 0.5em 0.8em 0.2em 0.2em; |
| 451 |
|
|
| 446 |
|
|
| 452 | 447 |
// Adjust Form Elements in this table type |
| 453 | 448 |
&>input[type="checkbox"], |
| 454 | 449 |
&>input[type="radio"] {
|
| ... | ... | |
| 460 | 455 |
// if there are further form elements within a table cell separated with a Linebreak BR |
| 461 | 456 |
&.addition { margin-top: 0.3em !important; }
|
| 462 | 457 |
} |
| 458 |
|
|
| 459 |
// In some cases labels can be placed within the same cell as the form element |
|
| 460 |
// best is to have it above the element |
|
| 461 |
.label-above{
|
|
| 462 |
display: block; |
|
| 463 |
clear: both ; |
|
| 464 |
overflow: hidden; |
|
| 465 |
height: 1.8em ; // PENDENT: besser loesen, gefaellt mir nicht |
|
| 466 |
} |
|
| 463 | 467 |
|
| 464 | 468 |
} |
| 465 | 469 |
|
| ... | ... | |
| 468 | 472 |
vertical-align: top; |
| 469 | 473 |
padding-top: 0.5em ; |
| 470 | 474 |
} |
| 471 |
|
|
| 472 |
td{ }
|
|
| 475 |
|
|
| 476 |
td{
|
|
| 477 |
// 2nd to x column with plain data (no form elements) |
|
| 478 |
span.plain-data{
|
|
| 479 |
padding: 0.3em 0.3em 0.6em 0.3em ; |
|
| 480 |
} |
|
| 481 |
} |
|
| 473 | 482 |
|
| 474 | 483 |
caption, |
| 475 | 484 |
th.caption{
|
| 476 | 485 |
padding: 0.8em 0 0.2em 0.2em; |
| 477 | 486 |
} |
| 478 |
|
|
| 487 |
|
|
| 479 | 488 |
&.zebra {
|
| 480 | 489 |
tbody{
|
| 481 | 490 |
tr:nth-child(odd){
|
| ... | ... | |
| 484 | 493 |
tr:nth-child(even){
|
| 485 | 494 |
background-color: #ececec ; |
| 486 | 495 |
} |
| 487 |
}
|
|
| 496 |
} |
|
| 488 | 497 |
} |
| 489 |
|
|
| 498 |
|
|
| 499 |
|
|
| 500 |
|
|
| 501 |
|
|
| 502 |
|
|
| 503 |
|
|
| 504 |
|
|
| 490 | 505 |
} // /.tbl-horizontal |
| 491 | 506 |
|
| 492 | 507 |
|
| ... | ... | |
| 516 | 531 |
// -------------------------------------- |
| 517 | 532 |
// TABLE CLASS TEST |
| 518 | 533 |
// -------------------------------------- |
| 519 |
// Use it for controlling your Table HTML
|
|
| 520 |
|
|
| 534 |
// Use this class for reviewing your Table HTML
|
|
| 535 |
|
|
| 521 | 536 |
&.test{
|
| 522 |
background-color: #CCFF99; |
|
| 523 |
|
|
| 537 |
border: 2px #000 solid ; |
|
| 538 |
background-color: #BFD2AD; |
|
| 539 |
|
|
| 524 | 540 |
th{
|
| 525 |
border: 1px solid red !important; |
|
| 541 |
border-width: 1px !important; |
|
| 542 |
background-color: #C20D18; |
|
| 543 |
color: #FFD9C3 ; |
|
| 544 |
font-weight: bold ; |
|
| 526 | 545 |
|
| 527 | 546 |
&.caption {
|
| 528 |
border: 3px solid red !important; |
|
| 547 |
border: 3px solid red !important;
|
|
| 529 | 548 |
} |
| 530 | 549 |
} |
| 531 | 550 |
td{
|
| 532 |
border: 1px solid blue !important; |
|
| 551 |
border: 1px solid blue !#FF9D58; |
|
| 552 |
background-color: #F7CC94; |
|
| 533 | 553 |
|
| 534 | 554 |
&.longdesc, |
| 535 | 555 |
&.longdescription, |
| ... | ... | |
| 538 | 558 |
border: 1px solid green !important; |
| 539 | 559 |
} |
| 540 | 560 |
} |
| 561 |
|
|
| 562 |
table {
|
|
| 563 |
border: 2px #0000FF solid ; |
|
| 564 |
border-collapse: collapse; |
|
| 565 |
|
|
| 566 |
td, th{
|
|
| 567 |
border: 1px #C20D18 dotted !important; |
|
| 568 |
} |
|
| 569 |
} |
|
| 570 |
|
|
| 541 | 571 |
} // /.test |
| 542 | 572 |
|
| 543 | 573 |
|
| ... | ... | |
| 611 | 641 |
|
| 612 | 642 |
|
| 613 | 643 |
// -------------------------------------- |
| 614 |
// TABLES in Content-Blocks
|
|
| 644 |
// LIST-TABLES in Wrappers
|
|
| 615 | 645 |
// -------------------------------------- |
| 616 | 646 |
|
| 617 | 647 |
div.pad-wrapper, |
| ... | ... | |
| 717 | 747 |
width: auto: |
| 718 | 748 |
padding: 0 2.0em 0 0; |
| 719 | 749 |
margin: 0; |
| 720 |
background-color: #6FC;
|
|
| 721 |
|
|
| 750 |
background-color: #6FC; |
|
| 751 |
|
|
| 722 | 752 |
} |
| 723 | 753 |
div.cells{
|
| 724 | 754 |
float: left; |
| 725 | 755 |
display: block; |
| 726 | 756 |
overflow: hidden; |
| 727 | 757 |
width: 100%; |
| 728 |
background-color: #F66;
|
|
| 729 |
|
|
| 758 |
background-color: #F66; |
|
| 759 |
|
|
| 730 | 760 |
div.cell{
|
| 731 | 761 |
float: left; |
| 732 | 762 |
padding: 0 2.0em 0 0; |
| 733 |
border-right: 1px #fff solid;
|
|
| 734 |
background-color: #FC6;
|
|
| 763 |
border-right: 1px #fff solid; |
|
| 764 |
background-color: #FC6; |
|
| 735 | 765 |
} |
| 736 | 766 |
} |
| 737 |
} |
|
| 767 |
} |
|
| 768 |
|
|
| 769 |
|
|
| 770 |
|
|
| 771 |
// -------------------------------------- |
|
| 772 |
// Medienabfragen und Beruecksichtigungen Plattformen |
|
| 773 |
// -------------------------------------- |
|
| 774 |
// Handheld Hochformat width: 320px |
|
| 775 |
@media screen and (max-device-width: 479px) {
|
|
| 776 |
|
|
| 777 |
} |
|
| 778 |
// Handheld Querformat width: 480px |
|
| 779 |
@media screen and (min-device-width: 480px) and (max-device-width: 767px) {
|
|
| 780 |
|
|
| 781 |
} |
|
| 782 |
// Tablet Hochformat |
|
| 783 |
@media screen and (min-device-width: 768px) and (max-device-width: 1023px) {
|
|
| 784 |
//colgroup col:first-child, |
|
| 785 |
.tbl-horizontal th{
|
|
| 786 |
// -------------- |
|
| 787 |
// Width of Columns (Dimensions) |
|
| 788 |
// |
|
| 789 |
&.wi-smallest { width: @tcol-wi-normal !important ; }
|
|
| 790 |
&.wi-verysmall { width: @tcol-wi-normal !important ; }
|
|
| 791 |
&.wi-small { width: @tcol-wi-normal !important ; }
|
|
| 792 |
&.wi-mediumsmall { width: @tcol-wi-normal !important ; }
|
|
| 793 |
&.wi-normal { width: @tcol-wi-normal !important ; }
|
|
| 794 |
&.wi-lightwide { width: @tcol-wi-normal !important ; }
|
|
| 795 |
&.wi-wide { width: @tcol-wi-normal !important ; }
|
|
| 796 |
&.wi-wider { width: @tcol-wi-normal !important ; }
|
|
| 797 |
&.wi-verywide { width: @tcol-wi-normal !important ; }
|
|
| 798 |
} |
|
| 799 |
} |
|
| 800 |
// < Tablet Querformat |
|
| 801 |
@media screen and (max-device-width: 1024px) {
|
|
| 802 |
.tbl-horizontal th{
|
|
| 803 |
// -------------- |
|
| 804 |
// Width of Columns (Dimensions) |
|
| 805 |
// |
|
| 806 |
&.wi-smallest { width: @tcol-wi-normal !important ; }
|
|
| 807 |
&.wi-verysmall { width: @tcol-wi-normal !important ; }
|
|
| 808 |
&.wi-small { width: @tcol-wi-normal !important ; }
|
|
| 809 |
&.wi-mediumsmall { width: @tcol-wi-normal !important ; }
|
|
| 810 |
&.wi-normal { width: @tcol-wi-normal !important ; }
|
|
| 811 |
&.wi-lightwide { width: @tcol-wi-normal !important ; }
|
|
| 812 |
&.wi-wide { width: @tcol-wi-normal !important ; }
|
|
| 813 |
&.wi-wider { width: @tcol-wi-normal !important ; }
|
|
| 814 |
&.wi-verywide { width: @tcol-wi-normal !important ; }
|
|
| 815 |
} |
|
| 816 |
} |
|
| 817 |
// Normale Bildschirme |
|
| 818 |
@media screen and (min-device-width: 1260px) {
|
|
| 819 |
|
|
| 820 |
} |
|
| 821 |
|
|
| 822 |
|
|
| 823 |
|
|
| 824 |
|
|
| 825 |
|
|
Auch abrufbar als: Unified diff
Anpassungen für die Präsentation am kivitendo Treffen April 2018