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