Revision d25334c6
Von Hans Peter Schlaepfer vor mehr als 6 Jahren hinzugefügt
| css/less/tables.less | ||
|---|---|---|
| 89 | 89 |
&.date {
|
| 90 | 90 |
text-align: right !important ; |
| 91 | 91 |
} |
| 92 |
// PENDENT: wo eingesetzt |
|
| 92 | 93 |
&.button {
|
| 93 | 94 |
text-align: center !important ; |
| 94 | 95 |
} |
| ... | ... | |
| 156 | 157 |
} |
| 157 | 158 |
|
| 158 | 159 |
// PENDENT: vielleicht noetig? |
| 160 |
// PENDENT: Gut anschauen, geistert ein wenig ueberall im Code herum |
|
| 159 | 161 |
span {
|
| 160 | 162 |
&.label{
|
| 161 |
font-style: italic ;
|
|
| 163 |
font-style: normal ;
|
|
| 162 | 164 |
font-size: 90% ; |
| 163 |
color: #999 ; |
|
| 165 |
color: @t-cell-head-text ; |
|
| 166 |
} |
|
| 167 |
&.below{
|
|
| 168 |
//clear: both; |
|
| 169 |
overflow: hidden; |
|
| 170 |
display: block ; |
|
| 171 |
|
|
| 172 |
input{
|
|
| 173 |
margin: 0 !important; |
|
| 174 |
&[type="checkbox"]{ padding: 0.6em 0.6em 0 0 ;}
|
|
| 175 |
} |
|
| 176 |
} |
|
| 177 |
&.above{
|
|
| 178 |
//clear: both; |
|
| 179 |
overflow: hidden; |
|
| 180 |
display: block ; |
|
| 181 |
margin-bottom: 0.4em ; |
|
| 182 |
|
|
| 164 | 183 |
} |
| 165 | 184 |
} |
| 166 | 185 |
|
| ... | ... | |
| 172 | 191 |
input, |
| 173 | 192 |
select {
|
| 174 | 193 |
//float: left; |
| 194 |
&.below {
|
|
| 195 |
display: block; |
|
| 196 |
clear: left; |
|
| 197 |
float: none; |
|
| 198 |
overflow: hidden ; |
|
| 199 |
margin: 0.3em 0 0 0 !important; |
|
| 200 |
} |
|
| 201 |
} |
|
| 202 |
textarea{
|
|
| 203 |
margin: -0.14em -0.0em ; |
|
| 175 | 204 |
} |
| 176 | 205 |
|
| 177 | 206 |
} |
| ... | ... | |
| 311 | 340 |
// COLGROUP & COLS |
| 312 | 341 |
// -------------------------------------- |
| 313 | 342 |
|
| 314 |
colgroup{ }
|
|
| 315 |
|
|
| 316 |
// Table Columns |
|
| 317 |
// only for background-color and width |
|
| 318 |
// PENDENT: funktioniert Text-Ausrichtung? |
|
| 319 |
col{
|
|
| 320 |
&.right { text-align: right; }
|
|
| 321 |
&.center { text-align: center; }
|
|
| 322 |
&.long-desc { font-size: 70% ; }
|
|
| 343 |
colgroup{
|
|
| 344 |
|
|
| 345 |
// Table Columns |
|
| 346 |
// only for background-color and width |
|
| 347 |
// PENDENT: funktioniert Text-Ausrichtung? |
|
| 348 |
col{
|
|
| 349 |
&.right { text-align: right; }
|
|
| 350 |
&.center { text-align: center; }
|
|
| 351 |
&.long-desc { font-size: 70% ; }
|
|
| 352 |
|
|
| 353 |
// -------------- |
|
| 354 |
// Width of Columns (Dimensions) |
|
| 355 |
// |
|
| 356 |
&.wi-smallest { width: (@tcol-wi-smallest ) ; }
|
|
| 357 |
&.wi-verysmall { width: (@tcol-wi-verysmall ) ; }
|
|
| 358 |
&.wi-small { width: (@tcol-wi-small ) ; }
|
|
| 359 |
&.wi-mediumsmall { width: (@tcol-wi-mediumsmall ) ; }
|
|
| 360 |
&.wi-normal { width: (@tcol-wi-normal ) ; }
|
|
| 361 |
&.wi-lightwide { width: (@tcol-wi-lightwide ) ; }
|
|
| 362 |
&.wi-wide { width: (@tcol-wi-wide ) ; }
|
|
| 363 |
&.wi-wider { width: (@tcol-wi-wider ) ; }
|
|
| 364 |
&.wi-verywide { width: (@tcol-wi-verywide ) ; }
|
|
| 365 |
} |
|
| 323 | 366 |
|
| 324 | 367 |
|
| 325 |
// -------------- |
|
| 326 |
// Width of Columns (Dimensions) |
|
| 327 |
// |
|
| 328 |
&.wi-smallest { width: (@tcol-wi-smallest ) ; }
|
|
| 329 |
&.wi-verysmall { width: (@tcol-wi-verysmall ) ; }
|
|
| 330 |
&.wi-small { width: (@tcol-wi-small ) ; }
|
|
| 331 |
&.wi-mediumsmall { width: (@tcol-wi-mediumsmall ) ; }
|
|
| 332 |
&.wi-normal { width: (@tcol-wi-normal ) ; }
|
|
| 333 |
&.wi-lightwide { width: (@tcol-wi-lightwide ) ; }
|
|
| 334 |
&.wi-wide { width: (@tcol-wi-wide ) ; }
|
|
| 335 |
&.wi-wider { width: (@tcol-wi-wider ) ; }
|
|
| 336 |
&.wi-verywide { width: (@tcol-wi-verywide ) ; }
|
|
| 337 | 368 |
} |
| 338 | 369 |
|
| 339 |
|
|
| 340 |
|
|
| 341 |
|
|
| 342 | 370 |
// -------------------------------------- |
| 343 | 371 |
// TABLE LIST (vertical) |
| 344 | 372 |
// -------------------------------------- |
| ... | ... | |
| 370 | 398 |
} |
| 371 | 399 |
|
| 372 | 400 |
tbody{
|
| 401 |
border-bottom: #999 1px solid ; |
|
| 402 |
|
|
| 373 | 403 |
tr:nth-child(odd){
|
| 374 | 404 |
background-color: #ececec ; |
| 375 | 405 |
} |
| 376 | 406 |
tr:nth-child(even){
|
| 377 | 407 |
background-color: #dedede ; |
| 378 | 408 |
} |
| 379 |
border-bottom: #999 1px solid ; |
|
| 409 |
tr:hover{
|
|
| 410 |
background-color: #fff ; |
|
| 411 |
} |
|
| 412 |
|
|
| 413 |
|
|
| 380 | 414 |
} |
| 381 | 415 |
tfoot{
|
| 382 | 416 |
tr{
|
| ... | ... | |
| 394 | 428 |
// -------------------------------------- |
| 395 | 429 |
|
| 396 | 430 |
// Simple Table without Zebra Effect |
| 397 |
&.tbl-list-plain, |
|
| 398 |
&.tbl-plain{
|
|
| 431 |
|
|
| 432 |
&.tbl-list-plain, &.tbl-plain {
|
|
| 399 | 433 |
caption, |
| 400 | 434 |
th.caption { font-size: 80% !important; }
|
| 401 | 435 |
|
| 402 | 436 |
th, |
| 403 |
td{ padding-right: 0.8em; }
|
|
| 437 |
td{
|
|
| 438 |
padding-right: 20px; |
|
| 439 |
padding-left: 10px; |
|
| 440 |
} |
|
| 404 | 441 |
|
| 405 | 442 |
thead{
|
| 406 | 443 |
th{
|
| ... | ... | |
| 442 | 479 |
th, |
| 443 | 480 |
td{
|
| 444 | 481 |
background: none; |
| 445 |
padding: 0.5em 0.8em 0.2em 0.2em;
|
|
| 482 |
padding: 0.5em 0.4em 0.2em 0.3em;
|
|
| 446 | 483 |
|
| 447 | 484 |
// Adjust Form Elements in this table type |
| 448 | 485 |
&>input[type="checkbox"], |
| 449 | 486 |
&>input[type="radio"] {
|
| 450 | 487 |
margin: 0.2em 0.3em 0 0 !important ; |
| 451 | 488 |
} |
| 452 |
input, |
|
| 453 |
select{
|
|
| 454 |
margin-top: -0.3em ;
|
|
| 489 |
&>input,
|
|
| 490 |
&>select{
|
|
| 491 |
margin: -0.3em 1px 0 0 ;
|
|
| 455 | 492 |
// if there are further form elements within a table cell separated with a Linebreak BR |
| 456 | 493 |
&.addition { margin-top: 0.3em !important; }
|
| 457 | 494 |
} |
| 458 |
|
|
| 495 |
|
|
| 459 | 496 |
// In some cases labels can be placed within the same cell as the form element |
| 460 | 497 |
// best is to have it above the element |
| 498 |
// PENDENT: Plazierung in LESS-Dateien |
|
| 461 | 499 |
.label-above{
|
| 462 | 500 |
display: block; |
| 463 | 501 |
clear: both ; |
| 464 | 502 |
overflow: hidden; |
| 465 |
height: 1.8em ; // PENDENT: besser loesen, gefaellt mir nicht |
|
| 503 |
color: @t-cell-head-text; |
|
| 504 |
; |
|
| 505 |
//height: 1.8em ; // PENDENT: besser loesen, gefaellt mir nicht |
|
| 466 | 506 |
} |
| 467 | 507 |
|
| 468 | 508 |
} |
| ... | ... | |
| 471 | 511 |
color: @t-cell-head-text-accent; |
| 472 | 512 |
vertical-align: top; |
| 473 | 513 |
padding-top: 0.5em ; |
| 514 |
|
|
| 515 |
h4{
|
|
| 516 |
margin: 0 ; |
|
| 517 |
padding: 0 ; |
|
| 518 |
|
|
| 519 |
} |
|
| 474 | 520 |
} |
| 475 | 521 |
|
| 476 | 522 |
td{
|
| 477 | 523 |
// 2nd to x column with plain data (no form elements) |
| 478 |
span.plain-data{
|
|
| 479 |
padding: 0.3em 0.3em 0.6em 0.3em ; |
|
| 524 |
&>span.plain-data, |
|
| 525 |
&>span.data, |
|
| 526 |
&>span{
|
|
| 527 |
padding: 0.1em 0.3em 0.1em 0.3em ; |
|
| 528 |
display: block; |
|
| 529 |
} |
|
| 530 |
// Special Select-Element |
|
| 531 |
&>span.customer_vendor_picker{
|
|
| 532 |
padding-left: 0 !important ; |
|
| 533 |
} |
|
| 534 |
&>div.data{
|
|
| 535 |
padding: 0.1363em 0 ; |
|
| 536 |
} |
|
| 537 |
&.data{
|
|
| 538 |
padding: 0.4363em 0.3em 0.4363em 0.3em ; |
|
| 539 |
} |
|
| 540 |
|
|
| 541 |
&>span.label {
|
|
| 542 |
padding: 0 0.3em 0.3em 0 ; |
|
| 543 |
color: @t-cell-head-text; |
|
| 544 |
font-style: normal; |
|
| 545 |
display: block; |
|
| 480 | 546 |
} |
| 481 | 547 |
} |
| 482 | 548 |
|
| 483 | 549 |
caption, |
| 484 | 550 |
th.caption{
|
| 485 |
padding: 0.8em 0 0.2em 0.2em;
|
|
| 551 |
padding: 0.4em 0 0.2em 0.2em;
|
|
| 486 | 552 |
} |
| 487 | 553 |
|
| 554 |
// Exception: Thead in horizontal table |
|
| 555 |
thead th {
|
|
| 556 |
padding: 0.5em 0.4em 0.9em 0.3em; |
|
| 557 |
} |
|
| 558 |
|
|
| 559 |
|
|
| 560 |
// Zebra effect |
|
| 488 | 561 |
&.zebra {
|
| 489 | 562 |
tbody{
|
| 490 | 563 |
tr:nth-child(odd){
|
| 491 | 564 |
background-color: #dedede ; |
| 565 |
th { background-color: #fff ; }
|
|
| 492 | 566 |
} |
| 493 | 567 |
tr:nth-child(even){
|
| 494 | 568 |
background-color: #ececec ; |
| 569 |
th { background-color: #fff ; }
|
|
| 495 | 570 |
} |
| 496 | 571 |
} |
| 497 |
} |
|
| 498 |
|
|
| 499 |
|
|
| 572 |
} // /.zebra |
|
| 573 |
|
|
| 574 |
// checkered (bordered) table |
|
| 575 |
&.checkered {
|
|
| 576 |
border-collapse: collapse ; |
|
| 577 |
tbody{
|
|
| 578 |
tr{
|
|
| 579 |
background-color: #F3F3F3 ; |
|
| 580 |
//th { background-color: #fff ; }
|
|
| 581 |
td, th {
|
|
| 582 |
border-color: #999 ; |
|
| 583 |
border-width: 1px ; |
|
| 584 |
border-style: solid ; |
|
| 585 |
padding: 0.3em 0.6em ; |
|
| 586 |
} |
|
| 587 |
} |
|
| 588 |
} |
|
| 589 |
} // /.zebra |
|
| 590 |
|
|
| 591 |
|
|
| 500 | 592 |
|
| 593 |
} // /.tbl-horizontal |
|
| 501 | 594 |
|
| 502 | 595 |
|
| 503 | 596 |
|
| 597 |
// -------------------------------------- |
|
| 598 |
// STANDARD KIVITENDO TABLES |
|
| 599 |
// -------------------------------------- |
|
| 600 |
&.tbl-horizontal, |
|
| 601 |
&.tbl-plain, |
|
| 602 |
&.tbl-list{
|
|
| 603 |
margin-bottom: 0.6em ; |
|
| 604 |
border-collapse: collapse; |
|
| 605 |
border: none; |
|
| 606 |
|
|
| 607 |
tr td {
|
|
| 608 |
&>span{
|
|
| 609 |
padding: 0.3em 0.3em 0.6em 0.3em ; |
|
| 610 |
} |
|
| 611 |
} |
|
| 612 |
} |
|
| 504 | 613 |
|
| 505 |
} // /.tbl-horizontal |
|
| 506 | 614 |
|
| 507 | 615 |
|
| 508 | 616 |
|
| ... | ... | |
| 533 | 641 |
// -------------------------------------- |
| 534 | 642 |
// Use this class for reviewing your Table HTML |
| 535 | 643 |
|
| 644 |
&.test, |
|
| 645 |
&.test-plain{
|
|
| 646 |
//border: 1px #000 solid ; |
|
| 647 |
//background-color: #BFD2AD; |
|
| 648 |
|
|
| 649 |
th{
|
|
| 650 |
background-color: #B3B3B3; |
|
| 651 |
color: #757575 ; |
|
| 652 |
font-weight: normal ; |
|
| 653 |
|
|
| 654 |
&.caption {
|
|
| 655 |
background-color: #B3B3B3 ; |
|
| 656 |
//border: 1px solid red !important; |
|
| 657 |
} |
|
| 658 |
} |
|
| 659 |
td{
|
|
| 660 |
background-color: #CFCDD2; |
|
| 661 |
|
|
| 662 |
&.longdesc, |
|
| 663 |
&.longdescription, |
|
| 664 |
&.long-desc, |
|
| 665 |
&.long-description{
|
|
| 666 |
border: 1px solid green !important; |
|
| 667 |
} |
|
| 668 |
} |
|
| 669 |
|
|
| 670 |
table {
|
|
| 671 |
border: 1px #0000FF solid ; |
|
| 672 |
border-collapse: collapse; |
|
| 673 |
|
|
| 674 |
td, th{
|
|
| 675 |
border: 1px #C20D18 dotted !important; |
|
| 676 |
} |
|
| 677 |
} |
|
| 678 |
|
|
| 679 |
} // /.test |
|
| 680 |
|
|
| 681 |
|
|
| 682 |
|
|
| 683 |
|
|
| 536 | 684 |
&.test{
|
| 537 |
border: 2px #000 solid ;
|
|
| 538 |
background-color: #BFD2AD; |
|
| 685 |
//border: 1px #000 solid ;
|
|
| 686 |
//background-color: #BFD2AD;
|
|
| 539 | 687 |
|
| 540 | 688 |
th{
|
| 541 |
border-width: 1px !important;
|
|
| 542 |
background-color: #C20D18;
|
|
| 543 |
color: #FFD9C3 ;
|
|
| 544 |
font-weight: bold ;
|
|
| 689 |
border: 1px #757575 solid !important;
|
|
| 690 |
background-color: #B3B3B3;
|
|
| 691 |
color: #757575 ;
|
|
| 692 |
font-weight: normal ;
|
|
| 545 | 693 |
|
| 546 | 694 |
&.caption {
|
| 547 |
border: 3px solid red !important; |
|
| 695 |
background-color: #B3B3B3 ; |
|
| 696 |
//border: 1px solid red !important; |
|
| 548 | 697 |
} |
| 549 | 698 |
} |
| 550 | 699 |
td{
|
| 551 |
border: 1px solid blue !#FF9D58;
|
|
| 552 |
background-color: #F7CC94;
|
|
| 700 |
border: 1px #3C3C3B solid ;
|
|
| 701 |
background-color: #CFCDD2;
|
|
| 553 | 702 |
|
| 554 | 703 |
&.longdesc, |
| 555 | 704 |
&.longdescription, |
| ... | ... | |
| 587 | 736 |
width: auto ; |
| 588 | 737 |
td, |
| 589 | 738 |
th {
|
| 739 |
// PENDENT: vielleicht in Pixeln angeben, statt in EMs (siehe tbl-plain) |
|
| 590 | 740 |
padding-left: 0.6em ; |
| 591 | 741 |
padding-right: 1.2em; |
| 592 | 742 |
} |
| 593 | 743 |
} |
| 594 | 744 |
|
| 595 | 745 |
|
| 746 |
&.wi-smallest { width: @tcol-wi-smallest ; }
|
|
| 747 |
&.wi-verysmall { width: @tcol-wi-verysmall ; }
|
|
| 748 |
&.wi-small { width: @tcol-wi-small ; }
|
|
| 749 |
&.wi-mediumsmall { width: @tcol-wi-mediumsmall ; }
|
|
| 750 |
&.wi-normal { width: @tcol-wi-normal ; }
|
|
| 751 |
&.wi-lightwide { width: @tcol-wi-lightwide ; }
|
|
| 752 |
&.wi-wide { width: @tcol-wi-wide ; }
|
|
| 753 |
&.wi-wider { width: @tcol-wi-wider ; }
|
|
| 754 |
&.wi-verywide { width: @tcol-wi-verywide ; }
|
|
| 755 |
|
|
| 756 |
|
|
| 757 |
|
|
| 758 |
&.wi-small-small { width: @tcol-wi-small + @tcol-wi-small ; }
|
|
| 759 |
&.wi-small-mediumsmall { width: @tcol-wi-small + @tcol-wi-mediumsmall ; }
|
|
| 760 |
&.wi-small-normal { width: @tcol-wi-small + @tcol-wi-normal ; }
|
|
| 761 |
&.wi-small-lightwide { width: @tcol-wi-small + @tcol-wi-lightwide ; }
|
|
| 762 |
&.wi-small-wide { width: @tcol-wi-small + @tcol-wi-wide ; }
|
|
| 763 |
&.wi-small-wider { width: @tcol-wi-small + @tcol-wi-wider ; }
|
|
| 764 |
&.wi-small-verywide { width: @tcol-wi-small + @tcol-wi-verywide ; }
|
|
| 765 |
|
|
| 766 |
&.wi-mediumsmall-small { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
|
|
| 767 |
&.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall + @tcol-wi-mediumsmall ; }
|
|
| 768 |
&.wi-mediumsmall-normal { width: @tcol-wi-mediumsmall + @tcol-wi-normal ; }
|
|
| 769 |
&.wi-mediumsmall-lightwide { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }
|
|
| 770 |
&.wi-mediumsmall-wide { width: @tcol-wi-mediumsmall + @tcol-wi-wide ; }
|
|
| 771 |
&.wi-mediumsmall-wider { width: @tcol-wi-mediumsmall + @tcol-wi-wider ; }
|
|
| 772 |
&.wi-mediumsmall-verywide { width: @tcol-wi-mediumsmall + @tcol-wi-verywide ; }
|
|
| 773 |
|
|
| 774 |
&.wi-normal-small { width: @tcol-wi-normal + @tcol-wi-small ; }
|
|
| 775 |
&.wi-normal-mediumsmall { width: @tcol-wi-normal + @tcol-wi-mediumsmall ; }
|
|
| 776 |
&.wi-normal-normal { width: @tcol-wi-normal + @tcol-wi-normal ; }
|
|
| 777 |
&.wi-normal-lightwide { width: @tcol-wi-normal + @tcol-wi-lightwide ; }
|
|
| 778 |
&.wi-normal-wide { width: @tcol-wi-normal + @tcol-wi-wide ; }
|
|
| 779 |
&.wi-normal-wider { width: @tcol-wi-normal + @tcol-wi-wider ; }
|
|
| 780 |
&.wi-normal-verywide { width: @tcol-wi-normal + @tcol-wi-verywide ; }
|
|
| 781 |
|
|
| 782 |
&.wi-lightwide-small { width: @tcol-wi-lightwide + @tcol-wi-small ; }
|
|
| 783 |
&.wi-lightwide-mediumsmall { width: @tcol-wi-lightwide + @tcol-wi-mediumsmall ; }
|
|
| 784 |
&.wi-lightwide-normal { width: @tcol-wi-lightwide + @tcol-wi-normal ; }
|
|
| 785 |
&.wi-lightwide-lightwide { width: @tcol-wi-lightwide + @tcol-wi-lightwide ; }
|
|
| 786 |
&.wi-lightwide-wide { width: @tcol-wi-lightwide + @tcol-wi-wide ; }
|
|
| 787 |
&.wi-lightwide-wider { width: @tcol-wi-lightwide + @tcol-wi-wider ; }
|
|
| 788 |
&.wi-lightwide-verywide { width: @tcol-wi-lightwide + @tcol-wi-verywide ; }
|
|
| 789 |
|
|
| 790 |
|
|
| 791 |
|
|
| 792 |
|
|
| 596 | 793 |
// -------------------------------------- |
| 597 | 794 |
// LINKS (within TD & TH) |
| 598 | 795 |
// -------------------------------------- |
| ... | ... | |
| 608 | 805 |
// HEADINGS (within TD & TH) |
| 609 | 806 |
// -------------------------------------- |
| 610 | 807 |
|
| 611 |
td h4{
|
|
| 612 |
font-weight: normal; |
|
| 613 |
margin: 0 ; |
|
| 614 |
padding: 0; |
|
| 808 |
td {
|
|
| 809 |
h3, |
|
| 810 |
h4 {
|
|
| 811 |
margin: 0 !important ; |
|
| 812 |
padding: 0; |
|
| 813 |
} |
|
| 814 |
h4 {
|
|
| 815 |
font-weight: normal; |
|
| 816 |
} |
|
| 615 | 817 |
} |
| 616 | 818 |
|
| 617 | 819 |
|
| 618 | 820 |
|
| 821 |
|
|
| 619 | 822 |
// -------------------------------------- |
| 620 | 823 |
// SUB-TOTALS |
| 621 | 824 |
// -------------------------------------- |
| ... | ... | |
| 644 | 847 |
// LIST-TABLES in Wrappers |
| 645 | 848 |
// -------------------------------------- |
| 646 | 849 |
|
| 647 |
div.pad-wrapper,
|
|
| 850 |
div.wrapper, |
|
| 648 | 851 |
div.cols {
|
| 649 | 852 |
table.tbl-list{
|
| 650 | 853 |
border-left: 1px solid @gray !important ; |
| ... | ... | |
| 682 | 885 |
clear: left ; |
| 683 | 886 |
display: block; |
| 684 | 887 |
font-weight: bold; |
| 888 |
color: grey ; |
|
| 685 | 889 |
} |
| 686 | 890 |
div.field {
|
| 687 |
clear: left ; |
|
| 891 |
clear: left ;
|
|
| 688 | 892 |
display: block ; |
| 689 | 893 |
overflow: hidden ; |
| 690 |
|
|
| 894 |
// PENDENT: ueberpruefen wegen cke-Editor-Konflikte |
|
| 691 | 895 |
span.label{
|
| 692 | 896 |
display: block ; |
| 693 | 897 |
float: left ; |
| ... | ... | |
| 703 | 907 |
|
| 704 | 908 |
|
| 705 | 909 |
// -------------------------------------- |
| 706 |
// TABLES with PARAGRAPHS for Checkboxes |
|
| 910 |
// TABLES with PARAGRAPHS or DIVs for Checkboxes
|
|
| 707 | 911 |
// -------------------------------------- |
| 708 |
|
|
| 912 |
// PENDENT: siehe auch form-additions |
|
| 709 | 913 |
div.list {
|
| 710 | 914 |
font-size: 10pt ; |
| 711 | 915 |
color: black ; |
| 712 |
|
|
| 916 |
// A column with a list |
|
| 917 |
&.col {
|
|
| 918 |
float: left ; |
|
| 919 |
margin-right: 2.6em !important; |
|
| 920 |
width: auto; |
|
| 921 |
min-width: 140px; |
|
| 922 |
max-width: 180px; |
|
| 923 |
} |
|
| 924 |
// List Title |
|
| 713 | 925 |
h4 {
|
| 714 | 926 |
margin: 0 ; |
| 715 | 927 |
padding: 1.2em 0 0.2em 0.4em ; |
| 716 | 928 |
font-size: 10pt !important; |
| 717 | 929 |
font-style: italic; |
| 718 | 930 |
} |
| 719 |
|
|
| 720 |
p {
|
|
| 721 |
padding: 0.3em 0 0.4em 0; |
|
| 722 |
margin: 0 ; |
|
| 931 |
// List Elements |
|
| 932 |
&>p, |
|
| 933 |
&>div {
|
|
| 934 |
padding: 0.2em 0 0.2em 0 !important; |
|
| 935 |
margin: 0 !important; |
|
| 936 |
white-space: normal; |
|
| 723 | 937 |
|
| 724 | 938 |
&>input[type="checkbox"], |
| 725 | 939 |
&>input[type="radio"] {
|
| 726 | 940 |
padding: 0 ; |
| 727 |
margin: 0.3em 0.6em 0 0 ; |
|
| 941 |
margin: 0.3em 0.3em 0 0 ; |
|
| 942 |
float: left; |
|
| 728 | 943 |
} |
| 944 |
label{
|
|
| 945 |
width: 82% ; |
|
| 946 |
float: left ; |
|
| 947 |
} |
|
| 948 |
} |
|
| 949 |
&>p{
|
|
| 950 |
//margin: 0 0 1.2em 0 !important; |
|
| 951 |
overflow: hidden; |
|
| 729 | 952 |
} |
| 953 |
// Special Element but same like above (see Custom Vars) |
|
| 954 |
&>input[type="checkbox"] {}
|
|
| 955 |
&>label { width: 82%; }
|
|
| 956 |
|
|
| 957 |
div{ clear: left }
|
|
| 730 | 958 |
} |
| 731 | 959 |
|
| 732 | 960 |
|
| ... | ... | |
| 768 | 996 |
|
| 769 | 997 |
|
| 770 | 998 |
|
| 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) {
|
|
| 999 |
div.list-table-with-separate-total-table {
|
|
| 1000 |
|
|
| 1001 |
div.full-width{
|
|
| 1002 |
padding-bottom: 0 ; |
|
| 1003 |
margin-bottom: 0 ; |
|
| 1004 |
|
|
| 1005 |
.tbl-list{
|
|
| 1006 |
margin-bottom: 0; |
|
| 1007 |
} |
|
| 1008 |
|
|
| 1009 |
} |
|
| 819 | 1010 |
|
| 1011 |
// Total-Tabelle |
|
| 1012 |
// Separater Block mit Table ohne Body, nur Footer für Totals |
|
| 1013 |
div.list-total{
|
|
| 1014 |
width: 100%; |
|
| 1015 |
margin: 0 ; |
|
| 1016 |
padding: 0; |
|
| 1017 |
overflow: hidden; |
|
| 1018 |
|
|
| 1019 |
table.footer-only{
|
|
| 1020 |
&.right{ float: right; }
|
|
| 1021 |
margin: 0 ; |
|
| 1022 |
padding: 0; |
|
| 820 | 1023 |
} |
| 1024 |
|
|
| 1025 |
div.after-item{ }
|
|
| 1026 |
} |
|
| 1027 |
|
|
| 1028 |
} |
|
| 1029 |
|
|
| 1030 |
|
|
| 1031 |
.floating-boxes {
|
|
| 1032 |
display: table ; |
|
| 1033 |
margin: 0.4em 0 0.8em 0 ; |
|
| 1034 |
|
|
| 1035 |
.floating-box {
|
|
| 1036 |
display: table-cell ; |
|
| 1037 |
float: left ; |
|
| 1038 |
font-size: @font-size-smaller ; |
|
| 1039 |
height: 1.9em ; |
|
| 1040 |
vertical-align: middle; |
|
| 1041 |
padding: 0 2.0em 0 0 ; |
|
| 1042 |
.button, button{
|
|
| 1043 |
margin: 0 ; |
|
| 1044 |
} |
|
| 1045 |
label, |
|
| 1046 |
span.label{
|
|
| 1047 |
width: auto; |
|
| 1048 |
font-size: @font-size-smaller ; |
|
| 1049 |
display: inline-block; |
|
| 1050 |
height: 160%; |
|
| 1051 |
color: #666; |
|
| 1052 |
} |
|
| 1053 |
input[type="checkbox"]{ margin: 0 0.4em 0 0 ; }
|
|
| 1054 |
select { margin: -0.3em 0 0 0; }
|
|
| 1055 |
} |
|
| 1056 |
} |
|
| 1057 |
|
|
| 1058 |
|
|
| 1059 |
|
|
| 1060 |
|
|
| 1061 |
|
|
| 1062 |
// -------------------------------------- |
|
| 1063 |
// Medienabfragen und Beruecksichtigungen Plattformen |
|
| 1064 |
// -------------------------------------- |
|
| 1065 |
// Handheld Hochformat width: 320px |
|
| 1066 |
@media screen and (max-device-width: 479px) {
|
|
| 1067 |
|
|
| 1068 |
} |
|
| 1069 |
// Handheld Querformat width: 480px |
|
| 1070 |
@media screen and (min-device-width: 480px) and (max-device-width: 767px) {
|
|
| 1071 |
|
|
| 1072 |
} |
|
| 1073 |
// Tablet Hochformat |
|
| 1074 |
@media screen and (min-device-width: 768px) and (max-device-width: 1023px) {
|
|
| 1075 |
//colgroup col:first-child, |
|
| 1076 |
.tbl-horizontal th{
|
|
| 1077 |
// -------------- |
|
| 1078 |
// Width of Columns (Dimensions) |
|
| 1079 |
// |
|
| 1080 |
&.wi-smallest { width: @tcol-wi-normal !important ; }
|
|
| 1081 |
&.wi-verysmall { width: @tcol-wi-normal !important ; }
|
|
| 1082 |
&.wi-small { width: @tcol-wi-normal !important ; }
|
|
| 1083 |
&.wi-mediumsmall { width: @tcol-wi-normal !important ; }
|
|
| 1084 |
&.wi-normal { width: @tcol-wi-normal !important ; }
|
|
| 1085 |
&.wi-lightwide { width: @tcol-wi-normal !important ; }
|
|
| 1086 |
&.wi-wide { width: @tcol-wi-normal !important ; }
|
|
| 1087 |
&.wi-wider { width: @tcol-wi-normal !important ; }
|
|
| 1088 |
&.wi-verywide { width: @tcol-wi-normal !important ; }
|
|
| 1089 |
} |
|
| 1090 |
} |
|
| 1091 |
// < Tablet Querformat |
|
| 1092 |
@media screen and (max-device-width: 1024px) {
|
|
| 1093 |
.tbl-horizontal th{
|
|
| 1094 |
// -------------- |
|
| 1095 |
// Width of Columns (Dimensions) |
|
| 1096 |
// |
|
| 1097 |
&.wi-smallest { width: @tcol-wi-normal !important ; }
|
|
| 1098 |
&.wi-verysmall { width: @tcol-wi-normal !important ; }
|
|
| 1099 |
&.wi-small { width: @tcol-wi-normal !important ; }
|
|
| 1100 |
&.wi-mediumsmall { width: @tcol-wi-normal !important ; }
|
|
| 1101 |
&.wi-normal { width: @tcol-wi-normal !important ; }
|
|
| 1102 |
&.wi-lightwide { width: @tcol-wi-normal !important ; }
|
|
| 1103 |
&.wi-wide { width: @tcol-wi-normal !important ; }
|
|
| 1104 |
&.wi-wider { width: @tcol-wi-normal !important ; }
|
|
| 1105 |
&.wi-verywide { width: @tcol-wi-normal !important ; }
|
|
| 1106 |
} |
|
| 1107 |
} |
|
| 1108 |
// Normale Bildschirme |
|
| 1109 |
@media screen and (min-device-width: 1260px) {
|
|
| 1110 |
|
|
| 1111 |
} |
|
| 821 | 1112 |
|
| 822 | 1113 |
|
| 823 | 1114 |
|
Auch abrufbar als: Unified diff
Aenderungen hpschlaepfer