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