_custom.scss 16.6 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
    border-radius: $border-radius-sm;
104
    transition: border .2s ease-in-out;
105
}
106
107
#createcustomlayoutpane .layoutthumb {
    border: 1px solid $card-border-color;
108
    border-radius: $border-radius-sm;
109
110
111
112
113
    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
        width: 500px !important;
    }
    &.select2-dropdown-open {
        .select2-choices {
162
            border-radius: $border-radius $border-radius 0 0;
163
164
165
166
        }
    }
    .select2-choices {
        @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset);
167
        border-radius: $border-radius;
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

.table thead {
    a::after {
411
        font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
412
413
414
        position: relative;
        top: -3px;
        margin-left: 3px;
415
        color: $gray-300;
416
    }
417
    .asc > a::after {
418
        content: fa-content($fa-var-caret-down);
419
    }
420
421
    .desc > a::after,
    .sorted > a::after {
422
        content: fa-content($fa-var-caret-up);
423
424
425
        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

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

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

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

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

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

// 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;
    }
}
737
738
739
740
741

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

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

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

// Notifications search and bulk action select alignment
.form-inline {
    input {
        @extend .form-control;
757
758
759
        &.btn-primary {
            @extend .btn-primary;
        }
Evonne Cheung's avatar
Evonne Cheung committed
760
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
    }
}
.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
805
806
807
808
809
810
811
812
813
814
815
816
817
818

// 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;
}
819
820
821
822

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

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

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

.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;
}
841

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

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

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

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

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

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

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

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