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