indico/htdocs/sass/modules/_registrationform.scss

   1 /* This file is part of Indico.
   2  * Copyright (C) 2002 - 2015 European Organization for Nuclear Research (CERN).
   3  *
   4  * Indico is free software; you can redistribute it and/or
   5  * modify it under the terms of the GNU General Public License as
   6  * published by the Free Software Foundation; either version 3 of the
   7  * License, or (at your option) any later version.
   8  *
   9  * Indico is distributed in the hope that it will be useful, but
  10  * WITHOUT ANY WARRANTY; without even the implied warranty of
  11  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  12  * General Public License for more details.
  13  *
  14  * You should have received a copy of the GNU General Public License
  15  * along with Indico; if not, see <http://www.gnu.org/licenses/>.
  16  */
  17
  18 @import 'base';
  19 @import 'compass';
  20 @import 'compass/css3/user-interface';
  21 @import 'compass/support';
  22 @import 'partials/boxes';
  23 @import 'partials/buttons';
  24 @import 'partials/icons';
  25 @import 'partials/toolbars';
  26
  27 // ============================================================================
  28 // Base classes
  29 // ============================================================================
  30
  31 %regform-section {
  32     @extend .i-box;
  33     @extend .i-box.titled;
  34     margin-top: 25px;
  35 }
  36
  37 .regform-section-title {
  38     @extend %i-box-title;
  39 }
  40
  41 // ============================================================================
  42 // Section display
  43 // ============================================================================
  44
  45 .regform-section {
  46     @extend %regform-section;
  47     width:750px;
  48
  49     .i-box-header {
  50         table {
  51             td {
  52                 vertical-align: top;
  53             }
  54
  55             .section-header-content {
  56                 width: 100%;
  57                 max-width: 568px;
  58             }
  59
  60             .section-toolbar {
  61                 width: 150px;
  62             }
  63         }
  64
  65         .clearableinput + .clearableinput {
  66             margin-top: 3px;
  67         }
  68     }
  69
  70     .section-field-divisor {
  71         & > span {
  72             color: $gray;
  73             font-size: 1.2em;
  74             margin-left: 4px;
  75             vertical-align: -8%;
  76         }
  77     }
  78
  79     .section-group-title {
  80         font-weight: bold;
  81         margin-top: 15px;
  82     }
  83
  84     .section-placeholder {
  85         color: $gray;
  86         font-style: italic;
  87     }
  88
  89     .section-sortable-handle {
  90         @include icon-before('icon-handle');
  91         @include transition(
  92             background-color $default-transition-duration $default-transition-function,
  93             height $default-transition-duration $default-transition-function
  94         );
  95
  96         background-color: lighten($dark-gray, $color-variation);
  97         cursor: move;
  98         font-size: 1.2em;
  99         height: 10px;
 100         margin: -10px -10px 10px -10px;
 101         text-align: center;
 102
 103         &:hover,
 104         &:active {
 105             @include border-bottom();
 106             background-color: white;
 107             height: 20px;
 108
 109             &:before {
 110                 color: $dark-gray;
 111                 top: 3px;
 112             }
 113         }
 114
 115         &:before {
 116             @include rotate(90deg);
 117             @include single-transition(top);
 118             color: $light-gray;
 119             display: inline-block;
 120             position: relative;
 121             top: -3px;
 122         }
 123     }
 124 }
 125
 126 .regform-field {
 127     @include single-transition(background-color);
 128
 129     min-height: 27px;
 130     margin: 2px -10px;
 131     padding: 0 10px;
 132     // TODO Any better idea? This is hackish as hell
 133     width: 102.8%;
 134     word-break: break-word;
 135
 136     &.disabled {
 137         background: $light-gray;
 138
 139         & .field-caption {
 140             color: $dark-gray;
 141         }
 142     }
 143
 144     .field-actions {
 145         visibility: hidden;
 146         float: right;
 147         line-height: 27px;
 148         padding: 0 5px;
 149         white-space: nowrap;
 150
 151         a {
 152             color: $blue;
 153             display: inline-block;
 154         }
 155     }
 156
 157     .field-caption {
 158         width: 125px;
 159         padding: 4px 0;
 160         vertical-align: top;
 161     }
 162
 163     .field-description {
 164         color: $dark-gray;
 165         font-size: 11px;
 166         max-width: 440px;
 167         text-align: justify;
 168         padding: 5px 2px 10px 2px;
 169     }
 170
 171     .field-input {
 172         vertical-align: top;
 173         padding-top: 3px;
 174
 175         .field-input-only-content {
 176             display: inline-block;
 177             max-width: 570px;
 178             padding-bottom: 3px;
 179         }
 180     }
 181 }
 182
 183 // ============================================================================
 184 // Post-registration page
 185 // ============================================================================
 186
 187 .regform-done {
 188     @extend %regform-section;
 189     margin-bottom: 15px;
 190
 191     .regform-done-title {
 192         @include border-bottom(lighten($gray, $color-variation));
 193         display: block;
 194         font-size: 1.3em;
 195         margin: 15px 0 5px 0;
 196     }
 197
 198     tr:first-child .regform-done-title {
 199         margin-top: 0;
 200     }
 201
 202     .regform-done-caption {
 203         border-bottom: 1px dashed lighten($gray, $color-variation);
 204         border-right: 1px dashed lighten($gray, $color-variation);
 205         color: $dark-gray;
 206         text-align: right;
 207         padding-right: 8px;
 208         width: 120px;
 209     }
 210
 211     .regform-done-data {
 212         padding-left: 5px;
 213         vertical-align: top;
 214     }
 215
 216     .regform-done-table-title {
 217         @include border-bottom(lighten($gray, $color-variation));
 218         font-weight: bold;
 219
 220         &:not(:first-child) {
 221             padding-left: 15px;
 222         }
 223     }
 224
 225     .regform-done-table-item {
 226         td {
 227             vertical-align: top;
 228
 229             &:not(:first-child) {
 230                 padding-left: 15px;
 231             }
 232         }
 233
 234         &:nth-child(odd) {
 235             background: $light-gray;
 236         }
 237     }
 238
 239     .regform-done-table-total {
 240         @include border-top(lighten($gray, $color-variation));
 241         font-weight: bold;
 242         padding-top: 5px;
 243     }
 244
 245     .regform-done-conditions {
 246         margin-top: 20px;
 247
 248         input[type=checkbox] {
 249             float: left;
 250             margin-left: 1px;
 251         }
 252
 253         td:first-child {
 254             width: 100%;
 255         }
 256     }
 257
 258     .regform-done-checkout {
 259         font-size: 1.1em;
 260         margin-top: 10px;
 261     }
 262
 263     .not-selected {
 264         color: $gray;
 265         font-style: italic;
 266     }
 267
 268     .payment-status {
 269         font-weight: bold;
 270
 271         &.payment-done {
 272             color: $green;
 273         }
 274
 275         &.payment-pending {
 276             color: $yellow;
 277         }
 278
 279         &.payment-not-paid {
 280             color: $red;
 281         }
 282
 283         i {
 284             font-size: 1.5em;
 285             &:before {
 286                 vertical-align: -15%;
 287             }
 288         }
 289     }
 290
 291     .payment-terms-agreement {
 292         color: $light-black;
 293     }
 294 }
 295
 296 .regform-add-field-qtip {
 297     @include border-all();
 298     background: white;
 299
 300     .qtip-content {
 301         text-align: center;
 302     }
 303
 304     .qtip-titlebar {
 305         @include border-bottom();
 306         padding: 5px 0;
 307     }
 308
 309     .qtip-title {
 310         color: $light-black;
 311         text-align: center;
 312         font-size: 1.2em;
 313     }
 314
 315     .ui-tooltip-content {
 316         padding: 0px;
 317     }
 318
 319     .ui-tooltip-titlebar {
 320         border-bottom: none !important;
 321         background: transparent;
 322     }
 323
 324     .i-big-button {
 325         margin: 2px 0;
 326     }
 327 }
 328
 329 .action-button {
 330     @extend .i-button;
 331     @extend .i-button.big;
 332     @extend .i-button.highlight;
 333     @extend .i-button.next;
 334     font-weight: bold;
 335     margin-left: 2em;
 336     margin-right: 0;
 337     white-space: nowrap;
 338 }
 339
 340 .permalink-text {
 341     color: $light-black;
 342     margin-top: 2em;
 343     text-align: center;
 344
 345     .permalink {
 346         @extend %font-family-monospace;
 347         color: $light-black;
 348         font-size: 0.8em;
 349         margin-top: 0.5em;
 350         text-align: center;
 351         width: 100%;
 352     }
 353 }
 354
 355 // ============================================================================
 356 // Editable-specific
 357 // ============================================================================
 358
 359 .regform-field.editable {
 360     &:hover,
 361     &:active {
 362         background-color: $light-blue;
 363
 364         .field-actions {
 365             visibility: visible;
 366         }
 367     }
 368 }
 369
 370 .regform-table {
 371     thead {
 372         th {
 373             @include border-bottom();
 374             padding-bottom: 4px;
 375             vertical-align: top;
 376         }
 377
 378         td {
 379             background: white !important;
 380         }
 381
 382         th:first-of-type {
 383             text-align: left;
 384         }
 385     }
 386
 387     td, th {
 388         padding: 4px 4px;
 389     }
 390
 391     tr {
 392         &:hover td {
 393             background: $light-blue;
 394         }
 395
 396         &.empty-row:hover td {
 397             background: white !important;
 398         }
 399
 400         td.row-actions {
 401             span {
 402                 padding-right: 6px;
 403             }
 404
 405             a {
 406                 color: $blue;
 407                 visibility: hidden;
 408             }
 409         }
 410
 411         &:hover td.row-actions a {
 412             visibility: visible;
 413         }
 414     }
 415
 416     .accompanying-col {
 417         background: $light-gray;
 418     }
 419 }
 420
 421 // ============================================================================
 422 // Field-specific
 423 // ============================================================================
 424
 425 .regform-field {
 426     label {
 427         font-weight: normal;
 428     }
 429
 430     textarea {
 431         resize: none;
 432     }
 433
 434     ul {
 435         margin: 0;
 436         padding-left: 0;
 437
 438         li {
 439             list-style: none;
 440         }
 441     }
 442
 443     .accommodation-option-item {
 444         padding-left : 15px;
 445     }
 446
 447     .checkbox-info {
 448         margin: 3px 0 0 21px;
 449     }
 450
 451     .label-price {
 452         margin-left: 2px;
 453         padding-left: 2px;
 454     }
 455
 456     .label-text {
 457         text-align: justify;
 458     }
 459
 460     .file-link {
 461         @include icon-before('icon-file');
 462         padding-left: 2px;
 463     }
 464
 465     .remove-file {
 466         @include icon-before('icon-close');
 467         color: $light-black;
 468         font-size: 1.1em;
 469
 470         &:hover {
 471             color: $red;
 472         }
 473     }
 474
 475     .dateField {
 476         img {
 477             right: 22px;
 478         }
 479
 480         input[type=text] {
 481             margin: 0 2px;
 482         }
 483     }
 484 }
 485
 486 // ============================================================================
 487 // Section-specific
 488 // ============================================================================
 489
 490 .regform-section {
 491     textarea.reason-input {
 492         max-width: 100%;
 493         width: 100%;
 494     }
 495 }
 496
 497 // ============================================================================
 498 // Billable-specific
 499 // ============================================================================
 500
 501 .no-currency-selected {
 502     color: $red;
 503     vertical-align: -5%;
 504 }
 505
 506 .available-text {
 507     color: green;
 508 }
 509
 510 .unavailable-text {
 511     color: red;
 512 }
 513
 514 // ============================================================================
 515 // Dialog-specific
 516 // ============================================================================
 517
 518 .regform-dialog {
 519     .mandatory-check {
 520         float: left;
 521         line-height: 21px;
 522         position: absolute;
 523
 524         span {
 525             vertical-align: 10%;
 526         }
 527     }
 528
 529     .description-input {
 530         margin: 0 2px;
 531         width: 345px;
 532         resize: none;
 533     }
 534
 535     .caption-input {
 536         margin: 0 2px;
 537         width: 230px;
 538         resize: none;
 539     }
 540
 541     .free-text-input {
 542         margin: 0 2px;
 543         width: 260px;
 544         resize: none;
 545     }
 546 }
 547
 548 .regFormSectionNewSection {
 549     @extend %font-family-title-light;
 550     width:625px;
 551     font-size: 20px;
 552     color: #0C4566;
 553     padding: 10px;
 554     font-weight: bold;
 555     margin: 0px;
 556 }
 557
 558 .regFormDialogTabContent {
 559     margin-top: 20px;
 560     min-width: 480px;
 561 }
 562
 563 .regFormDialogEditionTable {
 564     margin-bottom: 20px;
 565     margin-right: 20px;
 566 }
 567
 568 .regFormDialogIntroText {
 569     margin-bottom: 15px;
 570 }
 571
 572 .regFormDialogEditLine {
 573     clear: both;
 574     margin-right: 30px;
 575     margin-bottom: 15px;
 576 }
 577
 578 .regFormDialogEditDatesOffset {
 579     border-collapse: collapse;
 580     margin-bottom: 15px;
 581
 582     td {
 583         padding: 3px;
 584     }
 585
 586     tr:not(.regFormDialogCaptionLine) td:first-child {
 587         padding-left: 20px;
 588     }
 589
 590     tr.regFormDialogCaptionLine td {
 591         padding-top: 0.5em;
 592     }
 593
 594     input {
 595         width: 40px;
 596     }
 597 }
 598
 599 .regFormDialogCaption {
 600     margin-top: 3px;
 601     width: 90px;
 602     display: inline-block;
 603     vertical-align: top;
 604     white-space: normal;
 605 }
 606
 607 .regFormDialogCaptionLine {
 608     min-width: 180px;
 609     margin-bottom: 7px
 610 }
 611
 612 .regFormEditLine{
 613     padding-bottom : 7px;
 614 }
 615
 616 /* Form Display CSS */
 617
 618 .regform-mandatory-info {
 619     margin: 10px 0px;
 620     text-align: center;
 621     color: $black;
 622     font-style: italic;
 623 }
 624
 625 /* Form Edition CSS */
 626
 627 input.regFormTitleInputMgmt {
 628     @extend %font-family-title-light;
 629     width : 600px;
 630     font-size: 20px;
 631     color: $dark-blue;
 632     font-style: normal;
 633     font-weight: bold;
 634 }
 635
 636 input[name="price"].ng-invalid-required {
 637     border: 1px solid red;
 638 }
 639
 640 textarea.regFormDescriptionInputMgmt {
 641     @extend %font-family-description;
 642     width : 600px;
 643     font-size: 14px;
 644     color: rgb(34, 34, 34);
 645     font-style: italic;
 646     font-weight: normal;
 647 }
 648
 649 .regFormSectionTable,
 650 .regFormDoneTable {
 651     border: 1px solid #CCC;
 652     border-radius: 5px;
 653     -moz-border-radius: 5px;
 654     padding: 15px;
 655     width:70%;
 656     padding-bottom:10px;
 657     margin-top: 10px;
 658 }
 659
 660 .regFormMandatoryField {
 661     color: #812;
 662     font-weight: normal;
 663 }
 664
 665 /* CSS for the tabs */
 666
 667 .regFormDonePlacesNeeded {
 668     font-style: italic;
 669     padding-left: 5px;
 670 }
 671
 672 .row {
 673   margin-left: -20px;
 674   *zoom: 1;
 675 }
 676 .row:before,
 677 .row:after {
 678   display: table;
 679   content: "";
 680 }
 681 .row:after {
 682   clear: both;
 683 }
 684 [class*="span"] {
 685   float: left;
 686 }
 687 .container,
 688 .navbar-fixed-top .container,
 689 .navbar-fixed-bottom .container {
 690   width: 940px;
 691 }
 692
 693 // ============================================================================
 694 // Tabs-related
 695 // ============================================================================
 696
 697 .tabbable {
 698   *zoom: 1;
 699   white-space: nowrap;
 700 }
 701 .tabbable:before,
 702 .tabbable:after {
 703   display: table;
 704   content: "";
 705 }
 706 .tabbable:after {
 707   clear: both;
 708 }
 709 .tabs-left > .nav-tabs {
 710   border-bottom: 0;
 711 }
 712 .tabs-left > .nav-tabs > li,
 713 .tabs-right > .nav-tabs > li {
 714   float: none;
 715 }
 716 .tabs-left > .nav-tabs > li > a,
 717 .tabs-right > .nav-tabs > li > a {
 718   min-width: 74px;
 719   margin-right: 0;
 720   margin-bottom: 3px;
 721 }
 722 .tabs-left > .nav-tabs {
 723   display: inline-block;
 724   vertical-align: top;
 725   margin-right: 19px;
 726   border-right: 1px solid #ddd;
 727 }
 728 .tabs-left > .nav-tabs > li > a {
 729   margin-right: -1px;
 730   -webkit-border-radius: 4px 0 0 4px;
 731   -moz-border-radius: 4px 0 0 4px;
 732   border-radius: 4px 0 0 4px;
 733 }
 734 .tabs-left > .nav-tabs > li > a:hover {
 735   border-color: #eeeeee #dddddd #eeeeee #eeeeee;
 736 }
 737 .tabs-left > .nav-tabs .active > a,
 738 .tabs-left > .nav-tabs .active > a:hover {
 739   border-color: #ddd transparent #ddd #ddd;
 740   *border-right-color: #ffffff;
 741 }
 742
 743 .nav {
 744   margin-left: 0;
 745   margin-bottom: 18px;
 746   list-style: none;
 747 }
 748 .nav > li > a {
 749   display: block;
 750 }
 751 .nav > li > a:hover {
 752   text-decoration: none;
 753   background-color: #eeeeee;
 754 }
 755 .nav > .pull-right {
 756   float: right;
 757 }
 758 .nav .nav-header {
 759   display: block;
 760   padding: 3px 15px;
 761   font-size: 11px;
 762   font-weight: bold;
 763   line-height: 18px;
 764   color: #999999;
 765   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 766   text-transform: uppercase;
 767
 768 }
 769 .nav li + .nav-header {
 770   margin-top: 9px;
 771 }
 772
 773 .nav-tabs > li,
 774 .nav-pills > li {
 775   float: left;
 776 }
 777 .nav-tabs > li > a,
 778 .nav-pills > li > a {
 779   padding-right: 12px;
 780   padding-left: 12px;
 781   margin-right: 2px;
 782   line-height: 14px;
 783 }
 784 .nav-tabs {
 785   border-bottom: 1px solid #ddd;
 786 }
 787 .nav-tabs > li {
 788   margin-bottom: -1px;
 789 }
 790 .nav-tabs > li > a {
 791   padding-top: 8px;
 792   padding-bottom: 8px;
 793   line-height: 18px;
 794   border: 1px solid transparent;
 795   -webkit-border-radius: 4px 4px 0 0;
 796   -moz-border-radius: 4px 4px 0 0;
 797   border-radius: 4px 4px 0 0;
 798 }
 799 .nav-tabs > li > a:hover {
 800   border-color: #eeeeee #eeeeee #dddddd;
 801 }
 802 .nav-tabs > .active > a,
 803 .nav-tabs > .active > a:hover {
 804   color: #555555;
 805   background-color: #ffffff;
 806   border: 1px solid #ddd;
 807   border-bottom-color: transparent;
 808   cursor: default;
 809 }
 810 .tab-content {
 811   display: inline-block;
 812   overflow: auto;
 813 }
 814 .tabs-below > .nav-tabs,
 815 .tabs-right > .nav-tabs,
 816 .tabs-left > .nav-tabs {
 817   border-bottom: 0;
 818 }
 819 .tab-content > .tab-pane,
 820 .pill-content > .pill-pane {
 821   display: none;
 822 }
 823 .tab-content > .active,
 824 .pill-content > .active {
 825   display: block;
 826 }
 827
 828 // ============================================================================
 829 // Sortable-related
 830 // ============================================================================
 831
 832 %regform-sortable-placeholder {
 833     background-color: $light-gray;
 834 }
 835
 836 .regform-field-sortable-placeholder {
 837     @extend %regform-sortable-placeholder;
 838     @include border-vert($gray, dashed);
 839     margin: 2px -10px;
 840     // TODO Any better idea? This is hackish as hell
 841     width: 102.9%;
 842 }
 843
 844 .regform-section-sortable-placeholder {
 845     @extend %regform-sortable-placeholder;
 846     @extend %regform-section;
 847     @include border-all($gray, dashed);
 848     @include box-shadow(none);
 849 }
 850
 851 .regform-table-sortable-placeholder {
 852     background-color: $light-blue;
 853     line-height: 1.6em;
 854 }
 855
 856 .regform-field.editable {
 857     .field-sortable-handle {
 858         color: $dark-gray;
 859         line-height: 26px;
 860         vertical-align: top;
 861         width: 15px;
 862     }
 863
 864     &:not(.disabled):hover .field-sortable-handle,
 865     &:not(.disabled):active .field-sortable-handle {
 866         @include icon-before('icon-handle');
 867         cursor: move;
 868     }
 869 }
 870
 871 .regform-table {
 872     padding-bottom: 25px;
 873
 874     tr:hover .table-sortable-handle,
 875     td:active .table-sortable-handle{
 876         @include icon-before('icon-handle');
 877     }
 878
 879     .table-sortable-handle {
 880         color: $dark-gray;
 881         width: 15px;
 882         cursor: move;
 883     }
 884 }
 885
 886 // ============================================================================
 887 // Animation-related
 888 // ============================================================================
 889
 890 .regform-section .i-box-header,
 891 .i-button.highlightable {
 892     @include single-transition(background, 1s, ease-out);
 893 }
 894
 895 .section-highlight-enter .regform-section .i-box-header,
 896 .button-highlight-enter {
 897     background: $yellow;
 898 }
 899
 900 // ============================================================================
 901 // Contenteditable-related
 902 // ============================================================================
 903
 904 .regform-section .i-box-title,
 905 .regform-section .i-box-description,
 906 .regFormText {
 907     &[contenteditable]+.button-box {
 908         a {
 909             text-shadow: none;
 910             opacity: 0.5;
 911
 912             &:hover {
 913                 opacity: 1;
 914             }
 915
 916             &:active {
 917                 text-shadow: 1px 1px 1px $gray;
 918             }
 919         }
 920
 921         .input-clear {
 922             color: $red;
 923
 924             &:hover {
 925                 color: $red;
 926             }
 927
 928             &:active {
 929                 color: $red;
 930             }
 931         }
 932
 933         .input-action {
 934             color: $green;
 935
 936             &:hover {
 937                 color: $green;
 938             }
 939             &:active {
 940                 color: $green;
 941             }
 942         }
 943     }
 944 }
 945
 946 .regform-section .i-box-description[contenteditable],
 947 .regFormText[contenteditable] {
 948     &.focus {
 949         min-height: 27px !important;
 950     }
 951
 952     &+.button-box a {
 953         font-size: 1.5em !important;
 954         line-height: 27px !important;
 955     }
 956 }
 957
 958 .regform-section .i-box-description[contenteditable] {
 959     &.focus {
 960         padding-right: 3.6em !important;
 961     }
 962 }
 963
 964 // ============================================================================
 965 // RegistrantsListStats-related
 966 // ============================================================================
 967
 968 .i-box.registrant-stats {
 969     &> .i-box-header {
 970         & > .i-box-title { float: left; }
 971         & > .i-box-header-text {
 972             color: $light-black;
 973             font-style: italic;
 974
 975             &.currency-info {
 976                 @include border-radius();
 977                 font-style: normal;
 978                 font-weight: bold;
 979                 font-size: 0.8em;
 980                 float: right;
 981                 text-align: center;
 982                 color: $light-gray;
 983                 background-color: $dark-blue;
 984                 padding: 0.3em;
 985
 986             }
 987
 988             &.headline { clear: both; }
 989         }
 990     }
 991     &> .i-box-content {
 992         &> table.registrant-stats {
 993             border-collapse: collapse;
 994
 995             thead {
 996                 tr:last-child th {
 997                     font-weight: bold;
 998                     border-bottom: 2px solid $gray;
 999                     padding-right: 5px;
1000                 }
1001                 th {
1002                     padding-right: 10px;
1003                     text-align: center;
1004                 }
1005             }
1006             tbody {
1007                 tr {
1008                     &:nth-child(even) { background-color: $light-gray; }
1009                     &:nth-child(odd) { background-color: white; }
1010                     &:first-child td { border-top: 0; }
1011
1012                     &:not(.sub-row) td.cancelled-item:first-child {
1013                         position: relative;
1014
1015                         &:after {
1016                             border-bottom: 2px solid $light-black;
1017                             content: "";
1018                             left: 1%;
1019                             position: absolute;
1020                             right: 1%;
1021                             top: 48%;
1022                             width: 98%;
1023                         }
1024                     }
1025                 }
1026                 td {
1027                     border-top: 1px solid $gray;
1028
1029                     &:first-child, &:last-child { font-weight: bold; }
1030
1031                     &.paid-unpaid-progress > .i-progress > .i-progress-bar {
1032                         &:first-child { background: $pastel-green; }
1033                         &:nth-child(2) { background: $pastel-red; }
1034                     }
1035                     &.no-stats-data { color: $dark-gray; }
1036                     &.paid-amount span { color: $green; }
1037                     &.unpaid-amount {
1038                         &:before { content: "("; }
1039                         &:after { content: ")"; }
1040                         span { color: $red; }
1041                     }
1042                     &.stick-left { padding-right: 1px; }
1043                     &.stick-right { padding-left: 1px; }
1044                 }
1045             }
1046             tr {
1047                 td:first-child:before {
1048                     display: inline-block;
1049                     line-height: 1em;
1050                     font-size: 1.2em;
1051                     vertical-align: middle;
1052                     font-weight: bold;
1053                 }
1054                 &.header-row  {
1055                     cursor: pointer;
1056                     @include user-select(none);
1057
1058                     td:first-child {
1059                         @include icon-before('icon-arrow-down');
1060
1061                         border-bottom: 0;
1062                         &:before {
1063                             @include transition(transform 0.15s ease-out);
1064
1065                             -webkit-transform-origin: 50%  51%; // improve blurry text on rotate with chrome
1066                         }
1067                     }
1068                     &.collapsed td:first-child:before { @include rotate(-90deg); }
1069                 }
1070                 &.single-row td:first-child:before { content: "\2001"; }
1071                 &.sub-row td:first-child { border-top: 0px; }
1072             }
1073             th, td {
1074                 padding: 5px;
1075                 text-align: right;
1076
1077                 &:first-child { text-align: left; }
1078                 i[class^="icon-"] { vertical-align: middle; }
1079             }
1080         }
1081
1082         .stats-overview {
1083             font-size: 2em;
1084             font-weight: bold;
1085             color: $light-black;
1086             display: block;
1087
1088             &> *.no-info {
1089                 font-size: 1em;
1090                 color: $dark-gray;
1091                 font-style: italic;
1092                 font-weight: lighter;
1093             }
1094             &> *:last-child {
1095                 float: right;
1096                 clear: both;
1097             }
1098         }
1099
1100         .stats-item {
1101             display: block;
1102             width: 100%;
1103             position: relative;
1104             margin: 0.6em 0;
1105             font-size: 1.2em;
1106             height: 1.5em;
1107             vertical-align: middle;
1108             color: $black;
1109             &> * {
1110                 &:first-child {
1111                     position: relative;
1112                     line-height: 1.5em;
1113                     float: left;
1114                     margin-right: 0.4em;
1115                 }
1116                 &:last-child {
1117                     display: block;
1118                     overflow: auto;
1119
1120                     & > .i-progress {
1121                         background-color: $pastel-green;
1122
1123                         & > .i-progress-bar {
1124                             background-color: $pastel-red;
1125                         }
1126                     }
1127                 }
1128             }
1129         }
1130
1131         &> .i-badges-list > .i-badge > .i-badge-content { height: 6.5em; }
1132
1133         .jqplot-point-label {
1134             color: white;
1135             z-index: 100;
1136         }
1137         .jqplot-yaxis-tick {
1138             right: 0;
1139             margin-right: 0.5em;
1140         }
1141         .jqplot-xaxis-tick { margin-top: 0.2em; }
1142     }
1143
1144     #countriesPlot {
1145         @include user-select(none);
1146
1147         margin-top: -1.2em;
1148     }
1149 }