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

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