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