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