MDL-66770 mod_forum: change columns in discussion list table
[moodle.git] / theme / boost / scss / moodle / core.scss
CommitLineData
536f0460
DW
1/* core.less */
2
2fd7cdbe
JO
3// When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
4// Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
5// want white default colour.
6$bg-inverse-link-color: #fff !default;
7
bf45d7eb 8#region-main {
ba5c5083
DW
9 overflow-x: auto;
10 overflow-y: visible;
bf45d7eb 11 border: $card-border-width solid $card-border-color;
db919724
BB
12 @if $enable-rounded {
13 @include border-radius($card-border-radius);
14 }
bf45d7eb 15 padding: $card-spacer-x;
8e1a1c26 16 background-color: $body-bg;
ba5c5083 17}
99061152
DW
18
19.context-header-settings-menu,
20.region-main-settings-menu {
21 float: right;
b167b415
JD
22 width: auto;
23 max-width: 4em;
99061152
DW
24 height: 2em;
25 display: block;
b167b415 26 margin-top: 4px;
99061152
DW
27}
28
29.context-header-settings-menu .dropdown-toggle > .icon,
11774d90 30#region-main-settings-menu .dropdown-toggle > .icon {
99061152 31 height: 24px;
9d67a408 32 font-size: 24px;
99061152
DW
33 width: auto;
34}
d8cfd611
DW
35/** Prevent user notifications overlapping with region main settings menu */
36#user-notifications {
37 display: block;
38 overflow: hidden;
39}
99061152 40
536f0460
DW
41/** Page layout CSS starts **/
42.layout-option-noheader #page-header,
43.layout-option-nonavbar #page-navbar,
44.layout-option-nofooter #page-footer,
45.layout-option-nocourseheader .course-content-header,
46.layout-option-nocoursefooter .course-content-footer {
f4143537 47 display: none;
536f0460
DW
48}
49
536f0460
DW
50/** Page layout CSS ends **/
51
536f0460
DW
52.mdl-left {
53 text-align: left;
54}
f4143537 55
536f0460
DW
56.mdl-right {
57 text-align: right;
58}
113efed5
FM
59
60/*rtl:ignore*/
61.text-ltr {
5142f564 62 direction: ltr !important; /* stylelint-disable-line declaration-no-important */
113efed5
FM
63}
64
536f0460
DW
65#add,
66#remove,
67.centerpara,
68.mdl-align {
69 text-align: center;
70}
f4143537 71
536f0460
DW
72a.dimmed,
73a.dimmed:link,
74a.dimmed:visited,
75a.dimmed_text,
76a.dimmed_text:link,
77a.dimmed_text:visited,
78.dimmed_text,
79.dimmed_text a,
80.dimmed_text a:link,
81.dimmed_text a:visited,
82.usersuspended,
83.usersuspended a,
84.usersuspended a:link,
85.usersuspended a:visited,
86.dimmed_category,
87.dimmed_category a {
f4143537 88 @extend .text-muted;
536f0460 89}
f4143537 90
536f0460
DW
91.unlist,
92.unlist li,
93.inline-list,
94.inline-list li,
95.block .list,
96.block .list li,
97.section li.activity,
98.section li.movehere,
99.tabtree li {
100 list-style: none;
101 margin: 0;
102 padding: 0;
103}
f4143537 104
536f0460
DW
105.inline,
106.inline-list li {
107 display: inline;
108}
f4143537 109
536f0460
DW
110.notifytiny {
111 font-size: $font-size-xs;
112}
f4143537 113
536f0460
DW
114.notifytiny li,
115.notifytiny td {
116 font-size: 100%;
117}
f4143537 118
536f0460
DW
119.red,
120.notifyproblem {
121 @extend .text-warning;
122}
f4143537 123
536f0460
DW
124.green,
125.notifysuccess {
126 @extend .text-success;
127}
f4143537 128
536f0460
DW
129.highlight {
130 @extend .text-info;
131}
f4143537 132
d91cbe1e
CB
133.fitem.advanced .text-info {
134 font-weight: bold;
135}
136
536f0460
DW
137.reportlink {
138 text-align: right;
139}
f4143537 140
536f0460
DW
141a.autolink.glossary:hover {
142 cursor: help;
143}
144/* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
145.collapsibleregioncaption {
146 white-space: nowrap;
2f3f8e45 147 min-height: $line-height-base * $font-size-base;
536f0460 148}
f4143537 149
536f0460
DW
150.pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
151 cursor: pointer;
152}
f4143537 153
faff02ae
BB
154.pagelayout-mydashboard #region-main {
155 border: 0;
156 padding: 0;
157 background-color: transparent;
158 margin-top: -1px;
159}
160
536f0460
DW
161.collapsibleregioncaption img {
162 vertical-align: middle;
163}
164
165.jsenabled .hiddenifjs {
166 display: none;
167}
f4143537 168
536f0460
DW
169.visibleifjs {
170 display: none;
171}
f4143537 172
536f0460
DW
173.jsenabled .visibleifjs {
174 display: inline;
175}
f4143537 176
536f0460
DW
177.jsenabled .collapsibleregion {
178 overflow: hidden;
2f3f8e45 179 box-sizing: content-box;
536f0460 180}
f4143537 181
536f0460
DW
182.jsenabled .collapsed .collapsibleregioninner {
183 visibility: hidden;
184}
f4143537 185
536f0460
DW
186.collapsible-actions {
187 display: none;
188 text-align: right;
189}
f4143537 190
536f0460
DW
191.jsenabled .collapsible-actions {
192 display: block;
193}
f4143537 194
536f0460
DW
195.collapsible-actions .collapseexpand {
196 padding-left: 20px;
197 background: url([[pix:t/collapsed]]) 2px center no-repeat;
198}
ed7844b5
FM
199/*rtl:raw:
200.collapsible-actions .collapseexpand {
536f0460
DW
201 background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
202}
ed7844b5 203*/
536f0460
DW
204.collapsible-actions .collapse-all {
205 background-image: url([[pix:t/expanded]]);
206}
f4143537 207
536f0460 208.yui-overlay .yui-widget-bd {
f4143537
DP
209 background-color: #ffee69;
210 border: 1px solid #a6982b;
211 border-top-color: #d4c237;
fde35b8f 212 color: #000;
536f0460
DW
213 left: 0;
214 padding: 2px 5px;
215 position: relative;
216 top: 0;
217 z-index: 1;
218}
f4143537 219
536f0460
DW
220.clearer {
221 background: transparent;
222 border-width: 0;
223 clear: both;
224 display: block;
225 height: 1px;
226 margin: 0;
227 padding: 0;
228}
f4143537 229
536f0460
DW
230.bold,
231.warning,
232.errorbox .title,
233.pagingbar .title,
234.pagingbar .thispage {
235 font-weight: bold;
236}
f4143537 237
91bda4cd
DW
238img.userpicture {
239 margin-right: 0.5rem;
240}
f4143537 241
536f0460
DW
242img.resize {
243 height: 1em;
244 width: 1em;
245}
f4143537 246
91bda4cd 247.action-menu .dropdown-toggle {
91bda4cd
DW
248 text-decoration: none;
249}
f4143537 250
3f0544b8
DW
251.action-menu {
252 white-space: nowrap;
253}
f4143537 254
3ec69c2e 255.block img.resize {
536f0460
DW
256 height: 0.9em;
257 width: 0.8em;
258}
259/* Icon styles */
072364df 260img.activityicon {
536f0460
DW
261 height: 24px;
262 width: 24px;
263 vertical-align: middle;
264}
f4143537 265
536f0460
DW
266.headermain {
267 font-weight: bold;
268}
f4143537 269
536f0460
DW
270#maincontent {
271 display: block;
272 height: 1px;
273 overflow: hidden;
274}
f4143537 275
536f0460
DW
276img.uihint {
277 cursor: help;
278}
f4143537 279
536f0460
DW
280#addmembersform table {
281 margin-left: auto;
282 margin-right: auto;
283}
f4143537 284
536f0460
DW
285table.flexible .emptyrow {
286 display: none;
287}
f4143537 288
536f0460
DW
289form.popupform,
290form.popupform div {
291 display: inline;
292}
f4143537 293
536f0460
DW
294.arrow_button input {
295 overflow: hidden;
296}
536f0460
DW
297.no-overflow {
298 overflow: auto;
536f0460 299}
f4143537 300
a3124b15 301// Minimum height required for a menu in a table inside a scrollable div.
a3a157ae 302// Position required for table sizing inside a flex container.
536f0460 303.no-overflow > .generaltable {
a3a157ae 304 position: relative;
536f0460 305 margin-bottom: 0;
a3124b15 306 min-height: 10em;
536f0460
DW
307}
308// Accessibility features
309
310// Accessibility: text 'seen' by screen readers but not visual users.
311.accesshide {
b188407b 312 @include sr-only();
536f0460 313}
f4143537 314
536f0460 315span.hide,
3d979f96
FM
316div.hide,
317.hidden {
536f0460
DW
318 display: none;
319}
320// Accessibility: Skip block link, for keyboard-only users.
321a.skip-block,
322a.skip {
323 position: absolute;
324 top: -1000em;
325 font-size: 0.85em;
326 text-decoration: none;
327}
f4143537 328
536f0460
DW
329a.skip-block:focus,
330a.skip-block:active,
331a.skip:focus,
332a.skip:active {
333 position: static;
334 display: block;
335}
f4143537 336
536f0460
DW
337.skip-block-to {
338 display: block;
339 height: 1px;
340 overflow: hidden;
341}
342// Blogs
343.addbloglink {
344 text-align: center;
345}
f4143537 346
536f0460
DW
347.blog_entry .audience {
348 text-align: right;
349 padding-right: 4px;
350}
f4143537 351
536f0460
DW
352.blog_entry .tags {
353 margin-top: 15px;
354}
f4143537 355
536f0460
DW
356.blog_entry .content {
357 margin-left: 43px;
358}
359// Group
f4143537 360
536f0460
DW
361#doc-contents h1 {
362 margin: 1em 0 0 0;
363}
f4143537 364
536f0460
DW
365#doc-contents ul {
366 margin: 0;
367 padding: 0;
368 width: 90%;
369}
f4143537 370
536f0460
DW
371#doc-contents ul li {
372 list-style-type: none;
373}
f4143537 374
536f0460
DW
375.groupmanagementtable td {
376 vertical-align: top;
377}
f4143537 378
536f0460
DW
379.groupmanagementtable #existingcell,
380.groupmanagementtable #potentialcell {
381 width: 42%;
382}
f4143537 383
536f0460
DW
384.groupmanagementtable #buttonscell {
385 width: 16%;
386}
f4143537 387
536f0460
DW
388.groupmanagementtable #buttonscell p.arrow_button input {
389 width: auto;
390 min-width: 80%;
391 margin: 0 auto;
392}
f4143537 393
536f0460
DW
394.groupmanagementtable #removeselect_wrapper,
395.groupmanagementtable #addselect_wrapper {
396 width: 100%;
397}
f4143537 398
536f0460
DW
399.groupmanagementtable #removeselect_wrapper label,
400.groupmanagementtable #addselect_wrapper label {
401 font-weight: normal;
402}
f4143537 403
536f0460
DW
404#group-usersummary {
405 width: 14em;
406}
f4143537 407
536f0460
DW
408.groupselector {
409 margin-top: 3px;
410 margin-bottom: 3px;
411 display: inline-block;
412}
f4143537 413
536f0460
DW
414.groupselector label {
415 display: inline-block;
416}
536f0460
DW
417
418// Login
386f269f
FM
419.login-page {
420 [name="username"] {
421 margin-bottom: -1px;
422 border-bottom-right-radius: 0;
423 border-bottom-left-radius: 0;
424 }
f4143537 425
386f269f
FM
426 [type="password"] {
427 margin-bottom: 10px;
428 border-top-left-radius: 0;
429 border-top-right-radius: 0;
430 }
536f0460
DW
431}
432
536f0460
DW
433// Notes
434.notepost {
435 margin-bottom: 1em;
436}
f4143537 437
536f0460
DW
438.notepost .userpicture {
439 float: left;
440 margin-right: 5px;
441}
f4143537 442
536f0460
DW
443.notepost .content,
444.notepost .footer {
445 clear: both;
446}
f4143537 447
536f0460
DW
448.notesgroup {
449 margin-left: 20px;
450}
451
452// My Moodle
137c289a
FM
453.path-my .coursebox {
454 margin: $spacer-y 0;
455 padding: 0;
f4143537 456
137c289a
FM
457 .overview {
458 margin: 15px 30px 10px 30px;
459 }
536f0460 460}
f4143537 461
536f0460
DW
462.path-my .coursebox .info {
463 float: none;
464 margin: 0;
465}
466
467// Modules
468.mod_introbox {
469 padding: 10px;
470}
f4143537 471
536f0460
DW
472table.mod_index {
473 width: 100%;
474}
475
476// Comments
477.comment-ctrl {
478 font-size: 12px;
479 display: none;
480 margin: 0;
481 padding: 0;
482}
f4143537 483
536f0460
DW
484.comment-ctrl h5 {
485 margin: 0;
486 padding: 5px;
487}
f4143537 488
536f0460
DW
489.comment-area {
490 max-width: 400px;
491 padding: 5px;
492}
f4143537 493
536f0460
DW
494.comment-area textarea {
495 width: 100%;
496 overflow: auto;
f4143537 497
536f0460
DW
498 &.fullwidth {
499 -webkit-box-sizing: border-box;
500 -moz-box-sizing: border-box;
501 box-sizing: border-box;
502 }
503}
f4143537 504
536f0460
DW
505.comment-area .fd {
506 text-align: right;
507}
f4143537 508
536f0460
DW
509.comment-meta span {
510 color: gray;
511}
f4143537 512
536f0460
DW
513.comment-link img {
514 vertical-align: text-bottom;
515}
f4143537 516
536f0460
DW
517.comment-list {
518 font-size: 11px;
519 overflow: auto;
520 list-style: none;
521 padding: 0;
522 margin: 0;
523}
f4143537 524
536f0460
DW
525.comment-list li {
526 margin: 2px;
527 list-style: none;
528 margin-bottom: 5px;
529 clear: both;
530 padding: .3em;
531 position: relative;
532}
f4143537 533
536f0460 534.comment-list li.first {
f4143537 535 display: none;
536f0460 536}
f4143537
DP
537
538.comment-paging {
536f0460
DW
539 text-align: center;
540}
f4143537
DP
541
542.comment-paging .pageno {
536f0460
DW
543 padding: 2px;
544}
f4143537
DP
545
546.comment-paging .curpage {
547 border: 1px solid #ccc;
536f0460 548}
f4143537 549
536f0460
DW
550.comment-message .picture {
551 width: 20px;
552 float: left;
553}
f4143537 554
536f0460
DW
555.comment-message .text {
556 margin: 0;
557 padding: 0;
558}
f4143537 559
536f0460
DW
560.comment-message .text p {
561 padding: 0;
562 margin: 0 18px 0 0;
563}
f4143537 564
536f0460
DW
565.comment-delete {
566 position: absolute;
567 top: 0;
568 right: 0;
569 margin: .3em;
570}
f4143537
DP
571
572.comment-report-selectall {
573 display: none;
536f0460 574}
f4143537 575
536f0460 576.comment-link {
f4143537 577 display: none;
536f0460 578}
f4143537 579
536f0460 580.jsenabled .comment-link {
f4143537 581 display: block;
536f0460 582}
f4143537
DP
583
584.jsenabled .showcommentsnonjs {
585 display: none;
536f0460 586}
f4143537
DP
587
588.jsenabled .comment-report-selectall {
589 display: inline;
536f0460
DW
590}
591/**
592* Completion progress report
593*/
594.completion-expired {
595 @extend .text-warning;
596}
f4143537 597
536f0460
DW
598.completion-expected {
599 font-size: $font-size-xs;
600}
f4143537 601
536f0460
DW
602.completion-sortchoice,
603.completion-identifyfield {
604 font-size: $font-size-xs;
605 vertical-align: bottom;
606}
f4143537 607
536f0460
DW
608.completion-progresscell {
609 text-align: right;
610}
f4143537 611
536f0460
DW
612.completion-expired .completion-expected {
613 font-weight: bold;
614}
615/**
616* Tags
617*/
618img.user-image {
619 height: 100px;
620 width: 100px;
621}
f4143537 622
536f0460
DW
623#tag-search-box {
624 text-align: center;
625 margin: 10px auto;
626}
627
628.path-tag .tag-index-items .tagarea {
f4143537 629 border: 1px solid #e3e3e3;
536f0460
DW
630 border-radius: 4px;
631 padding: 10px;
632 margin-top: 10px;
633}
634
635.path-tag .tag-index-items .tagarea h3 {
636 display: block;
637 padding: 3px 0 10px 0;
fde35b8f 638 margin: 0;
536f0460
DW
639 font-size: 1.1em;
640 font-weight: bold;
641 line-height: 20px;
642 color: #999;
fde35b8f 643 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
536f0460
DW
644 text-transform: uppercase;
645 word-wrap: break-word;
f4143537 646 border-bottom: solid 1px #e3e3e3;
536f0460
DW
647 margin-bottom: 10px;
648}
649
650.path-tag .tagarea .controls,
651.path-tag .tagarea .taggeditems {
652 @include clearfix();
653}
f4143537 654
536f0460
DW
655.path-tag .tagarea .controls,
656.path-tag .tag-backtoallitems {
657 text-align: center;
658}
f4143537 659
536f0460
DW
660.path-tag .tagarea .controls .gotopage.nextpage {
661 float: right;
662}
f4143537 663
536f0460
DW
664.path-tag .tagarea .controls .gotopage.prevpage {
665 float: left;
666}
f4143537 667
536f0460
DW
668.path-tag .tagarea .controls .exclusivemode {
669 display: inline-block;
670}
f4143537 671
536f0460
DW
672.path-tag .tagarea .controls.controls-bottom {
673 margin-top: 5px;
674}
f4143537 675
536f0460
DW
676.path-tag .tagarea .controls .gotopage.nextpage::after {
677 padding-right: 5px;
678 padding-left: 5px;
679 content: "»";
680}
f4143537 681
536f0460
DW
682.path-tag .tagarea .controls .gotopage.prevpage::before {
683 padding-right: 5px;
684 padding-left: 5px;
685 content: "«";
686}
687
688span.flagged-tag,
689tr.flagged-tag,
690span.flagged-tag a,
691tr.flagged-tag a {
692 @extend .text-warning;
693}
f4143537 694
536f0460
DW
695.tag-management-table td,
696.tag-management-table th {
697 vertical-align: middle;
698 padding: 4px;
699}
f4143537 700
536f0460
DW
701.tag-management-table .inplaceeditable.inplaceeditingon input {
702 width: 150px;
703}
f4143537 704
536f0460
DW
705.path-admin-tag .addstandardtags {
706 float: right;
f4143537 707
536f0460
DW
708 img {
709 margin: 0 5px;
710 }
711}
f4143537 712
536f0460
DW
713.path-tag .tag-relatedtags {
714 padding-top: 10px;
715}
f4143537 716
536f0460
DW
717.path-tag .tag-management-box {
718 text-align: right;
719}
f4143537 720
536f0460
DW
721.path-tag .tag-index-toc {
722 padding: 10px;
723 text-align: center;
724}
f4143537 725
536f0460
DW
726.path-tag .tag-index-toc li,
727.path-tag .tag-management-box li {
728 margin-left: 5px;
729 margin-right: 5px;
730}
f4143537 731
536f0460
DW
732.path-tag .tag-management-box li a.edittag {
733 background-image: url([[pix:moodle|i/settings]]);
734}
f4143537 735
536f0460
DW
736.path-tag .tag-management-box li a.flagasinappropriate {
737 background-image: url([[pix:moodle|i/flagged]]);
738}
f4143537 739
536f0460
DW
740.path-tag .tag-management-box li a.removefrommyinterests {
741 background-image: url([[pix:moodle|t/delete]]);
742}
f4143537 743
536f0460
DW
744.path-tag .tag-management-box li a.addtomyinterests {
745 background-image: url([[pix:moodle|t/add]]);
746}
f4143537 747
536f0460
DW
748.path-tag .tag-management-box li a {
749 background-repeat: no-repeat;
750 background-position: left;
751 padding-left: 17px;
752}
f4143537 753
536f0460
DW
754.tag_feed.media-list .media .itemimage {
755 float: left;
756}
f4143537 757
536f0460
DW
758.tag_feed.media-list .media .itemimage img {
759 height: 35px;
760 width: 35px;
761}
f4143537 762
536f0460
DW
763.tag_feed.media-list .media .media-body {
764 padding-right: 10px;
765 padding-left: 10px;
766}
f4143537 767
536f0460
DW
768.tag_feed .media .muted a {
769 @extend .text-muted;
770}
f4143537 771
536f0460
DW
772.tag_cloud {
773 text-align: center;
774}
f4143537 775
536f0460 776.tag_cloud .inline-list li {
fde35b8f 777 padding: 0 0.2em;
536f0460 778}
f4143537 779
536f0460
DW
780.tag_cloud .tag_overflow {
781 margin-top: 1em;
782 font-style: italic;
783}
f4143537 784
536f0460
DW
785.tag_cloud .s20 {
786 font-size: 2.7em;
787}
f4143537 788
536f0460
DW
789.tag_cloud .s19 {
790 font-size: 2.6em;
791}
f4143537 792
536f0460
DW
793.tag_cloud .s18 {
794 font-size: 2.5em;
795}
f4143537 796
536f0460
DW
797.tag_cloud .s17 {
798 font-size: 2.4em;
799}
f4143537 800
536f0460
DW
801.tag_cloud .s16 {
802 font-size: 2.3em;
803}
f4143537 804
536f0460
DW
805.tag_cloud .s15 {
806 font-size: 2.2em;
807}
f4143537 808
536f0460
DW
809.tag_cloud .s14 {
810 font-size: 2.1em;
811}
f4143537 812
536f0460
DW
813.tag_cloud .s13 {
814 font-size: 2em;
815}
f4143537 816
536f0460
DW
817.tag_cloud .s12 {
818 font-size: 1.9em;
819}
f4143537 820
536f0460
DW
821.tag_cloud .s11 {
822 font-size: 1.8em;
823}
f4143537 824
536f0460
DW
825.tag_cloud .s10 {
826 font-size: 1.7em;
827}
f4143537 828
536f0460
DW
829.tag_cloud .s9 {
830 font-size: 1.6em;
831}
f4143537 832
536f0460
DW
833.tag_cloud .s8 {
834 font-size: 1.5em;
835}
f4143537 836
536f0460
DW
837.tag_cloud .s7 {
838 font-size: 1.4em;
839}
f4143537 840
536f0460
DW
841.tag_cloud .s6 {
842 font-size: 1.3em;
843}
f4143537 844
536f0460
DW
845.tag_cloud .s5 {
846 font-size: 1.2em;
847}
f4143537 848
536f0460
DW
849.tag_cloud .s4 {
850 font-size: 1.1em;
851}
f4143537 852
536f0460
DW
853.tag_cloud .s3 {
854 font-size: 1em;
855}
f4143537 856
536f0460
DW
857.tag_cloud .s2 {
858 font-size: 0.9em;
859}
f4143537 860
536f0460
DW
861.tag_cloud .s1 {
862 font-size: 0.8em;
863}
f4143537 864
536f0460
DW
865.tag_cloud .s0 {
866 font-size: 0.7em;
867}
f4143537 868
536f0460
DW
869.tag_list ul {
870 display: inline;
871}
f4143537 872
536f0460 873.tag_list.hideoverlimit .overlimit {
f4143537 874 display: none;
536f0460 875}
f4143537 876
536f0460 877.tag_list .tagmorelink {
f4143537 878 display: none;
536f0460 879}
f4143537 880
536f0460 881.tag_list.hideoverlimit .tagmorelink {
f4143537 882 display: inline;
536f0460 883}
f4143537 884
536f0460 885.tag_list.hideoverlimit .taglesslink {
f4143537 886 display: none;
536f0460
DW
887}
888
889/**
890* Web Service
891*/
892#webservice-doc-generator td {
893 text-align: left;
894 border: 0 solid black;
895}
45d5594e 896
536f0460
DW
897/**
898* Enrol
899*/
900.userenrolment {
901 width: 100%;
902 border-collapse: collapse;
903}
f4143537 904
536f0460 905.userenrolment tr {
f4143537 906 vertical-align: top;
536f0460 907}
f4143537 908
536f0460
DW
909.userenrolment td {
910 padding: 0;
911 height: 41px;
912}
f4143537 913
536f0460
DW
914.userenrolment .subfield {
915 margin-right: 5px;
916}
f4143537 917
536f0460
DW
918.userenrolment .col_userdetails .subfield {
919 margin-left: 40px;
920}
f4143537 921
536f0460
DW
922.userenrolment .col_userdetails .subfield_picture {
923 float: left;
924 margin-left: 0;
925}
f4143537 926
536f0460
DW
927.userenrolment .col_lastseen {
928 width: 150px;
929}
f4143537 930
536f0460
DW
931.userenrolment .col_role {
932 width: 262px;
933}
f4143537 934
536f0460
DW
935.userenrolment .col_role .roles,
936.userenrolment .col_group .groups {
937 margin-right: 30px;
938}
f4143537 939
f66ab070
LB
940.userenrolment .col_role .role {
941 float: left;
942 padding: 0 3px 3px;
943 margin: 0 3px 3px;
944 white-space: nowrap;
945}
946
536f0460
DW
947.userenrolment .col_group .group {
948 float: left;
949 padding: 3px;
950 margin: 3px;
951 white-space: nowrap;
952}
f4143537 953
536f0460
DW
954.userenrolment .col_role .role a,
955.userenrolment .col_group .group a {
956 margin-left: 3px;
957 cursor: pointer;
958}
f4143537 959
536f0460
DW
960.userenrolment .col_role .addrole,
961.userenrolment .col_group .addgroup {
962 float: right;
963 padding: 3px;
964 margin: 3px;
f4143537 965
536f0460 966 > a:hover {
f4143537 967 border-bottom: 1px solid #666;
536f0460
DW
968 }
969}
f4143537 970
536f0460
DW
971.userenrolment .col_role .addrole img,
972.userenrolment .col_group .addgroup img {
973 vertical-align: baseline;
974}
975
976.userenrolment .hasAllRoles .col_role .addrole {
977 display: none;
978}
979
980.userenrolment .col_enrol .enrolment {
981 float: left;
f66ab070
LB
982 padding: 0 3px 3px;
983 margin: 0 3px 3px;
536f0460 984}
f4143537 985
536f0460
DW
986.userenrolment .col_enrol .enrolment a {
987 float: right;
988 margin-left: 3px;
989}
f4143537 990
536f0460
DW
991#page-enrol-users {
992 .enrol_user_buttons {
058f2fb6 993 text-align: right;
f4143537 994
536f0460 995 }
f4143537 996
536f0460
DW
997 #filterform {
998 @extend .card;
058f2fb6 999 @extend .card-block;
536f0460 1000 }
536f0460 1001}
f4143537 1002
536f0460 1003#page-enrol-users .enrol-users-page-action input {
f4143537 1004 margin-left: 0;
536f0460 1005}
f4143537 1006
536f0460 1007.corelightbox {
f4143537 1008 background-color: #ccc;
536f0460
DW
1009 position: absolute;
1010 top: 0;
1011 left: 0;
1012 width: 100%;
1013 height: 100%;
1014 text-align: center;
1015}
f4143537 1016
536f0460
DW
1017.corelightbox img {
1018 position: fixed;
1019 top: 50%;
1020 left: 50%;
1021}
1022
1023.mod-indent-outer {
1024 display: table;
1025}
f4143537 1026
536f0460
DW
1027.mod-indent {
1028 display: table-cell;
1029}
f4143537 1030
536f0460 1031.label .mod-indent {
f4143537
DP
1032 float: left;
1033 padding-top: 20px;
536f0460 1034}
536f0460
DW
1035$mod-indent-size: 30px;
1036/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
f4143537 1037
536f0460 1038@for $i from 1 through 16 {
9cb41231 1039 $width: ($i * $mod-indent-size);
536f0460 1040
9cb41231
DP
1041 .mod-indent-#{$i} {
1042 width: $width;
1043 }
536f0460 1044}
f4143537 1045
536f0460 1046.mod-indent-huge {
9cb41231 1047 width: (16 * $mod-indent-size);
536f0460
DW
1048}
1049
1050/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1051.resourcecontent .mediaplugin_mp3 object {
1052 height: 25px;
f4143537 1053 width: 600px;
536f0460 1054}
f4143537 1055
536f0460 1056.resourcecontent audio.mediaplugin_html5audio {
f4143537 1057 width: 600px;
536f0460
DW
1058}
1059/** Large resource images should avoid hidden overflow **/
1060.resourceimage {
1061 max-width: 100%;
1062}
1063/* Audio player size in 'inline' mode (can only change width, as above) */
1064.mediaplugin_mp3 object {
1065 height: 15px;
f4143537 1066 width: 300px;
536f0460 1067}
f4143537 1068
536f0460 1069audio.mediaplugin_html5audio {
f4143537 1070 width: 300px;
536f0460
DW
1071}
1072/* TinyMCE moodle media preview frame should not have padding */
1073.core_media_preview.pagelayout-embedded #content {
1074 padding: 0;
1075}
f4143537 1076
536f0460
DW
1077.core_media_preview.pagelayout-embedded #maincontent {
1078 height: 0;
1079}
f4143537 1080
536f0460
DW
1081body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1082 padding: 0;
1083 margin: 0;
1084 min-width: 0;
1085 background: none;
1086}
f4143537 1087
536f0460
DW
1088.path-rating .ratingtable {
1089 width: 100%;
1090 margin-bottom: 1em;
1091}
f4143537 1092
536f0460
DW
1093.path-rating .ratingtable th.rating {
1094 width: 100%;
1095}
f4143537 1096
536f0460
DW
1097.path-rating .ratingtable td.rating,
1098.path-rating .ratingtable td.time {
1099 white-space: nowrap;
1100 text-align: center;
1101}
f4143537 1102
536f0460
DW
1103/* Moodle Dialogue Settings (moodle-core-dialogue) */
1104.moodle-dialogue-base .moodle-dialogue-lightbox {
e72cb21d 1105 background-color: $gray;
536f0460 1106}
f4143537 1107
bfe00e67
BB
1108// Prevent adding backdrops to popups in popups.
1109.pagelayout-popup {
1110 .moodle-dialogue-base {
1111 .moodle-dialogue-lightbox {
1112 background-color: transparent;
1113 }
1114 .moodle-dialogue {
1115 box-shadow: $popover-box-shadow;
1116 }
1117 }
1118}
1119
536f0460
DW
1120.moodle-dialogue-base .hidden,
1121.moodle-dialogue-base .moodle-dialogue-hidden {
1122 display: none;
1123}
f4143537 1124
536f0460
DW
1125.no-scrolling {
1126 overflow: hidden;
1127}
f4143537 1128
536f0460 1129.moodle-dialogue-base .moodle-dialogue-fullscreen {
fde35b8f
DP
1130 left: 0;
1131 top: 0;
1132 right: 0;
536f0460
DW
1133 bottom: -50px;
1134 position: fixed;
1135}
f4143537 1136
536f0460
DW
1137.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1138 overflow: auto;
1139}
f4143537 1140
536f0460
DW
1141.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1142 width: 28px;
1143 height: 16px;
1144 background-size: 100%;
1145}
f4143537 1146
bffc0ef1
FM
1147.moodle-dialogue-base .moodle-dialogue-wrap {
1148 background-color: #fff;
1149 border: 1px solid #ccc;
1150}
f4143537 1151
181179de
DW
1152// Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1153// it for a reason (conflicts with jquery .show()).
1154.modal.show {
1155 display: block;
1156}
1157
25f90896
DW
1158.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1159 @extend .modal-content;
536f0460 1160}
f4143537 1161
25f90896
DW
1162.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1163 @extend .modal-header;
536f0460 1164}
f4143537 1165
536f0460 1166.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
25f90896 1167 // Undo some YUI damage.
88af0208 1168 min-height: 3rem;
25f90896 1169 color: initial;
25f90896
DW
1170 background: initial;
1171 font-size: 1.5rem;
1172 line-height: 1.5;
536f0460 1173}
f4143537 1174
536f0460 1175.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
25f90896 1176 @extend .modal-title;
3ec69c2e 1177 font-size: 1.5rem;
536f0460 1178}
f4143537 1179
536f0460 1180.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
85dd7c6f
NK
1181 /*rtl:raw:
1182 left: 0;
1183 right: auto;
1184 */
5142f564 1185 padding: $spacer;
536f0460 1186}
f4143537 1187
536f0460 1188.moodle-dialogue-base .closebutton {
25f90896 1189 @extend .close;
25f90896 1190 box-shadow: none;
5142f564
FM
1191 &::after {
1192 content: "×";
1193 }
536f0460 1194}
f4143537 1195
25f90896 1196.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
3ec69c2e 1197 padding: 0.5rem;
536f0460
DW
1198}
1199
1200.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1201 overflow: auto;
1202 position: absolute;
fde35b8f 1203 top: 0;
536f0460 1204 bottom: 50px;
fde35b8f
DP
1205 left: 0;
1206 right: 0;
1207 margin: 0;
1208 border: 0;
536f0460 1209}
f4143537 1210
536f0460
DW
1211.moodle-dialogue-exception .moodle-exception-param label {
1212 font-weight: bold;
1213}
f4143537 1214
536f0460 1215.moodle-dialogue-exception .param-stacktrace label {
f4143537 1216 background-color: #eee;
536f0460
DW
1217 border: 1px solid #ccc;
1218 border-bottom-width: 0;
1219}
f4143537 1220
536f0460
DW
1221.moodle-dialogue-exception .param-stacktrace pre {
1222 border: 1px solid #ccc;
1223 background-color: #fff;
1224}
f4143537 1225
536f0460
DW
1226.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1227 color: navy;
1228 font-size: $font-size-sm;
1229}
f4143537 1230
536f0460
DW
1231.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1232 @extend .text-warning;
1233 font-size: $font-size-sm;
1234}
f4143537 1235
536f0460
DW
1236.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1237 color: #333;
1238 font-size: 90%;
1239 border-bottom: 1px solid #eee;
1240}
f4143537 1241
536f0460 1242.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
25f90896
DW
1243 @extend .modal-footer;
1244}
f4143537 1245
bc8594bd
FM
1246.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1247 display: none;
1248}
f4143537 1249
25f90896
DW
1250.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1251 // Undo some YUI damage.
1252 background: initial;
536f0460 1253}
f4143537 1254
536f0460 1255.moodle-dialogue-confirm .confirmation-message {
3ec69c2e 1256 margin: 0.5rem 0;
f2405a5f 1257}
f4143537 1258
536f0460 1259.moodle-dialogue-confirm .confirmation-dialogue input {
f4143537 1260 min-width: 80px;
536f0460 1261}
f4143537 1262
536f0460
DW
1263.moodle-dialogue-exception .moodle-exception-message {
1264 margin: 1em;
1265}
f4143537 1266
536f0460
DW
1267.moodle-dialogue-exception .moodle-exception-param {
1268 margin-bottom: 0.5em;
1269}
f4143537 1270
536f0460
DW
1271.moodle-dialogue-exception .moodle-exception-param label {
1272 width: 150px;
1273}
f4143537 1274
536f0460
DW
1275.moodle-dialogue-exception .param-stacktrace label {
1276 display: block;
1277 margin: 0;
1278 padding: 4px 1em;
1279}
f4143537 1280
536f0460
DW
1281.moodle-dialogue-exception .param-stacktrace pre {
1282 display: block;
1283 height: 200px;
1284 overflow: auto;
1285}
f4143537 1286
536f0460
DW
1287.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1288 display: inline-block;
1289 margin: 4px 0;
1290}
f4143537 1291
536f0460
DW
1292.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1293 display: inline-block;
1294 width: 50px;
1295 margin: 4px 1em;
1296}
f4143537 1297
536f0460
DW
1298.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1299 padding-left: 25px;
1300 margin-bottom: 4px;
1301 padding-bottom: 4px;
1302}
f4143537 1303
536f0460
DW
1304.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1305 opacity: 0.75;
1306 width: 100%;
1307 height: 100%;
1308 top: 0;
1309 left: 0;
1310 background-color: white;
1311 text-align: center;
1312 padding: 10% 0;
1313}
1314/* Apply a default max-height on tooltip text */
1315.moodle-dialogue .tooltiptext {
1316 max-height: 300px;
1317}
1318
1319.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1320 z-index: 3001;
1321
1322 .moodle-dialogue-bd {
1323 overflow: auto;
1324 }
1325}
1326
1327/**
1328 * Chooser Dialogues (moodle-core-chooserdialogue)
1329 *
1330 * This CSS belong to the chooser dialogue which should work both with, and
1331 * without javascript enabled
1332 */
1333/* Hide the dialog and it's title */
1334.chooserdialoguebody,
1335.choosertitle {
1336 display: none;
1337}
f4143537 1338
536f0460
DW
1339.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1340 margin: 0;
1341}
f4143537 1342
536f0460
DW
1343.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1344 padding: 0;
f4143537
DP
1345 background: #f2f2f2;
1346
536f0460
DW
1347 @include border-bottom-radius(10px);
1348}
1349/* Center the submit buttons within the area */
1350.choosercontainer #chooseform .submitbuttons {
1351 padding: 0.7em 0;
f2405a5f 1352 text-align: right;
536f0460
DW
1353}
1354/* Fixed for safari browser on iPhone4S with ios7@mixin */
f4143537 1355
536f0460 1356@media (max-height: 639px) {
a266ae30 1357 .ios .choosercontainer #chooseform .submitbuttons {
536f0460
DW
1358 padding: 45px 0;
1359 }
1360}
f4143537 1361
536f0460
DW
1362.choosercontainer #chooseform .submitbuttons input {
1363 min-width: 100px;
1364 margin: 0 0.5em;
1365}
1366/* Various settings for the options area */
1367.choosercontainer #chooseform .options {
1368 position: relative;
fde35b8f 1369 border-bottom: 1px solid #bbb;
536f0460
DW
1370}
1371/* Only set these options if we're showing the js container */
1372.jschooser .choosercontainer #chooseform .alloptions {
1373 overflow-x: hidden;
1374 overflow-y: auto;
e119bf6f 1375 max-width: 240px;
f4143537 1376
536f0460
DW
1377 .option {
1378 input[type=radio] {
1379 display: inline-block;
1380 }
f4143537 1381
536f0460
DW
1382 .typename {
1383 display: inline-block;
9f76a701 1384 width: 55%;
536f0460
DW
1385 }
1386 }
1387}
1388/* Settings for option rows and option subtypes */
1389.choosercontainer #chooseform .moduletypetitle,
1390.choosercontainer #chooseform .option,
1391.choosercontainer #chooseform .nonoption {
1392 margin-bottom: 0;
1393 padding: 0 1.6em 0 1.6em;
1394}
f4143537 1395
536f0460
DW
1396.choosercontainer #chooseform .moduletypetitle {
1397 text-transform: uppercase;
1398 padding-top: 1.2em;
1399 padding-bottom: 0.4em;
1400}
f4143537 1401
536f0460 1402.choosercontainer #chooseform .option .typename,
072364df 1403.choosercontainer #chooseform .nonoption .typename {
536f0460
DW
1404 padding: 0 0 0 0.5em;
1405}
f4143537 1406
e119bf6f
FM
1407.choosercontainer #chooseform .modicon + .typename {
1408 padding-left: 0;
1409}
536f0460 1410
536f0460 1411.choosercontainer #chooseform .option input[type=radio],
072364df 1412.choosercontainer #chooseform .option span.typename {
536f0460
DW
1413 vertical-align: middle;
1414}
f4143537 1415
536f0460
DW
1416.choosercontainer #chooseform .option label {
1417 display: block;
e119bf6f
FM
1418 margin: 0;
1419 padding: ($spacer / 2) 0;
fde35b8f 1420 border-bottom: 1px solid #fff;
536f0460 1421}
f4143537 1422
e119bf6f
FM
1423.choosercontainer #chooseform .option .icon {
1424 margin: 0;
1425 padding: 0 $spacer;
1426}
f4143537 1427
536f0460
DW
1428.choosercontainer #chooseform .nonoption {
1429 padding-left: 2.7em;
1430 padding-top: 0.3em;
1431 padding-bottom: 0.1em;
1432}
f4143537 1433
536f0460
DW
1434.choosercontainer #chooseform .subtype {
1435 margin-bottom: 0;
1436 padding: 0 1.6em 0 3.2em;
1437}
f4143537 1438
536f0460
DW
1439.choosercontainer #chooseform .subtype .typename {
1440 margin: 0 0 0 0.2em;
1441}
1442/* The instruction/help area */
1443.jschooser .choosercontainer #chooseform .instruction,
1444.jschooser .choosercontainer #chooseform .typesummary {
9cb41231 1445 display: none;
536f0460
DW
1446 position: absolute;
1447 top: 0;
1448 right: 0;
1449 bottom: 0;
e119bf6f 1450 left: 240px;
536f0460
DW
1451 margin: 0;
1452 padding: 1.6em;
1453 background-color: #fff;
1454 overflow-x: hidden;
1455 overflow-y: auto;
1456 line-height: 2em;
1457}
1458/* Selected option settings */
1459.jschooser .choosercontainer #chooseform .instruction,
1460.choosercontainer #chooseform .selected .typesummary {
1461 display: block;
1462}
f4143537 1463
536f0460
DW
1464.choosercontainer #chooseform .selected {
1465 background-color: #fff;
e119bf6f
FM
1466 margin-top: -1px;
1467 padding-top: 1px;
1468}
f4143537 1469
e119bf6f
FM
1470.chooserdialogue-course-modchooser .modicon .icon {
1471 width: 24px;
1472 height: 24px;
9d67a408 1473 font-size: 24px;
536f0460 1474}
ba252fca
FM
1475
1476@include media-breakpoint-down(xs) {
1477 .jsenabled .choosercontainer #chooseform .alloptions {
1478 max-width: 100%;
1479 }
f4143537 1480
ba252fca
FM
1481 .jsenabled .choosercontainer #chooseform .instruction,
1482 .jsenabled .choosercontainer #chooseform .typesummary {
f4143537 1483 position: static;
ba252fca
FM
1484 }
1485}
1486
536f0460
DW
1487/* Form element: listing */
1488.formlistingradio {
1489 padding-bottom: 25px;
1490 padding-right: 10px;
1491}
f4143537 1492
536f0460
DW
1493.formlistinginputradio {
1494 float: left;
1495}
f4143537 1496
536f0460
DW
1497.formlistingmain {
1498 min-height: 225px;
1499}
f4143537 1500
536f0460
DW
1501.formlisting {
1502 position: relative;
1503 margin: 15px 0;
1504 padding: 1px 19px 14px;
1505 background-color: white;
f4143537
DP
1506 border: 1px solid #ddd;
1507
536f0460
DW
1508 @include border-radius(4px);
1509}
f4143537 1510
536f0460
DW
1511.formlistingmore {
1512 position: absolute;
1513 cursor: pointer;
1514 bottom: -1px;
1515 right: -1px;
1516 padding: 3px 7px;
1517 font-size: 12px;
1518 font-weight: bold;
f4143537 1519 background-color: whitesmoke;
536f0460 1520 border: 1px solid #ddd;
f4143537
DP
1521 color: #9da0a4;
1522
536f0460
DW
1523 @include border-radius(4px 0 4px 0);
1524}
f4143537 1525
536f0460
DW
1526.formlistingall {
1527 margin: 15px 0;
1528 padding: 0;
f4143537 1529
536f0460
DW
1530 @include border-radius(4px);
1531}
f4143537 1532
536f0460
DW
1533.formlistingrow {
1534 cursor: pointer;
1535 border-bottom: 1px solid;
f4143537
DP
1536 border-color: #e1e1e8;
1537 border-left: 1px solid #e1e1e8;
1538 border-right: 1px solid #e1e1e8;
1539 background-color: #f7f7f9;
1540
536f0460
DW
1541 @include border-radius(0 0 4px 4px);
1542 padding: 6px;
1543 top: 50%;
1544 left: 50%;
1545 min-height: 34px;
1546 float: left;
1547 width: 150px;
1548}
f4143537 1549
536f0460
DW
1550body.jsenabled .formlistingradio {
1551 display: none;
1552}
f4143537 1553
536f0460
DW
1554body.jsenabled .formlisting {
1555 display: block;
1556}
1557
1558/* Badges styles */
1559table.collection {
1560 @extend .table;
1561 @extend .table-bordered;
1562 @extend .table-striped;
1563}
f4143537 1564
536f0460 1565a.criteria-action {
fde35b8f 1566 padding: 0 3px;
536f0460
DW
1567 float: right;
1568}
f4143537 1569
536f0460
DW
1570div.criteria-description {
1571 padding: 10px 15px;
fde35b8f 1572 margin: 5px 0;
536f0460 1573 background: none repeat scroll 0 0 #f9f9f9;
f4143537 1574 border: 1px solid #eee;
536f0460 1575}
f4143537 1576
536f0460
DW
1577ul.badges {
1578 margin: 0;
1579 list-style: none;
1580}
f4143537 1581
536f0460
DW
1582.badges li {
1583 position: relative;
1584 display: inline-block;
1585 padding-top: 1em;
1586 text-align: center;
1587 vertical-align: top;
1588 width: 150px;
1589}
f4143537 1590
536f0460
DW
1591.badges li .badge-name {
1592 display: block;
1593 padding: 5px;
1594}
f4143537 1595
536f0460
DW
1596.badges li > img {
1597 position: absolute;
1598}
f4143537 1599
536f0460
DW
1600.badges li .badge-image {
1601 width: 100px;
1602 height: 100px;
1603 left: 10px;
fde35b8f 1604 top: 0;
536f0460
DW
1605 z-index: 1;
1606}
f4143537 1607
536f0460
DW
1608.badges li .badge-actions {
1609 position: relative;
1610}
f4143537 1611
536f0460
DW
1612.badges li .expireimage {
1613 width: 100px;
1614 height: 100px;
1615 left: 25px;
fde35b8f 1616 top: 0;
536f0460
DW
1617 position: absolute;
1618 z-index: 10;
1619 opacity: 0.85;
1620}
1621
1622#badge-image {
1623 background-color: transparent;
1624 padding: 0;
1625 position: relative;
1626 min-width: 100px;
1627 width: 20%;
1628 display: inline-block;
1629 vertical-align: top;
1630 margin-top: 17px;
ff54d94b 1631 margin-bottom: 20px;
536f0460
DW
1632
1633 .expireimage {
1634 width: 100px;
1635 height: 100px;
fde35b8f
DP
1636 left: 0;
1637 top: 0;
536f0460
DW
1638 opacity: 0.85;
1639 position: absolute;
f4143537 1640 z-index: 10;
536f0460
DW
1641 }
1642
1643 .singlebutton {
1644 padding-top: 5px;
ff54d94b 1645 display: block;
536f0460 1646
ff54d94b
SL
1647 button {
1648 margin-left: 4px;
536f0460
DW
1649 }
1650 }
1651}
f4143537 1652
536f0460
DW
1653#badge-details {
1654 display: inline-block;
1655 width: 79%;
1656}
1657
1658#badge-overview dl,
1659#badge-details dl {
1660 margin: 0;
1661
1662 dt,
1663 dd {
1664 vertical-align: top;
1665 padding: 3px 0;
1666 }
f4143537 1667
536f0460
DW
1668 dt {
1669 clear: both;
1670 display: inline-block;
1671 width: 20%;
1672 min-width: 100px;
1673 }
f4143537 1674
536f0460
DW
1675 dd {
1676 display: inline-block;
1677 width: 79%;
1678 margin-left: 1%;
1679 }
1680}
1681
1682.badge-profile {
1683 vertical-align: top;
1684}
f4143537 1685
536f0460
DW
1686.connected {
1687 @extend .text-success;
1688}
f4143537 1689
536f0460
DW
1690.notconnected {
1691 @extend .text-danger;
1692}
f4143537 1693
536f0460
DW
1694.connecting {
1695 @extend .text-warning;
1696}
f4143537 1697
536f0460
DW
1698#page-badges-award .recipienttable tr td {
1699 vertical-align: top;
1700}
f4143537 1701
536f0460
DW
1702#page-badges-award .recipienttable tr td.actions .actionbutton {
1703 margin: 0.3em 0;
1704 padding: 0.5em 0;
1705 width: 100%;
1706}
f4143537 1707
536f0460
DW
1708#page-badges-award .recipienttable tr td.existing,
1709#page-badges-award .recipienttable tr td.potential {
1710 width: 42%;
1711}
1712
1713#issued-badge-table .activatebadge {
1714 display: inline-block;
1715}
f4143537 1716
536f0460
DW
1717.statusbox.active {
1718 background-color: $state-success-bg;
1719}
f4143537 1720
536f0460
DW
1721.statusbox.inactive {
1722 background-color: $state-warning-bg;
1723}
f4143537 1724
536f0460
DW
1725.statusbox {
1726 text-align: center;
1727 margin-bottom: 5px;
1728 padding: 5px;
1729}
f4143537 1730
536f0460
DW
1731.statusbox .activatebadge {
1732 display: inline-block;
1733}
f4143537
DP
1734
1735.statusbox .activatebadge input[type=submit] {
536f0460
DW
1736 margin: 3px;
1737}
f4143537 1738
536f0460 1739.activatebadge {
fde35b8f 1740 margin: 0;
536f0460
DW
1741 text-align: left;
1742 vertical-align: middle;
1743}
f4143537 1744
536f0460
DW
1745img#persona_signin {
1746 cursor: pointer;
1747}
f4143537 1748
536f0460
DW
1749.addcourse {
1750 float: right;
1751}
f4143537 1752
536f0460
DW
1753.invisiblefieldset {
1754 display: inline;
536f0460
DW
1755 padding: 0;
1756 border-width: 0;
1757}
f4143537 1758
b71c82ad
FM
1759/** Page header */
1760#page-header {
1761 .logo {
1762 margin: $spacer 0;
7ad1d2da 1763 img {
0d5f5f73 1764 max-height: 75px;
7ad1d2da 1765 }
b71c82ad 1766 }
536f0460
DW
1767}
1768
ed0e21c0
BB
1769/** Navbar logo. */
1770nav.navbar .logo img {
1771 max-height: 35px;
5f18da12
FM
1772}
1773
536f0460
DW
1774/** Header-bar styles **/
1775.page-context-header {
1776 // We need to be explicit about the height of the header.
1777 $pageHeaderHeight: 140px;
1778
1779 // Do not remove these rules.
1780 overflow: hidden;
1781
1782 .page-header-image,
1783 .page-header-headings {
b167b415 1784 float: left;
536f0460
DW
1785 display: block;
1786 position: relative;
1787 }
f4143537 1788
536f0460 1789 .page-header-image {
536f0460
DW
1790 margin-right: 1em;
1791 margin-bottom: 1em;
1792 }
536f0460
DW
1793
1794 .page-header-headings,
1795 .header-button-group {
1796 position: relative;
1797 line-height: 24px;
1798 vertical-align: middle;
1799 }
1800
1801 .header-button-group {
1802 display: block;
1803 float: left;
f4143537 1804
536f0460
DW
1805 a {
1806 position: relative;
1807
1808 // Don't touch it unless you know exactly what you are doing.
1809 top: -0.4em;
1810 }
1811 }
1812}
1813
536f0460
DW
1814ul.dragdrop-keyboard-drag li {
1815 list-style-type: none;
1816}
1817
536f0460
DW
1818a.disabled:hover,
1819a.disabled {
1820 text-decoration: none;
1821 cursor: default;
1822 font-style: italic;
1823 color: #808080;
1824}
f4143537 1825
536f0460 1826body.lockscroll {
9cb41231
DP
1827 height: 100%;
1828 overflow: hidden;
536f0460
DW
1829}
1830
1831.progressbar_container {
1832 max-width: 500px;
1833 margin: 0 auto;
1834}
1835
1836/* IE10 only fix for calendar titling */
1837.ie10 .yui3-calendar-header-label {
1838 display: inline-block;
1839}
1840
1841dd:before,
1842dd:after {
9cb41231
DP
1843 display: block;
1844 content: " ";
536f0460 1845}
f4143537 1846
536f0460 1847dd:after {
9cb41231 1848 clear: both;
536f0460
DW
1849}
1850
1851// Active tabs with links should have a different
1852// cursor to indicate they are clickable.
1853.nav-tabs > .active > a[href],
1854.nav-tabs > .active > a[href]:hover,
1855.nav-tabs > .active > a[href]:focus {
1856 cursor: pointer;
1857}
1858
1859.inplaceeditable {
536f0460
DW
1860 &.inplaceeditingon {
1861 position: relative;
1862
1863 .editinstructions {
1864 margin-top: -30px;
1865 font-weight: normal;
1866 margin-right: 0;
1867 margin-left: 0;
1868 left: 0;
1869 right: auto;
1870 white-space: nowrap;
1871 }
1872
1873 input {
1874 width: 330px;
536f0460
DW
1875 vertical-align: text-bottom;
1876 margin-bottom: 0;
1877 }
1878
1879 select {
1880 margin-bottom: 0;
1881 }
1882 }
1883
1884 .quickediticon img {
1885 opacity: 0.2;
1886 }
1887
1888 .quickeditlink {
1889 color: inherit;
1890 text-decoration: inherit;
1891 }
1892
1893 &:hover .quickeditlink .quickediticon img,
1894 .quickeditlink:focus .quickediticon img {
1895 opacity: 1;
1896 }
1897
1898 &.inplaceeditable-toggle .quickediticon {
1899 display: none;
1900 }
fb5bbf14
AN
1901
1902 &.inplaceeditable-autocomplete {
1903 display: block;
1904 }
536f0460
DW
1905}
1906
1907h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1908 margin-top: -20px;
1909}
89d9895b
FM
1910
1911/** Chart area. */
1912.chart-area {
1913
1914 .chart-table-data {
1915 display: none;
1916 }
1917
1918 .chart-table {
1919 .chart-output-htmltable caption {
1920 white-space: nowrap;
1921 }
1922 /** When accessible, we display the table only. */
1923 &.accesshide {
1924 .chart-table-expand {
1925 display: none;
1926 }
1927 .chart-table-data {
1928 display: block;
1929 }
1930 }
1931 }
1932}
1933
536f0460
DW
1934// Reset for ul.
1935ul {
1936 padding-left: 1rem;
1937}
b843914d
FM
1938
1939/* YUI 2 Tree View */
1940/*rtl:raw:
1941.ygtvtn,
1942.ygtvtm,
1943.ygtvtmh,
1944.ygtvtmhh,
1945.ygtvtp,
1946.ygtvtph,
1947.ygtvtphh,
1948.ygtvln,
1949.ygtvlm,
1950.ygtvlmh,
1951.ygtvlmhh,
1952.ygtvlp,
1953.ygtvlph,
1954.ygtvlphh,
1955.ygtvdepthcell,
1956.ygtvok,
1957.ygtvok:hover,
1958.ygtvcancel,
1959.ygtvcancel:hover {
1960 background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1961}
1962*/
963ba889
RW
1963
1964.hover-tooltip-container {
1965 position: relative;
1966
1967 .hover-tooltip {
1968 opacity: 0;
1969 visibility: hidden;
1970 position: absolute;
1fb687ea 1971 /*rtl:ignore*/
963ba889
RW
1972 left: 50%;
1973 top: calc(-50% - 5px);
1974 transform: translate(-50%, -50%);
1975 background-color: #fff;
1976 border: 1px solid rgba(0, 0, 0, .2);
1977 border-radius: .3rem;
1978 box-sizing: border-box;
1979 padding: 5px;
1980 white-space: nowrap;
1981 transition: opacity 0.15s, visibility 0.15s;
1982 z-index: 1000;
1983
1984 &:before {
1985 content: '';
1986 display: inline-block;
1987 border-left: 8px solid transparent;
1988 border-right: 8px solid transparent;
1989 border-top: 8px solid rgba(0, 0, 0, .2);
1990 position: absolute;
1991 bottom: -8px;
1992 left: calc(50% - 8px);
1993 }
1994
1995 &:after {
1996 content: '';
1997 display: inline-block;
1998 border-left: 7px solid transparent;
1999 border-right: 7px solid transparent;
2000 border-top: 7px solid #fff;
2001 position: absolute;
2002 bottom: -6px;
2003 left: calc(50% - 7px);
2004 z-index: 2;
2005 }
2006 }
2007
2008 &:hover {
2009 .hover-tooltip {
2010 opacity: 1;
2011 visibility: visible;
2012 transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2013 }
2014 }
2015}
99061152
DW
2016
2017#region-flat-nav {
2018 padding-right: 0;
2019 padding-left: 0;
2020 .nav {
2021 margin-right: $grid-gutter-width / 2;
2022 background-color: $card-bg;
2023 }
2024 @include media-breakpoint-down(sm) {
2025 .nav {
2026 margin-top: $grid-gutter-width;
2027 margin-right: 0;
2028 }
2029 }
2030}
b45fdc68 2031
2fd7cdbe
JO
2032// Footer link colour was added to allow the colour of footer links to be changed,
2033// but really in bootstrap we want the colour of links on .bg-inverse to be changed
2034// rather than being specific to the footer. This is kept for backwards compatibility.
2035$footer-link-color: $bg-inverse-link-color !default;
b45fdc68
DW
2036#page-footer a {
2037 color: $footer-link-color;
2fd7cdbe
JO
2038 text-decoration: underline;
2039 .icon {
2040 color: $footer-link-color;
2041 }
2042}
2043
2044.bg-inverse a {
2045 color: $bg-inverse-link-color;
2046 text-decoration: underline;
2047 .icon {
2048 color: $bg-inverse-link-color;
2049 }
b45fdc68 2050}
70fda55e 2051
15de9ec8
LB
2052.sitelink {
2053 img {
2054 width: 112px;
2055 }
2056}
2057
70fda55e
DW
2058// Make links in a menu clickable anywhere in the row.
2059.dropdown-item a {
2060 display: block;
2061 width: 100%;
2062 color: $body-color;
2063}
20e6ece8
DW
2064.dropdown-item:active a {
2065 color: $dropdown-link-active-color;
2066}
6e79ea58 2067
207136f2
DW
2068.competency-tree {
2069 ul {
2070 padding-left: 1.5rem;
2071 }
2072}
24299774 2073
4b80e95c
NK
2074.sr-only-focusable {
2075 &:active,
2076 &:focus {
2077 z-index: $zindex-navbar-fixed + 1;
2078 position: fixed;
2079 background: #fff;
2080 padding: 7px;
2081 left: 0;
2082 top: 0;
2083 }
2084}
5ca142dc
RW
2085
2086[data-drag-type="move"] {
2087 cursor: move;
f7d1a24e 2088 touch-action: none;
5ca142dc 2089}
f6e8cc83
RW
2090
2091.clickable {
2092 cursor: pointer;
2093}
63cb267c
SL
2094
2095.overlay-icon-container {
2096 position: absolute;
2097 top: 0;
2098 left: 0;
2099 width: 100%;
2100 height: 100%;
2101 background-color: rgba(255, 255, 255, 0.6);
2102
2103 .loading-icon {
2104 position: absolute;
2105 top: 50%;
2106 left: 50%;
2107 transform: translate(-50%, -50%);
2108
2109 .icon {
99df0518
RW
2110 height: 30px;
2111 width: 30px;
2112 font-size: 30px;
63cb267c
SL
2113 }
2114 }
2115}
3ec69c2e 2116
7b87d98d 2117.open.atto_menu > .dropdown-menu {
3ec69c2e
BB
2118 display: block;
2119}
1b217025
BB
2120div.editor_atto_toolbar button .icon {
2121 color: $gray-700;
2122}
2123.w-auto {
2124 width: auto;
2125}
2126
edd7fa33
RW
2127.bg-pulse-grey {
2128 animation: bg-pulse-grey 2s infinite linear;
2129}
2130
2131@keyframes bg-pulse-grey {
2132 0% {
2133 background-color: $gray-100;
2134 }
2135 50% {
2136 background-color: darken($gray-100, 5%);
2137 }
2138 100% {
2139 background-color: $gray-100;
2140 }
2141}
2142
2d41f5b2
RW
2143@each $size, $length in $spacers {
2144 .line-height-#{$size} {
2145 line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2146 }
296ff0a7
RW
2147}
2148
2149.dir-rtl {
2150 .dir-rtl-hide {
2151 display: none;
2152 }
2153}
2154
2155.dir-ltr {
2156 .dir-ltr-hide {
2157 display: none;
2158 }
970bb713 2159}
a69193fa 2160
5ca0958d 2161$switch-height: 1.25rem !default;
a69193fa
RW
2162$switch-height-half: ($switch-height / 2) !default;
2163$switch-border-radius: $switch-height !default;
5ca0958d 2164$switch-bg: $gray-300 !default;
a69193fa 2165$switch-checked-bg: map-get($theme-colors, 'primary') !default;
5ca0958d
RW
2166$switch-disabled-bg: $gray-200 !default;
2167$switch-disabled-color: $gray-600 !default;
a69193fa
RW
2168$switch-thumb-bg: $white !default;
2169$switch-thumb-border-radius: 50% !default;
2170$switch-thumb-padding: 2px !default;
2171$switch-thumb-padding-double: ($switch-thumb-padding * 2) !default;
2172$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
2173$switch-transition: .2s all !default;
2174
2175.switch {
2176 position: relative;
2177
2178 input {
5005d8cf 2179 float: left;
a69193fa 2180 width: 1px;
5005d8cf 2181 transform: translateX(1px);
a69193fa 2182 padding: 0;
5005d8cf
RW
2183 margin: 0;
2184 opacity: 0;
a69193fa
RW
2185
2186 + label {
2187 position: relative;
2188 min-height: $switch-height;
2189 min-width: $switch-height * 2;
2190 line-height: $switch-height;
2191 border-radius: $switch-border-radius;
2192 display: inline-block;
2193 cursor: pointer;
2194 outline: none;
2195 user-select: none;
2196 vertical-align: middle;
2197 padding-left: (($switch-height * 2) + .5rem);
2198 }
2199
2200 + label::before,
2201 + label::after {
2202 content: '';
2203 position: absolute;
2204 top: calc(50% - #{$switch-height-half});
2205 left: 0;
2206 width: ($switch-height * 2);
2207 height: $switch-height;
2208 bottom: 0;
2209 display: block;
2210 }
2211
2212 + label::before {
2213 right: 0;
2214 background-color: $switch-bg;
2215 border-radius: $switch-border-radius;
2216 transition: $switch-transition;
2217 }
2218
2219 + label::after {
2220 margin-top: $switch-thumb-padding;
2221 left: $switch-thumb-padding;
2222 width: calc(#{$switch-height} - #{$switch-thumb-padding-double});
2223 height: calc(#{$switch-height} - #{$switch-thumb-padding-double});
2224 border-radius: $switch-thumb-border-radius;
2225 background-color: $switch-thumb-bg;
2226 transition: $switch-transition;
2227 }
2228
2229 &:checked + label::before {
2230 background-color: $switch-checked-bg;
2231 }
2232
2233 &:checked + label::after {
2234 margin-left: $switch-height;
2235 }
2236
2237 &:focus + label::before {
2238 outline: none;
2239 box-shadow: $switch-focus-box-shadow;
2240 }
2241
2242 &:disabled + label {
2243 color: $switch-disabled-color;
2244 cursor: not-allowed;
2245 }
2246
2247 &:disabled + label::before {
2248 background-color: $switch-disabled-bg;
2249 }
2250 }
2251}
2252
356bfb69
BB
2253.paged-content-page-container {
2254 min-height: 3.125rem;
2255}
c483a8ee 2256
35221a2e
SA
2257body.h5p-embed {
2258 #maincontent {
2259 display: none;
2260 }
2261 .h5pmessages {
2262 min-height: 230px; // This should be the same height as default core_h5p iframes.
2263 }
2264}
2265
c483a8ee
RW
2266.text-decoration-none {
2267 text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
12d23810
RW
2268}
2269
b53f15b1
RW
2270.colour-inherit {
2271 color: inherit !important; /* stylelint-disable-line declaration-no-important */
2272}
2273
12d23810
RW
2274.position-right {
2275 right: 0 !important; /* stylelint-disable-line declaration-no-important */
20e6ece8 2276}
3edde4fb
RW
2277
2278.overflow-hidden {
2279 overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2280}
48507e16
BB
2281
2282.text-break {
2283 overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2284}
c516fc11
BB
2285
2286.z-index-1 {
2287 z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2288}
10425e73
BB
2289
2290// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2291.float-left {
2292 float: left !important; /* stylelint-disable-line declaration-no-important */
2293}
2294.float-right {
2295 float: right !important; /* stylelint-disable-line declaration-no-important */
2296}
db65ba45 2297
db65ba45
RW
2298// Emoji picker.
2299$picker-width: 350px !default;
2300$picker-width-xs: 320px !default;
2301$picker-height: 400px !default;
2302$picker-row-height: 40px !default;
2303$picker-emoji-button-size: 40px !default;
2304$picker-emoji-button-font-size: 24px !default;
2305$picker-emoji-category-count: 9 !default;
2306$picker-emojis-per-row: 7 !default;
2307
2308.emoji-picker {
2309 width: $picker-width;
2310 height: $picker-height;
2311
2312 .category-button {
2313 padding: .375rem 0;
2314 height: 100%;
2315 width: $picker-width / $picker-emoji-category-count;
2316 border-top: none;
2317 border-left: none;
2318 border-right: none;
2319 border-bottom: 2px solid transparent;
2320
2321 &.selected {
2322 border-bottom: 2px solid map-get($theme-colors, 'primary');
2323 }
2324 }
2325
2326 .emojis-container,
2327 .search-results-container {
2328 min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2329 }
2330
2331 .picker-row {
2332 height: $picker-row-height;
2333
2334 .category-name {
2335 line-height: $picker-row-height;
2336 }
2337
2338 .emoji-button {
2339 height: $picker-emoji-button-size;
2340 width: $picker-emoji-button-size;
2341 line-height: $picker-emoji-button-size;
2342 font-size: $picker-emoji-button-font-size;
2343 overflow: hidden;
2344
2345 @include hover-focus {
2346 color: inherit;
2347 text-decoration: none;
2348 }
2349 }
2350 }
2351
2352 .emoji-preview {
2353 height: $picker-row-height;
2354 font-size: $picker-row-height;
2355 line-height: $picker-row-height;
2356 }
2357
2358 .emoji-short-name {
2359 line-height: $picker-row-height / 2;
2360 }
2361
2362 @include media-breakpoint-down(xs) {
2363 width: $picker-width-xs;
2364 }
2365}
75962db9
RW
2366
2367.emoji-auto-complete {
2368 height: $picker-row-height;
2369
2370 .btn.btn-link.btn-icon.emoji-button {
2371 height: $picker-emoji-button-size;
2372 width: $picker-emoji-button-size;
2373 line-height: $picker-emoji-button-size;
2374 font-size: $picker-emoji-button-font-size;
2375
2376 &.active {
2377 background-color: $gray-200;
2378 }
2379 }
2380}
224ea04e
AN
2381
2382.toast-wrapper {
2383 max-width: $toast-max-width;
2384 // Place these above any modals and other elements.
2385 z-index: 1051;
2386}