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