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

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