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