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
 272 .table_borrowers {
 273     tr {
 274         &:hover {
 275             td {
 276                 background-color: #FFFF99;
 277             }
 278         }
 279     }
 280 }
 281
 282 tfoot {
 283     td {
 284         background-color: $table-odd-row;
 285         font-weight: bold;
 286         vertical-align: middle;
 287     }
 288 }
 289
 290 caption {
 291     color: #000;
 292     font-size: 133.9%;
 293     font-weight: bold;
 294     margin: .3em 0;
 295 }
 296
 297 .highlighted-row,
 298 .highlighted-row td {
 299     background-color: #FFD000 !important;
 300 }
 301
 302 .warned-row,
 303 .warned-row td { background-color: #FF9000 !important }
 304
 305 .high-warned-row,
 306 .high-warned-row td { background-color: #FF0000 !important }
 307
 308 tbody {
 309     tr {
 310         &:nth-child(odd) {
 311             td {
 312                 background-color: $table-odd-row;
 313                 border-right: 1px solid $table-border-color;
 314             }
 315         }
 316     }
 317 }
 318
 319 .dataTables_wrapper {
 320     .dataTables_processing {
 321         background-color: #F4F8F9;
 322         border: 2px solid #82B4BE;
 323         border-radius: 3px;
 324         box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .2);
 325         color: #333;
 326         height: unset;
 327         left: 50%;
 328         margin-left: -125px;
 329         margin-top: -15px;
 330         padding: 1.5em;
 331         position: fixed;
 332         text-align: center;
 333         top: 50%;
 334         width: auto;
 335     }
 336
 337     .dataTables_info {
 338         float: left;
 339         line-height: 1.9em;
 340         padding-right: 1em;
 341         padding-top: 0;
 342     }
 343
 344     .dataTables_length {
 345         display: none;
 346         float: left;
 347         line-height: 1.5em;
 348         padding-right: 1em;
 349     }
 350
 351     .dataTables_filter {
 352         float: left;
 353         padding-right: 1em;
 354     }
 355
 356     .dataTables_paginate {
 357         float: left;
 358         line-height: 1.5em;
 359         padding: 0;
 360         padding-right: 1em;
 361
 362         span {
 363             .paginate_button {
 364                 display: none;
 365             }
 366         }
 367
 368         .paginate_button {
 369             color: #004D99 !important;
 370             padding-bottom: 0;
 371             padding-top: 0;
 372
 373             &:hover,
 374             &:active {
 375                 background: #FFC none;
 376                 border: 1px solid transparent;
 377                 box-shadow: none;
 378                 color: #222BAC !important;
 379             }
 380
 381             &.current {
 382                 background: #E6FCB7 none;
 383                 border: 0;
 384                 color: #666;
 385                 font-weight: bold;
 386
 387                 &:hover,
 388                 &:active {
 389                     background: #E6FCB7 none;
 390                     border: 0;
 391                     box-shadow: none;
 392                     color: #666;
 393                     cursor: default;
 394                 }
 395             }
 396
 397             &.first,
 398             &.previous,
 399             &.next,
 400             &.last {
 401                 &::before,
 402                 &::after {
 403                     display: inline-block;
 404                     font-family: FontAwesome;
 405                     width: 1em;
 406                 }
 407             }
 408
 409             &.first {
 410                 display: none;
 411
 412                 &::before {
 413                     content: "\f100";
 414                     padding-right: .5em;
 415                 }
 416             }
 417
 418             &.previous {
 419                 &::before {
 420                     content: "\f104";
 421                     padding-right: .5em;
 422                 }
 423             }
 424
 425             &.next {
 426                 &::after {
 427                     content: "\f105";
 428                     padding-left: .5em;
 429                 }
 430             }
 431
 432             &.last {
 433                 display: none;
 434
 435                 &::after {
 436                     content: "\f101";
 437                     padding-left: .5em;
 438                 }
 439             }
 440         }
 441     }
 442 }
 443
 444 .pager {
 445     font-size: 90%;
 446
 447     &.top {
 448         border-top: 1px solid $table-border-color;
 449         padding-top: 1em;
 450     }
 451
 452     &.bottom {
 453         border-bottom: 1px solid $table-border-color;
 454         padding-bottom: 1em;
 455     }
 456
 457     button,
 458     div,
 459     a {
 460         &.dt-button {
 461             background: transparent none;
 462             border: 0;
 463             color: #000;
 464             font-size: 1em;
 465             line-height: 1.7em;
 466             margin: 3px 3px 0;
 467             padding: 0 .5em;
 468
 469             &::before {
 470                 content: '';
 471             }
 472
 473             &.disabled {
 474                 color: #999;
 475                 cursor: default;
 476             }
 477
 478             &:active,
 479             &:focus {
 480                 background: transparent none;
 481                 border: 0;
 482                 box-shadow: none;
 483                 text-shadow: none;
 484
 485                 &:not(.disabled):hover:not(.disabled) {
 486                     background: transparent none;
 487                     box-shadow: none;
 488                 }
 489             }
 490
 491             &:hover {
 492                 background: transparent none;
 493                 border: 0;
 494
 495                 &:not(.disabled) {
 496                     background: transparent none;
 497                 }
 498             }
 499
 500             &.active:not(.disabled):hover:not(.disabled) {
 501                 background: transparent none;
 502                 box-shadow: none;
 503             }
 504         }
 505     }
 506
 507     input {
 508         &[type="search"] {
 509             border: 1px solid #CCC;
 510         }
 511     }
 512
 513     &:empty {
 514         border: 0;
 515         padding: 0;
 516     }
 517 } /* /.pager */
 518
 519 .toptabs {
 520     .pager {
 521         margin: 0;
 522         padding-bottom: .7em;
 523         padding-top: .7em;
 524
 525         &.top {
 526             border-top: 0;
 527             padding-top: 0;
 528         }
 529
 530         &.bottom {
 531             border-bottom: 0;
 532             padding-bottom: 0;
 533         }
 534     }
 535 }
 536
 537 .filter_column {
 538     & > input {
 539         &[type="text"] {
 540             border: 0;
 541             color: #999;
 542             font-size: 85%;
 543             width: 100%;
 544         }
 545     }
 546 }
 547
 548 div {
 549     &.dt-button-collection {
 550         width: auto;
 551
 552         button {
 553             &.dt-button {
 554                 border-radius: 2px;
 555                 text-align: left;
 556
 557                 &.buttons-collection {
 558                     border: 0;
 559                 }
 560
 561                 &.buttons-columnVisibility {
 562                     background: #FFF none;
 563                     border: 1px solid #EEE;
 564                     box-shadow: none;
 565                     font-size: 1em;
 566                     margin: 0 0 4px 0;
 567                     padding: .3em .7em;
 568                     text-shadow: none;
 569
 570                     &::before {
 571                         color: #CC0000;
 572                         content: "\f00d";
 573                         display: inline-block;
 574                         font-family: FontAwesome;
 575                         margin-right: .5em;
 576                         width: 1em;
 577                     }
 578
 579                     &:hover {
 580                         background: #FFC none;
 581                         border: 1px solid #999;
 582                         box-shadow: none;
 583
 584                         &::before {
 585                             color: #538200;
 586                             content: "\f00c";
 587                             display: inline-block;
 588                             font-family: FontAwesome;
 589                             margin-right: .5em;
 590                             width: 1em;
 591                         }
 592                     }
 593
 594                     &:active:not(.disabled):hover:not(.disabled) {
 595                         background: transparent none;
 596                         box-shadow: none;
 597                     }
 598
 599                     &.active {
 600                         background: #E6F0F2 none;
 601                         border-color: #999;
 602                         box-shadow: none;
 603
 604                         &:hover {
 605                             background: #FFC none;
 606
 607                             &::before {
 608                                 color:  #CC0000;
 609                                 content: "\f00d";
 610                                 display: inline-block;
 611                                 font-family: FontAwesome;
 612                                 margin-right: .5em;
 613                                 width: 1em;
 614                             }
 615                         }
 616
 617                         &:not(.disabled):hover:not(.disabled) {
 618                             background: transparent none;
 619                             box-shadow: none;
 620                         }
 621
 622                         &::before {
 623                             color: #538200;
 624                             content: "\f00c";
 625                             display: inline-block;
 626                             font-family: FontAwesome;
 627                             margin-right: .5em;
 628                             width: 1em;
 629                         }
 630                     }
 631                 }
 632
 633                 &.buttons-html5,
 634                 &.buttons-print {
 635                     background: #FFF none;
 636                     border: 1px solid #EEE;
 637                     box-shadow: none;
 638                     font-size: 1.2em;
 639                     margin: 0 0 4px 0;
 640                     padding: .3em .7em;
 641                     text-shadow: none;
 642
 643                     &:hover {
 644                         background: #FFC none;
 645                     }
 646                 }
 647
 648                 &.buttons-html5:not(.disabled)::before {
 649                     color: #222BAC;
 650                     display: inline-block;
 651                     font-family: FontAwesome;
 652                     margin-right: .5em;
 653                     width: 1em;
 654                 }
 655
 656                 &.buttons-excel:not(.disabled)::before {
 657                     content: "\f1c3";
 658                 }
 659
 660                 &.buttons-csv:not(.disabled)::before {
 661                     content: "\f0ce";
 662                 }
 663
 664                 &.buttons-copy:not(.disabled)::before {
 665                     content: "\f0c5";
 666                 }
 667
 668                 &.buttons-print:not(.disabled)::before {
 669                     color:  #222BAC;
 670                     content: "\f02f";
 671                     display: inline-block;
 672                     font-family: FontAwesome;
 673                     margin-right: .5em;
 674                     width: 1em;
 675                 }
 676
 677             }
 678         }
 679     }
 680 }
 681
 682 .table_entries {
 683     clear: both;
 684 }
 685
 686 .table_controls {
 687     border-top: 1px solid #EEE;
 688     clear: both;
 689     margin-top: .5em;
 690     padding-top: .5em;
 691 }
 692
 693 @media (min-width: 1275px) {
 694     .dt-button-text {
 695         display: inline;
 696     }
 697
 698     .dataTables_wrapper {
 699         .dataTables_paginate {
 700             .paginate_button {
 701                 &.first,
 702                 &.last {
 703                     display: inline-block;
 704                 }
 705             }
 706         }
 707     }
 708 }
 709
 710 @media only screen and ( min-width: 500px ) {
 711     .dataTables_wrapper {
 712         .dataTables_length {
 713             display: block;
 714         }
 715     }
 716 }
 717
 718 @media only screen and ( min-width: 850px ) {
 719
 720 }
 721
 722 @media only screen and ( max-width: 767px ) {
 723     .dataTables_wrapper {
 724         .dataTables_paginate {
 725             margin-top: 0;
 726         }
 727     }
 728
 729 }
 730
 731 @media only screen and (min-width: 950px) and (max-width: 1125px) {
 732     .dt-button-text {
 733         display: none;
 734     }
 735 }
 736
 737 @media only screen and ( min-width: 950px ) {
 738     .dataTables_wrapper {
 739         .dataTables_paginate {
 740             span {
 741                 .paginate_button {
 742                     display: inline-block;
 743                 }
 744             }
 745         }
 746     }
 747
 748     .table_entries,
 749     .table_controls {
 750         border-top: 0;
 751         clear: none;
 752         margin: 0;
 753         padding: 0;
 754     }
 755 }