koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss

   1 table {
   2     border-collapse: collapse;
   3
   4     border-top: 1px solid $table-border-color;
   5
   6     .btn-group {
   7         white-space: nowrap;
   8
   9         .btn {
  10             display: inline-block;
  11             float: none;
  12         }
  13     }
  14
  15     &.indexes {
  16         td {
  17             vertical-align: middle;
  18         }
  19     }
  20
  21     > caption {
  22         span {
  23             &.actions {
  24                 font-size: 66%;
  25                 font-weight: normal;
  26                 margin: 0 .5em 0 0;
  27             }
  28         }
  29
  30         button {
  31             &.dt-button {
  32                 background: transparent none;
  33                 border: 0;
  34                 color: #595959;
  35                 font-size: 60%;
  36                 margin: 0 .5em;
  37
  38                 &:hover:not(.disabled):active:not(.disabled) {
  39                     background: transparent none;
  40                     border: 0;
  41                     box-shadow: none;
  42                     color: #000;
  43                 }
  44
  45                 &:hover:not(.disabled) {
  46                     background: transparent none;
  47                     border: 0;
  48                     color: #000;
  49                 }
  50             }
  51         }
  52
  53         div.dt-button-collection {
  54             font-size: 70%;
  55         }
  56     }
  57
  58     &.invis {
  59         border: 0;
  60
  61         tr,
  62         td {
  63             border: 0;
  64         }
  65     }
  66
  67     + table {
  68         margin-top: 1em;
  69     }
  70
  71     &.dataTable {
  72         border-collapse: collapse;
  73         border: none;
  74         margin-top: .5em;
  75         margin-bottom: .5em;
  76
  77
  78         tfoot {
  79             td,
  80             th {
  81                 padding: .5em;
  82             }
  83         }
  84
  85         thead {
  86
  87
  88             th,
  89             td {
  90
  91                 border-top: none;
  92                 border-left: none;
  93                 border-right: none;
  94                 border: none;
  95                 padding: .5em;
  96             }
  97
  98             tr {
  99             background-color: #fff;
 100                 &.columnFilter {
 101                     th {
 102                         padding: 0;
 103                     }
 104                 }
 105             }
 106
 107             .sorting_asc {
 108
 109                 &.fixed_sort {
 110                     background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L3N2Zz4=") no-repeat scroll right center $table-header-background;
 111                     cursor: default;
 112                 }
 113             }
 114
 115             .sorting_desc {
 116                 background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=") no-repeat scroll right center $table-header-background;
 117
 118                 &.fixed_sort {
 119                     background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvc3ZnPg==") no-repeat scroll right center $table-header-background;
 120                     cursor: default;
 121                 }
 122             }
 123         }
 124
 125         tbody {
 126             border-top: 2px solid #A19B9E;
 127
 128             td {
 129                 padding: .5em;
 130                 border: none;
 131             }
 132         }
 133     }
 134
 135     /* Row grouping */
 136     &.group {
 137         tr {
 138             &.odd td {
 139                 background-color: #F3F3F3;
 140                 border: 1px solid $table-border-color;
 141                 border-right: 1px solid $table-border-color;
 142             }
 143
 144             &.even td {
 145                 background-color: #FFF;
 146                 border-right: 1px solid $table-border-color;
 147             }
 148         }
 149
 150         td.group {
 151             background-color: #D1CFD0;
 152             border-bottom: 2px solid #A19B9E;
 153             border-top: 2px solid #A19B9E;
 154         }
 155     }
 156 }
 157
 158 td,
 159 th {
 160     padding: .2em .9em;
 161 }
 162
 163 td {
 164     background-color: #FFFFFF;
 165     vertical-align: top;
 166
 167     &.actions {
 168         white-space: nowrap;
 169     }
 170
 171     button, a, input[type="button"]{
 172         &.btn-default{
 173             color: #71B443;
 174             padding: .3em;
 175             border: none;
 176             background-color: transparent;
 177             border: none;
 178             box-shadow: none;
 179             font-size: 100%;
 180
 181             &:hover, &:active, &:focus, &:active:hover, &:active:focus{
 182                 background-color: transparent;
 183                 color: #71B443;
 184                 text-decoration: underline;
 185             }
 186         }
 187     }
 188
 189     &.borderless {
 190         border: 0 none;
 191         border-collapse: separate;
 192     }
 193
 194     &.data {
 195         font-family: $font-monospace;
 196         text-align: right;
 197     }
 198
 199     &.total {
 200         text-align: right;
 201     }
 202
 203     input {
 204         &.approve {
 205             background-color: #FFC;
 206         }
 207     }
 208
 209     /* Row grouping */
 210     &.group {
 211         background-color: #D1CFD0;
 212         border-bottom: 2px solid #A19B9E;
 213         border-top: 2px solid #A19B9E;
 214     }
 215 }
 216
 217
 218 th {
 219     font-weight: bold;
 220     text-align: center;
 221
 222     &[scope="row"] {
 223         text-align: right;
 224     }
 225
 226     &.data {
 227         font-family: $font-monospace;
 228         text-align: right;
 229     }
 230 }
 231
 232
 233 tr {
 234     &.clickable {
 235         cursor: pointer;
 236     }
 237
 238     &.expired {
 239         td {
 240             color: #999999;
 241         }
 242     }
 243
 244     &.highlight {
 245         td {
 246             background-color: #F6F6F6;
 247             border-color: $table-border-color;
 248         }
 249
 250         th {
 251             &[scope="row"] {
 252                 background-color: #DDDDDD;
 253                 border-color: $table-border-color;
 254             }
 255         }
 256
 257         table {
 258             &.invis {
 259                 td {
 260                     border: 0;
 261                 }
 262             }
 263         }
 264     }
 265
 266     &.odd {
 267         &.onissue {
 268             td {
 269                 background-color: #FFFFE1;
 270             }
 271         }
 272     }
 273
 274     &.ok {
 275         td {
 276             background-color: #FFFFCC;
 277         }
 278
 279         &:nth-child(odd) {
 280             td {
 281                 background-color: #FFFFCC;
 282             }
 283         }
 284
 285         &:nth-child(even) {
 286             td {
 287                 background-color: #FFFFCC;
 288             }
 289         }
 290     }
 291
 292     &.onissue {
 293         td {
 294             background-color: #FFFFCC;
 295         }
 296     }
 297
 298     &.reserved {
 299         td {
 300             background-color: #EEFFD4;
 301         }
 302     }
 303
 304     &.transfered {
 305         td {
 306             background-color: #E8F0F6;
 307         }
 308     }
 309
 310     &.warn {
 311         td {
 312             background-color: #FF9090;
 313         }
 314
 315         &:nth-child(odd) {
 316             td {
 317                 background-color: #FF9090;
 318             }
 319         }
 320     }
 321
 322     &.default {
 323         td {
 324             font-weight: bold;
 325         }
 326     }
 327
 328     &.debug {
 329         td {
 330             font-weight: bold;
 331             color: red;
 332             font-style: italic;
 333         }
 334     }
 335 }
 336
 337 .selections-table {
 338     tr {
 339         &:hover {
 340             td {
 341                 background-color: #FFFF99 !important;
 342             }
 343         }
 344     }
 345 }
 346
 347 tfoot {
 348     td {
 349         background-color: $table-odd-row;
 350         font-weight: bold;
 351         vertical-align: middle;
 352     }
 353 }
 354
 355 caption {
 356     color: #000;
 357     font-size: 133.9%;
 358     font-weight: bold;
 359     margin: .3em 0;
 360 }
 361
 362 .highlighted-row,
 363 .highlighted-row td {
 364     background-color: #FFD000 !important;
 365 }
 366
 367 .warned-row,
 368 .warned-row td { background-color: #FF9000 !important }
 369
 370 .high-warned-row,
 371 .high-warned-row td { background-color: #FF0000 !important }
 372
 373 tbody {
 374     tr {
 375
 376         &:nth-child(odd):not(.dtrg-group) {
 377             td {
 378                 border: none;
 379             }
 380         }
 381         &:nth-child(odd):not(.dtrg-group):not(.active):not(.ok) {
 382             td {
 383                 &:not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-success):not(.bg-primary) {
 384                     background-color: $table-odd-row;
 385         margin: 1em;
 386                 }
 387             }
 388         }
 389     }
 390 }
 391
 392 .dataTables_wrapper {
 393     .dataTables_processing {
 394         background-color: #F4F8F9;
 395         border: 2px solid #538200;
 396         border-radius: 3px;
 397         box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .2);
 398         color: #333;
 399         height: unset;
 400         left: 50%;
 401         margin-left: -125px;
 402         margin-top: -15px;
 403         padding: 1.5em;
 404         position: fixed;
 405         text-align: center;
 406         top: 50%;
 407         width: auto;
 408     }
 409
 410     .dataTables_info {
 411         float: left;
 412         line-height: 1.9em;
 413         padding-right: 1em;
 414         padding-top: 0;
 415     }
 416
 417     .dataTables_length {
 418         display: none;
 419         float: left;
 420         line-height: 1.5em;
 421         padding-right: 1em;
 422     }
 423
 424     .dataTables_filter {
 425         float: left;
 426         padding-right: 1em;
 427     }
 428
 429     .dataTables_paginate {
 430         float: left;
 431         line-height: 1.5em;
 432         padding: 0;
 433         padding-right: 1em;
 434
 435         span {
 436             .paginate_button {
 437                 display: none;
 438             }
 439         }
 440
 441         .paginate_button {
 442             padding-bottom: 0;
 443             padding-top: 0;
 444
 445
 446             &.current,
 447             &:hover,
 448             &:active {
 449                 border-radius: 4px;
 450                 color: #666 !important;
 451                 font-weight: bold;
 452                 background: #fff;
 453             }
 454
 455             &.first,
 456             &.previous,
 457             &.next,
 458             &.last {
 459                 padding: 0;
 460
 461                 &::before,
 462                 &::after {
 463                     display: inline-block;
 464                     font-family: FontAwesome;
 465                 }
 466             }
 467
 468             &.first {
 469                 display: none;
 470
 471                 &::before {
 472                     content: "\f100";
 473                 }
 474             }
 475
 476             &.previous {
 477                 &::before {
 478                     content: "\f104";
 479                 }
 480             }
 481
 482             &.next {
 483                 &::after {
 484                     content: "\f105";
 485                 }
 486             }
 487
 488             &.last {
 489                 display: none;
 490
 491                 &::after {
 492                     content: "\f101";
 493                 }
 494             }
 495         }
 496     }
 497 }
 498
 499 .pager {
 500     font-size: 90%;
 501
 502     &.top {
 503         padding: 1em 0;
 504         margin-top: 1em;
 505         margin-bottom:  17px;
 506     }
 507
 508     &.bottom {
 509         padding-bottom: 1em;
 510         display: none;
 511     }
 512
 513     div{
 514         &.dt-buttons {
 515             position: relative;
 516             float: right;
 517         }
 518     }
 519
 520     button,
 521     div,
 522     a {
 523         &.dt-button {
 524             background: transparent none;
 525             border: 0;
 526             color: #696969;
 527             font-size: 1em;
 528             line-height: 1.7em;
 529             margin: 3px 3px 0;
 530             padding: 0 .5em;
 531             position: relative;
 532             float: right;
 533
 534             &::before {
 535                 content: '';
 536             }
 537
 538             &.disabled {
 539                 color: #999;
 540                 cursor: default;
 541             }
 542
 543             &:active,
 544             &:focus {
 545                 background: transparent none;
 546                 border: 0;
 547                 box-shadow: none;
 548                 text-shadow: none;
 549
 550                 &:not(.disabled):hover:not(.disabled) {
 551                     background: transparent none;
 552                     box-shadow: none;
 553                 }
 554             }
 555
 556             &:hover {
 557                 background: transparent none;
 558                 border: 0;
 559
 560                 &:not(.disabled) {
 561                     background: transparent none;
 562                 }
 563             }
 564
 565             &.active:not(.disabled):hover:not(.disabled) {
 566                 background: transparent none;
 567                 box-shadow: none;
 568             }
 569         }
 570     }
 571
 572     input {
 573         &[type="search"] {
 574             border: 1px solid #CCC;
 575         }
 576     }
 577
 578     &:empty {
 579         border: 0;
 580         padding: 0;
 581     }
 582 } /* /.pager */
 583
 584 .toptabs {
 585     .pager {
 586         margin: 0;
 587         padding-bottom: .7em;
 588         padding-top: .7em;
 589
 590         &.top {
 591             border-top: 0;
 592             padding-top: 0;
 593         }
 594
 595         &.bottom {
 596             border-bottom: 0;
 597             padding-bottom: 0;
 598         }
 599     }
 600 }
 601
 602 .filter_column {
 603     & > input {
 604         &[type="text"] {
 605             border: 0;
 606             color: #999;
 607             font-size: 85%;
 608             width: 100%;
 609         }
 610     }
 611 }
 612
 613 div {
 614     &.dt-button-collection {
 615         width: auto;
 616
 617         button {
 618             &.dt-button {
 619                 border-radius: 2px;
 620                 text-align: left;
 621
 622                 &.buttons-collection {
 623                     border: 0;
 624                 }
 625
 626                 &.buttons-columnVisibility {
 627                     background: #FFF none;
 628                     border: 1px solid #EEE;
 629                     box-shadow: none;
 630                     font-size: 1em;
 631                     margin: 0 0 4px 0;
 632                     padding: .3em .7em;
 633                     text-shadow: none;
 634
 635                     &::before {
 636                         color: #CC0000;
 637                         content: "\f00d";
 638                         display: inline-block;
 639                         font-family: FontAwesome;
 640                         margin-right: .5em;
 641                         width: 1em;
 642                     }
 643
 644                     &:hover {
 645                         background: #FFC none;
 646                         border: 1px solid #999;
 647                         box-shadow: none;
 648
 649                         &::before {
 650                             color: #538200;
 651                             content: "\f00c";
 652                             display: inline-block;
 653                             font-family: FontAwesome;
 654                             margin-right: .5em;
 655                             width: 1em;
 656                         }
 657                     }
 658
 659                     &:active:not(.disabled):hover:not(.disabled) {
 660                         background: transparent none;
 661                         box-shadow: none;
 662                     }
 663
 664                     &.active {
 665                         background: #E6F0F2 none;
 666                         border-color: #999;
 667                         box-shadow: none;
 668
 669                         &:hover {
 670                             background: #FFC none;
 671
 672                             &::before {
 673                                 color:  #CC0000;
 674                                 content: "\f00d";
 675                                 display: inline-block;
 676                                 font-family: FontAwesome;
 677                                 margin-right: .5em;
 678                                 width: 1em;
 679                             }
 680                         }
 681
 682                         &:not(.disabled):hover:not(.disabled) {
 683                             background: transparent none;
 684                             box-shadow: none;
 685                         }
 686
 687                         &::before {
 688                             color: #538200;
 689                             content: "\f00c";
 690                             display: inline-block;
 691                             font-family: FontAwesome;
 692                             margin-right: .5em;
 693                             width: 1em;
 694                         }
 695                     }
 696                 }
 697
 698                 &.buttons-html5,
 699                 &.buttons-print {
 700                     background: #FFF none;
 701                     border: 1px solid #EEE;
 702                     box-shadow: none;
 703                     font-size: 1.2em;
 704                     margin: 0 0 4px 0;
 705                     padding: .3em .7em;
 706                     text-shadow: none;
 707
 708                     &:hover {
 709                         background: #FFC none;
 710                     }
 711                 }
 712
 713                 &.buttons-html5:not(.disabled)::before {
 714                     color: #222BAC;
 715                     display: inline-block;
 716                     font-family: FontAwesome;
 717                     margin-right: .5em;
 718                     width: 1em;
 719                 }
 720
 721                 &.buttons-excel:not(.disabled)::before {
 722                     content: "\f1c3";
 723                 }
 724
 725                 &.buttons-csv:not(.disabled)::before {
 726                     content: "\f0ce";
 727                 }
 728
 729                 &.buttons-copy:not(.disabled)::before {
 730                     content: "\f0c5";
 731                 }
 732
 733                 &.buttons-print:not(.disabled)::before {
 734                     color:  #222BAC;
 735                     content: "\f02f";
 736                     display: inline-block;
 737                     font-family: FontAwesome;
 738                     margin-right: .5em;
 739                     width: 1em;
 740                 }
 741
 742             }
 743         }
 744     }
 745 }
 746
 747 .table_entries {
 748     clear: both;
 749 }
 750
 751 .table_controls {
 752     border-top: 1px solid #EEE;
 753     clear: both;
 754     margin-top: .5em;
 755     padding-top: .5em;
 756 }
 757
 758 @media (min-width: 1275px) {
 759     .dt-button-text {
 760         display: inline;
 761     }
 762
 763     .dataTables_wrapper {
 764         .dataTables_paginate {
 765             .paginate_button {
 766                 &.first,
 767                 &.last {
 768                     display: inline-block;
 769                 }
 770             }
 771         }
 772     }
 773 }
 774
 775 @media only screen and ( min-width: 500px ) {
 776     .dataTables_wrapper {
 777         .dataTables_length {
 778             display: block;
 779         }
 780     }
 781 }
 782
 783 @media only screen and ( min-width: 850px ) {
 784
 785 }
 786
 787 @media only screen and ( max-width: 767px ) {
 788     .dataTables_wrapper {
 789         .dataTables_paginate {
 790             margin-top: 0;
 791         }
 792     }
 793
 794 }
 795
 796 @media only screen and (min-width: 950px) and (max-width: 1125px) {
 797     .dt-button-text {
 798         display: none;
 799     }
 800 }
 801
 802 @media only screen and ( min-width: 950px ) {
 803     .dataTables_wrapper {
 804         .dataTables_paginate {
 805             span {
 806                 .paginate_button {
 807                     display: inline-block;
 808                 }
 809             }
 810         }
 811     }
 812
 813     .table_entries,
 814     .table_controls {
 815         border-top: 0;
 816         clear: none;
 817         margin: 0;
 818         padding: 0;
 819     }
 820 }