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