_custom.scss 16.5 KB
Newer Older
1 2
// Generic custom css (anything longer than a screen view should have its own component file)

Jen Zajac's avatar
Jen Zajac committed
3 4 5
#exportgeneration {
    text-align: center;
}
6 7 8 9 10 11 12 13 14
#export .radio {
    padding-bottom: 5px;
    label {
        padding-top: 3px;
    }
    .description {
        padding-top: 0;
    }
}
Jen Zajac's avatar
Jen Zajac committed
15 16

#progress-iframe { // old style progress bars, e.g. portfolio export
17
    border: 1px solid $gray-500;
Jen Zajac's avatar
Jen Zajac committed
18 19 20 21 22 23
    height: 40px;
    width: 100%;
    max-width: 650px;
    margin: 20px 0;
}

24 25
.task-item .complete-task .icon,
.task-item .overdue-task .icon {
26 27 28 29 30
    margin-left: -8px; // correct alignment
}

.task-item .btn-group {
    margin-right: -8px; // correct alignment
31 32 33 34
    a {
        font-size: 10px;
        padding: 2px 8px;
    }
35
}
36

37 38 39 40 41 42 43 44
.no-results {
    @extend .lead;
    clear: both;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

45 46 47 48 49
.no-results-small {
    @extend .no-results;
    padding: 15px 0;
}

50 51 52 53 54 55 56 57 58
.wysiwyg {
    label {
        display:block;
    }
    label  + .mce-tinymce {
        width:100%;
    }
}

59 60 61
.wysiwyg.view-description {
    width: 70%;
}
62 63 64 65 66
.wysiwyg.under-label-help {
    label  + .mce-tinymce {
        width:70%;
    }
}
67

68 69
.toolbar-affix.affix {
    position: fixed;
70
    top: 30px;
71 72 73 74
    z-index: 1;
}

.layoutthumb {
75
    rect.layout1 {
76 77
        fill: scale-color($card-bg, $lightness: -10%);
        stroke: $card-border-color;
78 79 80
    }

    rect.layout0 {
81
        fill: scale-color($card-bg, $lightness: -5.25%);
82

83
        stroke: $card-border-color;
84
    }
85 86

    svg {
87
        @include media-breakpoint-down(md) {
88 89 90
           zoom: 0.8;
       }
    }
91
}
Pat Kira's avatar
Pat Kira committed
92

93 94 95
// Show that layout thumbnails can be clicked (Bug 1543358)
.layoutoption > .thumbnail {
    cursor: pointer;
96 97 98 99 100 101
    // Add border around layout thumbnails
    display: block;
    padding: 4px;
    margin-bottom: 21px;
    line-height: $line-height-base;
    background-color: transparent;
102
    border: 1px solid $card-border-color;
103 104
    border-radius: 2px;
    transition: border .2s ease-in-out;
105
}
106 107 108 109 110 111 112 113
#createcustomlayoutpane .layoutthumb {
    border: 1px solid $card-border-color;
    border-radius: 2px;
    padding: 4px;
    display: table;
    overflow: hidden;
    position: relative;
}
114

Pat Kira's avatar
Pat Kira committed
115 116 117
.blocktype-radio {
    display: none;
}
Naomi Guyer's avatar
Naomi Guyer committed
118 119 120

// see emaillist.tpl
.email-list {
121
    margin-top: 20px;
Naomi Guyer's avatar
Naomi Guyer committed
122
    display: block;
123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
    .description:not(.html) {
        padding: 4px 0 0 18px
    }
    .stacked-label {
        width: auto;
        margin-right: 10px;
        vertical-align: super;
    }
    .unvalidated, .unsent, .validated {
        margin-top: 20px;
        &:last-of-type {
            margin-bottom: 20px;
        }
        + .input-group {
            margin: 20px 0;
        }
139
    }
140
    @include media-breakpoint-up(md) {
Naomi Guyer's avatar
Naomi Guyer committed
141
        display: inline-block;
142
        min-width: 400px;
Naomi Guyer's avatar
Naomi Guyer committed
143
    }
144
    @include media-breakpoint-up(xl) {
145
        min-width: 500px;
Naomi Guyer's avatar
Naomi Guyer committed
146 147
    }
}
148 149 150 151 152 153

// Styles for select2 in forms
// overriding select2 default styles
.select2-container-multi {
    max-width: 85% !important;
    display: inline-block;
154
    @include media-breakpoint-up(md) {
155 156
        width: 420px !important;
    }
157
    @include media-breakpoint-up(xl) {
158 159 160 161 162 163 164 165 166 167
        width: 500px !important;
    }
    &.select2-dropdown-open {
        .select2-choices {
            border-radius: 4px 4px 0 0;
        }
    }
    .select2-choices {
        @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset);
        border-radius: 4px;
168
        background-color: $body-bg;
169
        border: 1px solid $input-border-color;
170 171 172 173 174 175 176
        background-image: none;
        width: 100%;
        .select2-search-choice {
            border: none;
        }
    }
}
Pat Kira's avatar
Pat Kira committed
177

178 179
// Specific card-secondary styling for the edit page layout
.card-secondary.blockinstance > .card-header > .blockinstance-header {
180 181 182 183 184 185
    display: block;
    padding-left: 10px;
    padding-right: 80px;
    word-break: normal;
}

186 187
// Style label institution selection
.institutionselector {
188 189 190
    .select {
        margin-bottom: 15px;
    }
191
    span.pseudolabel,
192
    label {
193
        display: table-cell;
194 195
        font-weight: bold;
    }
196
    @include media-breakpoint-up(md) {
197 198 199 200 201
        float: right;
        width: 50%;
        .form-group {
            float: right;
        }
202
        label {
203 204 205 206 207 208
            display: table-cell;
            width: auto;
        }
        .picker {
            width: auto;
            display: table-cell;
209
        }
210
    }
Liam's avatar
Liam committed
211 212 213
    > form {
        justify-content: flex-end;
    }
214
}
215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233

// Reset checkout boxes inside col in portfolio export page
.portfolio-export {
    .heading {
        margin-top: 15px;
    }
    .heading-exportable-pages {
        margin-top: 0;
        float: left;
    }
    .btn-group {
        float: right;
    }
}
.exportable-artefacts {
    .row {
        :first-child {
            clear: both;
        }
234
        border-bottom: 1px solid $list-group-border-color;
235 236 237 238 239 240 241 242 243 244
    }
    .checkbox input[type=checkbox] {
        margin-left: 0;
    }
    label {
        margin-bottom: 10px;
    }
}
.exportable-artefact-container {
    padding: 15px 15px 0;
245
    background-color: rgba($gray-100, 0.2);
246
}
247

Liam Sharpe's avatar
Liam Sharpe committed
248 249 250 251 252
// reset the padding when the individual font file is collapsed in font install
.individualfiles.form-group {
    padding: 0;
    border-bottom: 0 none;
}
253

254
// Login card
255 256 257
.login-externallink {
    display: inline-block;
}
258

259 260 261 262 263 264 265 266 267
.login-related-links {
  .register-link{
    padding-right: 2px;
  }
  .forgotpass-link {
    padding-left: 5px;
  }
}

268 269
.progress-bar {
    position: relative;
270
    height: 100%;
271 272 273 274 275 276 277
    &.small-progress span {
        display: block;
        left: 100%;
        padding-left: 5px;
        position: absolute;
    }
}
278

279 280 281 282 283 284 285
.progress-bar .decompress-link {
    color: $progress-bar-color;
    text-decoration: underline;
    display: inline-block;
    margin-top: 8px;
}

286 287
// Admin user search page (advanced options)
// limit the size of dynamic to match select box above
288 289 290 291 292 293 294 295
.userserach-filter {
    margin-bottom: 15px;
    .loggedindate-container {
        margin-top: 10px;
        max-width: 250px;
    }
    .duplicateemail-filter {
        margin-top: 10px;
296
        justify-content: flex-start;
297
    }
298 299
}

300 301 302 303 304 305 306 307
// Puts the date picker in form-condensed fields on the next line
.form-condensed {
    .picker {
        &.first {
            margin-left: 270px;
        }
    }
}
308

309 310 311 312 313
// Gallery thumbnails
// override bootstrap thumbnails styling
.thumbnails {
    padding-top: 20px;
    .thumb {
314
        margin: 5px 0px 10px 5px;
315 316 317 318
    }
}
.thumbnail {
    margin: 0 15px 0 0;
319
    .card-body & {
320
        margin-bottom: 10px;
321 322
    }
}
323 324 325 326 327 328 329
.bt-gallery,
.bt-gallery-editor {
    img.frame {
        padding: 3px;
        margin: 0;
        border: 1px solid #ccc;
        background: #fff;
Evonne Cheung's avatar
Evonne Cheung committed
330
        box-shadow: 0 0 3px 5px #f8f8f8;
331
    }
332 333 334 335
    &.card.card-secondary > .block > .card-body {
        overflow: hidden;
        padding: 15px 20px;
    }
336
}
337 338 339 340 341 342 343 344 345 346

//Google apps
.google-app {
    font-style: normal;
    img {
        height: 20px;
    }
    a {
        color: #245dc1;
    }
347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362
}

// Choose skin
.layoutoptions-container {
    @extend .clearfix;
    margin-top: 15px;
}
.layoutoption,
.skin {
    float: left;
    margin-bottom: 10px;
}

.objectionable-message {
    padding: 0 0 10px 0;
}
Pat Kira's avatar
Pat Kira committed
363 364 365 366 367 368

// Other social media input
#editprofileform_profiletype_other {
    @extend .form-control;
    width: 250px !important;
    margin-top: 10px;
369
    @include media-breakpoint-up(sm) {
Pat Kira's avatar
Pat Kira committed
370 371
        margin-left: 10px;
    }
372
    @include media-breakpoint-up(md) {
Pat Kira's avatar
Pat Kira committed
373 374 375
        margin-top: 0;
    }
}
376 377 378 379 380 381 382 383 384 385 386 387 388 389

// Editgroup membership modal
// see editgroupmemship.tpl
.editgroup-container {
    padding-bottom: 20px;
    margin-bottom: 20px;
    &:last-child {
        border-bottom-width: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .heading {
        margin: 0;
    }
390 391 392
    .checkbox {
        display: inline-block;
    }
393
}
394 395

// Used to make the forum settings look like it should
396
@include media-breakpoint-up(md) {
397 398 399 400 401 402 403
    #edit_interaction_weight_container {
        padding-left: 265px;
        label, span.description {
            margin-left: -265px;
        }
    }
}
404

405
.card > .card-header {
406
    font-size: $font-size-base * 1.14285;
407
}
408 409 410 411 412 413 414

.table thead {
    a::after {
        font-family: 'FontAwesome';
        position: relative;
        top: -3px;
        margin-left: 3px;
415
        color: $gray-300;
416
    }
417
    .asc > a::after {
418 419
        content: '\f0dd';
    }
420 421
    .desc > a::after,
    .sorted > a::after {
422 423 424 425
        content: '\f0de';
        top: 2px;
    }
}
426

427
.containobjectionable {
428
    background-color: $state-danger-bg;
429
}
430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446

.permissions-table {
    display: inline-block;
    .editpermissions.table {
        width: auto;
        background-color: rgba(255,255,255,0);
        thead tr th {
            font-weight: 400;
            font-size: 12px;
            padding: 2px 8px 8px;
        }
        thead tr,
        tbody td {
            min-width: 50px;
        }
    }
}
447

448 449 450 451 452
#needprotocolspro {
    padding-left: 10px;
}

#needprotocolsreq {
453 454
    padding-left: 10px;
}
455

456 457
.secreturls .list-group-item,
.iframesources .buttonscell {
458 459 460 461 462 463 464
    .collapse-indicator.open .icon-chevron-down {
        transform: rotate(-180deg);
        transition-duration: 0.3s;
    }
    .collapse-indicator.closed .icon-chevron-down {
        transform: rotate(0deg);
        transition-duration: 0.3s;
465 466
    }
}
467

468
.secreturls .list-group-item {
469 470
    .secret-url {
        word-wrap: break-word;
471 472
    }
}
473 474 475
.iframesources .buttonscell a {
    font-size: 12px;
}
476 477

// Remove the link colour from a comment that has an attachement
478
@include media-breakpoint-up(lg) {
479
    .viewfooter .comment-item .comment-attachment .card.collapsible h4 a.collapsed {
480
        color: $theme-text-color;
481 482
    }
}
483 484 485

#inboxblock .link-block.unread {
    font-weight: bold;
486 487 488 489 490 491 492
}

// Preview image in popup modal
#previewimg {
    display: block;
    margin: 0 auto;
}
493 494 495 496 497 498 499 500 501 502 503 504

// Edit/add skin page
// See templates/skin/index.tpl
.row.skins {
    margin-top: 30px;
    .skin {
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        float: none;
505
        @include media-breakpoint-up(sm) {
506 507 508
            float: left;
            width: 50%;
        }
509
        @include media-breakpoint-up(md) {
510 511 512 513
            width: 33.333333%;
        }
    }
}
514
.manage-skins-btn {
515 516 517
  margin-top: 10px;
  margin-bottom: 20px;
}
518 519 520 521

#auth_config_institutionidp {
    width: 90%;
}
522

523 524 525 526 527
.defaultskin {
    margin-top: 10px;
    margin-bottom: 20px;
}

528 529 530 531 532 533 534 535
.authInstance .authitem {
    padding:5px;
    &.inactive {
        background: $state-warning-bg;
        color: $state-warning-text;
    }
}

536 537
.btn-search.btn.btn-primary.admin-groups.button.btn {
    margin-left: -13px;
538
    margin-top: 2px;
539 540
    vertical-align: text-top;
}
541 542 543 544

.connections button {
    margin-top: 10px;
}
Robert Lyon's avatar
Robert Lyon committed
545 546 547 548 549

.emptybtnspace {
    display: inline-block;
    width: 30px;
}
550 551 552 553

// Make the other license text box align correctly on files page
.fileuploadlicense input[type=text].secondary-textbox,
.fileedittable input[type=text].secondary-textbox {
554
    @include media-breakpoint-up(xl) {
555 556 557
        margin-left: 100px;
    }
}
558 559 560 561 562 563 564

// fix responsive layout for pages and collections grid where sidebar overlaps
.grouppageswrap.view-container:after {
  clear: both;
  content: "";
  display: table;
}
565

566
.notification-parent .bulk-actions label.btn-secondary {
567 568
  padding-bottom: 3px;
}
569 570 571 572

.forassessment label {
  display: inline-block !important;
  margin-top: -25px;
573 574
}

575 576
.accessurl-button {
    margin-bottom: 15px;
577
}
578

579 580 581
#reportconfigform {
    fieldset {
        margin-top: 10px;
582
    }
583 584
    .checkbox.form-group {
        padding: 10px 0;
585
        label {
586 587
            padding-left: 28px;
            display: block;
588 589
        }
        input[type=checkbox] {
590 591
            position: absolute;
            top: 9px;
592
        }
593 594
    }
}
595

596 597 598
.reportsettings {
    margin-top: -5px;
}
599 600 601

.statinfoblock {
    width: 360px;
Evonne Cheung's avatar
Evonne Cheung committed
602 603
    float: left;
    margin-right: 15px;
604 605 606 607

    h3 {
        margin-top: 0;
    }
Evonne Cheung's avatar
Evonne Cheung committed
608 609 610 611 612
    h4 {
        padding: 0 1rem;
        margon: 0;
        font-size: $font-size-base;
    }
613

Evonne Cheung's avatar
Evonne Cheung committed
614 615 616
    table {
        padding: 10px;
    }
617 618 619
    .card-header {
      background-color: white;
    }
620 621 622 623
}

.ownersubtab {
    padding: 4px 0;
624 625 626 627 628 629 630 631
}

.deletion-message {
    float: right;
    position: relative;
    padding: 5px;
    clear: right;
}
632 633

// Used to remove the second border around the legal information
634
#agreetoprivacy .card {
635 636
    border: 0;
}
637 638 639 640 641 642 643 644 645 646 647

.image-rotator {
    height: 110px;
    line-height: 75px;

    .image-rotator-inner {
        display: inline-block;
        text-align: center;
        width: 110px;
    }
}
648 649 650

#searchviews_matchalltags_container {
    width: 300px;
651
    margin-left: 5px;
Evonne Cheung's avatar
Evonne Cheung committed
652
    margin-top: 21px;
653 654 655 656 657
    label {
        margin-left: 28px;
    }
    input {
        margin-left: 3px;
658
        margin-top: -20px;
659
        float: left;
Evonne Cheung's avatar
Evonne Cheung committed
660 661
        width: auto;
        height: auto;
662 663 664 665 666 667 668 669
    }
    div {
        margin-left: 3px;
        padding-top: 0;
        span {
            padding-top: 0;
        }
    }
670 671
}

672 673 674 675 676 677 678 679 680
div.toolbarhtml {
    margin-top: 5px;
    clear: both;
    float: right;
    div {
        text-align: right;
    }
}

681 682 683 684 685 686 687
.assessment-item-buttons {
    .assessbtn + .assessbtn {
        button {
            @include border-left-radius(0);
        }
    }
}
688

689 690 691 692 693 694
#viewinstructions,
.peerinstructions {
    &.with-toolbar {
        margin-right: 20px;
    }
    div.fieldset-body {
695
        background-color: $gray-100 !important;
696
    }
697
}
698 699 700 701 702 703
.viewinstruction-export {
    border: 1px solid $card-border-color;
    padding: 10px 15px;
    margin-bottom: -1px; //remove double border
    background-color: $gray-100 !important;
}
704 705 706 707
.releaseviewform {
    position: relative;
    top: 15px;
}
708 709 710 711 712 713

.field-label-bold {
    label {
        font-weight: bold;
    }
}
714 715
#pendinglist {
    margin-bottom: 0;
716
}
717 718
// Stop btn links displaying as buttons
[type="button"].btn-link,
Liam's avatar
Liam committed
719
a[type="submit"],
720 721
.card-header a[type="button"] {
    -webkit-appearance: none;
722
}
723 724 725 726 727 728 729 730 731 732 733 734 735 736 737

// Used when you really only need flex on an item
.flexbox {
    display: flex;
}

// Add space when there are 2 selects next to each other
.select {
    + .select {
        margin-left: 5px;
    }
    + .submit:not(.input-group-append) {
        margin-left: 5px;
    }
}
738 739 740 741 742

// Removes weird text node between buttons on admin/users/suspended.php
.pieform-fieldset.btn-group {
    font-size: 0;
}
743 744

.elasticsearch-filters {
745
    border-bottom: 1px solid $card-border-color;
746
    background-color: $card-header-bg;
747
}
748 749 750 751 752

// Mostly used to make the table matrix popups work
.d-none.popover {
    visibility: hidden;
}
Evonne Cheung's avatar
Evonne Cheung committed
753 754 755 756 757

// Notifications search and bulk action select alignment
.form-inline {
    input {
        @extend .form-control;
758 759 760
        &.btn-primary {
            @extend .btn-primary;
        }
Evonne Cheung's avatar
Evonne Cheung committed
761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805
    }
}
.notification-parent {
    .bulk-actions {
        input {
            margin-top: 1px;
        }
        button {
            height: calc(2.0625rem + 2px);
        }
    }
}

// Share with me search filter
#search_share_container {
    label {
        margin-top: 13px;
    }
}

// Find groups search
#search_searchfield {
    color: $btn-primary-color;
    background-color: $btn-primary-bg;
    border: $btn-primary-border;
    border-radius: $border-radius;
    width: auto;
    margin-top: 12px;
}

// Find people results approve request alignment
.approvefriend .pieform {
    display: inline-block;
    margin-left: 3px;
    button {
        font-size: $font-size-sm;
    }
}

// Manage collections
.collection-pages {
    button.btn-sm {
        border: 0;
    }
}
Evonne Cheung's avatar
Evonne Cheung committed
806 807 808 809 810 811 812 813 814 815 816 817 818 819

// Networking delete btn
.secondary #networkingform_submit {
    background-color: $state-danger-bg;
    color: $state-danger-text;
    border-color: $state-danger-border;
    margin-left: .5rem;
}

// Web services add service groups btn
#webservices_function_groups_add_submit,
#webservices_token_generate_submit {
    width: auto;
}
820 821 822 823

// Backup for libraries that still need hidden class instead of bootstrap 4s new .d-none
.hidden {
    display: none;
824
}
825
//used for Smart Evidence json-editor
826 827
#editor_holder .bg-light {
    background-color: #FFF !important;
828 829
}

830
div.form-group .form-control-label {
831 832 833
    vertical-align: top;
}

834
.btn-group {
835
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
836
}
837 838 839 840 841

.json_editor_btn_add .btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
842

843 844 845 846
.errormsg {
    color: $state-danger-text;
}

847 848 849 850 851 852 853
// table cells that need to be fixed 70px width
.width-70 {
    width: 70px;
}

// Forum select wrap too close to text
.forumselectwrap {
854
    margin: 0 0 10px 10px;
855
}
856 857 858 859 860 861

.form-group.checkboxes .group-invite input[type="checkbox"] {
    float: left;
    top: 0;
    margin-right: 5px;
}
Liam's avatar
Liam committed
862 863 864 865

a.online-users {
    text-align: left;
}
866 867 868 869

#forums-list .button {
    white-space: nowrap;
}
870 871 872 873 874

.extensions h2 .btn-group-top {
    margin-top: -11px;
    margin-bottom: 0;
}
875 876 877 878 879

// Used to stop dropdown being covered by the button
.controls .btn-group {
    z-index: 1;
}