MDL-69453 core_form: improve form UI icons and alignment
[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
536f0460
DW
1261.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1262 width: 28px;
1263 height: 16px;
1264 background-size: 100%;
1265}
f4143537 1266
bffc0ef1
FM
1267.moodle-dialogue-base .moodle-dialogue-wrap {
1268 background-color: #fff;
1269 border: 1px solid #ccc;
1270}
f4143537 1271
181179de
DW
1272// Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1273// it for a reason (conflicts with jquery .show()).
1274.modal.show {
1275 display: block;
1276}
1277
25f90896 1278.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
807e5244
BB
1279 display: flex;
1280 padding: 1rem 1rem;
1281 border-bottom: 1px solid #dee2e6;
536f0460 1282}
f4143537 1283
536f0460 1284.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
25f90896 1285 // Undo some YUI damage.
88af0208 1286 min-height: 3rem;
25f90896 1287 color: initial;
25f90896
DW
1288 background: initial;
1289 font-size: 1.5rem;
1290 line-height: 1.5;
536f0460 1291}
f4143537 1292
536f0460 1293.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
3ec69c2e 1294 font-size: 1.5rem;
536f0460 1295}
f4143537 1296
536f0460 1297.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
85dd7c6f
NK
1298 /*rtl:raw:
1299 left: 0;
1300 right: auto;
1301 */
807e5244
BB
1302 padding: 0;
1303 position: relative;
1304 margin-left: auto;
536f0460 1305}
f4143537 1306
536f0460 1307.moodle-dialogue-base .closebutton {
807e5244
BB
1308 padding: $modal-header-padding;
1309 margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1310 position: relative;
1311 background-color: transparent;
1312 border: 0;
1313 background-image: none;
25f90896 1314 box-shadow: none;
807e5244
BB
1315 opacity: 0.7;
1316 &:hover,
1317 &:active {
1318 opacity: 1;
1319 }
5142f564
FM
1320 &::after {
1321 content: "×";
1322 }
536f0460 1323}
f4143537 1324
25f90896 1325.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
3ec69c2e 1326 padding: 0.5rem;
807e5244
BB
1327 body {
1328 background-color: $body-bg;
1329 }
536f0460
DW
1330}
1331
1332.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1333 overflow: auto;
1334 position: absolute;
fde35b8f 1335 top: 0;
536f0460 1336 bottom: 50px;
fde35b8f
DP
1337 left: 0;
1338 right: 0;
1339 margin: 0;
1340 border: 0;
536f0460 1341}
f4143537 1342
536f0460
DW
1343.moodle-dialogue-exception .moodle-exception-param label {
1344 font-weight: bold;
1345}
f4143537 1346
536f0460 1347.moodle-dialogue-exception .param-stacktrace label {
f4143537 1348 background-color: #eee;
536f0460
DW
1349 border: 1px solid #ccc;
1350 border-bottom-width: 0;
1351}
f4143537 1352
536f0460
DW
1353.moodle-dialogue-exception .param-stacktrace pre {
1354 border: 1px solid #ccc;
1355 background-color: #fff;
1356}
f4143537 1357
536f0460
DW
1358.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1359 color: navy;
1360 font-size: $font-size-sm;
1361}
f4143537 1362
536f0460 1363.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
43817397 1364 color: map-get($theme-colors, 'warning');
536f0460
DW
1365 font-size: $font-size-sm;
1366}
f4143537 1367
536f0460
DW
1368.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1369 color: #333;
1370 font-size: 90%;
1371 border-bottom: 1px solid #eee;
1372}
f4143537 1373
bc8594bd
FM
1374.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1375 display: none;
1376}
f4143537 1377
25f90896
DW
1378.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1379 // Undo some YUI damage.
1380 background: initial;
536f0460 1381}
f4143537 1382
536f0460 1383.moodle-dialogue-confirm .confirmation-message {
3ec69c2e 1384 margin: 0.5rem 0;
f2405a5f 1385}
f4143537 1386
536f0460 1387.moodle-dialogue-confirm .confirmation-dialogue input {
f4143537 1388 min-width: 80px;
536f0460 1389}
f4143537 1390
536f0460
DW
1391.moodle-dialogue-exception .moodle-exception-message {
1392 margin: 1em;
1393}
f4143537 1394
536f0460
DW
1395.moodle-dialogue-exception .moodle-exception-param {
1396 margin-bottom: 0.5em;
1397}
f4143537 1398
536f0460
DW
1399.moodle-dialogue-exception .moodle-exception-param label {
1400 width: 150px;
1401}
f4143537 1402
536f0460
DW
1403.moodle-dialogue-exception .param-stacktrace label {
1404 display: block;
1405 margin: 0;
1406 padding: 4px 1em;
1407}
f4143537 1408
536f0460
DW
1409.moodle-dialogue-exception .param-stacktrace pre {
1410 display: block;
1411 height: 200px;
1412 overflow: auto;
1413}
f4143537 1414
536f0460
DW
1415.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1416 display: inline-block;
1417 margin: 4px 0;
1418}
f4143537 1419
536f0460
DW
1420.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1421 display: inline-block;
1422 width: 50px;
1423 margin: 4px 1em;
1424}
f4143537 1425
536f0460
DW
1426.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1427 padding-left: 25px;
1428 margin-bottom: 4px;
1429 padding-bottom: 4px;
1430}
f4143537 1431
536f0460
DW
1432.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1433 opacity: 0.75;
1434 width: 100%;
1435 height: 100%;
1436 top: 0;
1437 left: 0;
1438 background-color: white;
1439 text-align: center;
1440 padding: 10% 0;
1441}
1442/* Apply a default max-height on tooltip text */
1443.moodle-dialogue .tooltiptext {
1444 max-height: 300px;
1445}
1446
1447.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1448 z-index: 3001;
1449
1450 .moodle-dialogue-bd {
1451 overflow: auto;
1452 }
1453}
1454
1455/**
1456 * Chooser Dialogues (moodle-core-chooserdialogue)
1457 *
1458 * This CSS belong to the chooser dialogue which should work both with, and
1459 * without javascript enabled
1460 */
1461/* Hide the dialog and it's title */
1462.chooserdialoguebody,
1463.choosertitle {
1464 display: none;
1465}
f4143537 1466
536f0460
DW
1467.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1468 margin: 0;
1469}
f4143537 1470
536f0460
DW
1471.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1472 padding: 0;
f4143537
DP
1473 background: #f2f2f2;
1474
536f0460
DW
1475 @include border-bottom-radius(10px);
1476}
1477/* Center the submit buttons within the area */
1478.choosercontainer #chooseform .submitbuttons {
1479 padding: 0.7em 0;
f2405a5f 1480 text-align: right;
536f0460
DW
1481}
1482/* Fixed for safari browser on iPhone4S with ios7@mixin */
f4143537 1483
536f0460 1484@media (max-height: 639px) {
a266ae30 1485 .ios .choosercontainer #chooseform .submitbuttons {
536f0460
DW
1486 padding: 45px 0;
1487 }
1488}
f4143537 1489
536f0460
DW
1490.choosercontainer #chooseform .submitbuttons input {
1491 min-width: 100px;
1492 margin: 0 0.5em;
1493}
1494/* Various settings for the options area */
1495.choosercontainer #chooseform .options {
1496 position: relative;
fde35b8f 1497 border-bottom: 1px solid #bbb;
536f0460
DW
1498}
1499/* Only set these options if we're showing the js container */
1500.jschooser .choosercontainer #chooseform .alloptions {
1501 overflow-x: hidden;
1502 overflow-y: auto;
e119bf6f 1503 max-width: 240px;
f4143537 1504
536f0460
DW
1505 .option {
1506 input[type=radio] {
1507 display: inline-block;
1508 }
f4143537 1509
536f0460
DW
1510 .typename {
1511 display: inline-block;
9f76a701 1512 width: 55%;
536f0460
DW
1513 }
1514 }
1515}
1516/* Settings for option rows and option subtypes */
1517.choosercontainer #chooseform .moduletypetitle,
1518.choosercontainer #chooseform .option,
1519.choosercontainer #chooseform .nonoption {
1520 margin-bottom: 0;
1521 padding: 0 1.6em 0 1.6em;
1522}
f4143537 1523
536f0460
DW
1524.choosercontainer #chooseform .moduletypetitle {
1525 text-transform: uppercase;
1526 padding-top: 1.2em;
1527 padding-bottom: 0.4em;
604df144
SR
1528 margin-bottom: 0.5rem;
1529 font-size: 100%;
536f0460 1530}
f4143537 1531
536f0460 1532.choosercontainer #chooseform .option .typename,
072364df 1533.choosercontainer #chooseform .nonoption .typename {
536f0460
DW
1534 padding: 0 0 0 0.5em;
1535}
f4143537 1536
e119bf6f
FM
1537.choosercontainer #chooseform .modicon + .typename {
1538 padding-left: 0;
1539}
536f0460 1540
536f0460 1541.choosercontainer #chooseform .option input[type=radio],
072364df 1542.choosercontainer #chooseform .option span.typename {
536f0460
DW
1543 vertical-align: middle;
1544}
f4143537 1545
536f0460
DW
1546.choosercontainer #chooseform .option label {
1547 display: block;
e119bf6f
FM
1548 margin: 0;
1549 padding: ($spacer / 2) 0;
fde35b8f 1550 border-bottom: 1px solid #fff;
536f0460 1551}
f4143537 1552
e119bf6f
FM
1553.choosercontainer #chooseform .option .icon {
1554 margin: 0;
1555 padding: 0 $spacer;
1556}
f4143537 1557
536f0460
DW
1558.choosercontainer #chooseform .nonoption {
1559 padding-left: 2.7em;
1560 padding-top: 0.3em;
1561 padding-bottom: 0.1em;
1562}
f4143537 1563
536f0460
DW
1564.choosercontainer #chooseform .subtype {
1565 margin-bottom: 0;
1566 padding: 0 1.6em 0 3.2em;
1567}
f4143537 1568
536f0460
DW
1569.choosercontainer #chooseform .subtype .typename {
1570 margin: 0 0 0 0.2em;
1571}
1572/* The instruction/help area */
1573.jschooser .choosercontainer #chooseform .instruction,
1574.jschooser .choosercontainer #chooseform .typesummary {
9cb41231 1575 display: none;
536f0460
DW
1576 position: absolute;
1577 top: 0;
1578 right: 0;
1579 bottom: 0;
e119bf6f 1580 left: 240px;
536f0460
DW
1581 margin: 0;
1582 padding: 1.6em;
1583 background-color: #fff;
1584 overflow-x: hidden;
1585 overflow-y: auto;
1586 line-height: 2em;
1587}
1588/* Selected option settings */
1589.jschooser .choosercontainer #chooseform .instruction,
1590.choosercontainer #chooseform .selected .typesummary {
1591 display: block;
1592}
f4143537 1593
536f0460
DW
1594.choosercontainer #chooseform .selected {
1595 background-color: #fff;
e119bf6f
FM
1596 margin-top: -1px;
1597 padding-top: 1px;
1598}
f4143537 1599
ba252fca
FM
1600
1601@include media-breakpoint-down(xs) {
1602 .jsenabled .choosercontainer #chooseform .alloptions {
1603 max-width: 100%;
1604 }
f4143537 1605
ba252fca
FM
1606 .jsenabled .choosercontainer #chooseform .instruction,
1607 .jsenabled .choosercontainer #chooseform .typesummary {
f4143537 1608 position: static;
ba252fca
FM
1609 }
1610}
1611
05b27f21
MM
1612/**
1613 * Module chooser dialogue (moodle-core-chooserdialogue)
1614 *
1615 * This CSS belong to the chooser dialogue which should work both with, and
1616 * without javascript enabled
1617 */
1618.modchooser .modal-body {
1619 padding: 0;
05b27f21 1620 overflow-y: auto;
5fe7bcdb
BB
1621 min-height: 640px;
1622 display: flex;
1623 flex-direction: column;
1624
1625 .searchresultitemscontainer-wrapper {
1626 min-height: 495px;
1627 }
1628
1629 .carousel-item.active {
1630 display: flex;
1631 }
1632 .chooser-container {
1633 display: flex;
1634 flex-direction: column;
1635 flex: 1 1 auto;
1636 }
05b27f21
MM
1637
1638 .loading-icon {
1639 opacity: 1;
1640 .icon {
1641 display: block;
1642 font-size: 3em;
1643 height: 1em;
1644 width: 1em;
05b27f21
MM
1645 }
1646 }
f2d033a2 1647 .carousel-item .loading-icon .icon {
5fe7bcdb 1648 margin: 1em auto;
f2d033a2 1649 }
c549ca5d
BB
1650 .searchbar {
1651 width: 100%;
1652 }
05b27f21
MM
1653}
1654
16d77f18
MM
1655.modchooser .modal-footer {
1656 height: 70px;
b1e6d8b8 1657 background: $modal-content-bg;
16d77f18
MM
1658 .moodlenet-logo {
1659 .icon {
1660 height: 2.5rem;
1661 width: 6rem;
1662 margin-bottom: .6rem;
1663 }
1664 }
1665}
1666
05b27f21
MM
1667.modchoosercontainer.noscroll {
1668 overflow-y: hidden;
1669}
1670
f152b71d
MG
1671.modchoosercontainer .optionscontainer,
1672.modchoosercontainer .searchresultitemscontainer {
05b27f21
MM
1673 overflow-x: hidden;
1674 .option {
5fe7bcdb
BB
1675 // 2 items per line.
1676 flex-basis: calc(50% - 0.5rem);
05b27f21
MM
1677 .optionactions {
1678 .optionaction {
1679 cursor: pointer;
05b27f21
MM
1680 color: $gray-600;
1681 i {
1682 margin: 0;
1683 }
1684 }
1685 }
1686 .optioninfo {
1687 a {
1688 color: $gray-700;
1689 &:hover {
1690 text-decoration: none;
1691 }
05b27f21
MM
1692 }
1693 }
1694 }
1695}
1696
1697.modchooser .modal-body .optionsummary {
1698 background-color: $white;
1699 overflow-x: hidden;
1700 overflow-y: auto;
16d77f18 1701 height: 640px;
05b27f21
MM
1702
1703 .content {
1704 overflow-y: auto;
1705 .heading {
1706 .icon {
1707 height: 32px;
1708 width: 32px;
1709 font-size: 32px;
1710 padding: 0;
1711 }
1712 }
1713 }
1714
1715 .actions {
1716 border-top: 1px solid $gray-300;
1717 background: $white;
1718 }
1719}
1720
05b27f21
MM
1721@include media-breakpoint-down(xs) {
1722 .path-course-view .modal-dialog.modal-lg,
1723 .path-course-view .modal-content,
1724 .modchooser .modal-body,
1725 .modchooser .modal-body .carousel,
1726 .modchooser .modal-body .carousel-inner,
1727 .modchooser .modal-body .carousel-item,
1728 .modchooser .modal-body .optionsummary,
1729 .modchoosercontainer,
f152b71d
MG
1730 .optionscontainer,
1731 .searchresultitemscontainer {
5fe7bcdb 1732 min-height: auto;
05b27f21 1733 height: 100%;
5fe7bcdb 1734 overflow-y: auto;
05b27f21
MM
1735 }
1736 .path-course-view .modal-dialog.modal-lg {
1737 margin: 0;
1738 }
5fe7bcdb
BB
1739 .modchooser .modal-body .searchresultitemscontainer-wrapper {
1740 min-height: auto;
1741 }
1742}
1743
1744@include media-breakpoint-up(sm) {
1745 .modchoosercontainer .optionscontainer .option,
1746 .modchoosercontainer .searchresultitemscontainer .option {
1747 // Three items per line.
1748 flex-basis: calc(33.33% - 0.5rem);
1749 }
1750}
1751
1752@include media-breakpoint-up(lg) {
f152b71d
MG
1753 .modchoosercontainer .optionscontainer .option,
1754 .modchoosercontainer .searchresultitemscontainer .option {
5fe7bcdb
BB
1755 // Six items per line.
1756 flex-basis: calc(16.66% - 0.5rem);
05b27f21
MM
1757 }
1758}
1759
536f0460
DW
1760/* Form element: listing */
1761.formlistingradio {
1762 padding-bottom: 25px;
1763 padding-right: 10px;
1764}
f4143537 1765
536f0460
DW
1766.formlistinginputradio {
1767 float: left;
1768}
f4143537 1769
536f0460
DW
1770.formlistingmain {
1771 min-height: 225px;
1772}
f4143537 1773
536f0460
DW
1774.formlisting {
1775 position: relative;
1776 margin: 15px 0;
1777 padding: 1px 19px 14px;
1778 background-color: white;
f4143537
DP
1779 border: 1px solid #ddd;
1780
536f0460
DW
1781 @include border-radius(4px);
1782}
f4143537 1783
536f0460
DW
1784.formlistingmore {
1785 position: absolute;
1786 cursor: pointer;
1787 bottom: -1px;
1788 right: -1px;
1789 padding: 3px 7px;
1790 font-size: 12px;
1791 font-weight: bold;
f4143537 1792 background-color: whitesmoke;
536f0460 1793 border: 1px solid #ddd;
f4143537
DP
1794 color: #9da0a4;
1795
536f0460
DW
1796 @include border-radius(4px 0 4px 0);
1797}
f4143537 1798
536f0460
DW
1799.formlistingall {
1800 margin: 15px 0;
1801 padding: 0;
f4143537 1802
536f0460
DW
1803 @include border-radius(4px);
1804}
f4143537 1805
536f0460
DW
1806.formlistingrow {
1807 cursor: pointer;
1808 border-bottom: 1px solid;
f4143537
DP
1809 border-color: #e1e1e8;
1810 border-left: 1px solid #e1e1e8;
1811 border-right: 1px solid #e1e1e8;
1812 background-color: #f7f7f9;
1813
536f0460
DW
1814 @include border-radius(0 0 4px 4px);
1815 padding: 6px;
1816 top: 50%;
1817 left: 50%;
1818 min-height: 34px;
1819 float: left;
1820 width: 150px;
1821}
f4143537 1822
536f0460
DW
1823body.jsenabled .formlistingradio {
1824 display: none;
1825}
f4143537 1826
536f0460
DW
1827body.jsenabled .formlisting {
1828 display: block;
1829}
1830
536f0460 1831a.criteria-action {
fde35b8f 1832 padding: 0 3px;
536f0460
DW
1833 float: right;
1834}
f4143537 1835
536f0460
DW
1836div.criteria-description {
1837 padding: 10px 15px;
fde35b8f 1838 margin: 5px 0;
536f0460 1839 background: none repeat scroll 0 0 #f9f9f9;
f4143537 1840 border: 1px solid #eee;
536f0460 1841}
f4143537 1842
536f0460
DW
1843ul.badges {
1844 margin: 0;
1845 list-style: none;
1846}
f4143537 1847
536f0460
DW
1848.badges li {
1849 position: relative;
1850 display: inline-block;
1851 padding-top: 1em;
1852 text-align: center;
1853 vertical-align: top;
1854 width: 150px;
1855}
f4143537 1856
536f0460
DW
1857.badges li .badge-name {
1858 display: block;
1859 padding: 5px;
1860}
f4143537 1861
536f0460
DW
1862.badges li > img {
1863 position: absolute;
1864}
f4143537 1865
536f0460
DW
1866.badges li .badge-image {
1867 width: 100px;
1868 height: 100px;
1869 left: 10px;
fde35b8f 1870 top: 0;
536f0460
DW
1871 z-index: 1;
1872}
f4143537 1873
536f0460
DW
1874.badges li .badge-actions {
1875 position: relative;
1876}
f4143537 1877
536f0460
DW
1878.badges li .expireimage {
1879 width: 100px;
1880 height: 100px;
1881 left: 25px;
fde35b8f 1882 top: 0;
536f0460
DW
1883 position: absolute;
1884 z-index: 10;
1885 opacity: 0.85;
1886}
1887
1888#badge-image {
1889 background-color: transparent;
1890 padding: 0;
1891 position: relative;
1892 min-width: 100px;
1893 width: 20%;
1894 display: inline-block;
1895 vertical-align: top;
1896 margin-top: 17px;
ff54d94b 1897 margin-bottom: 20px;
536f0460
DW
1898
1899 .expireimage {
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
c483a8ee
RW
2469.text-decoration-none {
2470 text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
12d23810
RW
2471}
2472
b53f15b1
RW
2473.colour-inherit {
2474 color: inherit !important; /* stylelint-disable-line declaration-no-important */
2475}
2476
12d23810
RW
2477.position-right {
2478 right: 0 !important; /* stylelint-disable-line declaration-no-important */
20e6ece8 2479}
3edde4fb
RW
2480
2481.overflow-hidden {
2482 overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2483}
48507e16
BB
2484
2485.text-break {
2486 overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2487}
c516fc11 2488
4d181caf
BB
2489.word-break {
2490 word-break: break-word !important; /* stylelint-disable-line declaration-no-important */
2491}
2492
16d77f18
MM
2493.z-index-0 {
2494 z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2495}
2496
c516fc11
BB
2497.z-index-1 {
2498 z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2499}
10425e73
BB
2500
2501// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2502.float-left {
2503 float: left !important; /* stylelint-disable-line declaration-no-important */
2504}
4394f9e3 2505
10425e73
BB
2506.float-right {
2507 float: right !important; /* stylelint-disable-line declaration-no-important */
2508}
db65ba45 2509
4394f9e3
BB
2510.img-responsive {
2511 @include img-fluid();
2512}
2513
2514input[disabled] {
2515 cursor: not-allowed;
2516}
2517
2518.custom-select {
2519 width: auto;
2520}
2521
2522.fade.in {
2523 opacity: 1;
2524}
2525
ac00aec2
BB
2526.clamp-2 {
2527 display: -webkit-box;
2528 -webkit-box-orient: vertical;
2529 -webkit-line-clamp: 2;
2530 overflow: hidden;
2531}
2532
2533.word-break-all {
2534 word-break: break-all;
2535}
2536
f9b6849b
SA
2537.matchtext {
2538 background-color: lighten($primary, 40%);
2539 color: $body-color;
2540 height: 1.5rem;
2541}
2542
6881ca38
BB
2543.border-radius {
2544 @if $enable-rounded {
2545 @include border-radius($card-border-radius);
2546 }
2547}
2548
db65ba45
RW
2549// Emoji picker.
2550$picker-width: 350px !default;
2551$picker-width-xs: 320px !default;
2552$picker-height: 400px !default;
2553$picker-row-height: 40px !default;
2554$picker-emoji-button-size: 40px !default;
2555$picker-emoji-button-font-size: 24px !default;
2556$picker-emoji-category-count: 9 !default;
2557$picker-emojis-per-row: 7 !default;
2558
2559.emoji-picker {
2560 width: $picker-width;
2561 height: $picker-height;
2562
2563 .category-button {
2564 padding: .375rem 0;
2565 height: 100%;
2566 width: $picker-width / $picker-emoji-category-count;
2567 border-top: none;
2568 border-left: none;
2569 border-right: none;
2570 border-bottom: 2px solid transparent;
2571
2572 &.selected {
2573 border-bottom: 2px solid map-get($theme-colors, 'primary');
2574 }
2575 }
2576
2577 .emojis-container,
2578 .search-results-container {
2579 min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2580 }
2581
2582 .picker-row {
2583 height: $picker-row-height;
2584
2585 .category-name {
2586 line-height: $picker-row-height;
2587 }
2588
2589 .emoji-button {
2590 height: $picker-emoji-button-size;
2591 width: $picker-emoji-button-size;
2592 line-height: $picker-emoji-button-size;
2593 font-size: $picker-emoji-button-font-size;
2594 overflow: hidden;
2595
2596 @include hover-focus {
2597 color: inherit;
2598 text-decoration: none;
2599 }
2600 }
2601 }
2602
2603 .emoji-preview {
2604 height: $picker-row-height;
2605 font-size: $picker-row-height;
2606 line-height: $picker-row-height;
2607 }
2608
2609 .emoji-short-name {
2610 line-height: $picker-row-height / 2;
2611 }
2612
2613 @include media-breakpoint-down(xs) {
2614 width: $picker-width-xs;
2615 }
2616}
75962db9
RW
2617
2618.emoji-auto-complete {
2619 height: $picker-row-height;
2620
2621 .btn.btn-link.btn-icon.emoji-button {
2622 height: $picker-emoji-button-size;
2623 width: $picker-emoji-button-size;
2624 line-height: $picker-emoji-button-size;
2625 font-size: $picker-emoji-button-font-size;
2626
2627 &.active {
2628 background-color: $gray-200;
2629 }
2630 }
2631}
224ea04e
AN
2632
2633.toast-wrapper {
2634 max-width: $toast-max-width;
4e796e22 2635 max-height: 0;
224ea04e
AN
2636 // Place these above any modals and other elements.
2637 z-index: 1051;
4d440943
AN
2638
2639 > :first-child {
2640 margin-top: $spacer;
2641 }
224ea04e 2642}
1a17df08
BB
2643
2644@each $color, $value in $theme-colors {
2645 .alert-#{$color} a {
2646 color: darken(theme-color-level($color, $alert-color-level), 10%);
2647 }
2648}
6346cc35
BB
2649.alert a {
2650 font-weight: $font-weight-bold;
2651}
92bc86e4
BB
2652
2653@include media-breakpoint-down(sm) {
2654 #page-navbar {
2655 width: 100%;
2656 }
2657
2658 .breadcrumb:not(:empty) {
2659 width: 100%;
2660 border: ($border-width * 2) solid $gray-200;
2661 padding: $spacer / 4;
2662 margin-bottom: $spacer / 2;
2663 .breadcrumb-item {
2664 padding-top: $spacer / 3;
2665 padding-bottom: $spacer / 3;
2666 display: inline-block;
2667 }
2668 }
2669
2670 .mform {
2671 width: 100%;
2672 padding-right: 15px;
2673 padding-left: 15px;
2674 }
2675 .pagination {
2676 flex-wrap: wrap;
2677 justify-content: center;
2678 }
2679 .custom-select {
2680 max-width: 100%;
2681 }
2682 .card .card-body {
2683 padding: $card-spacer-x / 2;
2684 }
2685 #page-header {
2686 .card {
2687 border: 0;
2688 .card-body {
2689 padding: 0;
2690 }
2691 }
2692 }
2693 .nav-tabs,
2694 .nav-pills {
2695 margin: 0;
2696 border: 0;
2697 padding: $spacer / 8;
2698 background-color: $gray-200;
2699 .nav-item {
2700 flex: 1 1 auto;
2701 text-align: center;
2702 }
2703 .nav-link {
2704 background: $white;
2705 border: 0;
2706 margin: $spacer / 8;
2707 &.active {
2708 @include button-outline-variant($gray-600);
2709 border-color: $gray-600;
2710 }
2711 }
2712 }
2713}
2714
2715@media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2716 div#page {
2717 margin-top: 0;
2718 }
2719 .navbar.fixed-top {
2720 position: relative;
2721 z-index: inherit;
2722 }
3fecf7b5
SR
2723}
2724
2725.link-underline {
2726 text-decoration: underline;
2727 &:focus {
2728 text-decoration: none;
2729 }
2730}
2731
2732.alert.cta {
2733 .icon {
2734 padding: 0.3rem;
2735 &.fa {
2736 border-radius: 50%;
2737 border-style: solid;
2738 border-width: 0.125rem;
2739 }
2740 }
2741}
96f57f80
SR
2742.core_payment_gateways_modal .custom-control-label::before,
2743.core_payment_gateways_modal .custom-control-label::after {
2744 top: 45%;
2745}